If you were (un)lucky enough to have a smartphone before the launch of the iPhone back in 2007 you probably remember the overall experience being very clunky, and it being incredibly difficult to surf the web.
In particular, Windows Mobile 6.1 devices would load the whole desktop website and you would have to zoom in and out of each section to read it and navigate around.
If you didn’t have a smartphone, surfing the internet on your mobile phone was even worse. Most used WAP internet connections to load webpages on their tiny screens, this meant you could read just a couple of sentences at a time before using the arrow keys to scroll down the page.
2007 Started a Revolution
Then on the 9th of January 2007, Steve Jobs stood on stage at the Macworld Conference & Expo in California and pulled an iPhone out of his pocket. A device with capacitive multitouch features, making it easy to glide around apps and webpages.
Suddenly, web designers were rushing to launch mobile versions of their sites. These were cut down versions of their main website, built completely independently and tailored to the 3.5-inch screen of the iPhone.
This was great, finally, users didn’t need to zoom in and out to read the text on a page. Instead, the site would just load up and it would work.
Except other manufacturers then launched different sized smartphones, followed by the Apple iPad and the slew of other copycat tablets that hit the market. Suddenly mobile sites designed for the 3.5-inch iPhone didn’t really work on larger 7 and 10-inch tablets. The mobile browsing experience was broken again.
2010 Changed it All
Then, on 25th May 2010, Ethan Marcotte published a blog post. In this article, he described what he called “responsive web design”. This would be a philosophy that would do away completely with mobile websites, which he described as ridiculous since designers would be creating dozens of different sized websites for each sized screen.
Instead, his responsive web design would use flexible images and fluid grid design, allowing the layout of the page to change to fit the size of the site. It would mean web designers could design one website and it would look great on any device, no matter what size.
It would also mean that users of computers could resize their windows and not have to refresh the page to make it fit the new screen.
Today, nearly every site is designed with this responsive philosophy. For example, users can play Age of Gods at www.casino.com/uk from their smartphone without having to download an app.
Other good examples of this fluid design include Dropbox. It’s layout changes from two columns to one as you move from desktop to mobile sizes. The colours of text event change in response to this, since the background colours change as the columns are merged together.
While Marcotte is credited with coining the term “responsive web design” and making it the mainstream concept that it is today, he wasn’t the first to build a responsive site.
It was actually Audi who built the first-ever responsive site way back in 2001. It was ahead of its time though, with the Netscape browser requiring each page to be refreshed if the window size changed, making it impractical.
Regardless of this, the convenient and intuitive user experience that we enjoy on the mobile internet today is in part credited to Marcotte. Without him, we would still be surfing clunky “mobile-friendly” sites and zooming in and out of the unfriendly ones.
