posted by Matt Ward on Oct 6, 2010.
As web designers and developers, we talk a lot about HTML and CSS. And, with the emergence of HTML5 and CSS3, it seems as though we are talking about them more than ever. Yet, despite all the great discussion, websites are about more than just HTML and CSS. In this article, we will look at the concept of the website as a larger, unified body of technologies and content, and consider the importance of this understanding for design.
Recently, one of my awesome Twitter followers was asking me a few questions about getting started with WordPress. From what I could understand, this individual worked for an agency or firm where he created website designs in Photoshop, and then sent the PSD on to another team member in order to have it coded up. Now, he was working on setting up a personal site and, while he could rock off a custom site design, he openly admitted that he knew nothing about coding and asked me for a little help getting started.
After a bit of discussion, I suggested that the best place to begin would be to start learning the basics of HTML, and then CSS. After all, any great theme (WordPress or otherwise), ultimately begins with good, well-formed HTML and CSS.
Still, this interaction got me thinking (as I am prone to do) about the roles of both HTML and CSS within the larger context of a website. Through my contemplation, I began to consciously formulate the thought that, while these two technologies are clearly an important part of web design, they are only ever single pieces of the puzzle. In other words, there’s a lot more to a website than just its markup and style.
This isn’t some sudden realization that is going to dramatically change the way that I approach web design. I wouldn’t even say that it’s really anything all that new to me. It’s more like putting a structure to something that’s always been in my mind, but which I have simply never articulated. So, in this article, I would like to undertake that articulation, and offer my own understanding of what defines the a website. I think it might be valuable.
A Page vs. A Site
One of the most important distinctions, and probably the best place to start, is by differentiating the concepts of the web page as opposed to an actual website. A web page is what’s loaded in the browser, and is generally a combination of text, images, video and other content. HTML gives the page its structure, while CSS provides (or should provide) the visual appearance.
On the other hand, a website at its most fundamental level can be understood as comprising a network of individual pages, which are all linked in some (usually) logical and predictable manner. Back when I first started this web design thing, most sites were comprised of a number of unique and separate HTML documents, all located in the same folder, or within a hierarchy of folders, and each containing links to many (and sometimes all) of the other pages that made up the site.
Today, of course, things have become a bit more ambiguous, with the introduction of content management systems and dynamic content fed to us through technologies like jQuery or AJAX. When using a system like WordPress or Concrete5, we’re not focusing on creating static pages (though they may be generated behind the scenes for caching purposes). Instead, we build theme and template files, which have designated content areas that are populated with data extracted from a mySQL database.
From a maintenance perspective, this kind of thing is certainly a godsend, since we don’t have to manually go through hundreds, or even thousands of individual pages to make a single change to the design. Fundamentally, though, it doesn’t really change the way a website is structured.
Whether we are looking at a site comprised of static HTML documents or one that is fully CMS-driven, we still have “pages” that exist at unique URLs. The content found at these URLs may vary significantly on some sites, like Facebook – where the home page features different “news” everyday, for every different users – but the basic concept of structure still exists. Our profiles have the same URLs, as do our Fan Pages. The content simply varies based on what our “friends” are doing.
This distinction, though not perfect (as we shall see below), is an excellent starting point, as it emphasizes the importance of the unity of a site.
But what about single page websites? There are thousands and thousands of such pages out there, featuring all of the important content within a single HTML document, elegantly styled with CSS. Do these sites contradict everything that I have been suggesting so far? Or, am I somehow suggesting that single page websites are not, in fact, websites at all?
I would say no on both counts.
I will admit that this idea did make me stop and ponder these very same questions. After some contemplation, however, I reasoned that there is nothing that necessarily requires a website to have more than a single page. In looking at both the fact that most sites do have multiple pages, and the obvious success of single page sites, I would actually suggest that a website comprises the entire collection of unique URLs that exist for a given location on the internet (which could be an complete domain, a particular subdomain or even an individual folder).
To take this back to the original premise on which we began this discussion, we can think of a website as a singular unit, which ultimately equals more than the sum of its parts. It’s kind of like looking at a MacBook (or any other kind of technology). Taken on their own, its individual parts really aren’t worth all that much. Taken together, however, these parts create the powerful machine, and a popular tool among many of you designers out there.
So, when a website is working properly, all of these different elements come together in (what should be) a beautiful symphony of interaction and interrelationships that from the backbone of the interface that you design to connect your users with your content. At the same time, that content – represented by either a single page or a network of pages – also works together to round it all off and complete the entire, unified package that is the website.
Clearly, then, a site is much more than just its HTML and CSS.
There is, however, one more piece to this website puzzle. Even after all the technologies have been accounted for, and we’ve grasped the important role of great content, there still remains one important concept to consider. That concept is purpose.
Every website should have a purpose. It may be to inform potential customers about your business (probably one of the most common types of websites). It may be to function as an informational resource. It may be to connect people with other people. It may be to showcase yourself, or even simply to entertain. Whatever the purpose is, it is ultimately the core of the site, the nucleus around which everything else that we have looked at so far is ultimately wrapped.
However, while HTML and CSS do not a website make, when it comes to this question of purpose it is entirely possible to build a beautiful, functioning website full of content, but which ultimately has no real purpose. Unfortunately, this well crafted but purposeless website is more than likely destined fail and fizzle even faster than a poorly designed site with a clear and identifiable purpose.
Implications on Design
As I mentioned earlier, I don’t think that there is anything all that revolutionary or earth shattering to what I am saying here. Most competent web professionals will probably read all of this and find that they already knew it. But the point isn’t whether you know it; the point is whether or not you think about it.
Sometimes, it seems as though our design processes can fragment what is ultimately intended to be a unified product. The typical process that I seem to see from the design community goes something like this:
- Simple wire framing on paper (maybe)
- Design in Photoshop
- Code up the design in HTML and CSS
- Develop a theme from the HTML and CSS
- Install the CMS
- Import content
- Find another client and repeat
At each stage, we tend to be focused on one or two parts of the larger project, and I have to wonder how much time we spend thinking about the other parts. For instance, if you’re working in Photoshop, are you already looking down the line, towards coding the HTML and CSS? Are you considering the specific capabilities of your CMS? Have you even decided on a CMS yet (assuming that you don’t always use the same one – which I don’t)? How do the answers to these questions ultimately inform the design decisions that you are making from inside Photoshop?
Asking yourself these questions can certainly make your job easier (or your developer’s job, if you only do the Photoshop layout), but they can also serve an even more important role, by bringing all the pieces of the puzzle together, and forcing you to consider the website more as a single entity rather than a collection of separate pieces.
I think that’s where this discussion becomes truly important. The more you consider the website as a whole at each individual stage, the better equipped you will be to make choices that will ultimately help the site succeed by achieving its ultimate purpose. It’s all about unity.
What do you think? Do you consider the website in its entirety through every stage of your process? Do you have anything that you’d like to add or argue against? Be heard! Leave a comment.Post A Comment
Also from Echo Enduring Media: