In the past year the mobile browser market share has more than doubled, rising from 3.79% in January 2011 to 7.67% in December 2011 (see chart below). In one month, from November 2011 to December 2011, mobile and tablet device browsing jumped nearly 1%. At the same time, usage of Microsoft's legacy Internet Explorer 6 browser dropped below 1% market share in the United States.
The time is upon us. We no longer live in a world where the only option is to develop a website with the antiquated workflow of separate "desktop" and "mobile" versions. In the famous words of Stephen Hay, "There is no Mobile Web. There is only The Web, which we view in different ways."
Mobile Design Is Not 960
Because of the web's history with the print medium, design on the web grew from design in print, which was limited to the constraints of the canvas. Order and control were brought to the canvas through the use of a grid system and that grid system was ported for use on the web (see 960 grid system).
But the problem is, we aren't constrained by the same type of canvas on the web as we are in print. The "canvas" is the viewport of the device we view the web on—a computer monitor, tablet or smartphone—but that device is unknown at the time of creation. So we must respond or adapt on the fly to deliver the appropriate design for the device being used. We need to embrace the flexibility of the web instead of fighting against it with attempts to control and constrain.
In some ways we have already been embracing this flexibility for years. With the use of simple HTML/XHTML and CSS, web designers have been harnessing one of the truly powerful tools of the web: the fact that browsers will ignore what they do not know. That is, if a browser comes across an HTML element or CSS declaration that it does not know how to display, it will simply ignore it instead of throwing an error, as is the case with most scripting and programming languages.
Progressive Design Helps Mobile Design
Along these same lines we can begin to design pages for the web with progressive enhancement: the browsers with the most capability will get the better experience; older browsers with less capability will function but have less finesse. This technique builds upon the front-end web stack and ensures that semantics—the meaning of the content being displayed—is presented through the markup and anything else provided only enhances the user's experience and if missing, will not degrade functionality. In this scenario, the same content will not look the same everywhere, and this is a huge hurdle to overcome for some.
One of the main reasons why many people cling to the expectation that a web design should look the same across every browser is that one of the first things that designers show them is a carefully crafted static design made in Photoshop or Fireworks.
—Andy Clarke
Paul Irish wrote a great article on a process called TAFEE (Tiered, Adaptive Front-end Experiences) where he explains this approach in terms of television technology. Irish says that you wouldn't feed a widescreen HD television with 3D technology a 4-by-3 ratio black-and-white picture simply to ensure all televisions displayed content the same way and had the same experience.
So how can we extend this idea to the web and mobile devices? With a tiered, responsive approach: designing for mobile first, where content should be in its simplest, most easy to consume form, and building the experience in layers for successively capable devices.
Further exploration on the subject can be found in the following resources:
- Ethan Marcotte's article on A List Apart, Responsive Web Design, and the book it inspired, "Responsive Web Design", from A Book Apart
- Luke Wroblewski's "Mobile First", also from A Book Apart
- Aaron Gustafson’s "Adaptive Web Design" from Easy Readers
- Media Queries, a portfolio of responsively designed websites
- What the Heck Is Responsive Web Design?, a presentation
- .net Magazine's 21 top tools for responsive web design
- and, freshly on my desk, "Head First Mobile Web" from O'Reilly Books, by Portland's own Lyza Danger Gardner & Jason Grigsby of Cloud Four
Add comment