Designing Web Pages for Different Browser Sizes
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.
