";font-weight:400}.x .z .ra.kc li:before{content:"+";padding-left:.5rem}.x .z .ra.za li:before{content:"\2714";padding-left:.5rem}.x .z .ra li{font-size:1rem;color:#444;position:relative;padding-left:.75rem;padding-bottom:.5rem;line-height:1.2}.x .z .ra li:before{margin-right:1.5rem;position:absolute;left:-1.5rem;top:.0625rem;font-family:monospace;letter-spacing:-.0625rem;font-size:.75rem;font-weight:800;color:#555}.x .z .lc{margin-bottom:15vh;height:3vh;display:block;clear:both}.x .z .mc{float:right;box-shadow:0 5px 10px 0 rgba(99,0,0,.15);padding:1rem;margin-bottom:.75rem;width:100%;font-size:1.5rem}@media (min-width:768px){.x .z .mc{width:40%;margin-left:.5rem}}.x .z .mc span{font-size:1rem;float:right}.aa{padding-bottom:11vh;clear:both}@media only screen and (max-width:767px){.aa{padding-bottom:3.5vh}}.ma{margin-top:5rem}.y{margin-top:3rem}.na{font-family:Khula}.na .x .ea{font-size:1.25rem;letter-spacing:0}.na .x .ba,.na .x p{font-size:.8625rem;letter-spacing:0}.na .x .ra li{font-size:.75rem;letter-spacing:0}.na li.qa a{font-size:.75rem}.na li.qa a.fc{letter-spacing:0}.zb{display:none}.ib{white-space:nowrap}.ka,.tb{text-decoration:underline}.ka{color:#2a2a72}.ka:hover{color:#44b;cursor:pointer}.no-js [hidden]{display:block}@media (min-width:768px){h3.ga.ha.qb{padding-left:3rem}}h3.ga.ha button{font-family:Khula,"sans-serif";border:0;width:100%;padding:.5rem .5rem 0;text-align:left;font-size:1rem;font-weight:400;color:#444;background-color:transparent;letter-spacing:0;box-shadow:0 1px 2px 0 rgba(0,0,0,.15)}h3.ga.ha button.rb{box-shadow:0 5px 10px 0 rgba(99,0,0,.15);margin-top:2.5rem}h3.ga.ha button:focus svg,h3.ga.ha button:hover svg{outline:2px solid}button svg{height:1rem;width:1rem;position:relative;float:right;margin-left:.625rem;margin-bottom:.625rem}[aria-expanded=true] .ia{display:none}[aria-expanded] rect{fill:currentColor}@media only screen and (min-width:768px){ul.ja{padding-left:1.75rem}}@media only screen and (max-width:767px){ul.ja{list-style-position:inside}}.ja{text-align:left;padding-left:.75rem;color:#444;margin-left:1rem}@media only screen and (min-width:768px){.ja{margin-left:3rem}}[hidden]{display:none}amp-user-notification{background-color:#444;color:#fefefe;padding:1rem}amp-user-notification div{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}amp-user-notification div span{float:left;font-family:Khula,sans-serif}amp-user-notification div button{width:5rem;background-color:#fefefe;color:#333;float:right;font-family:Khula,sans-serif;border:none;font-size:1.75rem;text-decoration:none;margin-left:1rem}.wa{width:100%;float:left;color:#333;padding-left:.5rem}@media only screen and (min-width:512px){.wa{width:50%;padding-right:1rem}}.wa p{padding-top:.5rem}.wa .xa{font-size:1rem}.wa .ya{padding-left:1rem;padding-right:.5rem;list-style-type:none;padding-top:.25rem}.wa .ya.za li:before{content:"\2714";padding-left:.5rem}.wa .ya.ab li:before{content:"*";padding-left:.75rem;top:.25rem}.wa .ya li{font-size:1rem;color:#333;position:relative;padding-left:.75rem;padding-bottom:.5rem;line-height:1.2}.wa .ya li:before{margin-right:1.5rem;position:absolute;left:-1.5rem;top:.0625rem;font-size:.75rem;font-weight:800;color:#555}.wa .bb{font-size:1.25rem;color:#222;padding-top:1rem;padding-bottom:1.25rem}.wa .ka:visited .sa{color:#222;text-decoration:none;border-bottom:none}.wa .ka .sa{color:#222;-webkit-text-decoration:underline rgba(173,81,78,.9);text-decoration:underline rgba(173,81,78,.9)}.wa .ka .sa:hover{display:inline-block;line-height:.8;text-decoration:none;border-bottom:2px solid #333}.cb{width:100%;padding-left:0;margin-top:0;float:left;clear:right}@media only screen and (min-width:512px){.cb{width:50%;box-shadow:0 10px 20px 0 rgba(0,0,0,.15)}}.jb{width:100%}@media only screen and (min-width:512px){.jb{width:47%;float:right;padding-left:0;margin-left:.75rem;margin-bottom:.75rem;margin-top:0;box-shadow:0 5px 10px 0 rgba(0,0,0,.15)}}.ta .va{letter-spacing:0;font-size:1.25rem;padding-left:.5rem}@media only screen and (min-width:360px){.ta .va{font-size:1.5rem}}@media only screen and (min-width:512px){.ta .va{font-size:1.75rem}}@media only screen and (min-width:768px){.ta .va{font-size:2rem}}.ta .h{position:absolute;width:2rem;height:2rem;background-image:-webkit-linear-gradient(left,rgba(173,81,78,.3),transparent);background-image:linear-gradient(90deg,rgba(173,81,78,.3),transparent);left:-2rem;padding:4.375rem;top:-.25rem;border-radius:5rem}
faq
Frequently asked questions about landing pages and questions related to this demo; click the questions in order to see the answer; they are grouped in topics.
static site
In a static site, the text content and sources of images are hard coded (static) in the HTML file; it shows the same content to all users since the server sends the same response for every request. More information about this on Wikipedia.
Whether a static or dynamic site is the right choice, depends on the use case.
Static sites are fast and cheap to host; forms, payments or logins are easy to implement via APIs; no database is required; the downside is that it requires a developer/webmaster to update the content.
The content of dynamic sites is easy to update with a CMS such as WordPress; content can be generated for individual users; in general, dynamic sites are slower due to the involvement of a database and therefore more expensive to host.
For a general overview read the blog post or a recent article For a more in-depth discussion about recent trends in this respect read or watch this.
React.js and Vue.js are great. I would have used React if it had made sense for a high performance site with static content, optimized for search engines and usability. But it does not. It would be like going after mosquitoes with a bazooka:
The size of the core of each of these frameworks which is needed to display the content is already bigger than the HTML/CSS/JS of this site (uncompressed react/react-dom is over 100kb while the home of this demo is 82kb including fonts, excluding images). Assuming that additional libraries are used, even more. Additional to this comes the code in order to display the content and functionality.
The loss of performance by sending the framework to the browser and the time the browser needs to parse the code of the framework in order to display the content, might be minimal compared to other sites. But if you play on a highly competitive environment, this can make the difference. Sure, React and Vue are already very lightweight and probably the best solutions for dynamic sites. But using it for displaying a static site with a few pages (which is the case for many company or campaign sites) would be an overkill.
Note: those frameworks are based on JavaScript, all the magic they do can be done from scratch by pure JavaScript. As soon as projects reach a certain degree of complexity, yes, then the use of frameworks makes highly sense.
Yes. Dynamic data, such as stock market prices, weather data, upcoming events and so on, can be consumed from an API and will be displayed with a small delay (depending on the API around 0.1 - 2s). For example, you have a restaurant and want to update the menu which changes every week, that's possible.
Pretty low compared to a site using a CMS. I.e. this site is hosted on a AWS. In order to hijack it, one would have to hack into Amazon - and there is an army of experts waiting who try hard to prevent this. The main risk is when the webmaster is sloppy by not securing the login data for the cloud properly; i.e. when these data are given to freelance devs and are not changed afterwards.
There are solutions like dynamic static site builders, but it's probably not the best solution (yet). For blogs, you better use a CMS such as WordPress or if you are looking for a high performance solution use a RESTful API as backend with a frontend such as React or Vue which are made for high performance and flexibility.
It depends. Simple things, yes, but some basic knowledge of HTML is useful. If you just need to change a telephone number or an address, then it's rather easy and made in 2mins. In other cases, it's not recommended since the styling can break if it's not done properly.
seo
Yes. And as a fallback the source of images are put in a noscript tag.
No, there is no guarantee. Structured data is just a suggestion for search engines.
No. Not at all. Content matters. If nobody is interested in the content, search engines will realize it and won't position it on the top of search results on the long run.
development
Probably not. Maybe in the long run, considering the high hosting costs for a relatively fast WordPress site and the time or money spend with updates. If you intend to share pictures and experiences from holidays with your friends on a website, you better make a blog with WordPress or a static site builder. If the intention is to make money with the site by getting new clients, then the investment might pay out very well.
It depends on the scale, functionality and extras of the site. Creative projects, individuals or organizations which contribute to the greater good of this planet, might get a reasonable discount. Check out the product page or contact me for a specific inquiry.
Yes. As long as you can describe your ideas.
That's possible. Products can be shown on the landing page and updated via a RESTful API. The landing page can lead to your shop when visitors want to buy products.
Yes. Cookies are installed only after the user clicked 'ok' in the initial cookie message.