The web is entering a fascinating, exciting and, frankly, ball-bursting phase in its history; a phase that will revolutionise the way web content is consumed and presented.
In its first few years, web content was primarily delivered via PCs running one of several mainstream browsers. The PC was the box that contained the browser, the browser was the box that contained the site, and the site was the box that contained the content. This outside-in approach to web design resulted in the content often feeling like an afterthought.
In the late 1990s, a new breed of designers started to push standards-based web design, which separated presentation (via CSS) and content (via HTML). Making changes that involved content became easier, and so designers began to view it with more affection.
Over the following years, advancements were made: CSS and HTML evolved, JavaScript provided a new way to enhance user interfaces, blogging tools and CMS platforms enabled anyone to get content online, and web publishing made steady progress. However, the PC was still the main way people accessed content, and though presentation had improved, the outside-in design approach remained. But in 2007, the iPhone arrived and everything changed.
As we sit among a slew of browser-enabled mobile devices, it’s hard to believe that up until the launch of the iPhone, the main question designers would need to answer was whether 1,024×768 was still the best screen size to design for according to browser statistics.
To appreciate the full extent of mobile’s march toward world domination, let’s look at a few statistics.
- According to Gartner, global smartphone sales to end users reached 54.3 million units in the first quarter of 2010, an increase of 48.7 per cent from the first quarter of 2009.
- Forrester Research expert Sarah Rotman believes 3.5 million tablets will be sold in 2010, growing to 20.4 million in 2015. She expects desktop sales to drop from 18.7 million units in 2010 to 15.7 million units in 2015.
- In May, Google announced that in May 2009, it had been activating 30,000 Android phones per day. By February 2010, that number had jumped to 60,000. By 23 June, that figure had surpassed 160,000 per day.
So what do these figures tell us? In short, that the ‘luxury’ of designing content for one screen size – or ‘viewport’ – is no longer an option, the concept of a static website is dead, the days of putting content in a series of set boxes are gone, and the promise of flexible content and design can now be realised. Like I said, these are ball-bursting times.
Like any movement, it often takes someone to capture the zeitgeist in a way that resonates with their peers. And in the case of flexible web design, a designer called Ethan Marcotte has managed to do just that, in an article titled Responsive Web Design, written for the quite brilliant online journal A List Apart.
In this article, Marcotte says: “In recent years, I’ve been meeting with more companies that request ‘an iPhone website’ as part of their project. It’s an interesting phrase: at face value, of course, it speaks to mobile WebKit’s quality as a browser, as well as a powerful business case for thinking beyond the desktop. But as designers, I think we often take comfort in such explicit requirements, as they allow us to compartmentalise the problems before us. We can quarantine the mobile experience on separate subdomains, spaces distinct and separate from ‘the non-iPhone website’. But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we – and our designs – adapt?”
The answer, as Marcotte explains, is to put content at the heart of your design process and create a fluid grid with flexible images that can adapt to the screen size it’s being viewed upon. A desktop user will see a three-column layout, in landscape mode on an iPhone you’ll get two columns, and so on. This is all possible thanks to an addition to CSS3 called Media Queries.
I may be getting over-excited about the possibilities this presents, but I really think we’re looking at the future of web design. If you have any interest in how the presentation of web content is going to change, then Marcotte’s article is a must-read. You can find it in full at A List Apart.
