Web Design Screen Resolution

What's the best monitor screen resolution to use when building your site? Find more about best screen resolution to website design.

Web Design Screen Resolution

Web Design Screen Resolution

What's the best monitor screen resolution to use when building your site?

There is none! It's impossible to design a website to look the same in every browser, platform and screen resolution, so don't bother trying. Instead, use a fluid, tableless layout for your design, with % widths that expand and contract to fit a visitors browser setting. Design for the 1024x768 setting and ensure it contracts properly, or 'transforms gracefully', to the 800x600 setting.

Optimizing for 1024x768 Screen Sizes

When we say "optimize" we mean that your page should look and work the best at the most common size. It should still look good and work well atother sizes, which is why I recommend a liquid layout using percentage widths to control layout. But it should be its best at 1024x768.

The three main criteria in optimizing a page layout for a certain screen size are:

  • Web Page Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.

  • Web Page Readability: How easy is it to read the text in various columns, given their allocated width?

  • Web Page Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly -- that is, are captions immediately next to the photos, etc.?

You should also consider all three criteria at the full range of sizes, continuously resizing the browser window from 800x600 to 1280x1024. Your page should score high on all criteria throughout the entire resolution range.

Your page should also work at even smaller and bigger sizes, though such extremes are less important. Fewer than half a percent of users still have 640x480.Although such users should certainly be able to access your site,giving them a less-than-great design is an acceptable compromise.

As the first criterion implies, scrolling is always a key consideration. Users generally don't like to scroll. So, when you design, you should consider how much users can see if they scroll only a screen full or two. Any more than five screen full's should be an indication to you that there is two much copy on the page.

Both scrolling and initial visibility obviously depend on screen size: Bigger screens show more content above the fold and require less scrolling. This is where you have to optimize for 1024x768: present your most compelling material above the fold at this resolution (while ensuring that the absolutely critical information remains visible at 800x600).

So,what about tiny screens, such as those found on mobile devices? A liquid design should scale all the way down to a phone, but don't assume that this is how you should deliver your company's mobile user experience. Mobile environments are special; to optimize for them, you must design a separate service that provides fewer features, is written even more concisely, and is more context aware.

Remember to build a website to the size you expect most visitors to be using -some research can help you with this, but always aim to please the visitors you seem to attract!

Best Layout

Margins, page widths and indentation are all aspects of page design which can aid readability. The web presents difficulties for the designer with each of these. Browser windows can be resized, thereby changing the page size. Different web devices (web TV, high resolution monitors,PDAs) have different minimum and maximum window sizes.

As with fixed font sizes, fixed page layout can lead to accessibility problems on the web. As with fonts, layout aspects of a page can be designed using percentages to create adaptable pages. Margins can be specified as a percentage of the width of the element which contains them. Using percentages (or other relative values) to specify page layout in CSS automatically creates adaptive pages. As browser windows widen and narrow, the layout of an element adapts to maintain the same proportions, and so the whole page layout adapts. Readers can choose the window size they find appropriate to their needs. Margins, text indentation and other layout aspects can also be specified in relation to the size of the text they contain, using the em unit for specifying margins, text indentation and other layout aspects.

If you specify - p {margin – left: 1.5em} you are saying that the left margin of paragraphs should be 1.5 times the height of the font of that paragraph. So, when a user adjusts their font size to make a page more legible, the margin increases proportionally, and if they adjust it to make it smaller, the margin adapts again.

Resources for Cross Browser Testing

Every web designer knows that browser differences can create plenty of headaches. Finding and fixing problems can be difficult if you’re not equipped with the right tools. In this post we’ll take a brief look at 10 of the leading resources for making your browser testing less time consuming and more productive.

Enquire now

Contact Us
View Our Portfolio
Download Brochure
X
DOWNLOAD

View Our Video Testimonials

TWMG Showreel.
Luke Porter - Chamberlain Oceania
Lou Farrugia - Kellyville Kitchens
Ian Maidens - CRC Industries
Robert Alha - Gold's Gym Parramatta
Chris Timmins - Perram and Timmins Funerals

TWMG Showreel

TWMG Showreel
Get In Touch Testimonial from Stacey Smith, National Marketing Manager, B&D Doors and Openers

Your Business

 

About Your Requirements

Services of Interest

Please enter Name, Email, Phone, Message

Search
   
 

Complete the details below and we'll happily call to discuss your project needs.

Please enter Name, Email, Phone, Message
 
What are you looking for ?

Our instant quote will then be sent to your email address.

If you are a large brand with a budget over $10,000
please submit your brief here.




The quote will be sent to your email address instantly


Instant Online Quote Tool

1. Do you need a domain ?


2. Do you need a logo design ?


3. How many website pages do you want ?

4. What type of website do you want ?

5. Do you need hosting with unlimited emails and bandwidth ?


6. Do you want to communicate with your customers on social networking services ?

7. Do you want to email your customers with newsletters ?


8. Do you want your website to be on the 1st page of Google ?