4.2: Using structure tags to control space
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 minimum screen size in common use, or
- the width of paper used to print web pages
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:
- computer screens, ranging from small netbooks to giant cinema displays
- tablet computers such as the iPad, Nook, Kindle or Android
- smart phones in various configurations
‘Browser safe area’ for the lowest common screen size
- The smallest screen size sold today is 1024 pixels wide by 768 pixels tall.
- A “safe area” for this screen would be something smaller than 1024x768.
- Remember that Macintosh and Windows computers have menu bars top or bottom and other overhead that takes up screen space.
- A totally safe area for your web page would be 800 pixels by 600 pixels.
Browser safe area for the laptop world
- Today, most computer screens fit the proportion of the high-definition television screen, 16:9, or 1280px by 720px.
- A common size for laptop screens is 1280px by 800px to provide for menu bars above and below the HDTV area.
- Many websites today are designed for this larger screen, with page widths of 1000-1200px.
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:
- Graphics that force readers to scroll horizontally and vertically to see the whole thing are amateurish and inconvenient.
- Requiring readers to scroll in two directions is especially inconsiderate.
The diagram above shows how the page structure translates into HTML code. Here is what it all means:
<div id="wrapper">element will set the overall width and placement of your page within the browser window. Note that the ending tag
</div> <!-- #wrapper -->is the last thing before the ending body tag
</body>. The comment
<!-- #wrapper -->tells you which div tag you are closing. That will save you confusion later on.
<header></header>tags define the page header, the main identifier of your website. The header also can contain the standard navigation and perhaps a search box.
- The two side-by-side elements,
<aside></aside>use the CSS float property to place them next to each other.
<div class="clear"></div>is a clearing div element. It clears the float property from the main and aside elements.
<footer></footer>tags define the bottom element of the page. This is the place for provenance, the who, what, when and where of the website.
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:
- Click and drag across the basic setup below to select it, then copy.
- On your index.html page, paste the setup right after the opening
- Scroll down to the content you created in Chapters 1 and 2.
- Select your content and cut it (control-x Windows or command-x Mac).
- Scroll back up and find your main content element:
<main> (main content) </main>
- Delete the words “(main content)” and paste in your content
- 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 -->