As more mobile Internet devices become available, web designers and developers may turn to fluid designs and controls to compensate for radically different screen sizes and capabilities.
In just the last few months, computer and mobile phone manufacturers have released new mobile Internet devices (MIDs), including netbooks (HP's Mini 110 as an example) and Internet-enabled mobile handsets (like Google's Nexus One) that continue to fuel consumer demand for ubiquitous connectivity. But these new devices do pose challenges, including screen size and resolution, for the web design and development community. These challenges may lead to the need for more fluid website and application designs.
From 120 Pixels to Infinity
As mentioned above, one of the fundamental mobile design challenges has to do with resolution and actual screen size. The smallest Internet-enabled mobile handsets have screens that are just 120 pixels wide. Meanwhile something like 80 percent of Internet users has a screen that is at least 1,000 pixels wide. So, creating a website or application with a width set in fixed pixels may not work.
To make matters more challenging, several companies released pico projectors at this year's International Consumer Electronics Show in Las Vegas. For example, Microvision's SHOWWX laser pico projector can plug into a MID and then project a WVGA (848 x 480 pixel) image at an overall viewable size of up to 200 inches in diagonal. Put another way, the SHOWWX can take a site that is being displayed on an iPhone 3G (420 pixels wide if held horizontally) and project it onto a wall so that it is being shown at a size approximately the same as 16 50-inch televisions arranged 4-by-4. Granted the actual number of pixels has not so dramatically increased, but the illustration demonstrates that designers cannot make assumptions about how a site or application will be displayed across all platforms.
Google Earth's Screen Resolution Example
Screen resolution is an important issue. For example, the Google Code Blog recently posted about how screen resolution was affecting downloads for Google Earth.
Google noticed that "many people who visit the “Download Google Earth” page never actually download" the application. Suspecting that screen resolution may have been part of the issue, Google's Bruno Bowden "rendered several weeks' worth of page visitor browser sizes in a contour visualization" that ultimately showed that approximately 10 percent of visitors to the Google Earth landing page could not see the download button without scrolling horizontally—which is rarely done. The findings were compelling enough that Google posted Bowden's visualization as a DIV overlay so that web designers and developers could compare their own websites to Bowden's screen resolution findings.
While Google's test is not necessarily indicative of all Internet use or of mobile Internet use, it does demonstrate how screen resolution affects user experience and conversion.
The Need for Liquid Design and Potential Solutions
With this coming growth in MID usage, designers and developers are going to need to find ways to address cross-device usability, and while no particular technique has become the definitive answer, there are some potential solutions.
- Use relative measurements in CSS. For some time liquid design and accessibility advocates have been recommending relative dimensions, em, rather than fixed dimensions, px, in CSS. Thus, much of a site's wide and height could be flexible enough to provide a good user experience on both mobile handsets and desktop computers.
- Use HTML 5 and SVG. HTML 5's expanded support for scalable vector graphics (SVG) makes it possible to render site graphics, like a logo, as a vector rather than a raster graphic. As a result such a logo will look good at any size.
Editor's Note: We would like to know if you think screen resolution and actual screen size are real issues and how you plan to address them in your projects. Please let us know your thoughts in the comments section below.
