return to davesite.com home
Confused about getting a
.com? Answers are here.

Dave's Web Design 
Tutorial & Guide: Tips and Tutorials

Web Design Guide: Tips and Tutorials

Design Chapter 01

Designing for the Digitized Web Canvas


I like to think of website design as like painting on a canvas. You're given a blank page, and you can use your imagination to fill it with whatever you want. This guide is going to talk about different things you need to think about when you decide to start designing websites. We'll hop right in with what I think are the three things that every well-designed web site has:

It's pleasing + useful + accessible.

Pleasing means it looks good. Useful means it has a job and it gets that job done. Accessible means it's available to different kinds of visitors (we'll talk about types of visitors a little later).

Let's get right into one of the most important things to realize when starting your web site.

#1 - Your visitor probably has a different monitor or LCD screen than you do. Plan for it.

I often received emails of people getting terribly upset that the website they've worked hours on doesn't look anything like they intended on their friend's or neighbor's or relative's screen but looks totally fine on theirs. The main thing people don't realize is that computer screens all show a different number of pixels (pixels being those little dots that show different colors).

Common "rectangle" (noted 1-4) and "widescreen" (noted 5-8) screen types:

image of 8 screen resolutions at one-tenth scale



 Resolutions (in pixels)
 
 (approx 1/10th scale)

 1.  640  x  480
 2.  800  x  600 (common)     
 3.  1024 x  768 (most common)
 4.  1280 x 1024

 5.  1280 x  800
 6.  1440 x  900
 7.  1680 x 1050
 8.  1920 x 1080 (High Def)
 
 Screen 4 (1280 x 1024)
 is shown with light gray
 area of screen 1 (640 x 480)
 showing more than
 400% availibility.

 

Web
Design Basics Dave has a New Course for your iPad!
Download HTML and CSS Web Design Basics Right Now!
Or Search for "Web Design Basics" in AppStore!
iPage 
site builder banner


These are just some common screen sizes (we call them "screen resolutions" in geek speak). And, you can't assume the visitor is going to browse with a full screen! They might have an instant message program (or stock quotes) to the side of their web browser window, so someone with a 1680x1050 resolution screen might only be viewing with a width of 1000 pixels!

Click here for a visual estimate of your screen size (in pixels), so you can see what we're talking about here.

visualization of vertical and horizontal scrollbars.

Height isn't nearly as important as width, visitors will assume that it's okay to have a scrollbar to move up and down on a web page (labeled 1 in image above). Having a horizontal (along the bottom) scrollbar (labeled 2 in image above) to move left and right is usually a big "don't do." People may assume you never read a book (or web site) on web design and may just leave. We hope not, but it happens.

So how do we fix this? Home and work screens typically measure 1024 wide by 768 high (1024x768) and these visitors typically view in a maximized window. Does that give you 1024 width pixels and 768 height pixels to work with? No, it doesn't. Web browsers have menus and toolbars at their tops, a status bar at their bottom, and a vertical scrollbar on the right side of the window.

We already said "don't worry about height of the page!" So don't get caught up in the 768 number. The number you want to focus on is the 1024. You could be precise and do a survey of all the web browsers people could be using, but let's assume the browser scrollbar won't be more than 40 pixels wide, or about this size (gray line below):

Image of 40 pixel width

Fair enough?

So, on a standard 1024px wide screen, we'd have about 984 pixels to work with across. That means no image (graphic/picture) on your page can be wider than 984 pixels, otherwise the dreaded bottom (horizontal) scrollbar would appear.

#2 - There are visitors who might still be using smaller screens, so think about accommodating both smaller and larger screens.

There are people who will visit your site with a screen width of 800, leaving you about 760 pixels to work with in their viewing area on their screen. It's best to make sure your main writings are no wider than 760, so they can use the horizontal scrollbar that appears to move that content into the focus, and they don't have scroll left and right to read your web page. You can use the remaining 224 pixels to the left or right for extra content, such as videos, or for advertising placements.

The current edition of CNN.com (at writing June 2009) uses this method. The main headline area fits great on a screen just under 800px wide, but the total content page looks great just under 1024px wide. The extra side content has enhanced videos, advertisements, and polls. People with a smaller monitor will see everything they need, and people with larger monitors gain visual access to the extra features.

#3 - Consider a free flow site if your web pages hold a lot of written text.

There's no harm in making a web site that looks great on a 800x600 screen as well as a HD screen of 1980x1080px or even larger. This certainly isn't required for most web sites, but it's good to be aware of it and know how to do it because you might have to do it someday.

Here's the basic technique:

The basic format for a page describing "Seasons of the Year" would be this:


<h1>Seasons</h1>

<h2>Spring</h2>

<p>This can be a really long description of spring,
   taking up an entire paragraph's worth of space.</p>

<p>There can even be several paragraphs.</p>

<h2>Summer</h2>

<p>You can also have one or more paragraphs describing summer.</p>

You can then change the <h1>, <h2>, and <p> HTML tags with cascading style sheets (CSS), to make it look great, while retaining a free flow that'll change visually based on the screen's size.

Click here if you're curious to see how to style our example with the power of CSS.

Please note: I'm not saying the free flow style is the best way to design a site. No one can tell you the best way to design your site (unless, well, you have a boss, or a client, but let's not get into that). Free flow is just an alternative to fixed width design, and it's the way web pages were originally written. CSS allows web pages with free flow design to look pretty great, and this way of designing lets your web site be accessible to a larger number of visitors.

continue to next chapter >

davesite.com home ----- Copyright © 2009 dave kristula. all rights reserved.
Follow me on Twitter @firstdave