Under the hood

A mechanic has to open the hood to diagnose what is wrong with your car. What happens under the hood of your web sites? I know, I know, you’ve been promised time and again that you can build a site, or work on one, without knowing any code. My advice to you is the same as the advice I received from my first art director: You have to use the code view to see what’s really going on. I was a graphic designer on a web team, and the code view was intimidating to me. But my colleagues on the coding team assured me it was easy when you knew what to look for. Now I’m a graphic designer-turned-HTML coder.

The first thing to know is how to use headers properly. If you are transitioning from the print world, this will be a challenge. When you design documents destined for paper, you set the headline to a fixed point size like 18 pt, and the paragraph text to a fixed size like 12 pt with 15 pt leading. You can arrange your paragraphs exactly how you like letter for letter. When you try to do that on a web page, the fonts could be too big or a sideways scrollbar may appear, depending on the size of the screen (aka viewport).

When putting text on the web, a print mindset is limiting. Web fonts have been getting more sophisticated in the past five years. We use relative sizing for responsive web sites; the unit is called an ’em,’ not to be confused with the em-dash! Relative sizing allows the cellphone browser to proportion the headline in relation to the viewport. On the web, the font size, weight, color, and font-family are controlled in a different location from the HTML page you’re working on. So don’t assign these attributes through your WYSIWYG editor.