The Mobile Internet is Exploding
Unless your name is Rip Van Wrinkle, you might have realized that there has been a bit of growth in the mobile sector recently. As of February 2012, the Pew Internet Project found that 46% of all adults in the US own a smart phone, 18% own an e-book reader, and 18% have a tablet computer. It is no longer enough to build a separate mobile site. We need to rethink the process for building websites entirely.
Websites are Not Print
Web designers have inherited a rich legacy from print design. Things like grid layouts, padding and font kerning all trace their roots to the work pioneered ages ago by graphic designers and typesetters. But we live in a rapidly changing era of continuous Internet access and mobile devices. Web designers are really now beginning to shed their ties to the physical constraints of print and think about the display and reuse of text and media in entirely new ways. A recent study published by Google exemplifies this trend.
Google’s researchers found that “90% of people move between devices to accomplish a goal”. Meaning that, not only are a growing number of people accessing websites from smartphones and tablets, but that those same people are switching between different devices to access the same websites. That is a remarkable statistic and shows that not only is it necessary to have a site that works on a mobile device but that it is critical to understand the integration between your mobile site and your desktop site and maintain consistent landmarks across those.
Mobile First - Content Out
In the influential book, “Mobile First”, Luke Wroblewski makes a compelling case that websites should be designed first for mobile devices, and then progressively enhanced for display on larger screens. In doing so, Wroblewski argues that websites will be better prepared for the rapid growth in use of mobile devices and ready for the new challenges and capabilities that these devices bring. As I write this post, we are expecting a Kindle Fire 2 release tomorrow, a whole new influx of tablets running Microsoft’s latest OS in October and rumors of a seven inch iPad sometime this fall. None of these devices match the 1024 x 768 or 320 x 480 pixel screen size standards that came to dominate web development in the past few years.
Mark Boulton, the lead designer in charge of the drupal.org redesign, refers to this philosophical change as focusing on “Content Out” instead of “Canvas In”. It is no longer possible for a web designer to think like a print designer. Variable widths, rescaleable images, responsive layouts and finger gestures are becoming the norm. It’s time to move beyond obsolete conventions and truly embrace the fluid and dynamic nature of the web.
When building a mobile site, it almost takes a kind of user telepathy. Before a site visitor even arrives, we will be ready with exactly what they want, where they want it and when they want it. We know that site visitors don’t care about mission statements and organizational structures. They almost always have a specific purpose in mind and are trying to fulfill that objective whether it may be getting an answer to a question, purchasing a product or locating a phone number. The space constraints of mobile development force designers to prioritize what appears on the page, based on the site visitor’s needs. Instead of wasting that emphasis on a navigation menu, the content should appear first and the navigation menu second.
Don’t Go Chasing Waterfalls
In bespoke web development, there is an incentive to follow what is notoriously known as the “waterfall” model. For those not familiar with the term, the waterfall model follows a common sequence: first gather the requirements, next create wireframes, then mockups, then develop and implement the design, test, and finally, enter the content and launch. It is a tidy industrial process and the phases adhere to common sense. This model, however, treats content almost as an afterthought and is prone to communication gaps and rigidity.
The waterfall approach presumes that the content structure has been fully captured, vetted and represented from the outset. This is appropriate for small, short-term websites that don’t anticipate much change. But when you have a site with more than a hundred pages and growing, the interplay between design, structure and features gets complicated fast. At some point, the hidden costs to all the assumptions baked into the process are inevitably unveiled. Therefore, it is critical for a medium to large project’s success to repeatedly test and apply feedback to the content structure throughout the lifecycle of the project. Such design iterations are the promise of agile development. But we don’t need to get bogged down in the details of scrums, extreme programming, user stories, etc. here. The point is simply that content has implications for the structure of the website, while the structure of the website influences the text, images and other media on the site. The two are deeply intertwined.
This is part one of a three part series, “Emergent Design for the Web.” In the next installment of this series, I will take a close look at how a content structure is implemented in Drupal and how this process affects everything about your site from automation to z-indexes.