I am available for freelance work - HIRE ME

HTML (and CSS) Do Not a Website Make

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.

Unity

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.

A website is much the same. CSS without HTML is entirely meaningless, while HTML without CSS is extremely plain and unattractive. JavaScript and its various frameworks can’t accomplish all that much outside of the DOM. When it comes to content management systems like WordPress, the mySQL database is useless without the PHP (or other sever side language) to extract the information, and the PHP itself needs to generate HTML (usually through a template) in order to display that information in the browser. And, of course, this entire network of technologies means absolutely nothing to the user without content.

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.

Purpose

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:

  1. Simple wire framing on paper (maybe)
  2. Design in Photoshop
  3. Code up the design in HTML and CSS
  4. Develop a theme from the HTML and CSS
  5. Install the CMS
  6. Import content
  7. 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:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Oct 7, 2010

Heather says:

I go through this process every day at work. We’re working on our company site right now and I’m one developer with two designers (with some or no HTML/CSS experience) so we’ve developed a pretty open dialog for the whole process. I work on content/architecture first, creating both wire frames and a TOC. Then the designers start working on the look of the main “pages” of the site while I work on taking the CMS (usually WordPress) and tweaking it to fit our purpose. Then we take the approved design and start working it into the CMS, as we get some of the major parts done, we start adding content from our editor – which will then tweak the design in some cases. We go back and forth, communicating, changing all the way. It’s not the sleekest process, but it keeps everyone involved and gives us, hopefully, the best looking and most functional site we can create.

Oct 7, 2010

Rob Fenech says:

Hey dude – good article. I keep telling my clients that design and code don’t make a good website; it has to have 2 things…

1. Great content
2. A clear, single, defined purpose

The html/css/photoshop work all just come along to help the site achieve its goals.

Nice article – i’ll be reading more of your stuff in the future :)

Oct 7, 2010

Chuckles says:

Funny this is brought up. I think a good article would be “A Good Design a Website Does Not Make.”

Meaning some designers are clueless to CSS/HTML. As a web designer you some basic knowledge of this and the limitations it has.

Oct 7, 2010

Jenna says:

Yes, I do consider the website in its entirety through the whole process, because I am usually in charge of the whole thing start to finish. I think having this overview creates some useful shortcuts, but one downfall is maybe that creativity can suffer early on. If I concentrate to much on thinking ‘how will I code this’ while I’m designing the wireframe and graphics, I’ll likely go with what’s easiest to code or will be the cleanest markup, rather than generating new creative ideas.

Oct 7, 2010

SueJ says:

Really liked this article.
I’d be interested to know which CMS’ you use?

Oct 8, 2010

Michael says:

Why even have a web site if the content is lousy?
I’m happy with my front end, server side coding but when the content isn’t prompting the user to make a purchase, download a brochure, get in touch, then the whole thing’s a disaster.

Oct 10, 2010

Girish says:

This site runs on WordPress.

Oct 11, 2010

Giacomo Colddesign says:

Nice and helpful article..

Oct 12, 2010

Mikey says:

You mention “Install your CMS” – you don’t mention developing your own software for your site to run on, for example, although WordPress is a very powerful tool, not every site purpose can be achieved with it. :)

Oct 12, 2010

Bryce Wisekal says:

Great walk-through. Really enjoyed reading this article!

Oct 16, 2010

Jose says:

Excellent post! Enjoyed the clear explanation of the dynamics surrounding a website. Great stuff! Content is indeed important. Purpose helps drive the content generation process.

Oct 26, 2010

Len says:

If only I could get the bosses to realise this :-(

Oct 27, 2010

egiova says:

Interesting reflexions. However, I’m the long white beard man here (I meant the older), my initiation to design came from a time before computer (I was born in the sixties), and so my later practice was on paper(publicity, cartoons, magazines, name it…). Then came computers and a day work was possible in a couple of hour,,, wow! Then came web design.
My opinion is there is no change of “purpose”, only a change of medium. A page is still a page, communication is still communication. Social codes changed, it’s a fact, visual codes changed but it happened before and will happen again. So, wht’s the point?
Obviously, as you said, a web page (or site) is not just a question of code, and technical stuff, indeed it doesn’t matter. What really matter is the message, the feel (the aesthetic), the smooth use of the medium, and that’s it. Loop completed.
A homepage is the cover of a book with the index included. The inside have to be a reflect of the cover but not the cover, just as a book.
Thanks to make me think about this.

Dec 8, 2010

Preston Racette says:

Thanks for sharing. Nice post, keep it up!

Leave a Comment

Links

  1. CSS Brigit | HTML (and CSS) Do Not a Website Make
  2. HTML (and CSS) Do Not a Website Make

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014