Andy Boyd


Designing Web Pages for Different Browser Sizes

Posted in Design by andy on the February 27th, 2007

Thomas Baekdal wrote the following review of the things to consider when designing a website for browsers/monitors of different sizes:
http://www.baekdal.com/articles/usability/browser-size-design/

I think this was a great article. I thought the following points were especially interesting:

Text

Let’s start with text. We know from countless of studies that the optimal width of a block of text is between 65-80 characters (with a line-height of about 1.15). This is the optimal size of text, and it has been proven to be:

  • Easier to move from one line to the next
  • It is much faster to read in general
  • The brain use less mental effort (which increases understanding and learnability)

Designing text on a website is simply about 3 things:

  • Make it readable (use a readable font and adequate size)
  • Prevent scrolling as much as you can
  • Make the width of the text box 65-85 characters per line.

Images

As rule of thumb the best way to present an image is to balance its size between two things:

  • To prevent unnecessary eye movements (mental strain)
  • Make it big enough to see the details

The correct size of an image depends on the number of details in it. Many details require a larger image - while a few can easily be seen in a smaller area. But you can generally size your images based on a 14:5 ratio. The distance from your eyes should be about 2.8 times further away (14:5) than the width/height of your image.

Leave a Reply

You must be logged in to post a comment.