How To

The HTML and CSS Designers Need to Know

10 Aug , 2017  

So, I’m going to pass straight over the debate over whether designers NEED to know how to code or not.

I think the only expectation is that web designers understand the medium they design for. And that means HTML and CSS at least, which don’t count as coding, per se.

The best part – once a designer understands some HTML and CSS, they can start building things instead of “just” designing them.

That’s why today I’m talking about the bare minimum HTML and CSS web designers need to get started with to make nice web pages.

But this post isn’t just for designers – anybody who creates web pages should have at least a passing understanding of how to put a web page together.

I’m certainly no designer, but years ago I made it my mission to produce web pages that don’t suck.

As web users we’re exposed to incredibly high standards of design every day, so poorly designed pages really stand out.

In this post I’ll be concentrating on basic layout of pages, and how we can format text so that it’s displayed nicely in a web page.

You can get nearly everything else done in Photoshop (even though it’ll make your page slow and un-responsive!)

Here’s what we’ll learn toady:

  • The correct use of headings.
  • Creating whitespace in, and around text.
  • Getting to know the Google font family.
  • Getting your text into columns.
  • Other options when you don’t want to make your own columns.

Let’s go!

HTML Headings – a subtle trap.

What designers – or anyone else for that matter – should remember is that HTML is a semantic system to give meaning to the content it contains.

I go over this in my HTML introduction article. You should check it out if you’re completely new to HTML.

Semantics kind of went out the window for a while (what does <div> tell us?), but they’ve made a comeback with HTML5 and its myriad specialised tags like article, header, footer, and so on.

One thing that’s remained constant is that the header tags <h1> through to <h6> describe the content of a page, and each section of a page.

Correct use of these tags is usually cited for SEO reasons – they tell Google what your page is about.

But it’s also very important for accessibility reasons.

Accessibility tools like screen readers use the h tags as landmarks for navigating and summarising the content of a page.

So here are the rules:

  • Use the <h1> tag once, to describe what your page is about.
  • Use <h2> tags to describe each section of your page.
  • <h3> through <h6> describe subsections of your page.
  • Use the tags in order: <h3> tags should never contain <h2> tags.

CSS to create whitespace in and around text

A word of warning – this section assumes some fundamental CSS knowledge. If you’re completely new to CSS, I have an introduction here.

Now it’s time to introduce a small example page we’ll be using as an example for the rest of the article. To save time, (and typing), I’ve used some generated nonsense-text to fill our page up (see here if you’re interested in that).

Here it is in its full, un-styled glory:

That’s the standard appearance of un-styled text in a browser. Now let’s get started by using CSS to add some whitespace around our content using margins:

We can use either margins or padding to add whitespace around the content. I’ve started in the most simple way possible, by adding a margin of 40 pixels to the body of the document (check the CSS tab above to see what I mean).

This is a decent start, but I think our line height needs to improve as well, because the text is still looking crowded.

That’s looking better now, but our <h2> headings are looking a bit lost – who do they belong to? I’ll adjust the margins on the <h2> elements and the <p> elements to bring them closer.

Getting to know the Google font family

Our text is displaying in the classic browser standard – Times New Roman, which has been old-hat since…the mid 90’s?

Anyway, in their quest to be all things to all people Google have provided a cornucopia of fonts at fonts.google.com. They’re not as good as commercial fonts, but at the price of free, I like having the option.

If you check out the Google Fonts page, you’ll see something like this:

google fonts screenshot

You can browse for fonts, filter by font characteristics or just do a search.

Once you’ve found a font you’d like to use, click on it to open the font’s page:

Alelgreya google font screenshot

Here you can see information about the font, the font’s glyphs, suggested font pairings, and more.

Can you see ‘SELECT THIS FONT’ in the top-right corner? Click that and you’ll see the following popup:

Choose-Alegreya-Font-Screenshot

Click @IMPORT, then select and copy the @import line as shown below.

import-alegreya-font-screenshot

Once you’ve pasted that into the very top of your CSS, you can start using that font. Because Alegreya is a small-caps font, we’ll use it for headings. I’ve also changed the body font, which I’ll discuss after:

If you take a look at the CSS tab, you’ll see that the body text is set to plain old sans-serif. What’s up with that?

Here’s the thing – downloading one or two fonts from Google is OK, but lots will slow down the page’s load time, so let’s avoid that.

But there’s still plenty of system fonts, right? Helvetica, Arial etc. The thing is, Helvetica can look pretty beastly on non-Mac computers. Conversely, Arial sometimes doesn’t look so great on non-Windows computers. So I’m using the default sans-serif font, which is what will usually look best.

But there’s one more thing to fix – depending on your screen width, the heading may or may note be breaking over two lines. If they are, you’ll notice there’s a giant gap between the first and second lines of heading text.

To fix that, let’s set the line-height for our headings to 1.2:

Getting your text into columns.

Next up we’re going to get our text into some columns.

Because of the constraints of our display area, I’m going to set the font-size for our example document incredibly small to begin with. This will allow us to see our columns in action.

So far, our text has just been sitting in <p> elements. Let’s change that and use some <div> elements to create two columns.

There are a couple things to consider here:

  • We want our columns to occupy equal amounts of the page width.
  • But we need to leave space for a gutter between columns.

So we’ll do this with percentages. Let’s start by assigning 48% to each column, and leaving the rest for the gutter:

If you’ve looked at the CSS, you’ll see we’ve got some .half-col styles with float: left; I haven’t talked about float before, but what it does is forces our element (the div) to stop behaving like a normal div and just bunch up to the left or right of whatever came before it.

That’s…ok. But try making this page as narrow as it can go – look what happens to those columns. They get very narrow and hard to read.

Before we fix that, let’s take a quick look at the CSS for adding the gutter. This is the rule (again, check the CSS tab above):

.half-col + .half-col {
  margin-left: 4%;
}

What that + means is look for .half-col that’s right next to another .half-col. The style rule (margin-left) gets applied to the second .half-col element.

Now, about those very narrow columns.

CSS has these sterling things called media queries. They let us define different styling rules for differently sized browsers! This means that our layout can change when we make our browser window larger or smaller. Or, we can test for the size of the screen to tell the difference between desktop and mobile browsers.

For now, we’ll just make a new rule for narrow browser windows. Note: CSS is read from top to bottom. If you want media queries to redefine your standard style rules, the media query will have to go at the bottom of the CSS, where it’ll be read last.

Ok. Enough talk. Let’s see it in action. Here’s our updated document (you might have to stretch your window in and out a bit to see our columns in action):

Here’s our media query and its styles:

@media only screen and (max-width: 450px) {
  .half-col {
    width: 100%;
    float: none;
  }
  
  .half-col + .half-col {
    margin: 0;
  }
}

What we’re saying here is that if this were displaying on a screen (not a printer) and the window is 450 pixels or less wide, then apply the new styles. The styles inside the media query just undo our previous work.

When you don’t want to make your own CSS columns.

So that’s how we can make our own responsive columns, with nicely formatted and laid out text.

However, since web pages are often designed to a grid with multiple rows and columns to give structure to a page, rolling your own can get complicated.

So we have other options.

The grandaddy of them all is the Bootstrap framework. Bootstrap is a collection of CSS, HTML and JavaScript created by Twitter. It defines a formidable array of styles that’ll let your page hop between multiple numbers of columns depending on the size of the window it’s displayed in. In addition to this, it works the same across all browsers. This takes an awful lot of work out of your hands.

The downside of this is that it currently weighs in at 121K, which is a lot to download for our grid.

Anyway, let’s update our document using Bootstrap CSS:

If you check out the HTML and the CSS, you’ll see I’ve used the Bootstrap classes col-sm-12 and col-sm-6. The sm part of that means ‘small’, as in we’re displaying this document in a small space. The numbers indicate how many columns our divs should occupy. Bootstrap uses 12 columns in total, so col-sm-12 means take up the whole 12 columns. The col-sm-6 classes indicate those elements should each take up half the available space.

You’ll notice that the CSS has shrunk significantly – we no longer need all that extra styling information, since Bootstrap takes care of it with sensible defaults.

What we haven’t covered

Is nearly everything. But this has been an exploration of the CSS and HTML a designer will need to make sure their page is laid out nicely and displays well across different devices.

There’s clearly so much more, and every single part of HTML and CSS could conceivably be part of a designers toolkit.

But this has been a beginning, and hopefully enough information to help the new designers out there get started, and the rest of us to make a web page that doesn’t suck 🙂

Until next time!

By


Leave a Reply

Your email address will not be published. Required fields are marked *