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
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
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?