Designing for Small Screens

stack of dell mini 10V netbooks
stack of dell mini 10V netbooks

Netbooks are becoming very popular today because of the price and the true needs of 90% of the computing population. Most people are just checking their email, getting on Facebook, tweeting a bit and maybe wordprocessing. Most people don’t need anywhere near the horse power provided by fullsize laptops and desktops.

Even for myself the only thing I really need my desktop for is to work in some of the Creative Suite Apps (really only Ps, Ai, and Id). Most of my coding can be done just fine on a low powered laptop. Then throw in the portability and people are sold.

This brings up and interesting question for designers though. At one point the standard for screen resolution was 800px x 600px. Then more recently it has moved to 1024 x 768, this in fact is what I have been designing to for the last year or two. With the rise in smaller screen sizes (iPhones, iPod’s, smartphones and netbooks) should we be looking at the way we design our sites again?

The Example

I love the application Evernote. I use it almost daily. I most often use the desktop clients but when I’m on my Linux machine I’m stuck with the web inteface and then I have a problem. While all of the toolbars and items at the top of the screen are needed by the time I was actually editing a note I could see about ¼ inch of the editing window.

shot of the small edit window on my netbook
shot of the small edit window on my netbook

Being a fairly advanced computer user I just went in and reduce both my default system font size and then in Firefox my default browser font size and took the text labels off of the buttons. Then I flipped Ubuntu over to the Netbook desktop version and lost the bottom toolbar on the system. While all of these changes made editing a note online okay it still isn’t a great experience.

My point is this, most users just wouldn’t take the time. They just would have left the site if it wasn’t usable. Really Evernote is a decently designed site but it doesn’t take small screen size into account.

The Solution?

My first recomended solution for Evernote would be to let users toggle some of the bars at the top of the site. Add a bit of javascript in, make is persistent for a user. Problem solved. I sign in with my netbook some of the top bars are folded shut and I have a ever usable web application.

A second option would be to perform some browser sniffing (controversial I know) and present a slightly altered layout to those on smaller screens. Again we get a web app that is very usable on smaller screens without affecting the bigger screens many people have.

My Resolution

I suppose this all comes down to evaluating your user base and providing good experience for as many as possible. At the very least make sure that when you design you at least put some thought into what people will see on a screen without a lot of vertical pixels. Resize your browser to 600px high and see how usable the application or site is. If it’s not good give a bit of thought on how the UI can be improved for small screened devices.

2 thoughts on “Designing for Small Screens

  1. Yeah I do try to tailor designs based on browser and screen stats. I suppose netbooks could be small enough for Evernote that they just haven’t got to the design around those devices.

Comments are closed.

To get a head start, join thousands of other men and Stop The Struggle.

Get my free eBook to help you stop working all the hours without traction.

You’ll also get a weekly email with good resources to help you do family with the same intention you do your work. Both need to run well if you want to win.

%d bloggers like this: