Week 03

Week 03– Topics

Navigation design “rules”
Interface Design Conventions
Design process
Web critiques
Web standards
Web accessibility
Page Layout
The short history
What is “presentational HTML markup” and what does the “separation of presentation and content” mean?
Moving from table-based layouts to CSS-based layouts
What does Absolute Positioning mean?
The advantages and disadvantages of using AP elements
CSS-Based Layouts
Quiz 2

Assignment 3

Here are your assignments (due next week by noon, Tuesday, May 10).

  1. Read ALL of the class notes for Week 03. (yes, you already know this!)
  2. Rules For a Perfect Website Navigation
  3. Breadcrumbs in Web Design
  4. Horizontal Navigation Menus: Trends, Patterns, and Best Practices
  5. Six Phases of the Web Design and Development Process
  6. Jeffrey Zeldman: King of Web Standards
  7. Web Standards Checklist

Please watch the following videos before Tuesday, May 10.

  1. Core Process Overview
  2. What is Business Strategy?
  3. What does accessibility mean?
  4. How does accessibility help your users?
  5. CSS Based Layouts: One Column Layouts Part One
  6. CSS Based Layouts: One Column Layouts Part Two

Be sure that you have viewed the CSS Based Layouts: One Column Layouts Parts 1 & 2 before working on this exercise. For those of you who need to review CSS Based Layouts, or who are new to it, these videos will be very helpful. For this exercise we will use the One Column Fixed layout located here:

One of the ways to follow Web Standards and make your website accessible to more people is to build your navigation as a list using the list tags:

Using the HTML and CSS from the One Column Fixed layout I’d like you to re-create the page by following the steps below:

  1. Start out with a correct file structure by creating a “final_web” and “source_files” folder. See Week 01 notes if you need to review.
  2. Create an index.html page and copy and paste the HTML from the One Column Fixed layout to your index.html page. (Remember to paste the code between the opening and closing <body> tags.)
  3. Create a CSS file and name it “styles.css.” (Remember to choose the correct Page Type in Dreamweaver so you don’t create another HTML page.)
  4. Copy and paste the CSS from the One Column Fixed layout to your “styles.css” file.
  5. Add the link to your CSS file in your HTML page by pasting the following into the head of the HTML:
    <link href=”styles.css” rel=”stylesheet” type=”text/css” />
  6. Your page should now look like the example of the One Column Fixed layout. For the final step I’d like you to modify the content (especially the navigation) and modify the CSS to create a different look and feel.

This exercise is for your own practice. Be creative and experiment.

When you have completed the assignment, please upload the project folder as a zipped file to the drop box located in the smconline.org site. Please be sure to include your last name in the name of the file when you upload it to the drop box. Please name your file: assignment3_yourlastname. Please upload your zipfile to the “Dropbox” on smconline.org site by noon on Tuesday, May 10.

After getting my feedback on your midterm project, work on the design comp (all 5 pages) for your midterm project. I’d like you to post images of your midterm project comp to your WordPress blog, The design comp is due  by noon on Friday, May 6. I will post my feedback on your WordPress blog.


Complete the Website Critique assignment I outlined in the notes below. This will be posted to the site indicated in the notes.

Answer the following questions from our readings and post the answers  to your WordPress blog

  1. What are the 3 main rules outlined in the reading “Rules for a Perfect Website Navigation.”
  2. When should you use breadcrumb navigation, and when shouldn’t you use breadcrumb navigation.
  3. What is mean by the navigational “rule”–  Clearly distinguish primary and secondary sections. Give an example.
  4. What are the 4 things to consider in the Information Gathering  Phase as outlined in our reading “6 Phases of the Web Site Design and Development Process.”
  5. From our reading “34 Places to Get Design Inspiration – Online and Off,” pick the place that has the most potential to inspire you and tell me why you’ve chosen this as  a place to get inspiration.
  6. What are the advantages of Web Standards as discussed in the article, “Jeffrey Zeldman: King of Web Standards.”
  7. Name 5 of the 10 “accessibility for user” items  listed in the Web Standards checklist.

Click here to take Quiz 2
Complete Quiz 2 by noon on Tuesday, May 10.


Navigation design is very important because all web sites need navigation, and if you can design successful navigation, your site will make for a good user-experience. Navigation design is one of the main distinctions between print and web design. Good web designers must know how to design successful navigational interfaces for the web.

So how do you start when thinking about designing a navigational system?

There are three basic questions a well-designed navigational system must answer.
Navigation should answer these questions:

1) Where am I? (Present)
2) Where else can I go? (Future)
3) Where have I been? (Past)

A good way to remember these 3 important questions is to think about the importance of answering where the user is in the Present, Future, and Past.

Also of importance are the additional questions below:

What’s here?
How do I go forward?
How do I get back?

In addition to answering the basic questions outlined above, a well-designed navigational system must also serve the goals of the site. Examples of specific navigation challenges based on the goals of the site could be things like:

How do I place an order?
How do I search the site?
How do I contact customer service?
How do donate money to this organization?

The more versatile the navigation, the more successful it will be because it will serve a variety of users.

As a designer you must ask yourself: What does the user who visits the site want?

Examples of what a user may want:
To find information
To publish something
To purchase something
To interact with someone
To read what someone else thinks about something

As a designer you must ask yourself: What does stakeholder (client) of the site want? (And of course, you should ask a lot of questions so you understand what your client wants for the site.

Examples of what a client (stakeholder) may want:
To share information
To make money
To get feedback
To teach something

It’s important to explore these questions before starting to design the navigation for your site.

Another way to think about navigation is the discussion from our readings for this week

Wayfinding has four core components:

  1. Orientation: Where am I am right now?
  2. Route decisions: Can I find the way to where I want to go?
  3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?
  4. Closure: Can I recognize that I have arrived in the right place?

Consistency is the golden rule of interface design and wayfinding, but there is a paradox at the heart of consistency: if everything looks the same, there are no edges. How can you tell where you are or when you have moved from one space to another? A well-designed site navigation system is built on a consistent page grid, terminology, and navigation links, but it also incorporates the visual flexibility to create identifiable regions and edges within the larger space.

Navigation design “rules”

The following are general rules to follow when designing navigation in a web site. They are only rules, and as the saying goes, rules are made to be broken– just have a good reason to break them!


People are very habitual, and it’s therefore very important to keep navigational elements the same throughout a web site. This is generally referred to as “persistent navigation,” keeping your navigation consistent from page to page. Navigation located at the footer of a web page is common and can act as persistent navigation for a site.

You want people to concentrate on your content, and they won’t if they have to figure out a different navigation system on every page. This is true for:

  • Placement on the page. Keep similar functions in the same place on the page. E.g. if you have a “home page” link on all your pages, put that link in the same place on every page.
  • Visual design. Use consistent names, icons, or other visual cues for navigation throughout the site. E.g. the icon for the “home page” link should be the same everywhere.

Note: Some people incorrectly create navigation systems that drop the current page link from the navigation bar. This may seem “efficient” since there is no reason to have a link to the page you are already on. But this approach violates the principle of consistency, since the links in the navigation bar would be in a different place on every page. It also violates the rule below for indicating the current page, because a better approach is to highlight the current page in the navigation bar (while making the link inactive).

7 +/- 2 rule
  • In general, people have a hard time keeping track of more than 7 items (plus or minus 2) at a time. This means that 7 is a good number of navigational links but you can have anywhere between 5-9 navigational links on a page, people may get confused or have a hard time understanding the navigation. On the other hand, you often want to provide more than 7 links, which leads to:
Group Navigation

If you have a lot of links on a page, try organizing them into related sets of 7+-2. For example, a food site could group links to fruits, vegetables, herbs, fish, poultry, and red meats together, while grouping links to nutrition info, health tips, recipes, meal planning, and cutlery in a different location on the page. Some ways to group navigational elements are:

  • Proximity. Place similar navigational elements together on the page, separated from other groups.
  • Style. Give each group of navigational elements its own visual design.
Keep it simple

Don’t make people work hard to get where they want to go. The harder it is, the less people will use the navigation. Some things to avoid:

  • Excessive scrolling. Don’t make users scroll all over the page to get to links. Keep in mind the typical size of your audience’s screen. If the user needs to scroll, make them scroll only in one direction–vertical or horizontal.
  • Excessive hierarchy. Keep the number of levels of hierarchy to a minimum. Try to make any page on the site available within 2 clicks at a maximum.
Where are we?

Always identify the name or function of the current page. This can be done by highlighting the navigation to indicate the current page. The name of the page should also be incorporated into the design layout. In a typical page, the user should be able to see where they are by the navigation bar and by a page heading.

If the site is complex, it’s important to indicate where the current page is in relation to the rest of the site. If possible, combine your navigation with a visual layout so as to indicate the current location. This is called the trail of bread crumbs or breadcrumbing. E.g. you could have a navigation bar that shows the path to the page such as: “home>products>vacuum cleaners”, where both “home” and “products” are active links to their respective pages in the hierarchy. Not only does this indicate to the user where they are, but it allows them to skip to any level of the hierarchy, eliminating the need to see the intermediate pages.

Next versus numbered pages. When the user can navigate to additional pages you generally want to use numbered pages versus a “next” button. Or both as is often the case on such sites as the New York Times.

Avoid “Hub and spokes.” When you can’t see the all the navigation or categories again without going back to the main page, this is often referred to as “Hub and spokes” The user must return to the “hub” to find other choices. As a designer you want to avoid this and develop a more consistent navigation scheme.

Multiple Navigation

There is no single way that users will navigate through the site. People have different goals, search methodologies, attentiveness, previous knowledge, and ways of looking at the content of the site. Even gender can affect navigation.

  • Provide ways for people to traverse across the hierarchy to short-circuit the formal organization. For example, if there is a contact page on a site, it’s useful to have a link to it on every page. This way, the user can navigate across directly to the contact page, OR navigate up to home and then down to the contact page.
  • Sequential vs. directed. Think of users as if they are finding their way within the content. This way-finding sometimes involves users who want to be lead through the information, and this involves a sequential organization (e.g. start here, go here next). Other times, the user will be looking for specific content, and they need a logical and categorical system that enables them to find what they need. Try to provide navigation that satifies both, or provide multiple navigation systems
  • Search vs. grazing. Sometimes people will be searching for specific information, other times they will graze and meander on the site until the find something interesting. Your navigation should accommodate both techniques, and again, sometimes more than one navigation system is needed.
  • Draw people to the content with different techniques: pull quotes, side bars, contextual links, short summaries or outlines. Use links to turn these into alternate navigation systems.

Hide versus show sub-nav

  • Use sub-headings as part of the primary navigation
  • Rollovers or dropdown menus to reveal sub-navigation

Depending on the amount of content and number of subpages underneath the main sections of the web site, the navigation design should reveal the subnavigation in some way.

Different types of navigational graphics and indicators
Here are some of the graphics and indicators a designer can use to create navigation. Some of the options are:

CSS Rollover
Dropdown Menu
Image maps

Other Issues that impact the way you design navigation
  • Site goals: The goals of the site will greatly affect design of the site and the navigational system. An e-commerce site will have a different type of navigation than a site for a non-profit institution.
  • Information Architecture: You wouldn’t build a house without plans, you cannot build a website without them either. And until you have the plan (commonly referred to as the “sitemap”) you cannot begin designing your site. The sitemap functions as the “blueprint” for the structure of your site.
  • Design comps: Developing a “look and feel” requires creating a design comp for how your site is going to look. Creating the look and feel first will be important and will influence the design of your navigation.
  • Accessibility issues: Every website should have a plan on how to be accessible to as many people as possible. These accessibility issues with also impact the design of your site and your navigation.
  • Usability issues: After you have designed the navigation you’ll need to test it to see how successfully it meets the goals of the site and whether the site and the navigation what is commonly called “user friendly.”
Interface Design Conventions

Figure 4.17 — A canonical page layout. Not every page includes every element shown here.

Reading Assignment: Navigation

Rules For a Perfect Website Navigation
Breadcrumbs in Web Design
Horizontal Navigation Menus: Trends, Patterns, and Best Practices

Design process

Developing a methodology for designing web sites.

There is a definite process for designing web sites. The web design process is similar to print design but is different in some very distinct ways. Organizing and designing navigation is one of the most distinct differences between print and web design. As a designer you need to be conscious of the user experience and design with that in mind. Below I have outlined the design process for smaller, personal projects and then I detail a more professional approach called the “Core Process.” For those of you how are interested in working for a design studio or agency, it will be a benefit to understand this more complex process. Most larger firms use some variation of the Core Process as outlined by lynda.com and Kelly Goto.

It’s useful to develop your own standard methodology for designing web sites. This helps you be efficient, and able to produce consistently good work even when inspiration doesn’t come. There are many approaches to designing a web site. The following is one approach:

  1. Project Research.
    The beginning of the design process is the research phase. In this phase, the designer immerses themselves in the project requirements, client needs, and the fields related to the web site. 

    1. Define the client goals and requirements
    2. Define the audience
    3. Define the scope of the web site
    4. Compare and contrast existing web sites with similar characteristics
    5. Educate yourself about the field(s) related to the web site
    6. Define the attitude of the web site and organization/brand it represents
      Read : Client Survey
      Read : Communication Brief

  2. Information Design.
    Before visual design can begin, it’s important to understand how the material on the site is going to be organized. This requires study and planning in the following ways: 

    1. Define the most clear organization of content, featuring the most important categories and achieving the requirements defined in the research phase. Keep in mind the 7+-2 rule discussed previously.
    2. Consolidate similar sets of content under one category
    3. Don’t assume that the client’s current organization is the best one for the web
    4. Consider how the categories relate in terms of importance and quantity of content
    5. Create sub-categories if necessary, but keep the levels of hierarchy to a minimum
    6. Create a sitemap and, if needed, wireframes.

  3. Design Research.
    Before you start the formal visual design, collect and develop a broad range of design elements to work with and gain inspiration from. The idea is to have more than enough material to experiment and sketch with. 

    1. Collect magazines, web sites, and other materials that have great design ideas. They should be both related and unrelated to the field of the web site. Use these design concepts for inspiration.
    2. Get photographs/drawings/etc. of products or concepts used on the site
    3. Based on your project research, develop several themes, concepts and rules that will inspire and constrain your design choices.
    4. Brainstorm design elements
      1. Sketch design elements and layouts
      2. Gather or create logos, shapes, forms, and other graphic elements that can be used in the design
      3. Develop several possible color palettes

  4. “Sketch” page designs.
    Experiment with elements you’ve gathered and create several different sketches of the site
    home page. 

    1. Try pencil and paper as well as Photoshop/Illustrator. Don’t use Dreamweaver–it’s not meant to be used as a web design tool.
    2. Select a major theme or concept for the home page, considering your research and information design — visual
      style, audience, attitude, site goals, navigation, and categories
    3. Consider how the home page will relate to the sub-pages
    4. Tie all the elements together on the page
    5. Don’t incorporate every element and idea — be willing to throw out good ideas that don’t fit.
    6. Remember the basic principles of design, including proximity, alignment, repetition, and contrast
    7. Cut, refine, simplify, and clarify your designs

  5. Produce the home page.
    Select your best design sketch, and create a formal version in Photoshop. 

    1. Select the design that best communicates the attitude and goals defined in the project research phase
    2. Refine the page composition and color palette as you create the new version
    3. Consider how the page will be sliced

  6. Produce the sub-pages. Incorporate some major design elements into the sub-pages designs.
    1. Sketch several sub-page designs, using important design elements from the home page
    2. Modify home page elements to fit the sub-page — reduce, change color, rotate, stretch, cut up, etc.
    3. Make the navigation clear, functional, and out of the way of the content. Consider making it smaller (navigation is often too large)
    4. In most cases, content should dominate sub-pages more than on the home page
    5. Select the best designs and implement them in Photoshop.
  7. Slice the images and build the pages in Dreamweaver. Building the pages in Dreamweaver is the last step of the process.
    1. After building the design comps in Photoshop, slice the images and optimize them for the web.
    2. Set up a proper file structure. Create an folder named “images” and place your optimized images in this folder.
    3. Create the index.html page in Dreamweaver.
    4. Create the rest of the page using the index.html file. You can use the index.html and do a “save as” to create the remaining pages.
    5. Use the navigation you created in the index.html file for the additional pages. (Once you’ve created your index.html page, you shouldn’t need to re-create pages from scratch.

Learn about a more in-depth design process for the web called the Core Process by the author of ReDesign 2.0, Kelly Goto.

Core Process

Phase 1: Define the project
Phase 2:
Develop the site structure
Phase 3:
Design the visual interface
Phase 4:
Build and integrate
Phase 5:
Launch and beyond

Core process overview
Web ReDesign: Strategies for Success | by Kelly Goto

View this entire course and more in the lynda.com Online Training Library®.
What is business strategy?
Web Site Strategy and Planning | by Jen Kramer

View this entire course and more in the lynda.com Online Training Library®.
Reading Assignment: Design Process

Six Phases of the Web Design and Development Process
34 Places to Get Design Inspiration

Web Critiques

Part of your assignment for next week will be to critique your fellow students’ midterm projects. One of the best ways to learn more about web design is to look at as much web work as you possibly can. By analyzing others’ work you begin to understand more fully what makes a web site effective and well-designed. Remember also that different types of web sites have different goals. What make a good web site?

Seven Criteria for discussion

These are the seven general criteria we will talk about in this class. It’s not enough to determine a web site “good” or “bad.” What is it about the site that makes it more effective or less effective? Below are seven different criteria to look at when you are evaluating the design of a web site.

  • Look & feel / Attitude of site
    Does the design or “look and feel” of the site represent the attitude of the company/client?
  • Use of color
    Does the use of color effectively communicate the attitude and “look and feel?” Using red and black for the color palette for a web site communicates something different than using a light blue and white color palette.
  • Composition / layout
    Does the layout of the site effectively accommodate the content? Is there room for text and images? Is the navigation in an easily accessible location?
  • Typography
    Is the type on the site readable? Is there a good mix of font size and font weight to communicate hierarchy for the content?
  • Content
    Is the content well-written? Is there HTML content on the site. (You want to avoid creating web pages where text is inserted as image files.)
  • User experience
    Is the site easy to navigate? Is it east to find content on the site?
  • Navigation
    Is the navigation well-organized. Is the navigation consistent from page to page?
Website Critique Assignment

I’d like you to take a look at a website critique on this site for an example of how to critique web design. Here is the site:
Please Critique Me

Example of a critique I’d like you to review:
Web design critique for Kirsty Burgoine
Critic: Grace Smith

Please Critique Me Guidelines

Our critics promise to:

  • Be specific in our likes/dislikes.
  • Provide educated reasoning to back up each of our comments.
  • Lead into design alternatives if necessary.
  • Compare the design to others for reinforcement.
  • Be firm and honest but not a jackhole when giving a negative critique.
  • If the design is web oriented, we’ll look for basic usability faults throughout the design.
  • Look for use or the lack of design elements and principles:contrast, repetition, alignment, proximity, color, unity & balance.
  • Respect the designer and their work.
  • Don’t get lost in a negative critique. Try to find positives wherever possible.
  • Great article from Jared Spool – What Goes Into a Well-Done Critique
I would like you to critique one of the following sites

Based on what you’re learned so far, post a critique to one of the last four posts located at the link below. Please review the Seven Criteria I outlined above and The Please Critique me guidelines for ideas about what to focus on in your critique:

Suggested Reading:

Critique a Web Page in 30 Seconds or Less
Five second test

Web Standards

Web standards is a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

Many interdependent standards and specifications, some of which govern aspects of the Internet, not just the World Wide Web, directly or indirectly affect the development and administration of web sites and web services. Considerations include the interoperability, accessibility and usability of web pages and web sites. (source: wikipedia.org)

Reading Assignment: Web Standards

Jeffrey Zeldman: King of Web Standards
Web Standards Checklist

Web Accessibility
What does accessibility mean?
Web Accessibility Principles | by Zoe Gillenwater

View this entire Dreamweaver course and more in the lynda.com Online Training Library®.
How does accessibility help your users?
Web Accessibility Principles | by Zoe Gillenwater

View this entire Dreamweaver course and more in the lynda.com Online Training Library®.
Page Layout

Learning how to build a CSS-based layout is one of the biggest challenges for a web designer.

The short history

Over the years, web page layout has evolved from the early years of table-based layouts to the current practice of CSS-based layouts. You may still encounter web pages built using a table-based structure. (Craigslist is an example). In the nineties, and even in the early 2000s, many browsers did not support CSS-based layout because they did not offer full support for CSS.

“Although the CSS1 specification was completed in 1996 and Microsoft’s Internet Explorer 3 was released in that year featuring some limited support for CSS, it would be more than three years before any web browser achieved near-full implementation of the specification. Internet Explorer 5.0 for the Macintosh, shipped in March 2000, was the first browser to have full (better than 99 percent) CSS1 support. Other browsers followed soon afterwards, and many of them additionally implemented parts of CSS2.

Even though early browsers such as Internet Explorer 3 and 4, and Netscape 4.x had support for CSS, it was typically incomplete and afflicted with serious bugs. This was a serious obstacle for the adoption of CSS.” Wikipedia

Since the late 1990s when Cascading Style Sheets were beginning to work in most browsers, web authors have been encouraged to avoid what’s called the use of “presentational HTML markup” with a move towards the separation of presentation and content.

What is “presentational HTML markup” and what does the “separation of presentation and content” mean?

Presentational HTML markup basically means defining all your positioning and styling within the HTML page itself. A web page built with a table-based structure is an example of presentational HTML markup. Also, defining your styles “inline” — meaning, defining the styles within the HTML. For example, below is an inline HTML definition:

<font face="Arial" size="7">Welcome To My Homepage</font>

The big problem with presentational HTML markup is that making changes to the presentation (positioning and/or styling) of the content requires changing each and every web page within the site. In the example above, if I want to change the font face from “Arial” to “Times,” I need to change the code on each and every page of the site.

Can you imagine the time required to make this one change if the site is 100+ pages?

The separation of presentation and content solves the problems of presentational HTML markup. When I create my page layout, I can create an HTML pages containing all the CONTENT for my pages and I can create a separate CSS file containing all the PRESENTATION for my pages.  Instead of defining my styles inline, I  can use CSS to create my styles. Below is an example of a snippet of code for the content in the HTML:

<div id="header">Welcome To My Homepage</div>

And, if I defined the <div> tag in a separate CSS file as follows:

#header {

I will appreciate the advantage of separating my presentation from my content when I need to make a change. Using the example from above, I can change “Arial” to “Times” in the external CSS file and it will change the font-face defined in the div named “header” throughout the entire site. If I have an 100 page site, I don’t need to change each and every page! — I can change the definition of the font-face property in the CSS file for the site and because the CSS file is linked to each and every page (we’ll talk in more detail about this later), the font-face is changed throughout the site.

This is the power of separating presentation from content.

Further exploration: If you want to see examples of designers who have created completely different designs using the same content, see the CSS Zen Garden website. Every page on this site uses the same content — the same HTML code. These completely different designs are created entirely by the designer’s creation of an unique CSS file.

Moving from table-based layouts to CSS-based layouts

So if you want to try to limit the use of tables for the layout of your pages, how does a designer create a CSS-based layout?

In this class we’re going to discuss how to create page layouts using 2-column and 3-column structures (We’re going to talk about this next week)

What does Absolute Positioning mean?

Here’s the technical definition of absolute position:
“Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties.”

An AP element (absolutely positioned element) is an HTML page element—specifically, a div tag, or any other tag—that has an absolute position assigned to it. AP elements can contain text, images, or any other content that you can place in the body of an HTML document.

With Dreamweaver, you can use AP elements to lay out your page. You can place AP elements in front of and behind each other, hide some AP elements while showing others, and move AP elements across the screen. You can place a background image in one AP element, then place a second AP element, containing text with a transparent background, in front of that.

AP elements will usually be absolutely positioned div tags. (These are the kinds of AP elements Dreamweaver inserts by default. But remember, you can classify any HTML element (for example, an image) as an AP element by assigning an absolute position to it. All AP elements (not just absolutely positioned div tags) appear in the AP elements panel.

Note: I use the term AP elements, and AP divs interchangeably… some people also refer to them as Absolute Placement Objects.

The advantage of using AP elements

The advantage of using AP elements is it allows a designer to create a CSS-based layout easily. Working with a layout created with AP elements is easier than working with a more commonly used 2-column or 3-column CSS-based layout. A designer can easily move and position AP elements on the page, making the layout of the page less cumbersome than it can sometimes be building a 2-column or 3-column structure. Also, building a site using AP elements can be very useful when you are prototyping a website.

The disadvantage of using AP elements

Most current websites are built using CSS-based 2-column or 3-column structures. These layouts accommodate content without the page structure breaking down. The big disadvantage of a layout created with AP elements is that to accommodate more content, you wlll often need to go back into the CSS to resize elements. For some projects, particularly websites managed by the client, or managed with a Content Management System (CMS), using AP elements will be prohibitive.

That said, this is why starting with a 2-column and 3-column page layout is the preferred structure for professional web page layouts. (This doesn’t mean all websites have a traditional looking 2-column or 3-column structure but often this structure is the starting point for the building of the site.)

Suggested Reading

Why Use CSS based Layouts
CSS Layouts: 40 Tutorials, Tips, Demos and Best Practices

Please watch the following 2 videos

CSS Based Layouts – One Column Layouts – Part 1

CSS Based Layouts – One Column Layouts – Part 2


Next week we will discuss  the 2-column and 3-column layout in detail.


No comments yet.

Add Yours

  • Author Avatar


Comment Arrow

About Author


Instructor for Graphic Design 66