Apple's iPad, Netbooks, Multi-Touch and The Smaller-Bigger Web

Some of us will browse the web with our fingers and taps, and it's not going to be a fad.

Designers have to start considering this.  And screens will be smaller.

Designers have to start considering this.

Screen resolutions are measured in pixels left to right and up and down.  A device with a resolution of 1024 x 768 (such as Apple's new iPad, and many computers with old CRTs and not LCDs) have 1024 little dots left to right and 768 dots up and down.  But, let's go over some history to see what this is important.

When I started web design in 1996 (14 years ago) the average CRT monitor on a personal computer was 640x480.  Over the years, it increased to 800x600, then later 1024x768, which is where it pretty much stopped for store-bought home PCs.  Then wide screen came in, and we had views such as 1280x800 used on Apple's MacBook 13 inch ( 1280 across, 800 up and down) and other very close resolutions.  But now, we're having netbooks from ASUS and others (including my T91MT multi-touch netbook) with resolutions of 1024 x 600!

So, if you're designing a web site that doesn't scan for resolutions, you're going to max out at having a height of 600 pixels now, again, which isn't horrible compared to 728 ( from 1024 x 768 ) or 800 ( from 1280 x 800 ).

These netbooks will last 3-5 years minimum, so this is not "oh, for a year or two, I'll design smaller" deal.  You're going to have to take into account the smaller screen sizes for the foreseeable future.

The iPhone and iPad are capable of easy zooming, so the resolution is less particular on those. I imagine that Google's Chrome Netbook will have a multi-touch edition that also has some sort of simple zooming feature.

But as far as multi-touch goes, the iPad has no mouse.  People will be touching links and buttons, not clicking them.  This means that web sites that are going to work in a touch environment will have to have somewhat larger links in areas of the site that require interaction.  This can be done via CSS modifications by setting a separate style sheet if you don't want standard desktop users from being affected by your touchscreen version.

Just some thoughts :)