Web Design Fall 2008
Design Notes

Course Syllabus

Intro

Design

Slicing

CSS

Template

Content

Scripts

Meta-Tags

Uploading

Website Hosting

Animated Gifs

Requested Elements

Further Readings

Interesting Designs

Design Stretching

Depending on the amount of content on a particular webpage the page will be taller or shorter. The design of the site needs to account for the necessary stretching that a particular page may undergo due to large amounts of content. As an example visit http://theinnerpup.com and look at the "About Us" page verses the "Services" page. you will see that the about us page is very short in comparison to the services page but that the containing box stretched to fit the amount of content. This is a very important thing to keep in mind when designing the layout of your webpage. You need to think of the design you are creating as both a short and tall version and anticipate where and how you want the sides of the design to expand and allow for longer text areas.

Design Sizing = 800x500

The size of a design for a website is limited by the viewer's screen resolution. Since viewer's screen resolutions will very the site needs to be small enough for the viewer with the lowest screen resolution to see the whole design. The standard screen resolution of internet users has increased over time. While website once needed to be designed at 500 pixels wide to account for viewers with the screen resolution of 640x480 they can now be larger as most computers support a screen resolution of at lease 1024x768. For the purposes of this class we will design the websites at 800px wide. This size will allow the majority of website browsers to view your webpage without having to maximize the explorer window.

The same is true for the design height. If you want a viewer to be able to see the whole design at once without needing to scroll down in their browser window the design needs to be short enough to fit. 500px tall is a good starting size for a website. Remember, though, that we will be creating a design that can stretch vertically. So you can always allow the design to get taller to account for more content