Web Design Discussion

Computer users have many different computer screen sizes depending on the type of monitor they’re using. These include screens on laptops, notebooks, desktops and hand held devices. If your web site doesn’t display well on your visitors’ computers they’ll lose patience and go elsewhere. Make sure your web site can be displayed correctly for all popular screen resolutions.

Example

If you design a web site with 3 columns it may look fine on a wide computer screen but the columns may get squashed together on a lower resolution so the images and text can’t be seen clearly.

So how do you know if your web site displays correctly on different screens?
If you’re a web designer, what screen size(s) should you design for?

Let’s first look at Screen display resolution statistics

Screen resolutions include 640×480, 800×600, 1024×768, Higher, Unknown+

According to the statistics chart shown above 57% use a higher screen resolution than 1024×768. The next most popular is 1024×768 at 36% which most laptops use.

Ways to check your web site for different screen display resolutions

Firefox Add-on
Get the web developer add-on at: https://addons.mozilla.org/en-US/firefox/addon/60 Use the resize function to resize your computer screen for a specific resolution.

Software resizer
http://www.brianapps.net/sizer/
Sizer is a freeware utility that allows you to resize any window to an exact, predefined size.

Adjust computer settings
This takes more time but offers you another alternative. To adjust your computer settings go to:
Start-control panel-display-settings-screen resolution

What screen size(s) should you design for?

Since most computer users view web sites at 1024X768 pixels or above, make the width of your web site approximately 1000 pixels. Don’t go higher than 1024 pixel width because visitors will have to scroll horizontally to view it.

Alternatively use percentage widths so your web site width will adjust to the width of the monitor. For example make the width of your main table or cascading style sheet 100%.

Tip
If you design your web site for a screen resolution of 800×600 pixels or smaller it will look very small on a large screen. You’ll see more background color than the actual web site thus making it look unprofessional.

**************
To receive a free quote for professional web site design that
will render well for all major screen resolutions visit:
Professional Web Design

Not all browsers are created equal. If your web site looks good in Internet Explorer it may not render well in Firefox. You could be losing a lot of visitors to your web site if it doesn’t display correctly to your visitors. They will simply click away to your competitors. You need to check how your web site appears on multiple browsers.

So what should you do to check cross browser compatibility and what browsers should you test for?

Browser statistics

As you can see from the above chart displays the recent statistics for the main browsers: IE7, IE6, IE8, Firefox, Chrome, Safari, Opera. They can be viewed at: http://www.w3schools.com/browsers/browsers_stats.asp

In Sept 2009 Firefox received the highest monthly usage at 46.6% followed by Internet Explorer 7.

Ways to test your web site for different browsers

If you’re the owner of a web site don’t rely on your web designer to test your site in different browsers, screen resolutions and operating systems. Check it yourself as you may be losing
thousands of visitors if it’s not displaying correctly. For web designers, use the methods below:

1. Install multiple browsers on your computer

You can install IE, FF, Chrome, Safari browsers on the same computer without causing compatibility problems.

2. Online resources

Adobe Browser Lab
www.Adobe.com/BrowserLab
Sign up for an adobe account then test your web site. Alternatively if you use Dreamweaver CS4 for designing web sites, you can download extensions for it.

Browser Shots
http://browsershots.org/
Check the list of browser names, enter your URL and you’ll receive screen shots for how your web site appears. It generates screenshots for a web page in more than 80 versions of the most common browsers used in Windows, Linux, BSD and Mac. The process takes time and you may have to wait up to an hour to see the screenshots.

Browser Cam
http://www.browsercam.com
You can sign up for a free trial and get 24 hours of free usage for the screen capture service or a maximum of 200 screen captures.

IE NetRenderer
http://ipinfo.info/netrenderer/
This site is a free service that allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany. You just type in your URL.

3. Firefox Add-on
https://addons.mozilla.org/en-US/firefox/addon/35
This add-on lets you load pages in IE with a single right-click, or mark certain sites to *always* load in IE.

Tip
If you validate all your web pages for correct html (xhtml) you’ll avoid most of the problems associated with cross browser compatibility. Most modern browsers will correctly display sites with clean html code.

**************
To receive a free quote for professional web site design that
will render well in all the major browsers visit:
Professional Web Design