Lesson 04: Basic Design Concepts
In this lesson you will learn about each of the units within this course.
This lesson should take you approximately 30 minutes.
Introduction | Browser Versions | User Preferences | Operating Systems | Connection Speed | Resolution
Introduction
Web design is a tricky thing because you are creating something that you don't have control over how it will be viewed. With different browsers, browser versions, connections speeds and monitor size/resolutions out there you really don't have that total control over how your web page will be viewed. That is why it is so important to understand the major variables your web pages will face so you can create the most universally functional design possible.
Browser Versions
Between the 7 versions of Internet Explorer, 9 versions of Netscape and a handful of other browsers with multiple versions it would be almost impossible to create anything but a plain text page that will look the same on every browser. The key is to understand your audience and your purpose and design for them. When we were redesigning our high school web site we focused on making sure our content and design worked with both Internet Explorer version 6 - 7 (almost 70% of the public use this) and Firefox version 1 (12%).
Browser Compatibility - What browsers and versions will you design for?
Tutorial>> Browser Compatibility Tutorial - "This tutorial explains why you may be seeing browser display errors and recommends steps to avoid these problems."
top
User Preferences
Browser software allows the people that view your web pages to set the default appearance of the pages they view. For example, this allows someone to enlarge the text on your page if they have vision problems. Here is a list of the preferences settings people may set on their browsers:
- Font face and size
- Background and text colors
- Ignore style sheets or use their own
- Turn images off
- Turn off Java and JavaScript
- Turn off pop-up windows
You can make sure that your content is accessible without images and scripts. You can also create flexible designs that allow things like text size to change. The bottom line is you should try to test your web page with different user preferences to ensure your content is accessible to as many people as possible.
top
Different Operating Systems (PC, Mac or Unix/Linux)
Another thing you should consider when designing a web page is the operating system your viewer will be using. The following factors may change depending on which OS your viewer is using.
- Font availablity
- Color
- Availability of plug-in media players
- Rendering form elements
You can allow for these variations by specifying common fonts and providing alternatives. You can also use cross platform plug-ins like the Flash player. You can make sure that your content is accessible without images and scripts. You can also create flexible designs that allow things like text size to change. The bottom line is you should try to test your web page with different user preferences to ensure your content is accessible to as many people as possible.
top
Connection Speed
Your viewers maybe have a high speed internet connection or an old dial-up modem. About 70% of the US has a broadband connection but that still leaves you with 30% using old and slow dial-up connectsions.
- Keep your files as small as possible - optimize every image and think twice about using the image in the first place.
- Know your audience
Check out this cool site that will allow you to test your computer or your web site: http://www.speedtest.net
top
Browser window size and montior resolution
Web pages are fluid so as your visitors view your web page with different monitor resolutions or resize their browser windows your content may flow and change location. In addition to the fact that your viewers monitor resolution will vary you also need to consider that you don't have the entire monitor to design on. Part of that space will be taken up with the browser window, menu bars and scroll bars.
Resolution - What size resolution will you design for?
| Resolution |
Canvas Size |
% of Users (Oct '06) |
| 640 x 480 |
620 x 309 |
1% |
| 800 x 600 |
780 x 429 |
22% |
| 1024 X 768 |
1004 x 597 |
56% |
| 1280 x 1024 |
1260 x 853 |
13% |
Liquid Layouts
Some designers create pages with columns and text that resize with the window by using percentages. The only issue with this is your line lengths might get so long on high resolution monitors that it becomes difficult to read.
Fixed Layouts
Some designers create pages with fixed columns that don't resize. This can make is awkward for viewers if they are using a resolution smaller than the target audience of the designer. It may also cause viewers with very high resolution montiors to have too much empty space.
Above the Fold
Regardless of which layout you choose, make sure to put your most important content within the first screen all your viewers will see without having to scroll or click a button. This should include:
- The name of the site and your logo
- Your primary message
- Some indication of what the site is all about
- Navigation
- Important information
top
Activity
Go to the "Files" folder in the Unit 02: Getting Started folder and download "basic_design_activity.doc" file to your computer or network folder.
Turn it in: Answered all the questions using correct spelling and good grammar/puncuation. Make sure to include your name on the document and name the file lastname_basic_design_activity.doc. Of course you will substitute "lastname" for your real last name. For example, I would use "dockery_basic_design_activity.doc." Then attach the file to an email and send it to your instructor.
top