Browser-Centric Design

By Sol in Know

While a website’s design might begin in Photoshop, you should be doing most of your design work directly in the browser.

In fact, one of the things I’m learning from redesigning Archetyped is that you might actually want to get out of Photoshop and into the browser even sooner than you think.

A Case for Browser-Centric Design

Why design in the browser? The main reason is that browser-centric design will save you time. Vast changes to the design can be made with a single line of HTML or CSS instead of furiously clicking around in Photoshop duplicating layer groups, changing background colors, selecting different fonts, repositioning layers, etc.

The browser is also where your design will be viewed by the world. You could tweak layers and transfer modes in Photoshop all day long, but it’s just a facade– there are just some things you won’t realize until you see the design in its natural environment– the browser.

The tools are now available to effectively design in the browser. It just makes sense to start using the browser as early in the design process as possible.

Okay, enough validation, let’s dive in. In the spirit of working faster, I’m going to give you the perfect foundation to jump-start your transition into browser-centric design (BCD).

Start with a Strong Foundation

Remember learning to write an essay in grade school? I’d wager that the first thing you learned was the structure of an essay:

  • Introduction
  • Body
  • Conclusion

Web pages are very similar to essays in that they have the same basic structure:

  • Header (Introduction)
  • Main Content (Body)
  • Footer (Conclusion)

Let’s look at that in HTML:

<header>
    <!-- Header content -->
</header>
<main>
    <!-- Main content -->
</main>
<footer>
    <!-- Footer content -->
</footer>

Never before have we had HTML markup as straightforward as in HTML5. With tags like <header>, <main>, and <footer>, the HTML is basically self-explanitory. Look at the comments in the HTML if you have any questions.

To effectively design in the browser as smoothly as possible, we need to start with a good structure as the foundation of our page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
</head>
<body>
    <header>
        <!-- Header content -->
        <a class="site-title" href="#">
            <h1>Site Title</h1>
        </a>
        <nav class="pri">
            <!-- Primary Navigation -->
        </nav>
    </header>
    <main>
        <!-- Main content -->
    </main>
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

The page’s title and primary navigation have been added to the header section, but otherwise it’s exactly the same as the first example.

Happy Content

Though the header and footer will generally stay the same on all of a site’s pages, the main content will vary from page to page.

This HTML structure makes it easy to build templates for the different types of pages on your site (single posts, archives, etc.) because now you only need to focus on what goes inside the <main> element.

This will be even more useful when you convert the HTML into a WordPress theme. A future post will discuss how to save a massive amount of time building templates for WordPress using structured HTML like this.

Stylin’

This simple structure is perfect for styling with CSS as well. By using meaningful tags like <header> and <footer> instead of <div> tags, we can easily target the primary sections of the page.

/* Header styles */
body > header { }

/* Main Content styles */
main { }

/* Footer styles */
body > footer { }

The body > header and body > footer selectors target only the top-level <header> and <footer> elements so the elements don’t need attributes (ID, class names, etc.) that would only add noise to the HTML.

Also, as there can only be one <main> element on a page, the selector is incredibly simple.

Simple HTML = Simple CSS.

No ID, No Problem

You may notice that some elements, such as the page’s primary navigation, do have addtional attributes.

<nav class="pri">
    <!-- Primary Navigation -->
</nav>

A class name is added to these elements for flexibility. While there should only be one top-level <header> and <footer> element in a page, there may be multiple navigation elements in the header (secondary navigation, etc.).

By adding the pri (as in primary) class to this nav element, we can easily target and style the page’s primary navigation in the header:

/* Primary Navigation styles */
body > header > nav.pri { }

But then, why use a class name when we could give the element an ID and target it directly?

<!-- Using ID attribute instead of class attribute -->
<nav id="nav-pri">
    <!-- Primary Navigation -->
</nav>

Targeting this element in CSS would be straightforward:

/* Primary Navigation (using ID selector) */
#nav-pri { }

In a word: flexibility.

IDs can only be used once per page, so all style rules set using the #nav-pri selector can only affect a single element on the page.

By Contrast, a class name can be added to multiple elements on a page. Therefore, using a class name allows you to set baseline styles common to all primary navigation elements on the page.

/* Baseline primary navigation styles */
nav.pri { }

Targeting specific navigation elements on the page is also possible by using selectors with more specificity.

/* Primary Navigation in header */
body > header > nav.pri { }

Of course, you can also an ID attribute in addition to a class name.

<nav id="nav-pri" class="pri">
    <!-- Primary Navigation -->
</nav>

This would allow you to augment the baseline styles for a specific element regardless of its position on the page.

/* Baseline primary navigation styles */
nav.pri { }

/* Specific navigation element */
#nav-pri { }

However, with a good document structure the results are the same in both examples, making the ID attribute unnecessary and redundant.

Pro tip: Start with class names and add IDs only when necessary.

I’m on board, what’s next?

Now that you have a strong foundation for BCD, it’s time bring in the design! In the next post we’ll use CSS to transfer our design from Photoshop to an actual web page.

Resources

  • HTML5 Doctor — The latest and greatest iteration of HTML makes great strides toward a semantic (meaningful) internet. Check out this site for tutorials and articles on how you can add meaning to your site’s content through code.
  • The <main> element — There can be only one! (and that’s a good thing)
  • Redesigning Archetyped — Archetyped is being redesigned from the ground-up. Read about the design from the beginning.