{"id":563,"date":"2016-09-19T11:14:36","date_gmt":"2016-09-19T11:14:36","guid":{"rendered":"http:\/\/www.toomanyyears.gr\/en\/?page_id=563"},"modified":"2026-08-30T12:15:21","modified_gmt":"2026-08-30T09:15:21","slug":"websites","status":"publish","type":"page","link":"https:\/\/toomanyyears.gr\/en\/websites\/","title":{"rendered":"Websites"},"content":{"rendered":"<section class=\"tmy-pagehero\" id=\"tmy-hero\">\r\n\t<div class=\"tmy-hero__glow\" aria-hidden=\"true\"><\/div>\r\n\t<div class=\"tmy-hero__grid\" aria-hidden=\"true\"><\/div>\r\n\r\n\t<div class=\"tmy-pagehero__inner\" id=\"tmy-hero-inner\">\r\n\r\n\t\t\t\t\t<nav class=\"tmy-pagehero__crumb\" aria-label=\"Breadcrumb\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/toomanyyears.gr\/en\/\">Home<\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tmy-sep\" aria-hidden=\"true\">\/<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>Services<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<\/nav>\r\n\t\t\r\n\t\t<h1 class=\"tmy-pagehero__title\" data-reveal>\r\n\t\t\tWebsite <em>Development<\/em>\t\t<\/h1>\r\n\r\n\t\t\t\t\t<p class=\"tmy-pagehero__lede\" data-reveal data-delay=\"120\">Take the first step in your online presence.<\/p>\r\n\t\t\r\n\t\t\r\n\t<\/div>\r\n<\/section>\r\n\r\n<section class=\"tmy-intro\">\r\n\t<div data-reveal>\r\n\t\t\t\t\t<div class=\"tmy-eyebrow\" style=\"margin-bottom:28px;\">Philosophy<\/div>\r\n\t\t\t\t<h2 class=\"tmy-h2\">Our philosophy<\/h2>\r\n\t<\/div>\r\n\r\n\t<div class=\"tmy-intro__body tmy-lede\" data-reveal data-delay=\"140\">\r\n\t\t<p>Beyond an elegant and unique online presentation, our aim is for the website to become a real tool of interaction between the visitor and the business.<\/p>\n\t<\/div>\r\n<\/section>\r\n<section class=\"tmy-features\" id=\"features\">\r\n\t\t\t\t\t<div class=\"tmy-feature\" data-reveal>\r\n\t\t\t<div class=\"tmy-feature__text\">\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"tmy-feature__title\">Interactivity<\/h3>\r\n\t\t\t\t\t\t\t\t<div class=\"tmy-feature__body tmy-prose\"><p> Your services or products are presented in a clear and striking way, so visitors can explore and discover every detail. Every website is designed around the needs of the individual business. A website can also become a communication tool between the business and its customers: questionnaires, competitions and a blog (company news, or advice about the products and services) can all become important instruments for strategy and growth. <\/p>\n<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t\t<div class=\"tmy-feature__media tmy-feature__media--viz\">\r\n\t\t\t\t\t<figure class=\"tmy-viz\" data-iact style=\"position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 \/ 3; background: #0E0E11; border: 1px solid var(--tmy-line); margin: 0;\">\r\n        <div style=\"position: absolute; inset: 0; background-image: linear-gradient(var(--tmy-line) 1px, transparent 1px), linear-gradient(90deg, var(--tmy-line) 1px, transparent 1px); background-size: 44px 44px; opacity: .5;\"><\/div>\r\n        <div style=\"position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: clamp(10px, 2.2%, 20px); padding: 0 8%;\">\r\n          <div style=\"position: relative; border: 1px solid var(--tmy-line); border-radius: 5px; background: rgba(237,237,234,0.03); padding: 9% 8% 11%; animation: tmy-tap 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: 0s;\">\r\n            <div style=\"position: absolute; inset: 0; border-radius: 5px; background: var(--tmy-acc); opacity: 0; animation: tmy-tap-tint 6s ease infinite; animation-delay: 0s; mix-blend-mode: soft-light;\"><\/div>\r\n            <div style=\"position: relative; aspect-ratio: 1 \/ 1; border-radius: 3px; background: rgba(237,237,234,0.10); margin-bottom: 14%;\"><\/div>\r\n            <div style=\"position: relative; height: 4px; border-radius: 2px; background: rgba(237,237,234,0.14); margin-bottom: 8%;\"><\/div>\r\n            <div style=\"position: relative; height: 4px; border-radius: 2px; background: var(--tmy-acc); width: 18%; animation: tmy-tap-fill 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: 0s;\"><\/div>\r\n          <\/div>\r\n          <div style=\"position: relative; border: 1px solid var(--tmy-line); border-radius: 5px; background: rgba(237,237,234,0.03); padding: 9% 8% 11%; animation: tmy-tap 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: 2s;\">\r\n            <div style=\"position: absolute; inset: 0; border-radius: 5px; background: var(--tmy-acc); opacity: 0; animation: tmy-tap-tint 6s ease infinite; animation-delay: 2s; mix-blend-mode: soft-light;\"><\/div>\r\n            <div style=\"position: relative; aspect-ratio: 1 \/ 1; border-radius: 3px; background: rgba(237,237,234,0.10); margin-bottom: 14%;\"><\/div>\r\n            <div style=\"position: relative; height: 4px; border-radius: 2px; background: rgba(237,237,234,0.14); margin-bottom: 8%;\"><\/div>\r\n            <div style=\"position: relative; height: 4px; border-radius: 2px; background: var(--tmy-acc); width: 18%; animation: tmy-tap-fill 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: 2s;\"><\/div>\r\n          <\/div>\r\n          <div style=\"position: relative; border: 1px solid var(--tmy-line); border-radius: 5px; background: rgba(237,237,234,0.03); padding: 9% 8% 11%; animation: tmy-tap 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: 4s;\">\r\n            <div style=\"position: absolute; inset: 0; border-radius: 5px; background: var(--tmy-acc); opacity: 0; animation: tmy-tap-tint 6s ease infinite; animation-delay: 4s; mix-blend-mode: soft-light;\"><\/div>\r\n            <div style=\"position: relative; aspect-ratio: 1 \/ 1; border-radius: 3px; background: rgba(237,237,234,0.10); margin-bottom: 14%;\"><\/div>\r\n            <div style=\"position: relative; height: 4px; border-radius: 2px; background: rgba(237,237,234,0.14); margin-bottom: 8%;\"><\/div>\r\n            <div style=\"position: relative; height: 4px; border-radius: 2px; background: var(--tmy-acc); width: 18%; animation: tmy-tap-fill 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: 4s;\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div style=\"position: absolute; left: 21%; top: 62%; width: 0; height: 0; animation: tmy-cur 6s cubic-bezier(.65,0,.35,1) infinite;\">\r\n          <div style=\"position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tmy-acc); animation: tmy-ring 6s ease-out infinite;\"><\/div>\r\n          <div style=\"position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tmy-acc); animation: tmy-ring 6s ease-out infinite; animation-delay: 2s;\"><\/div>\r\n          <div style=\"position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tmy-acc); animation: tmy-ring 6s ease-out infinite; animation-delay: 4s;\"><\/div>\r\n          <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" style=\"display: block; animation: tmy-press 6s ease-out infinite; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.6));\"><path d=\"M5 2.5 L5 18.2 L9.1 14.4 L11.6 21 L14.6 19.8 L12.1 13.3 L17.7 13.1 Z\" fill=\"var(--tmy-fg)\" stroke=\"#08080A\" stroke-width=\"1.1\" stroke-linejoin=\"round\"><\/path><\/svg>\r\n        <\/div>\r\n      <\/figure>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"tmy-feature tmy-feature--flip\" data-reveal>\r\n\t\t\t<div class=\"tmy-feature__text\">\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"tmy-feature__title\">Management<\/h3>\r\n\t\t\t\t\t\t\t\t<div class=\"tmy-feature__body tmy-prose\"><p> We provide an easy-to-use backoffice for managing the site, so you can change its content in a few simple steps from wherever you are. All you need is an internet connection. <\/p>\n<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t\t<div class=\"tmy-feature__media tmy-feature__media--viz\">\r\n\t\t\t\t\t<figure class=\"tmy-viz\" data-iact style=\"position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 \/ 3; background: #0E0E11; border: 1px solid var(--tmy-line); margin: 0;\">\r\n        <div style=\"position: absolute; inset: 0; display: grid; grid-template-columns: 30% 1fr;\">\r\n          <div style=\"border-right: 1px solid var(--tmy-line); padding: 7% 5%; display: flex; flex-direction: column; gap: 8px; background: rgba(237,237,234,0.02);\">\r\n            <div style=\"font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tmy-mut); margin-bottom: 6px;\">CMS<\/div>\r\n            <div style=\"position: relative; display: flex; align-items: center; gap: 6px; font-size: 10px; border-radius: 4px; padding: 6px 8px; animation: tmy-mg-nav 6s ease infinite; animation-delay: 0s;\">\r\n              <span style=\"width: 4px; height: 4px; border-radius: 50%; background: var(--tmy-acc); opacity: 0; animation: tmy-mg-dot 6s ease infinite; animation-delay: 0s;\"><\/span>\r\n              Pages            <\/div>\r\n            <div style=\"position: relative; display: flex; align-items: center; gap: 6px; font-size: 10px; border-radius: 4px; padding: 6px 8px; animation: tmy-mg-nav 6s ease infinite; animation-delay: 2s;\">\r\n              <span style=\"width: 4px; height: 4px; border-radius: 50%; background: var(--tmy-acc); opacity: 0; animation: tmy-mg-dot 6s ease infinite; animation-delay: 2s;\"><\/span>\r\n              Products            <\/div>\r\n            <div style=\"position: relative; display: flex; align-items: center; gap: 6px; font-size: 10px; border-radius: 4px; padding: 6px 8px; animation: tmy-mg-nav 6s ease infinite; animation-delay: 4s;\">\r\n              <span style=\"width: 4px; height: 4px; border-radius: 50%; background: var(--tmy-acc); opacity: 0; animation: tmy-mg-dot 6s ease infinite; animation-delay: 4s;\"><\/span>\r\n              <span>Blog<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div style=\"padding: 7% 7% 7% 6%; display: flex; flex-direction: column; gap: 12px;\">\r\n            <div style=\"font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tmy-mut);\">Editor<\/div>\r\n            <div style=\"position: relative; border: 1px solid var(--tmy-line); border-radius: 4px; background: rgba(237,237,234,0.03); padding: 12px 12px 14px;\">\r\n              <div style=\"height: 5px; border-radius: 3px; background: var(--tmy-fg); opacity: .82; width: 8%; margin-bottom: 13px; animation: tmy-mg-type 6s cubic-bezier(.2,.8,.3,1) infinite;\"><\/div>\r\n              <div style=\"height: 5px; border-radius: 3px; background: rgba(237,237,234,0.35); width: 0;  animation: tmy-mg-type2 6s cubic-bezier(.2,.8,.3,1) infinite;\"><\/div>\r\n              <div style=\"position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); animation: tmy-mg-caret-row 6s steps(1) infinite;\">\r\n                <div style=\"position: absolute; top: 0; left: 8%; width: 1.5px; height: 11px; background: var(--tmy-acc); animation: tmy-mg-caret 6s cubic-bezier(.2,.8,.3,1) infinite;\">\r\n                  <div style=\"width: 100%; height: 100%; background: var(--tmy-acc); animation: tmy-mg-blink .9s steps(1) infinite;\"><\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <div style=\"display: flex; align-items: center; gap: 10px; margin-top: auto;\">\r\n              <div style=\"display: inline-grid; place-items: center; border: 1px solid var(--tmy-line); border-radius: 4px; padding: 7px 14px; font-size: 10px; font-weight: 600; white-space: nowrap; animation: tmy-mg-save 6s cubic-bezier(.16,1,.3,1) infinite;\">\r\n                <span style=\"grid-area: 1 \/ 1; animation: tmy-mg-lbl 6s steps(1) infinite;\">Save<\/span>\r\n                <span style=\"grid-area: 1 \/ 1; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--tmy-on-acc); opacity: 0; animation: tmy-mg-lbl2 6s steps(1) infinite;\">\r\n                  <svg viewBox=\"0 0 16 16\" width=\"11\" height=\"11\"><path d=\"M3 8.5 L6.3 11.6 L13 4.6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\r\n                  Updated                <\/span>\r\n              <\/div>\r\n              <div style=\"display: flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tmy-mut); opacity: 0; animation: tmy-mg-live 6s cubic-bezier(.16,1,.3,1) infinite;\">\r\n                <span style=\"width: 5px; height: 5px; border-radius: 50%; background: var(--tmy-acc);\"><\/span>Live\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/figure>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"tmy-feature\" data-reveal>\r\n\t\t\t<div class=\"tmy-feature__text\">\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"tmy-feature__title\">Speed<\/h3>\r\n\t\t\t\t\t\t\t\t<div class=\"tmy-feature__body tmy-prose\"><p> We use specialised techniques (caching, CDN and more) to cut page load times significantly. Speed is, after all, one of the most important success factors for a website. <\/p>\n<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t\t<div class=\"tmy-feature__media tmy-feature__media--viz\">\r\n\t\t\t\t\t<figure class=\"tmy-viz\" data-iact style=\"position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 \/ 3; background: #0E0E11; border: 1px solid var(--tmy-line); margin: 0;\">\r\n        <div style=\"position: absolute; inset: 0; display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 4%; padding: 0 7%;\">\r\n          <div style=\"display: flex; flex-direction: column; align-items: center; gap: 16px;\">\r\n            <div style=\"position: relative; width: 100%; display: grid; place-items: center;\">\r\n            <svg viewBox=\"0 0 120 120\" style=\"width: 100%; display: block; transform: rotate(-90deg);\">\r\n              <circle cx=\"60\" cy=\"60\" r=\"54\" fill=\"none\" stroke=\"rgba(237,237,234,0.10)\" stroke-width=\"6\"><\/circle>\r\n              <circle cx=\"60\" cy=\"60\" r=\"54\" fill=\"none\" stroke=\"var(--tmy-acc)\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-dasharray=\"339\" stroke-dashoffset=\"339\" style=\"animation: tmy-sp-ring 6s cubic-bezier(.16,1,.3,1) infinite;\"><\/circle>\r\n            <\/svg>\r\n            <div style=\"position: absolute; display: flex; align-items: baseline; gap: 1px; font-weight: 600; letter-spacing: -0.04em; font-size: clamp(24px, 3.4vw, 44px); line-height: 1;\">\r\n              <span style=\"display: block; height: 1em; overflow: hidden;\">\r\n                <span style=\"--y: -9em; display: block; animation: tmy-sp-reel 6s cubic-bezier(.16,1,.3,1) infinite;\">\r\n                  <span style=\"display: block; height: 1em;\">0<\/span><span style=\"display: block; height: 1em;\">1<\/span><span style=\"display: block; height: 1em;\">2<\/span><span style=\"display: block; height: 1em;\">3<\/span><span style=\"display: block; height: 1em;\">4<\/span><span style=\"display: block; height: 1em;\">5<\/span><span style=\"display: block; height: 1em;\">6<\/span><span style=\"display: block; height: 1em;\">7<\/span><span style=\"display: block; height: 1em;\">8<\/span><span style=\"display: block; height: 1em;\">9<\/span>\r\n                <\/span>\r\n              <\/span>\r\n              <span style=\"display: block; height: 1em; overflow: hidden;\">\r\n                <span style=\"--y: -9em; display: block; animation: tmy-sp-reel 6s cubic-bezier(.3,1,.3,1) infinite;\">\r\n                  <span style=\"display: block; height: 1em;\">0<\/span><span style=\"display: block; height: 1em;\">1<\/span><span style=\"display: block; height: 1em;\">2<\/span><span style=\"display: block; height: 1em;\">3<\/span><span style=\"display: block; height: 1em;\">4<\/span><span style=\"display: block; height: 1em;\">5<\/span><span style=\"display: block; height: 1em;\">6<\/span><span style=\"display: block; height: 1em;\">7<\/span><span style=\"display: block; height: 1em;\">8<\/span><span style=\"display: block; height: 1em;\">9<\/span>\r\n                <\/span>\r\n              <\/span>\r\n            <\/div>\r\n            <\/div>\r\n            <div style=\"font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tmy-mut); opacity: 0; animation: tmy-sp-in 6s cubic-bezier(.16,1,.3,1) infinite;\">Performance<\/div>\r\n          <\/div>\r\n          <div style=\"display: flex; flex-direction: column; gap: 11px;\">\r\n            <div>\r\n              <div style=\"display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tmy-mut); margin-bottom: 5px;\"><span>HTML<\/span><span style=\"opacity: 0; animation: tmy-sp-in 6s cubic-bezier(.16,1,.3,1) infinite;\">0.12s<\/span><\/div>\r\n              <div style=\"height: 5px; border-radius: 3px; background: rgba(237,237,234,0.08);\"><div style=\"--w: 34%; height: 100%; width: 0; border-radius: 3px; background: var(--tmy-acc); animation: tmy-sp-bar 6s cubic-bezier(.16,1,.3,1) infinite;\"><\/div><\/div>\r\n            <\/div>\r\n            <div>\r\n              <div style=\"display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tmy-mut); margin-bottom: 5px;\"><span>CDN<\/span><span style=\"opacity: 0; animation: tmy-sp-in 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: .12s;\">0.21s<\/span><\/div>\r\n              <div style=\"height: 5px; border-radius: 3px; background: rgba(237,237,234,0.08);\"><div style=\"--w: 58%; height: 100%; width: 0; border-radius: 3px; background: var(--tmy-acc); animation: tmy-sp-bar 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: .12s;\"><\/div><\/div>\r\n            <\/div>\r\n            <div>\r\n              <div style=\"display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tmy-mut); margin-bottom: 5px;\"><span>Cache<\/span><span style=\"opacity: 0; animation: tmy-sp-in 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: .24s;\">0.38s<\/span><\/div>\r\n              <div style=\"height: 5px; border-radius: 3px; background: rgba(237,237,234,0.08);\"><div style=\"--w: 82%; height: 100%; width: 0; border-radius: 3px; background: var(--tmy-acc); animation: tmy-sp-bar 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: .24s;\"><\/div><\/div>\r\n            <\/div>\r\n            <div style=\"display: flex; align-items: center; gap: 7px; margin-top: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tmy-fg); opacity: 0; animation: tmy-sp-in 6s cubic-bezier(.16,1,.3,1) infinite; animation-delay: .36s;\">\r\n              <span style=\"width: 5px; height: 5px; border-radius: 50%; background: var(--tmy-acc);\"><\/span>Loaded            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/figure>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"tmy-feature tmy-feature--flip\" data-reveal>\r\n\t\t\t<div class=\"tmy-feature__text\">\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"tmy-feature__title\">Adaptability<\/h3>\r\n\t\t\t\t\t\t\t\t<div class=\"tmy-feature__body tmy-prose\"><p> All our websites use <strong>responsive web design<\/strong> techniques. The site adapts to the width of the screen it is displayed on (PC, tablet, mobile) to give the user an easy browsing experience. <\/p>\n<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t\t<div class=\"tmy-feature__media tmy-feature__media--viz\">\r\n\t\t\t\t\t<figure class=\"tmy-viz\" data-iact style=\"position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 \/ 3; background: #0E0E11; border: 1px solid var(--tmy-line); margin: 0;\">\r\n        <div style=\"position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 6%;\">\r\n          <div style=\"width: 86%; height: 56%; border: 1px solid var(--tmy-line); border-radius: 6px; background: rgba(237,237,234,0.03); padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; animation: tmy-rs-frame 6s cubic-bezier(.16,1,.3,1) infinite;\">\r\n            <div style=\"display: flex; align-items: center; gap: 5px; flex: none;\">\r\n              <span style=\"width: 5px; height: 5px; border-radius: 50%; background: var(--tmy-acc);\"><\/span>\r\n              <span style=\"width: 5px; height: 5px; border-radius: 50%; background: rgba(237,237,234,0.18);\"><\/span>\r\n              <span style=\"width: 5px; height: 5px; border-radius: 50%; background: rgba(237,237,234,0.18);\"><\/span>\r\n              <span style=\"flex: 1; height: 4px; border-radius: 2px; background: rgba(237,237,234,0.10); margin-left: 4px;\"><\/span>\r\n            <\/div>\r\n            <div style=\"flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; animation: tmy-rs-grid 6s steps(1) infinite;\">\r\n              <div style=\"border-radius: 3px; background: rgba(237,237,234,0.10);\"><\/div>\r\n              <div style=\"border-radius: 3px; background: rgba(237,237,234,0.10);\"><\/div>\r\n              <div style=\"border-radius: 3px; background: rgba(237,237,234,0.10);\"><\/div>\r\n              <div style=\"border-radius: 3px; background: rgba(237,237,234,0.10);\"><\/div>\r\n              <div style=\"border-radius: 3px; background: rgba(237,237,234,0.10);\"><\/div>\r\n              <div style=\"border-radius: 3px; background: rgba(237,237,234,0.10);\"><\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div style=\"display: inline-grid; place-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tmy-mut); flex: none;\">\r\n            <span style=\"grid-area: 1 \/ 1; animation: tmy-rs-lbl 6s ease infinite;\">Desktop<\/span>\r\n            <span style=\"grid-area: 1 \/ 1; opacity: 0; animation: tmy-rs-lbl 6s ease infinite; animation-delay: 2s;\">Tablet<\/span>\r\n            <span style=\"grid-area: 1 \/ 1; opacity: 0; animation: tmy-rs-lbl 6s ease infinite; animation-delay: 4s;\">Mobile<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/figure>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"tmy-feature\" data-reveal>\r\n\t\t\t<div class=\"tmy-feature__text\">\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"tmy-feature__title\">Support<\/h3>\r\n\t\t\t\t\t\t\t\t<div class=\"tmy-feature__body tmy-prose\"><p> We are beside you the whole way. From the first day of implementation and for as long as the website &#8220;lives&#8221;, you have both advisory and technical support from our team. <\/p>\n<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t\t<div class=\"tmy-feature__media tmy-feature__media--viz\">\r\n\t\t\t\t\t<figure class=\"tmy-viz\" data-iact style=\"position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 \/ 3; background: #0E0E11; border: 1px solid var(--tmy-line); margin: 0;\">\r\n        <div style=\"position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 8% 9%;\">\r\n          <div style=\"display: flex; justify-content: flex-start;\">\r\n            <div style=\"max-width: 74%; border: 1px solid var(--tmy-line); border-radius: 10px 10px 10px 2px; background: rgba(237,237,234,0.05); padding: 10px 13px; font-size: 11px; line-height: 1.5; color: var(--tmy-fg); opacity: 0; animation: tmy-su-in 6s cubic-bezier(.16,1,.3,1) infinite;\">\r\n              We would like to add online booking to the site.            <\/div>\r\n          <\/div>\r\n          <div style=\"display: flex; align-items: center; gap: 5px; padding-left: 4px; opacity: 0; animation: tmy-su-type 6s ease infinite;\">\r\n            <span style=\"width: 5px; height: 5px; border-radius: 50%; background: var(--tmy-acc); animation: tmy-su-dot 1.1s ease-in-out infinite;\"><\/span>\r\n            <span style=\"width: 5px; height: 5px; border-radius: 50%; background: var(--tmy-acc); animation: tmy-su-dot 1.1s ease-in-out infinite; animation-delay: .18s;\"><\/span>\r\n            <span style=\"width: 5px; height: 5px; border-radius: 50%; background: var(--tmy-acc); animation: tmy-su-dot 1.1s ease-in-out infinite; animation-delay: .36s;\"><\/span>\r\n          <\/div>\r\n          <div style=\"display: flex; justify-content: flex-end;\">\r\n            <div style=\"max-width: 78%; border-radius: 10px 10px 2px 10px; background: var(--tmy-acc); color: var(--tmy-on-acc); padding: 10px 13px; font-size: 11px; line-height: 1.5; opacity: 0; animation: tmy-su-in2 6s cubic-bezier(.16,1,.3,1) infinite;\">\r\n              We can do that. I will send you a proposal and timeline by tomorrow.            <\/div>\r\n          <\/div>\r\n          <div style=\"display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tmy-mut); opacity: 0; animation: tmy-su-in3 6s cubic-bezier(.16,1,.3,1) infinite;\">\r\n            <svg viewBox=\"0 0 16 16\" width=\"11\" height=\"11\" style=\"color: var(--tmy-acc); flex: none;\"><path d=\"M2 9 L5 12 L10.4 5.4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><path d=\"M6.6 12 L12 5.4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\r\n            Answered in minutes          <\/div>\r\n        <\/div>\r\n      <\/figure>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t<\/section>\r\n<section class=\"tmy-faq\" id=\"faq\">\r\n\t\t\t<h2 class=\"tmy-h2 tmy-faq__heading\" data-reveal>Frequently asked questions<\/h2>\r\n\t\r\n\t<div class=\"tmy-faq__list\">\r\n\t\t\t\t\t<details class=\"tmy-faq__item\" data-reveal data-delay=\"0\" open>\r\n\t\t\t\t<summary class=\"tmy-faq__q\">\r\n\t\t\t\t\t<span>What is a static website?<\/span>\r\n\t\t\t\t\t<span class=\"tmy-faq__plus\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t<\/summary>\r\n\t\t\t\t<div class=\"tmy-faq__a tmy-prose\"><p>Static websites are fixed electronic documents (HTML). They contain text, images, hyperlinks, video and other elements such as Flash or JavaScript animations.<\/p>\n<p>The term &#8220;static&#8221; does not refer to animation, but to the permanence of the site&#8217;s content. For a static website, the content is the same every time it is displayed.<\/p>\n<p>Content changes on a static website are made by its developer: no content management panel is provided.<\/p>\n<p>Static websites are a solution for a small business that wants a simple presentation which will rarely need future content changes.<\/p>\n<\/div>\r\n\t\t\t<\/details>\r\n\t\t\t\t\t<details class=\"tmy-faq__item\" data-reveal data-delay=\"60\">\r\n\t\t\t\t<summary class=\"tmy-faq__q\">\r\n\t\t\t\t\t<span>What is a dynamic website?<\/span>\r\n\t\t\t\t\t<span class=\"tmy-faq__plus\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t<\/summary>\r\n\t\t\t\t<div class=\"tmy-faq__a tmy-prose\"><p>Dynamic websites work in combination with one or more databases. Because the content is stored in and retrieved dynamically from a database, a management panel for the site&#8217;s content becomes possible.<\/p>\n<p>So besides the frontend there is also the backend (the management panel), a web application commonly known as a CMS, a content management system.<\/p>\n<p>Users can therefore step in and change the site&#8217;s content easily and quickly, and most importantly no specialised knowledge is required. The process can be handled by people with basic computer skills.<\/p>\n<\/div>\r\n\t\t\t<\/details>\r\n\t\t\t\t\t<details class=\"tmy-faq__item\" data-reveal data-delay=\"120\">\r\n\t\t\t\t<summary class=\"tmy-faq__q\">\r\n\t\t\t\t\t<span>Which one should I choose?<\/span>\r\n\t\t\t\t\t<span class=\"tmy-faq__plus\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t<\/summary>\r\n\t\t\t\t<div class=\"tmy-faq__a tmy-prose\"><p>Static website <\/p>\n<p>If this is a presentation whose content will not change at regular intervals, a static website may be the better value.<\/p>\n<p>The build cost is certainly lower, as is the build time. The hosting resources required are also clearly fewer, so there may be savings on the hosting package too.<\/p>\n<p>The final visual result will be in no way inferior to that of a dynamic website.<\/p>\n<p> Dynamic website <\/p>\n<p>If the presentation we want requires ongoing content updates (text, photos, articles and so on), then we head towards building a dynamic website.<\/p>\n<p>In this case a management panel is created, through which content is edited in a simple way that a user with basic computer knowledge can handle.<\/p>\n<p>Building a dynamic website carries higher development and design costs. It also takes considerably more time to develop a CMS database and the administrative part (backend). However, a dynamic website is likely to lead to a greater return on investment in the long run.<\/p>\n<p>A significant advantage of dynamic websites is that they are friendlier to SEO. Sites with frequently updated content rank higher in search engine results than static pages, so they receive more visits and therefore more potential customers for the business.<\/p>\n<p>Implementing an online marketing strategy is easier with a dynamic website than a static one: the content creator can build and publish a new page immediately, and promote it according to the strategy that has been defined.<\/p>\n<p>The possibilities increase significantly with a dynamic website.<\/p>\n<\/div>\r\n\t\t\t<\/details>\r\n\t\t\t<\/div>\r\n<\/section>\r\n<section class=\"tmy-cta\" id=\"contact\">\r\n\t<div class=\"tmy-cta__glow\" aria-hidden=\"true\"><\/div>\r\n\t<div class=\"tmy-cta__inner\" data-reveal>\r\n\t\t<h2 class=\"tmy-cta__title\">We are ready for your project<\/h2>\r\n\t\t\t\t\t<p class=\"tmy-lede tmy-cta__lede\">Web Development \u2014 Websites and web applications. Rethymno, Crete.<\/p>\r\n\t\t\t\t<a class=\"tmy-btn tmy-btn--accent\" href=\"mailto:info@toomanyyears.gr\" data-tmy-open=\"1\" data-subject=\"Websites\" data-title=\"We are ready for your project\">Get in touch <span class=\"tmy-mono\" aria-hidden=\"true\">&rarr;<\/span><\/a>\t<\/div>\r\n<\/section>\r\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":12707,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-563","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/toomanyyears.gr\/en\/wp-json\/wp\/v2\/pages\/563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toomanyyears.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toomanyyears.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toomanyyears.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toomanyyears.gr\/en\/wp-json\/wp\/v2\/comments?post=563"}],"version-history":[{"count":0,"href":"https:\/\/toomanyyears.gr\/en\/wp-json\/wp\/v2\/pages\/563\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toomanyyears.gr\/en\/wp-json\/wp\/v2\/media\/12707"}],"wp:attachment":[{"href":"https:\/\/toomanyyears.gr\/en\/wp-json\/wp\/v2\/media?parent=563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}