The Three Layers of Web Design

People who work in the web design industry liken front-end website development to a three-legged stool. These three legs—the three layers of web development—comprise the structure, style, and behaviors of a site.

Why Should You Separate the Layers?

When you're creating a web page, its structure should be relegated to your HTML, visual styles to the CSS, and behaviors to scripts. Some of the benefits of separating the layers are:

• Shared resources: When you write an external CSS or JavaScript file, any page on the site can use that file. 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 could be a grueling undertaking for a large website.
• Faster downloads: After the script or stylesheet has been downloaded by your customer for the first time, it is cached by the web browser. Because these shared resources are now contained in the browser 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 website at once, use version-control systems that allow files to be checked in and out to ensure that everyone is working with the latest versions. This process is much harder to do if styles and behaviors are intertwined with structure documents.
• SEO: A site that demonstrates a clear separation of style and structure is likely to perform better for search engines because they can crawl that content more effectively and understand the page without getting bogged down in visual-style and behavior information.
• Accessibility: External style sheets and script files are more accessible to people and to browsers. Software such as screen readers can process content from the structure layer more easily without dealing with styles that they cannot use anyway.
• Backward compatibility: A site that is designed with separate development layers is more likely to be backward-compatible because browsers and devices that can't use certain CSS styles or that have JavaScript disabled can still view the HTML. You can then enhance your website progressively with features for the browsers that support them.

Read More

What Is Web Design: An Introduction to the Basics

By Jennifer Kyrnin

HTML: The Structure Layer

The structure or content layer of a web page is the underlying HTML code of that page. Just as a house's frame creates a strong foundation upon which the rest of the house is built, a solid foundation of HTML creates a platform upon which a website can be created.

The structure layer is where you store all the content that your customers want to read or look at. HTML structure can consist of text and images, and it includes the hyperlinks that visitors will use to navigate around the website. This information is coded in standards-compliant HTML5 and can include text, images, and multimedia (video, audio, etc.). 

Every aspect of a site's content should be represented in the structure layer. This separation allows customers who have JavaScript turned off or who can't view CSS access to the entire website, if not all of its functionality.

CSS: The Styles Layer

This layer dictates how a structured HTML document will look to a site's visitors and is defined by CSS (Cascading Style Sheets). These files contain stylistic instructions for how the document should be displayed in a web browser. The style layer usually includes media queries that change a site's display based on screen size and device.

All visual styles for a website should reside in an external stylesheet. You can use multiple stylesheets, but every CSS file requires an HTTP request to fetch it, affecting site performance. 

JavaScript: The Behavior Layer

The behavior layer makes a website interactive, allowing the page to respond to user actions or to change based on a set of conditions. JavaScript is the most commonly used language for the behavior layer, but CGI and PHP are very frequently used, too.

When developers refer to the behavior layer, most of them mean the layer that is activated directly in the web browser. Use this layer to interact directly with the Document Object Model. Writing valid HTML in the content layer is important for DOM interactions in the behavior layer. When you build in the behavior layer, you should use external script files, just as with CSS, to optimize speed and performance.