How Websites are Built: Using a House Analogy To Understand the Layers
Most people have a little more experience with what’s involved in building a physical structure like a house than they do with building “virtual structures” like websites. So to help explain the components of a website, we are going to use a house as an analogy.
There are layers to any house. Some of those layers are invisible to most of us, like the wiring, piping, and the stud frame. Others are more obvious, like the finished walls and built-in kitchen cabinets. Still others are not strictly speaking part of the house, but are important to making the house a home, like our furniture, clothes, or pictures hung on the wall. These layers are analogous to some of the layers of a website.
Most of the invisible layers of the house, like the piping and wiring, are like the web infrastructure that supports our website. Things like our server hardware, server operating system and software packages, and domain routing fit into this category: they have to be there to make things work, but generally we don’t want to touch them very often (and when we do, it’s usually a sign that something has gone wrong). Rather, we want them to keep doing what they do in the background, making sure everything else works as it should.
The floor plan of our house melds some of the invisible layers (the stud framing, for example) with some of the more visible ones (the finished walls, windows, trim, cabinets and countertops, for example). This is a lot like the underlying structure of our website. Websites usually contain files written in at least two different computer languages: HTML files laying out the basic structure of the page (like our stud frames) and CSS style-sheets providing details such as font choices, color assignments, margins, and more (similar to the finished walls, trim, counters, etc) of a house. They may also contain other types of files, like JavaScript files which add extra functionality and dynamic elements to the site. All these components together are referred to as the “theme” of our website, which like a floor plan does for a house, gives our website its look and feel, it’s basic layout design, and the underlying functionality that is built in.
Finally, the objects that fill our house, transforming it into a home, are a third layer that we can think of as analogous to the “content” of our website. Just as these contents in our home reflect us and our personality, the content of our website reflects the specific person or organization that lies behind it. They include things like the text or “copy” on each page, the specific images we’ve used, what items are in our navigation menus, the links in our sidebar, and other items that are part of the message our website is conveying.
The distinction between “content” and “theme” is very important to understanding how most website builders work, so we want to make sure that we draw this distinction out very clearly. The two work together to create the website that we see, but they are also, at least theoretically, both elements that can be changed independently of one another. Just as you could put your “stuff” into a different house with a different floor plan or put different “stuff” into your house with your current floor plan, the same sort of swapping around can be done with a website. The “content” of a website can, at least theoretically, be substituted while maintaining the same “theme.” In other words, we could insert new content while maintaining the same basic layout design, color schemes, fonts, functionality, etc. Likewise, at least in theory, we could take our content and place it into a new theme, arranging the text and images that make up our websites message in a new layout design with new colors, fonts, functionality, etc. How this works looks different with different website builders, but understanding this distinction is helpful to keep in mind when comparing them.
Next week we are going to start a series diving into how different website builders work, and we’ll refer back to this house analogy throughout that series, particularly this distinction between floor plan/theme and “contents.” Keep an eye out for those posts coming soon!
