back to index page

Page Types and Layouts:

Applied to Greenbuilt Homes Website Issues

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:

The downside:

Jakob Nielsen's 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 downside:

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:

The downside:

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, 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:

The downside:

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.

back to top
back to index
contact the author