Why Static Websites are Often Misconstrued -Build Static Websites

Static website is a term that is often misunderstood because most people think of old school websites that looked horrible on any browser. The word is sometimes used to describe sites that used fixed widths, have no responsive or relative measurements, and cannot adjust to fit the window or broader size. Modern web development uses it differently to describe sites that aren't dynamic.

Static websites are sites that use static pages to deliver content in an optimized manner allowing pages to be delivered faster without compromising usability or user features. Basically, static sites leverage the fact that many pages change infrequently and don't need to be dynamically generated every time a user requests the page. Part of the confusion is due to the term ‘static layout,’ which is a way of laying out a page so it doesn't change. There are actually several terms that are used to describe the way a page is laid out.

Website Layouts

Through the history of web development, there have been different ways of laying out the content on the page. These methodologies were usually limited by technological or lack of standards, which naturally improved as the technology matured.

Static layout

The original way web pages were laid out on the screen was statically. Developers had precise measurements for where to place content based on the resolution of the monitor. There was little deviation between consumer-grade monitors, which made it simple for developers to produce pages optimized for that screen.

Most web pages were developed using a standard screen size of 1024 pixels and limited their content to 960 pixels to fit on the screen with a margin around the edge of the screen. Although this worked for the time, as technology improved and different screen sizes were developed, the need arose for more fluidity in content design. This led to the development of fluid - or liquid - layouts.

Fluid layout

A fluid layout was the first way provided for developers to adjust the width of their content to adapt to different monitor resolutions by using relative measurements. This was typically done using percentages but can also include using ems, rems, or any other type of relative measurement.

This next stage in development allowed designers to adjust to different screen resolutions, but it typically looked bad on large and small screens, with too much space around content and content being crammed together, respectively. This also presented the problem of having to be incredibly detailed in your measurements to prevent situations where your content looked terrible and resulted in poor user experience.

Adaptive layout

With the release of CSS3 in 2012, developers were provided with media queries that allowed the measurement of the user’s browser. You could now leverage breakpoints to change the display of your content to suit the browser.

Breakpoints allow you to adjust spacing, font size, the display of content, and even the order in which content is displayed. Adaptive layouts still use static widths but allowed you to create a better experience for your users by eliminating the problems of fluid designs where content looked horrible at the big and small ends of the browser sizes.

Responsive layout

Responsive layout is the newest development in displaying content. This method essentially combines fluid and adaptive designs to use media queries and relative measurements to allow the content to react to any browser size. Responsive layouts enable a page to be displayed on small screen sizes and large screen sizes and help the content look good no matter what size browser the user has.

You can see why confusing the term static layouts with static sites can be misleading. Websites with static layouts resulted in poor user experience. Many features of static websites create a better user experience.

Website Contents

Static websites rely on static pages where the content doesn't change when the page is requested. Many web pages are served from all over that are basically static, yet are still dynamically generated when they’re requested. These pages would benefit from using a static methodology instead of a dynamic one.

Static Content

When websites were first developed, they were all static. Each page was built as a static entry and rarely changed, possibly due to the difficulty of modifying each page. Hand-coded, unreusable content was the norm and made it difficult to make significant changes to the page. If you wanted to copy a page, you had to do so manually.

The inclusion of CSS made this process more manageable since the design of the page could be abstracted from the structure of the page. This allowed developers to create the design of their cite in their CSS files and easily reuse those styles throughout the site. This made it much simpler to copy the structure of a page without having to do so manually.

Though the development of static websites improved, there was still room for improvement. When you wanted to add new content, you had to develop the page manually - even if you could reuse elements - which made it difficult and often expensive to do so. This led to the creation of websites using dynamic content, which became widely adopted.

Dynamic content

Dynamic content is generated from a repository - usually a database - which is done each time a user requests a page. This solved the problem many developers had by allowing them to more quickly and easily create web pages and reuse existing elements more easily.

The main benefit of dynamic content is that it can be quickly and easily created. This is especially true for those that use a CMS - such as WordPress - to run their websites. Using a CMS, developers are presented with a graphical interface with a text editor to create new pages. They can focus on using the provided tools to add content to their sites quickly.

They also enabled the use of themes to change the look and layout of the site quickly. Some themes even added functionality to the site.

This wasn’t a perfect solution as increasing the complexity of the backend components of a website added to hosting costs and the slowing down page speed, and that’s just the tip of the iceberg.

Breaking the Stereotype

Many people think of static websites as outdated, clunky websites that have suffered from a poor user experience. The problem is caused by drawing an equivalency between static layouts and static content. This is incorrect as the design isn’t tied to the way a website is hosted.

Static websites can have static layouts, but they can have any of the different layout types. Responsive websites are the norm for modern web development, and you can certainly develop static sites using responsive layouts.

Another misconception is that static websites have no user interaction. They don’t have moving elements, and they don’t accept user input. This is completely untrue. Static websites can utilize highly sophisticated front-end programming, some of which can make the site behave like a dynamic website by pulling content from a database using Javascript and AJAX.

Examples of When to Use a Static Website

Unless your website has a need for consistently rapid changes to the content, you should be able to use a static website for your site. For many websites that I’ve seen, using a dynamic style is overkill.

Blogging

For instance, many bloggers turn to WordPress to develop their sites. When bloggers post an article, it doesn’t change very often, and the changes you need to make rarely require a dynamic platform.

It seems that bloggers turn to CMS solutions due to industry advice, the ease of setting one up, and the ability to use themes to give a unique look to the site. All of these can be accomplished using static websites while at the same time offering a lower hosting cost.

Business Websites

Many businesses would benefit from using a static website methodology. Companies don’t often change their offerings - except maybe updating pricing - which would make them a prime candidate for a static website. Businesses need to advertise their product or service and use a site to reach out to potential customers. Using a static website could be done to lower hosting costs.

This is by no means an exhaustive list of when to use a static website. As stated before, if you don’t have a need to change your content on a continuous basis rapidly, a static site might be your best bet.

Final Thoughts

Static websites have a bad reputation from the older days of web development and confusion with static layouts. WIth increasing hosting costs - as well as development costs - static websites are starting to make a comeback. Many types of sites can leverage the power of static websites to lower hosting costs without sacrificing user experience.

Did you have any of these misconceptions about static websites? Have you been using static sites for a while now? Please let me know in the comments below.

Thank you for reading my content, and I’ll see you in the next article.

Why Static Websites are Often Misconstrued