Use Templates

This may seem paradoxical but start with selection of a template. The layout of the theme will help define the number of words per page.

  Navigation

Defining the navigation before writing the content will help with the context. Navigation defines the topic.

  Content

Writing content is hard. With the topic defined if SEO is important consider the keywords that apply to the topic. This will provide further context.

  Enhance

A picture is worth 1000 words. With the content defined add the images to enhance the page (I often do both together if it is a screenshot). 

Static Website Design Basics

Why build a static website ?

Static websites differ from web applications such WordPress because the pages are pre-built and served statically as rendered HTML. An content management system like WordPress generates the pages dynamically on demand.

Static websites have two major benefits, they are fast and secure. A fast-loading page creates a better experience for the user particularly on mobile and page speed is ranking factor for Google Search. Therefore static pages are a great choice for many types of website such as blogs,  corporate marketing or documentation sites where SEO is important. 

Building and maintaining a static website can be more complex than using a hosted content management system however there are many static website tools available to simplify the content management and site building process.

YouDoCMS includes a number of tools to help you with this process. The focus of YouDoCMS is to simplify the context, readability and discoverability process combined with themes created by professional designers to enhance the look and feel of your site.

 
 
desktop-cms_medium.png

Use HTML Templates

Professional template designers have many years expertise in refining clients requirements for the look and feel of a website so why reinvent the wheel. Templates can be found for free or are inexpensive and any HTML template can be easily adapted to work with YouDoCMS. Here are some popular sources for HTML templates. 

  • Bootstrapious. A collection of exclusive Bootstrap templates and themes (free with attribution).
  • HTML5 UP. Free templates under the Creative Commons Licence.
  • HTMLTEMPLATES.CO. Free templates under the Creative Commons Licence.
  • Themeforest. Choose from over 17,200 HTML templates created by a global community of independent designers and developers.

Selecting the right template for your website is more than just the colour and images. Templates typically consist of multiple page types to reflect the purpose of the content. For example, frequently asked questions are often in an accordion or testimonials are in a three-column grid across the page.

If your content is image heavy with relatively small amounts of text, then a single page layout may well be the best option. Similarly, the opposite of this is a content heavy information website with relatively few images, in this case a blog format with search and navigation would be appropriate.

Lastly is your target audience likely to be mobile or desktop users? Web traffic is 50/50 mobile vs desktop however mobile visitors are unlikely to spend much time reading a content heavy page therefore when selecting a template consider a landing page for mobile and a follow-up visit from the user on a desktop. When choosing a template consider the following.

  • Define page types and variation. For example category lists, blogs, single article, forms, maps and tables.
  • Ratio of text to images.
  • Navigation and search included.
  • Multimedia requirement.
Bootstrap Templates
 
 
sitebuild_site_medium.png

Creating Content. Use a Static Site Generator

A static site generator (SSG) is similar to a CMS such as WordPress or Joomla! Rather than writing HTML pages directly an SSG combines content creation and builds the site using templates to output the static pages ready for upload the web. The majority of SSG use markdown files which means learning a new syntax to write pages. However the YouDoCMS SSG uses the TinyMCE html editor just like WordPress and Joomla! so no need to learn markdown.

A comparison on static site generators can be found here on jamstack.org

Now for the hard part. The common consensus is a minimum of 300 words per page to achieve a decent ranking on Google however 300 words of drivel is pointless. Start with organising your content into categories and then each individual page into headings, subheadings and paragraphs describing the message you wish to convey. 

Eye-tracking studies have found that people concentrate on the top and left areas of the screen when they visit a page. The reading pattern is down the page on the left-hand side back to the top and across. Use headings and subheadings to optimise the navigation within the page. An example of a bad user experience would be to place an image to the top left of a page with the text on the right.

Each page includes meta information which it used by search engines to index your pages. Key phrase analysis creates metrics which are used to analyse how often important keywords are used in a page and across your site. For example a key phrase for this page is "static website design". This phrase is the title of the page, and the url. Whereas "good website design" is mentioned in this page and the meta description. YouDoCMS includes includes key phrase analysis and the Flesch readability score.

  • Multiple Menus.
  • SEF URLs and 301 redirects.
  • Published status for draft content.
  • Menu alias and headings.
Static CMS
 
 
menu_mngr_medium.png

Static Website Navigation

Navigation impacts traffic through the page search engine ranking where a combination of the URL, page title and content are used to rank the page. Furthermore, meaningful navigation improves usability and conversion rates. Navigation is also difficult so during the website design process the navigation is frequently updated.

A common case is page which starts out at the minimum target of 300 words. As the content of the website develops this page becomes a 1000 words and for readability it makes sense to split this over two pages. As the content is now split the original URL no longer make sense. However the search bots will have indexed this page therefore the old URL need to be redirected to one of the new ones.

Fortunately updating and amending navigation in YouDoCMS is straightforward and simple. With each change SEF URLs are created along with 301 redirects if the navigation changes. We support multiple menus individual menu items can be re-organised drag-and-drop. YouDoCMS is a native application so no waiting for a page to reload its instantaneous.

  • Multiple menus and menu alias.
  • WordPress or Joomla! routing.
  • 301 re-directs.
  • Pretty URL's and .html extension.
Bootstrap Templates

Content Management and Deployment

It's easy to demonstrate that static sites provide a great front-end experience for the user with fast page loading and security built in. However that is only half the story. Maintaining a website, keeping content up-to-date and incorporating features such as forms is the other half and why content management systems such as WordPress dominate the Internet. 

Much of the functionality of WordPress can be replicated with a static site using the JAMstack ecosystem. YouDoCMS incorporates the majority of WordPress content management functionality such as pages and posts, categories, menus, tags and widgets.

Furthermore the development of serverless functions by the cloud providers is the last piece of the puzzle whereby dynamic data can be incorporated into static sites. Serverless functions are server-side code that can be triggered to run on demand to return data to the visitor.

  • AWS S3 and Cloudfront node.js API.
  • Cloudflare node.js API.
  • Google Firebase API.
  • Microsoft Azure Static Web App CLI integration.
Go Serverless

Static Website FAQ

Save time and money and speed up your site with YouDoCMS.

The desktop application comes with a zero-configuration built-in Web server allowing instant previews of a page when editing.

Static CMS

Our deployment tool includes HTML minification to make your pages as fast as possible.

Learn More

Our application incorporates a backup archive to save the database, all images and templates including a single click restore.

Static CMS

Deploy to AWS S3 and Cloudfront. Cloudflare Pages, Google Firebase and Microsoft Azure Edge including automatic cache validation to update the site on the CDN.

Learn More

Our free versions includes migration from Joomla! and WordPress and free hosting with Github Pages.

Learn Github

Resize your primary images to incorporate responsive sizing. Define a naming scheme and batch resize all images to optimise image loading speed on desktop or mobile.

Media Manager

Flesch reading ease score, keyphrase usage, JSON-LD and related search terms for focus keywords.

Static Site Seo

Import w3c format web logs from file or direct from S3. Eliminate 404 errors and create 301 redirects.

Learn Logs