As I said before, the trend I am seeing in computing is going into two directions: small screens that are actually being used to browse for reals, and very large screens getting popular. The standard 4:3 screen, usually being around between 1024 to 1300 lines, is just not king anymore. Home machines, business machines, towers, desktops are all being sold with bigger and bigger LCDs, or two standard ones, or the tower gets replaced with a laptop with a secondary screen. We want the real estate. Yes, the old screens in deployment didn't instantly die so there are plenty out there left, but the trend is for bigger.
But that doesn't mean websites and applications can safely design for bigger and bigger. Netbooks are still going strong, sold in large numbers, used for web 'snacking' on the move, on the couch watching TV, instant little look-ups -- I am surprised to not have seen a mention of the URL entry bars of the browsers having been configured out-of-the box to take the user directly to IMDB, Wikipedia, and last.fm.
Those netbook screens are small, but the trend there is for higher resolutions in the same size, higher pixel densities. The latest Sony entry for that category, the totally over-specified Sony P Series, is the size of a business envelope, and manages to cram 1600 pixels in a 10 inch enclosure for a reported pixel density of 220ppi. Average desktop screens are at 72. Yes, this is getting closer to the magic 300dpi, when screens become like paper.
But the small-screen scenario goes further. Check out what I found, belatedly, today in Tom Hume's blog:
This is not that surprising to me, really. Once a handheld became not a pain to browse with, of course it would be preferred, and the iPhone and iPod Touch are the first handhelds to finally not be a pain and deployed in enough numbers you can actually study it for a report like this. Android and HTC make this category even bigger. I saw it yesterday when meeting a UX designer who had a new beautiful Powerbook in his messenger bag, but decided to show me the latest work he had done on his iPhone because it was easily within reach. So there we were pinching in and out (the gesture to zoom out of a page on an iPhone or iPod Touch is to slide thumb and index finger to each other on the glass, 'pinching'. Zooming in is the reverse gesture) to see the page. I guess zoomable interfaces finally really are here.
Which is really not that fun an experience, running to and from a page, making your brain work hard to remember the overview of the page while you are zoomed into a piece you can read. Zoomable-interface proponents for decades -- yes, decades, check the ACM digital library for papers submitted to CHI conferences about them -- have said that our brains are hardwired for spatial navigation. The idea is that constructing and remembering mental maps is such a basic cognitive skill -- any rat in a maze can do it -- that a zoomable interface, which is all about making a map of what the page looks like, zooming in to the piece you want to read, and then going back up to zoom back into the next piece or just going directly to the next piece, would be super natural. Insert misogynist female-driver-getting-lost, or male-driver-not-asking-for-directions jokes here.
Well, now we know that there is science showing people aren't that much better doing web-navigation tasks in a zoomable interface than a plain scrolling ("panning") one (although maybe the test population would have done better in the mental-map-making if there had been some cheese at the end). I also realized yesterday that browsing on the iPod has enlarged the navigation vocabulary; used to be we just had to scroll vertically and horizontally, now we two different gestures for zooming in and out added. Sure they are 'intuitive' in that when you see them done once you totally get it and are off and running, but it is still 'more stuff'. And I already hated it when a web page made me scroll left and right instead of just simply up and down. Yes, the iPhone interface has made scrolling really easy, far easier than using scrollbars ever did, but really, up and down is just the most of scrolling I want to deal with. Anything else is just too much to keep track of during a show-and-tell session over breakfast.
So where are we right now? Still with a web trying to sell things on a three-column grid page with a large central image at top, designed for desktops, while a certain category of handheld is displacing desktops for browsing, netbooks are getting high resolution screens that will make text specified in pixels unreadable, and the games- and media-oriented sets are getting monster screens that dwarf those 3 columns. Many companies with large brands are still making <table>-based lay-outs because the graphic designer did a beautiful mock-up page in Photoshop and the HTML jockey is tasked with making sure all pieces fit in the grade just like in that image that got approved by the Creative Director. Semantic-HTML purists want <table> to be used for tables only, and continue their march to replace everything with <div>s arranged with CSS, ostensibly so Google will find things better, the page is more accessible to people using screen readers, and "the page degrades better in less capable browsers." Small phones now rather crash their browser than not display the CSS of such a page, big phones make users zoom in and out of the CSS-based lay-out that looks just like a table, so the only browsers this "degraded" page would be seen in is lynx which nobody uses. Google doesn't care if content is arranged in a <td> or a <div>, and thus only people with screenreaders actually get the benefit of <div>. Meanwhile there are stacks of articles from CSS-purists out there on arcane trickery for how to make <div> based lay-outs that do ok when the user makes his browser narrower or wider, but that fundamentally do not get us any further than, well, <table>s because they are all still grids. And the most forward-thinking latest sites like MrTweet and Disqus decide to indeed actually target iPhone-like screens from the get-go, and thus end up with pages with huge fonts and two or so information items, inadvertently communicating on a desktop screen that the designer thinks you have vision problems and a learning disability.
We can't make a web-page for every different device, that would just be too much web slinging. But we can and must do better content adaptation than this. I actually attempted in 2005 to make web portals that looked great both on the desktop and on a smartphone of the time with the same HTML. I managed it by having two very different CSS style-sheets, with the handheld one basically throwing all kinds of information out and re-arranging the page to, for example, make the left-hand nav be a simple list on the bottom. Cheap scrolling down was all that was required. But I did have the luxury there of a manager who told me to do whatever it took to make this happen, and did not work in the standard agency model of approving a 'look', a 'page', an 'experience', where every image and text and menu had to be just so. We weren't classically-trained graphic designers trying to get the brochure model onto a screen, or the newspaper with its columns model on to a screen. We were committed to interaction design, and just had information we wanted to communicate.
Scaling to different sized screens can be done, even if CSS is currently not the best tool and requires trickery to do it right as 'A List Apart' shows. But it can be done, and that 'A List Apart' article shows another statistic on which viewers are lost when users of the iPhone category of handhelds are not served well. You don't need to make 5 different websites for different classes of devices, like some designers seem resigned to because they can't think of another way. But to do it, page designers must stop designing, well, pages. Tell your Creative Director and Senior Agency Partner, no, we can't let Photoshop be the only tool with which we communicate how it 'looks', because it has to 'look' different, and even have different elements, on all the classes of devices we identify. And yes, we will need to educate our clients on that, but hey, they are losing all these iPod Touch and Android clicks right now, and they are adding up. Even CSS purists seriously need to re-evaluate how much time they are spending on the perfect way of arranging 3 items in a row, and realize that if their page looks bad or makes no sense if those 3 items are arranged underneath each other instead of side by side, they are not ready for the future of computing.
Because there are millions of handhelds like the iPhone out there, and a quarter of them are replacing standard screens for browsing. The future is now.
But that doesn't mean websites and applications can safely design for bigger and bigger. Netbooks are still going strong, sold in large numbers, used for web 'snacking' on the move, on the couch watching TV, instant little look-ups -- I am surprised to not have seen a mention of the URL entry bars of the browsers having been configured out-of-the box to take the user directly to IMDB, Wikipedia, and last.fm.
Those netbook screens are small, but the trend there is for higher resolutions in the same size, higher pixel densities. The latest Sony entry for that category, the totally over-specified Sony P Series, is the size of a business envelope, and manages to cram 1600 pixels in a 10 inch enclosure for a reported pixel density of 220ppi. Average desktop screens are at 72. Yes, this is getting closer to the magic 300dpi, when screens become like paper.
Sony VAIO P netbook. $900 in the US.
But the small-screen scenario goes further. Check out what I found, belatedly, today in Tom Hume's blog:
A quarter of iPhone users say it’s displacing a notebook computer. 28% of iPhone users surveyed said strongly that they often carry their iPhone instead of a notebook computer.
Source: Rubicon Consulting
This is not that surprising to me, really. Once a handheld became not a pain to browse with, of course it would be preferred, and the iPhone and iPod Touch are the first handhelds to finally not be a pain and deployed in enough numbers you can actually study it for a report like this. Android and HTC make this category even bigger. I saw it yesterday when meeting a UX designer who had a new beautiful Powerbook in his messenger bag, but decided to show me the latest work he had done on his iPhone because it was easily within reach. So there we were pinching in and out (the gesture to zoom out of a page on an iPhone or iPod Touch is to slide thumb and index finger to each other on the glass, 'pinching'. Zooming in is the reverse gesture) to see the page. I guess zoomable interfaces finally really are here.
Which is really not that fun an experience, running to and from a page, making your brain work hard to remember the overview of the page while you are zoomed into a piece you can read. Zoomable-interface proponents for decades -- yes, decades, check the ACM digital library for papers submitted to CHI conferences about them -- have said that our brains are hardwired for spatial navigation. The idea is that constructing and remembering mental maps is such a basic cognitive skill -- any rat in a maze can do it -- that a zoomable interface, which is all about making a map of what the page looks like, zooming in to the piece you want to read, and then going back up to zoom back into the next piece or just going directly to the next piece, would be super natural. Insert misogynist female-driver-getting-lost, or male-driver-not-asking-for-directions jokes here.
Well, now we know that there is science showing people aren't that much better doing web-navigation tasks in a zoomable interface than a plain scrolling ("panning") one (although maybe the test population would have done better in the mental-map-making if there had been some cheese at the end). I also realized yesterday that browsing on the iPod has enlarged the navigation vocabulary; used to be we just had to scroll vertically and horizontally, now we two different gestures for zooming in and out added. Sure they are 'intuitive' in that when you see them done once you totally get it and are off and running, but it is still 'more stuff'. And I already hated it when a web page made me scroll left and right instead of just simply up and down. Yes, the iPhone interface has made scrolling really easy, far easier than using scrollbars ever did, but really, up and down is just the most of scrolling I want to deal with. Anything else is just too much to keep track of during a show-and-tell session over breakfast.
So where are we right now? Still with a web trying to sell things on a three-column grid page with a large central image at top, designed for desktops, while a certain category of handheld is displacing desktops for browsing, netbooks are getting high resolution screens that will make text specified in pixels unreadable, and the games- and media-oriented sets are getting monster screens that dwarf those 3 columns. Many companies with large brands are still making <table>-based lay-outs because the graphic designer did a beautiful mock-up page in Photoshop and the HTML jockey is tasked with making sure all pieces fit in the grade just like in that image that got approved by the Creative Director. Semantic-HTML purists want <table> to be used for tables only, and continue their march to replace everything with <div>s arranged with CSS, ostensibly so Google will find things better, the page is more accessible to people using screen readers, and "the page degrades better in less capable browsers." Small phones now rather crash their browser than not display the CSS of such a page, big phones make users zoom in and out of the CSS-based lay-out that looks just like a table, so the only browsers this "degraded" page would be seen in is lynx which nobody uses. Google doesn't care if content is arranged in a <td> or a <div>, and thus only people with screenreaders actually get the benefit of <div>. Meanwhile there are stacks of articles from CSS-purists out there on arcane trickery for how to make <div> based lay-outs that do ok when the user makes his browser narrower or wider, but that fundamentally do not get us any further than, well, <table>s because they are all still grids. And the most forward-thinking latest sites like MrTweet and Disqus decide to indeed actually target iPhone-like screens from the get-go, and thus end up with pages with huge fonts and two or so information items, inadvertently communicating on a desktop screen that the designer thinks you have vision problems and a learning disability.
We can't make a web-page for every different device, that would just be too much web slinging. But we can and must do better content adaptation than this. I actually attempted in 2005 to make web portals that looked great both on the desktop and on a smartphone of the time with the same HTML. I managed it by having two very different CSS style-sheets, with the handheld one basically throwing all kinds of information out and re-arranging the page to, for example, make the left-hand nav be a simple list on the bottom. Cheap scrolling down was all that was required. But I did have the luxury there of a manager who told me to do whatever it took to make this happen, and did not work in the standard agency model of approving a 'look', a 'page', an 'experience', where every image and text and menu had to be just so. We weren't classically-trained graphic designers trying to get the brochure model onto a screen, or the newspaper with its columns model on to a screen. We were committed to interaction design, and just had information we wanted to communicate.
Scaling to different sized screens can be done, even if CSS is currently not the best tool and requires trickery to do it right as 'A List Apart' shows. But it can be done, and that 'A List Apart' article shows another statistic on which viewers are lost when users of the iPhone category of handhelds are not served well. You don't need to make 5 different websites for different classes of devices, like some designers seem resigned to because they can't think of another way. But to do it, page designers must stop designing, well, pages. Tell your Creative Director and Senior Agency Partner, no, we can't let Photoshop be the only tool with which we communicate how it 'looks', because it has to 'look' different, and even have different elements, on all the classes of devices we identify. And yes, we will need to educate our clients on that, but hey, they are losing all these iPod Touch and Android clicks right now, and they are adding up. Even CSS purists seriously need to re-evaluate how much time they are spending on the perfect way of arranging 3 items in a row, and realize that if their page looks bad or makes no sense if those 3 items are arranged underneath each other instead of side by side, they are not ready for the future of computing.
Because there are millions of handhelds like the iPhone out there, and a quarter of them are replacing standard screens for browsing. The future is now.
