A bit of history:
Remember when you got your first smartphone and visited a website? Can you recall the effort to scroll through a page, not to mention the pages? Scrolling left, right, up and down just to read an article. Enlarging the article to actually read it led to more scrolling. Yes, what happened a couple of years ago on the internet is actually forgotten history today.
Until…the mobi-website. Yeah…a website specifically for the smartphone. Not so yeah for the website owner because it meant having two websites, each with its own cost implications. Twice the work and twice everything.
Responsive design to the rescue:
The idea of responsive design does not need much of an introduction. I am yet to meet a client that does not ask me whether I can make his/her website “work on a desktop and a smartphone”.
The idea of having a responsive website does not sound complicated. It certainly is not complicated. When I first learned to build responsive websites I was introduced to media queries. Media queries is simply CSS code that establishes the size of the browser (device) you are using and displaying the website’s content accordingly. If you have a website with three columns for example, a media query will instruct the applicable CSS code to become active and display the content in terms of that code. If the browser is on a desktop computer the website will display as a three column website. If the browser is on a tablet or iPad the media query will identify the applicable browser size and call up the css code that will force the website to display two columns or even one column, each below one another. The same principles will apply when you visit the website with a smart phone or even smaller device such as an iPod.
Even though responsive design has been around for some time now, there are still many websites that are not responsive, in other words, not optimised to be viewed by different sized devices.
So what is mobile first then?
With the advent of responsive design, designers started building websites suitable for desktop computers and then added media queries as explained above. As you viewed the website on smaller devices some of the website’s functionality was taken away to cater for the smaller screens. Although this gives mobile users access to better websites than what was previously possible and at a lower cost for the website owners this however still led to the situation where websites optimised for mobile users were stripped from content available to desktop viewers. Mobile users still did not enjoy the full potential of websites on their devices.
This type of website building was referred to as Graceful Degradation. Since 2010 however, with Google’s announcement that it was going to take an approach of Progressive Enhancement (mobile first) it became the buzzword of the day. Mobile first simply implies that a website is first built with the mobile device in mind and then progressively enhanced for bigger devices. This approach is also in line with Google and other search engines’ approach to award higher ranking to websites optimised for mobile devices.
In theory then, it is clear that Progressive Enhancement is the way to go. Hang on just a bit though. Why did I say in theory? Simply put, theory follows practice. When following the Progressive Enhancement process you kick off the design process with everything optimised for the mobile user. You therefore do not have a watered down product as will be the case with a Graceful Degradation process. You start with a good basis for the smartphone on which you can further build as you design and build your way up to the desktop or even a smart TV.
With the major search engines promoting and awarding mobile friendly websites with better rankings it is clearly the way to go. With an ever increasing number of people browsing the internet on small devices there is no reason to delay having your website mobile.
As always, this article was written for the non-geeky and therefore kept to the point without too much technical jargon. Should you wish to comment on this article you are most welcome to do so below.
®WebScripto, a Pretoria based Website Design Company.