A Question of Orientation
When designing a site for a mobile device, it is easy to only mockup designs that feature the device in the portrait orientation. Even though the majority of your users will be browsing the site in this orientation, you have to consider what will happen with they turn their devices to the side. Elements that fit well when viewed in portrait are going to inherit a lot of horizontal space once the orientation is switched to landscape. Flexibility is important to keep in mind when designing for mobile. It has become a habit to design websites that are not fluid and are based on a fixed width. On mobile, flexibility and responsiveness are your friends. Sites that are already fluid and flexible are going to translate much easier to the smaller, mobile screens.
On that note, responsive web design1 can play a huge role in mobile sites. If sites are built to be responsive, it will be much easier to go from a desktop-focused site to a mobile-focused site. Responsive design uses media queries in CSS to establish ‘breakpoints’ in the code where the design morphs to fit the changing browser window size. As you resize the window of a responsive website, you will notice the design changing to fit the new browser width. Take a look at Dan Cederholm’s site, simplebits.com, and resize your browser window. Magic!
Semantics and Grids
A benefit to all of the semantic coding we have been doing for years is that once you take away the grid structure of your site, it automatically has a natural hierarchy. Since elements are semantically placed in the code, they make sense when you remove the structure of your stylesheet. This lends itself well to responsive design as you can easily overwrite your structural elements within the media query for your mobile device. This is what we used during the mobilization of the Planet Argon website. Essential information blocks were reflowed to the new, smaller sized screen and non-essential elements were hidden.
Retina or not to Retina
While working on the soon-to-be released mobile site for Contiki, we were noticing that all of the graphics were looking extremely fuzzy on the iPhone 4. The retina screen on the iPhone and new iPad displays websites at twice their normal resolution. Think of it like taking a screenshot of your website, pasting it in Photoshop and doubling the image size. Not ideal. To solve this problem, you need to serve up two different sets of images via media queries: a normal-sized version and a double-sized version.
Retina graphics look fantastic, but they are also a cause for concern. Currently, the only retina screens are on mobile devices. When designing for mobile we usually focus on keeping code lean and images small. Retina graphics counter our best practice in keeping images small for mobile. Obviously, elements like logos and branding graphics will be the first to get the retina treatment. However, when you get to larger, featured images, you may have to make some hard decisions. What is the performance impact of serving a double-sized image to a mobile device? Is the crispness of this image key to overall user experience on the page? Perhaps a thumbnail with a link to the full-size image is a better solution. All of these questions are new but will play a big part of mobile and desktop web development in the very near future.
Closing Thoughts
Designing and coding for these new mobile devices is challenging and very exciting. It is one of those things that makes web development fun and we look forward to tackling more mobile projects in the near future.
1 Responsive design refers to the method of using CSS media queries to alter the design of a web page as the size of the viewport/browser changes from large to small.