4.2: Using structure tags to control space

Browser safe areas

To determine the overall width of your website, consider what size screen you expect your audience to have. A few years ago, web designers assumed most people would have screens that were 1024 pixels wide (bottom). Today we can assume that most website visitors will have a wider screen, commonly 1280 pixels wide (top).

The browser-safe area

The Web Style Guide, in an earlier version, discussed the “browser safe area” for web page graphics. This was the area a visitor would see in the browser window without scrolling when the page opened. An analogy for this area is the newspaper phrase “above the fold.”

The browser safe area was determined by:

The Web Style Guide no longer includes this in its chapter on page design because web pages are viewed today on a variety of devices:

‘Browser safe area’ for the lowest common screen size

Browser safe area for the laptop world

You decide your safe area

For this class, design your pages for a 1280px by 800px screen. That would yield a comfortable page width of 1000px. You could go wider, but remember:

areas

The diagram above shows how the page structure translates into HTML code. Here is what it all means:

Complete the activity below, then in the next section you will style your divs on your CSS page.

ACTIVITY 4.2: THE BASIC SETUP

Using your text editor, open your index.html page and do the following:

  1. Click and drag across the basic setup below to select it, then copy.
  2. On your index.html page, paste the setup right after the opening <body> tag.
  3. Scroll down to the content you created in Chapters 1 and 2.
  4. Select your content and cut it (control-x Windows or command-x Mac).
  5. Scroll back up and find your main content element:
    <main>
    (main content)
    </main>
    
  6. Delete the words “(main content)” and paste in your content
  7. Save your work!

After you do this, you should see an immediate change in your index.html page. Try it!

Here is the setup:

<!-- BEGIN BASIC SETUP -->
<div id="wrapper">
<header>
    (header content)
</header>
<main>
    (main content)
</main>
<aside>
    (sidebar content)
</aside>
<div class="clear"></div>
<footer>
    (footer content)
</footer>
</div> <!-- #wrapper -->
<!-- END BASIC SETUP -->