Unheard Word homepage

The Unheard Word

One woman's slightly skewed views

Designing for wide screens and high resolutions

My 17-inch MacBook Pro laptop shares the same screen resolution as my 20-inch iMac. Obviously, to fit the same number of pixels on the screen, those pixels are going to be a lot smaller on the MBP than on the iMac.

I have good eyesight, but there are many sites I view on the MBP where I find I have to bump up the font size because the text is uncomfortably small. Fortunately, on the Mac this is easy and is something I am comfortable to do. Those on newer Windows laptops might not find it so simple, even if they know they can do it (and how to do it).

Designers who favour small font sizes should consider just how tiny the fonts will appear on many modern machines. But of course, it’s not just text. Everything is smaller, including images. With this kind of scenario becoming more and more common, it’s definitely an important design consideration.

So, what can we do?

Without getting too technical, there are a few things we can do to make life easier for those using high-resolution displays.

  1. Err on the side of “bigger” when setting font sizes

    Self-explanatory. Ensure font sizes are set in ems or percentages, and make them a notch or two bigger than you normally might. You might prefer a smaller font and think it looks better รขโ‚ฌโ€ but it’s not about you. It’s about the user.

  2. Use style switchers

    But please make sure these are intuitive to use. I particularly like this implementation.

  3. Scalable graphics

    Perhaps the easiest method involves creating your graphics at the maximum physical dimensions you are comfortable with (be careful of file size!) and setting the dimensions of the image displayed via CSS. The box containing the image should have a liquid width (for example, if the image is inside a column on the page, that column may be set to a width of, say, 30% as opposed to a fixed amount in pixels) and the width of the image itself should be set to 100% with a max-width specified. (See Russ Weakley’s example.)

Roger Johansson of 456 Berea St has also discussed this issue and the thoughts and links in his article are worth looking into for further information. It’s also worth reading the comments for the various posts.

Any other thoughts?

Technorati Tags: , , , , , ,

2 Responses to “Designing for wide screens and high resolutions”

  1. Gavin Jacobi Says:

    Hi Vicki,
    Point one is so, so familiar…

    I work for Government so good accessibility should be a given, but…
    A while back there was a push for the font size on the sites (browser default) to be smaller because it “looked better”. (I argued against it and lost)

    Since then the default size was reduced to 80% but now it seems we need a style switcher to make it larger because focus groups with the elderly found the text too small. (!)
    So now we (supposedly) need JavaScript and Cookies just to make the sites readable again.


    I have a 15.4-inch MBP (and I have problems carrying *it* around — Do you use a truck for the 17? ๐Ÿ™‚ ) and have had the same thoughts. 1440 pixels crammed into that space makes for tiny text. Pixel fonts are just painful.

  2. Vicki Says:

    Gavin, having worked in State Govt I identify with what you are saying! I bet most web developers would, though, wherever they work. The client, whoever that may be, knows best — or so they believe. ๐Ÿ™‚

    The 17 inch MBP has become my main work machine. I love it. And at least I can take it places, though together with the sexy aluminium case I got for it, it weighs a ton! But it’s an absolute pleasure to use. ๐Ÿ™‚