Page Types and Layouts:

Page Size

Should the GB site pages be fixed width or resizable?

Designing for the web has many elements to be taken into consideration, one of the most significant is that the Web lacks a standard page size. The lack of a standard page size is due to several elements. First, the size of a page is potentially scrollable infinitely in both vertical and horizontal directions (I wonder if folks from the east as in Asia and aren't so culturally indoctrinated to the western codex have an easier time scrolling horizontally). Second, it is difficult to estimate the user's screen size which may vary from 640 x 480, to 1600 x 1200 pixels. Then there is the increasing use of wireless devices such as cell phones and PDA's for viewing Internet content. Then there are the various options whereby the user may set the browser chrome according to their own preference, which eats up additional pixels. The key once again for the designer then is to size the page to fit the purpose and the content of the site in question. The GB site will support a fair amount of content and pages should not distort terribly if made to resize so they will stretch and shrink fit the available window size of the user. I would make any image files a fixed size, possibly place certain categories of information in tables, but allow the tables and other text to resize in the browser window.

10 Fundamentals of Web Design Another top 10 but, from the Visual Logician Patrick Lynch. Scroll down to point 2, just below the "webfold" and find some good tips about the issue of Web "pages", (screens).

The Splash Screen Debate

Flash, The Nielsen Report. Web Guru Jacob Nielsen feels strong about this one.

Flash, A more inclusive perspective presented with a lovely Web layout from the guys at Yale.

Now that we've seen that let's consider.....should the GB site have a Splash Screen?

the AdvWeb course participants collectively agreed on the purpose of the GB site: to sell homes. This site will be largely information and e-commerce based, and will most likely be accessed by beginner to mid-level users. All indicators seem to point to the conclusion that a splash page is unnecessary. It seems a splash page would likely be annoying to the users of the GB site as it will slow down the users access to the information which we are trying to get them to access within a matter of 2 to 3 clicks. The home page for this site will set the visual and navigational tone for the site, serve as a strong visual anchor, and most likely be satisfying as the entry point for both the first time and repeat user.

---

The "4 Schools of Web Design"

Text Design

This is the simplest school of thought when it comes to Web design as it suggests a "text-first", or what some paraphrase as a "content-first" approach, and in doing so confers that text is the most significant design element on the page. There is however a substantial argument to be made regarding the use of visuals to convey content. (You know the saying "a picture's worth a thousand words", which when applied to the Web makes the experience akin to a well designed magazine).

The upside:

• Text-first design favors textual communication over visual communication using minimal graphics.
• Text-first design focuses on color and type choices therefore, text-first pages load fast.
• Text-first pages are easily converted to different viewing environments and most easily accommodate PDA's and cell-phone usage of the Web.

  So...use this approach where download speed and display flexibility are paramount.

The downside:

• Text-first design when implemented in a traditional hypertext fashion tends to favor somewhat unstructured or contextual links, interspersed within content as opposed to a graphic form of navigation, which can be confusing for the user.
• Text-first design can lead to rather dismal looking Web pages, as those with limited typographic backgrounds have difficulty designing compelling pages (this is after all, a highly visual medium with a basis in light).

Jakob Nielsen's useit.com website provides a premeir example of a text-first approach to design on the web. Nielsen presents numerous articles and statistics which support the usability of this approach to Web design. Try Why No Graphics or, the article on The Difference Between Print Design and Web Design.

Metaphor and Thematic Design

This approach is highly visual and posits that the content of the site should look similar to what it represents.

The upside:

• The link between the site's content and "real-world" experiences make it highly memorable.
  
• By relying on metaphor's of " "real-world" objects the user may find the site easy to navigate.

The downside:

• Some user's might not be able to decipher the "real-world" metaphor.
• Expert users and frequent visitors may find the metaphor oriented interface limiting.
• The metaphor design sites tend to be slow to load due to heavy reliance on visuals.

Check out the Right Side of the Big House Communications brain for a metaphor design approach to Web design.

GUI-Oriented Design

This is a very popular school of Web design as GUI sites act like familiar software interfaces.

The upside:

• User's have come to understand the Graphic User Interface approach to software and can translate this knowledge quite readily to the use of Web menus, text fields, & buttons.
• Web designer's can capitalize on this acquired knowledge to increase usability.

The downside:

• GUI design may limit the design possibilities to simple use of color and thematic buttons.

E-commerce websites commonly feature the GUI approach to web design. If you're viewing this via the internet you may already be familiar the the GUI design utilized by .com'ers Amazon.com, and Continental Airlines. Here's a couple additional of simple and well designed GUI sites, Sable Technologies and Cue Datawest, and investment banking company.

Unconventional Design

Unconventional Design favors creativity, unpredictability, and randomness in its approach to web design. This approach can provide the designer an opportunity to experiment, explore, and test the limits of their ingenuity and creativity with the Web medium. However, this is the most dangerous school of Web design as the unconventional approach counters the notion of usability and consistency.

The upside:

• If the user experience is fun and provides a motivating payoff, they may stick around longer.
• The unconventional approach is most appropriate for those in the design and entertainment communities.

The downside:

• If the user has to learn a new interface, they may "head south".
• If the site is a task driven site, the user will most likely be annoyed by the lack of a conventional interface.

Here's a great example of unconventional design found at the fabulous kid's illustrator J. Otto Siebold's website, for all of us that remain kid's at heart. Even if you don't have an inkling for Flash stuff, he's one of the best colorists on the web. I find the ingenuity, beauty, visual intelligence and just plain fun to be highly motivating in following the bubblesoap gang through and incredibly deep site.

---

More good tips on Web Design and Usability issues

Ask Tog Bruce "Tog" Tognazzini is one of the leaders in interface design, and his site is considered by many to be the Bible of good interface design, and he's dedicated a fair portion of it to Web design issues. This site could be considered essential reading for anyone designing Web pages or sites. There's a lot of content so you might consider First Principles in Design as a starting point. It contains the basic rules of designing computer interfaces (including Web interfaces) for humans. Website Nav Bars is a Q&A in which Tog discusses the pros and cons of different kinds of navigation bars.

Top Ten Mistakes in Web Design An oldie, but a steady reminder discussing some common problems in Web design and how to avoid them.

Yale Manual of Style The primary focus of the Yale Manual of Style is on graphic page design for effective communication. A good reference as the manual has good layout and is readily accessible. Give it a look see.

---