Feature
Post

Category
Design


Are You Designing for the Smaller Screen?

I’ve been thinking quite a lot about screen resolutions and, just as importantly, screen sizes the last year or so. Being a fan of small laptops and portability, I get constantly reminded that just because I pack a decent resolution of 1024×600 pixels (or whatever), that doesn’t mean that sites looking good on a traditional screen will work on my 8.9″ one, despite them both showing as much horizontally. The way I see it, there are X aspects of smaller devices you need to at least consider when doing designs, if you want to be future proof:

  • Smaller laptops/netbooks with decent resolution, like the Asus Eee PC or any screen under 12″ basically.
  • Smaller devices with a screen size at 5-7″, sporting a resolution at 640-800 pixels horizontally.
  • Mobile phones or similar with sub-640 pixels horizontal resolution, possibly with a vertical focused screen size ratio (like the iPhone).

That last one is easiest, they more or less require special treatment. Sure, you can use Opera on a mobile phone, or Safari on the iPhone, and surf the regular full-grown web well enough, but if you want it to look good and really work for the screen, it’ll need special adaptations. That is usually a completely different version of you standard site.

The Netbook Issue

The original Eee PC

The original Eee PC by Asus

Laptops and similar larger, but still small, devices are harder. The popular Asus Eee PCs started out with a 7″ screen with 800 pixels width, that’s too small for most sites today, usually optimized for a 1024 pixel horizontal limit. Some sideways scrolling is OK, I suppose, but fluid designs or smart choices could probably at least minimize the occurrence of that. However, your traditional site could work, if you laid it out in a reasonable fashion.

It gets worse when we’re talking 5″ or 6″. The resolution won’t be 800 pixels width, it’ll be something like 640 or less. That more or less makes any site designed for 1024 pixels width a nuisance to read. Everything will look like crap, basically, and we won’t want that as a designer. Visitors on small screens like that should be getting special treatment, probably with a completely different version of the site altogether.

Add Vertical Issues

a little bit of vertical scrolling isn’t really an issue

Web designers often concern themselves with a site’s width. It is indeed important to fit everything, from content and images, to ads and links and whatnot, in the Perfect Column Setup. Compared to that, a little bit of vertical scrolling isn’t really an issue when having access to decent screen real estate. I’d venture so far to say that the blogosphere helped push this forward, it is OK to scroll down again, although advertisers still yap about being above the fold all the time. That may be as it be, but what might be a little scrolling on a normal sized screen, say 768 pixels height (1024×768 being the most common screen resolution), or perhaps even more, but it’s not as fun if we’re talking 480 pixels height in screen real estate.

It is not that there’ll be a lot of scrolling per se, it is more an issue of the small amount of actual content being displayed. Take a site like this, and a post like this. Lots of text, which is fine and pretty easy on the scrolling factor after all. But add big strong graphics, add a powerful header image, add ads breaking up the post, and you’ll get a mess. Then take that to a really small screen, and you won’t be stuck surfing the web as much as you would otherwise.

This is a tough nut, however, because while we can optimize for less width to play with, the vertical scrolling is necessary on most websites today. There are solutions, some better than others, but the one thing they have in common is that they will probably not fit the big screen, just the smaller one. In other words, while vertical scrolling isn’t as big an issue as horizontal one, you might be better of optimizing for it.

Back to the Roots: Mobile Websites

This concept would work on a mobile phone (showing The Onion anno 1997)

This concept would work on a mobile phone (showing The Onion anno 1997)

Mobile phones are getting more and more web friendly, with the iPhone leading the charge. What they have in common is that they are vertical aligned, meaning that there is more height than width to play with in your design. The fact that a mobile phone, or similar device, shouldn’t be too bulky is actually a good thing here. It means that it’ll be easier for us to do fluid designs, having text wrap from left to right, no fixed layouts or anything.

Like it was, once upon a time. Only prettier.

One thing is for sure though, these sites need special treatment. There are plugins for publishing platforms, and several services that repackage your content, and optimize it for mobile phones, and that’ll help us along the way. However, we do need to consider how we lay out these sites as well, and how we can design them to connect to their older siblings (being the traditional website, should you not be a fan of metaphor). After all, if you do have a special website for mobile devices, it should feel like a natural adaptation to the smaller screen, right?

Are you designing for the smaller screen, and what do you do to make it easier for visitors to your site using smaller devices?


  1. By Greg posted on August 14, 2008 at 4:12 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    It’s always a good thing to try to keep in your head while designing. These mobile screens are starting to pop up everywhere.

    Greg

  2. By J. Angelo Racoma posted on August 16, 2008 at 7:48 am
    Want an avatar? Get a gravatar! • You can link to this comment

    When I created my Eee-oriented site myasuseee.com, I looked for a free WP theme that was plain and uncluttered, and that would look nice on a 840px width screen.

    These days, though, wider netbook screens are becoming more popular, with many already sporting 1024×600 screens, like my EeePC 900 and many others, including the MSI Wind, most EeePC models, and the Acer Aspire one. That means less horizontal scrolling!

    My HP Mini Note even has a 1280×768 screen, which is the same resolution as my bigger laptop (but this is a rarity).

  3. By Tom posted on August 16, 2008 at 3:52 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Its something to think about but hard to design for with the very small screens in mind as it could cause problems of too much white space on a normal or large resolution screen.

  4. By jardel posted on August 16, 2008 at 9:25 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    You forget one thing! There are the browser area where tabs and address bars stays, the start menu of OS, the status bar of browser, this all takes space on the screen too!

    i like to support 800×600 or more, not less. As a owner of a site with 3 sidebars developing for brazil, 800×600 is pretty common (actually, the second after 1024~) and ie6 is common too! But i’m not going to do re-designs for little screens, i’ve been using thumb sizes in a fixed “max 380 width” for long, if people in these laptop screens start to search old posts – what is inevitable, as most of us design our sites do engage readership – they will have to scroll horizontally!

    I would like to remove one sidebar or even both for the “little screen” people, but i don’t have the skill and it will kill all the usability i’ve planned for months, i don’t know if there is a way to show one site for one screen size and another site for another screen size, but i think this will be the best choice

  5. By Thord Daniel Hedengren posted on August 18, 2008 at 5:06 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for your input, all.

    @jardel,
    That’s right, there are GUI stuff to take into consideration as well.

  6. By Adam posted on August 18, 2008 at 12:36 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    jardel you can redirect people to another page depending on there screen resolution. This can easily be mastered with javascript.

    How to: http://www.pageresource.com/jscript/jscreen.htm

  7. By Matthew Babbs posted on September 2, 2008 at 8:40 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I’m not a fan of the idea that there should be a separate ‘mobile web’—rather, I see it as just ‘the web’, accessed by many different devices in many different places. So I don’t serve an entire separate mobile-optimised site, but I do cater to low resolutions in two ways.One, I make sure the basic design scales well down to at least 800×480, as that’s the minimum resolution likely to be found going forwards. (Scaling down to 640×480 is good, but people using a screen that small are probably also using a browser so old that it doesn’t get my CSS.)Two, I serve an @media handheld stylesheet. Most people who seriously browse with phones or other ultra-mobile devices will be using a browser (like Opera Mini/Mobile or Safari Mobile, and in the future Android and Fennec) that accepts this. As I’d be serving the same content if I had a separate site at mobi.example.com, I can handle all the necessary changes to layout, text size and so on in CSS. I can even point to lightweight, scaled-down background images if necessary, although generally I just turn these off.In the future, I’ll be able to optimise this approach further, by using CSS3 @media screen resolution queries.There is a problem with this approach: content images. It’s not as big a problem for me as it might be, because my style tends to the minimalist, but I know that sooner or later I’m going to land a client who likes oversized images. Using the browser to resize images or doing server-side resolution sniffing are poor solutions, and having a separate site for mobiles won’t help netbook users. Are there other solutions out there?

  8. By Matthew Babbs posted on September 2, 2008 at 8:43 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I guess clean XHTML doesn’t include paragraph tags. Sorry about that!

  9. TrackbackFreelance Friday: My Writing Week 33 | tdhedengrenBest of the Week by Abduzeedo « Guiwells’s BlogMetropolis