Web Design 101 for Print Designers – Part 2: What Makes a Web Page
- Read Part 1: Introduction
In a nutshell, web pages are simply documents. Literally just lines of information written in HTML (Hypertext Markup Language) or XML (Extensible Markup Language). That’s really all there is to it! Here is an example of the “behind the scenes” of a simple boilerplate website called My Website that lists links to three other sites:
The DOM Tree
The DOM (Document Object Model) is what gives an HTML/XML document its structural rules. In the example above, I’ve declared the file’s doctype as HTML. The DOM then knows to parse HTML elements into objects, which developers can style.
With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions.
—World Wide Web Consortium
Different HTML elements do different things.
Structural elements give, you guessed it, logical structure to the document. For example, a page about the director James Cameron might have the following sections:
- Early Life
- Business Ventures
In HTML, this structure could be represented by article, section, and header elements:
<article> <h1>James Cameron</h1> <section> <h1>Early Life</h1> </section> <section> <h1>Filmography</h1> <h2>Films</h2> <h2>Television</h2> </section> <section> <h1>Business Ventures</h1> </section> </article>
Semantic elements have meaning. Structural elements (like the ones above, and
<aside>, etc) are semantic, as are
<img>…. Basically, you know what you are getting when you look at the element (an article, form, table, image, etc).
Non-semantic elements help developers further manage and style content, but they don’t have an inherent meaning. For example:
<h1>James Cameron</h1> <p>James Cameron is a director who made the <span>best movies of all time</span>.</p>
<p> are semantic—they indicate a first-level heading and a paragraph, respectively.
<span> doesn’t do anything at all. A developer has to instruct the browser to do something with it.
Styling the DOM
So what does this all mean for you, the designer? Well, in essence, you are the one who is styling the DOM and all these lovely elements! If your boss says, “I want a banner image, with some text and a button, and below that 3 columns of blog posts that have the title, date, and image, and below that, a mailing list sign up form….” she’s really just asking for a bunch of DOM elements to look aesthetically pleasing and on-brand.
Where the Developer Comes In
Let’s say you come up with this design for a web page about James Cameron:
The DOM will look something like this:
<h1>James Cameron</h1> <p>James Cameron is a director who made the best movies of all time.</p>
Now the developer has to come up with a set of style rules that tell the browser to apply fonts, colors, and so on to the document so that it will visually match your design. Without these rules, the web page would look like this:
The rules are usually declared in a cascading style sheet (a file that ends in .css). The sheet will say (in CSS parlance, of course):
- For the
<body>tag, make the background color #FAFAFA
- For text in an
<h1>tag, make the font face Cabin, size 32px.
- For text in a
<p>tag, make the font face Old Standard TT, size 18px.
And you’d get this:
You’ll notice that the design calls for “James Cameron” to be bold and for “best movies of all time” to be red. But the DOM only has one
<p> tag, as appropriate. What’s a developer to do?
This is where non-semantic elements come in. I can wrap the bits of text to be altered with a
<h1>James Cameron</h1> <p><span>James Cameron</span> is a director who made the <span>best movies of all time</span>.</p>
Let’s add a CSS rule:
- For text in a <span> tag, make the font bold
- For text in a…. uh oh
Two span tags. Two styles. If i were to write a rule to make
span both red and bold, then I’d get this:
But no worries! I can add a class to each
<span> to differentiate them. Each class will have its own style rules:
<h1>James Cameron</h1> <p><span class="bold">James Cameron</span> is a director who made the <span class="red">best movies of all time</span>.</p>
- For text in a
<span class="bold">tag, make the font bold
- For text in a
<span class="red">tag, make the font red
What This Means for Designers
You might be thinking, “Great, the developer can touch every piece of text, every image, form, button, text box, link, to make it look exactly like my design.”
Well, yes. But keep in mind with every granular bit of design, for every color, font, shape, layout, that doesn’t follow the DOM and/or varies from one place to another, you are asking not only the developer to create a new rule, but for visitors to download that new rule, too. The more bloated CSS, the longer it takes to develop, the heavier the file, and the slower the site.
A Note on Text + Images
So I know I just said that you should not force the developer to add too many style rules to the CSS file; one way to do that would be to provide images with text on top already, such as you might see in a banner image like this one:
Without going to deep into why, because that’s an entire blog post of its own, I need to iterate this clearly: text is text and images are images; ne’er the twain shall meet. Meaning, do not supply the developer with images with text on them already; instead, supply them separately and the dev will put them together to match your design.
The above banner should actually look something like this in the DOM:
<div class="banner"> <img src="http://website.com/img/banner.jpg" alt=""> <h1>Barware</h1> <span class="subtitle">Summer Cocktails</span> <a class="banner-link" href="page.html">Cheers</a> </div>
div element I called “banner” is a collection of other elements: an image, a title, a subtitle, and a link. The style rules will place the text on top of the image as required.
Keep it Simple + Flexible
By no means am I suggesting that you design flat and boring pages that look like Word documents. But here are some tips on keeping your design simple and flexible:
- Limit font faces to 1-3 families
- Select colors for text and buttons based on shades and hues of each other
- Re-use patterns where possible
- Text treatments (font, color, size, line height, weight)
- Image sizes