A Web Design Lecture by Steven Choy
Overview: What is page layout? - Page layout is related to web page size and screen resolution - Fixed page layout or fluid page layouts? - Some other options in page layouts - Organizing page content - Table-based page layouts - CSS-based page layouts - Using grids in page layouts - Using color - Typography: typeface and fonts - Other elements in layout design
What is page layout?
- Page layout refers to how the navigation and content are organized on a webpage.
- When you’re developing the structure of a page, you must first know all the pieces of content to be included on the page.
- You’ve already identified all the content and assigned each piece to a designated page during the Analysis and Planning stage.
- Now you need to prioritize each piece of content by marking it as ‘High’, ‘Medium’ or ‘Low’.
- This will guide you later on when you start sketching the page layouts and positioning the contents on the layout.
Example: Page elements and their priority in a home page design
Page layout is related to web page size and screen resolution
- Screen resolution statistics (browser display statistics)
| Date | Higher | 1024x768 | 800x600 | 640x480 | Unknown |
|---|
| January 2009 | 57% | 36% | 4% | 0% | 3% |
| January 2008 | 38% | 48% | 8% | 0% | 6% |
| January 2007 | 26% | 54% | 14% | 0% | 6% |
| January 2006 | 17% | 57% | 20% | 0% | 6% |
| January 2005 | 12% | 53% | 30% | 0% | 5% |
| January 2004 | 10% | 47% | 37% | 1% | 5% |
| January 2003 | 6% | 40% | 47% | 2% | 5% |
| January 2002 | 6% | 34% | 52% | 3% | 5% |
| January 2001 | 5% | 29% | 55% | 6% | 5% |
| January 2000 | 4% | 25% | 56% | 11% | 4% |
Optimize for 1024x768, which is currently the most widely used screen size. Of course, the general guideline is to optimize for your target audience's most common resolution, so the size will change in the future. It might even be a different size now, if, say, you're designing an intranet for a company that gives all employees big monitors.
Do not design solely for a specific monitor size because screen sizes vary among users. Window size variability is even greater, since users don't always maximize their browsers (especially if they have large screens).
- If you go for a fixed width, make sure there are no horizontal scrollbars in a resolution of 1024 pixels wide.
- Put the most important content and action buttons above the page fold in 768 pixels (or less because of browser bar and its toolbar).
Fixed page layout or fluid page layouts?
- Fluid (some people call it Liquid) Website Layouts
- Fixed Web Page Design - Pros and Cons (for class discussion)
- Fluid Web Page Design - Pros and cons (for class discussion)
Some other options in page layouts
- Elastic Design - It works by sizing all elements with em’s.
“A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size. Because font sizes vary, the em is a relative unit that responds to users’ text-size preferences.” (
Patrick Griffiths, A List Apart)
- Float layout - An alternative to the standard 'fixed width' or 'liquid layout' designs
Organizing page content
Table-based page layouts
- Table-based page layouts uses HTML tables to create web page layouts.
- Tables are mainly used to present tabular data, or data made up of rows and columns of repeating elements, such as a bus schedule or a price list.
- However, Web designers were quick to discover that they can also be used to create page layouts, since the rows and columns of a table can effectively act as container boxes for page content.
- Example
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3" height="120px">....</td>
</tr>
<tr>
<td class="menu" valign="top">...</td>
<td class="content" valign="top">...</td>
<td class="aSide" valign="top">...</td>
</tr>
<tr>
<td colspan="3">...</td>
</tr>
</table>
- Class discussion: What are disadvantages of using table-based layouts in making web pages?
CSS-based page layouts
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="aSide">...</div>
<div id="footer">...</div>
- Grids perform three important functions in websites.
- First, they give your design structure and balance.
- Second, they create consistency from page to page.
- Third, sites that are designed to a grid will be much easier to code.
- Some examples of grid-based CSS framework
Using color
- Web pages are designed in color, but if you don't understand how color works, you could end up with some really ugly pages. Understanding the basics of color theory will help you create better Web pages.
- The color wheel is composed of three primary, three secondary and six tertiary colors.
- An analogous color scheme is an almost monochromic color scheme which is created using colors that are very close to each other on the color wheel.
- Complementary Colors - Colors that are opposite each other on the color wheel.
- The triad color scheme is a color scheme that works on three colors that are equal distance apart on the color wheel.
- One reason why color is so important a choice for a Web site is that colors are suggestive of emotions and many have a cultural significance.
- Choosing the right color scheme for your web Site is a combination of determining what colors will carry your desired message to your site visitors and assembling a small palette of colors designed around this color to be your color scheme.
- Reference: http://www.worqx.com/color/index.htm
- Online tool: http://colorschemedesigner.com/
Typography: typeface and fonts
- Typeface is a design for the characters
- Examples: Arial is a typeface
- Typefaces come in different size (12pt or 8pt) and varieties (bold, italic). A font is the name for a specific use of a typeface.
- Example: Arial Bold 9pt is a font
- Using fonts on the Web
- Size: make sure the text is large enough for your target audience to read
- Contrast: red text on a black background is hard to read, while dark text on a light background is easier for most people to read
- Leading: the space between lines
- You can specify the typeface to use. However, because you don't actually send the font with the HTML page, the visitor needs to have the font installed on their computer.
- Reference: A guide to Web typography - http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
- Reference: http://webtypography.net/
- Online tool: http://www.typetester.org/
Other elements in layout design
- Uses of lines and shapes
- Uses of gradients and texture
- Uses of graphics/icons/images
- Size and contrast of elements
Thanks for Reading
If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.
If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.
