The Three Layers of Web Design

Why all websites are built with a combination of structure, style, and behaviors

The 3 layers of web design
The 3 layers of web design - structure, styles, behaviors. Jeremy Girard

A common analogy that is used to describe front-end website development is that it is like a 3-legged stool. These 3 legs, which are also known as the 3 layers of web development, are Structure, Style, and Behaviors.

The Three Layers of Web Development

  • Structure or content layer
    • The  structure or content layer of a web page is the underlying HTML code of that page. Like a house's frame creates a strong foundation upon which the rest of the house is built, so does a solid foundation of HTML create a platform upon which a website can be created. HTML structure can consist of text or images and it includes the hyperlinks that visitors will use to navigate around that web site. 
  • Style or presentation layer
    • The style or presentation layer dictates how a structured HTML document will look to a site's visitors. This layer is defined by CSS (Cascading Style Sheets). These files contain styles that indicate how the document should be displayed in a web browser. On today's Web, the style layer can also include Media Queries that can change a site's display based on different screen sizes and devices.
  • Behavior
    • The behavior layer is the layer of a Web page that can respond to different user actions or make changes to a page based on a set of conditions. For most Web pages, the behavior level would be the JavaScript interactions on the page. 

    Why Should You Separate the Layers?

    When you're creating a web page, it is desirable to keep the layers as separated as possible. Structure should be confided to your HTML, visual styles to the CSS, and behaviors to any scripts that the site uses.

    Some of the benefits of separating the layers are:

    • Shared resources
      • When you write an external CSS file or JavaScript file, you can use that file by any page on your web site. If you need to make a change to that file, perhaps to update some typographic styles on the website, every page that uses that stylesheet will get the change. There is no need to edit every page of the website individually, which for larger site could be a grueling undertaking.
    • Faster downloads
      • Once the script or stylesheet has been downloaded by your customer the first time, it is cached by their web browser. Because these shared resources are now contained in cache, other pages that are requested in the browser load more quickly,which improves overall page speed and performance.
    • Multi-person teams
      • If you have more than one person working on a web site at once, you can use systems that for "check in" and "check out" of files to ensure that everyone on the team is working with the latest versions of these files. This is much harder to do if styles and behaviors are intertwined with structure documents.
    • SEO
      • A site that has a clear separation of style and structure is likely to perform better for search engines since those sites can more effectively crawl that content and understand the page without getting bogged down with visual style or behavior information.
    • Accessibility
      • External style sheets and script files are more accessible to people and to browsers. Because there is that separation of style and structure, software like screen readers can more easily process content from the structure layer without getting bogged down by styles that they cannot use anyway.
    • Backwards compatibility
      • When you have a site that is designed with the development layers, it will be more backwards compatible because browsers or device that can't use certain CSS styles or which may have JavaScript disabled can still view the HTML. Your web site can then be progressively enhanced with features for the browsers that support them.

    HTML - the Structure Layer

    The structure layer is where you store all the content that your customers want to read or look at. This will be coded in standards compliant HTML5 and it can include text and images as well as multimedia (video, audio, etc.). It's important to make sure that every aspect of your site's content is represented in the structure layer. This allows any customers who have JavaScript turned off or who can't view CSS to still have access to the entire web site, if not all the functionality of that site.

    CSS - the Styles Layer

    You will create all your visual styles for your web site in an external style sheet. You can use multiple stylesheets, but remember that every separate CSS file requires an HTTP request to fetch, affecting site performance

    JavaScript - the Behavior Layer

    JavaScript is the most commonly used language for the behavior layer, but as I mentioned before, CGI and PHP can also generate Web page behaviors. That being said, when most developers refer to the behavior layer, they mean that layer that is activated directly in the Web browser - so JavaScript is nearly always the language of choice. You use this layer to interact directly with the DOM or Document Object Model. Writing valid HTML in the content layer is also important for DOM interactions in the behavior layer.

    When you build in the behavior layer, you should use external script files just like with CSS. You get all the same advantages of using an external style sheet.