Road NotesWeb Design Articles
- Building A Solid Subscriber List - A Fundamental of Web Marketing
- Ending the Confusion Can Bring In More Sales
- How to Get Immediate, Top Placement With Search Engines: A Pay-Per-Click Overview
- The Dos and Don'ts Of Business Web Design
- Keep 'Em Reading - Keep 'Em Buying
- Choosing The Perfect Colors for Your Web Site
- Checklist For A Successful Web Site Design
- Optimizing Your Web Site For Top Search Engine Placement
- Prevent Your Work From Being Stolen - Understand US Copyright Laws
- Insider Tips for Choosing the Right Web Designer
- Screen Size Compatibility Can Make or Break Your Design
- Unique Ways to Promote Your Web Site
- Make Sure Your Site Passes the 7 Second Test
- Top Ten Features of a Good Web Site
Screen Size Compatibility Can Make or Break Your Design
© 2003 Viki Nygaard
You are free to reprint this article in your publication as long as the resource box located at the end of this article is included.
Have you ever visited a Web site that looked, well ... strange? Something about it just wasn't right. The design was well done but it just didn't seem to fit the screen. It happens quite a bit. The cause is lack of attention on the designer's part.
One of the most challenging things a Web designer faces is designing a site that looks good on everyone's computer screen. Because there are so many different browsers, and because each surfer can have their monitor set to a different screen size, the designer must pay attention to how the pages will look in a variety of situations. Let's take a look at the three most important issues:
Does This Look Small to You?
An important thing to understand about screen resolution is that it is NOT the same thing as screen size. The screen "size" (15", 17", etc.) itself always stays constant, whereas the "resolution" of a screen can change depending on your display settings. A 15" screen and a 17" screen might both have the same exact resolution, which means that the display would look the same, even though one screen is larger than the other.
Resolution is measured in pixels. A pixel is basically one dot on the screen. There are three basic screen resolution settings on computers: 640 x 480 pixels, 800 x 600 pixels, and 1024 x 768 pixels. A 640 x 480 setting means the screen is showing 640 pixels horizontally and 480 pixels vertically for a total of 307,200 pixels on the screen. A 1024 x 768 setting means 1024 pixels horizontally and 768 pixels vertically for a total of 786,432 pixels. So what does this mean to you?
Think of it as "zooming in" or "zooming out" on the same image. If you are viewing a Web page at a 640 x 480 resolution, you have "zoomed in" on it and are viewing it close up. The text and images probably appear larger but you might not be able to see the entire picture. Scroll bars might appear on the screen that all you to scroll horizontally to see everything on the page.
Changing to a resolution of 600 x 800 would be similar to "zooming out" slightly from the 640 x 480 size. The text and images appear smaller than they did at the 640 x 480 setting and you may be able to see the entire picture rather than having to scroll from left to right. And finally, the 1024 x 768 setting "zooms out" even more. You can view the entire page, but there might be a lot of surrounding white space. Text and images appear much smaller and further away than they did at the 640 x 480 resolution.
At this point, you might be interested in experimenting with your screen resolution to see the differences first hand.
Important note: You may want to make a note of your original resolution so you can change back after experimenting.
For Windows users:
· Clicking on the Start button,
· Select Settings,
· Select Control Panel,
· Double click on Display,
· The Display Properties window opens up
· Click on the Settings tab at the top of the window
· Take note of original resolution
· Move the screen area bar by dragging it to the desired resolution.
For MAC users:
· Click the colored apple in the top left corner
· Choose Control Panels
· Choose Monitor and Sound
· Take note of original resolution
· On resolution, use the drop down selector to set your resolution.
A Web designer needs to take all three of these screen resolutions into consideration when designing a Web site. Not an easy task as what looks good in a 640 x 480 resolution doesn't usually look good in a 1024 x 768 resolution and vice versa.
Are Your Colors Safe?
Mac's and PC's both use different color palettes, however they have 216 colors that are common to both. These 216 colors are considered to be "Web safe" colors. Using the 216 Web safe colors means that your colors will look fairly consistent on different computer platforms (Mac or PC), different operating systems (Windows or Mac), as well as different browsers (Internet Explorer and Netscape Navigator, to name two). As a side note, any graphics created for the Web, such as logos or buttons should also use the 216 Web safe colors.
How do you determine if a color is Web safe? Many programs, such as Macromedia Dreamweaver, come with a color picker that allows you to specifically choose Web safe colors. If you don't have a program like that, there are many free ones available on the 'Net. One of them is at http://www-students.biola.edu/~brian/csapplet.html. All you have to do is click on the color you want and the hexadecimal code is displayed for you. Be sure to check "Web Safe" at the bottom of the screen.
Your Browser, Their Browser... It's All the Same. NOT!
A Web site will appear differently depending on the browser being used to view it. The two most commonly used Web browsers are Internet Explorer and Netscape Navigator. However, there are many more - including the AOL browser, Mosaic, Opera, Lynx and Web TV to name a few.
Not only do designers need to worry about cross-browser compatibility, but they also need to consider the version of the browser being used. For example, Internet Explorer 3.0 and Internet Explorer 5.5 support different features and may display pages differently.
Want to check your Web site for compatibility with Internet Explorer and Netscape Navigator? Run it through the validator at http://www.netmechanic.com. As a plus, this service also checks a Web site for broken links, html errors, possible spelling errors and approximate download times.
All in all, it is important to test a Web site in as many ways as possible. View it in different screen resolutions, various computer platforms and different browsers. Take the time and effort to ensure that a Web site will look good no matter how it is viewed. The result will be a pleasurable viewing experience for all your visitors.
Viki Nygaard is President of Mount Evans Designs specializing in professional Web design. For those businesses who insist on quality but must maintain a budget, visit http://www.mountevansdesigns.com today. You'll be thrilled with the exceptional designs and the affordable rates!
