I've noticed that my online viewing habits have changed a lot over the last year or so. I don't mean in terms of what I'm looking at, but rather the devices I look at it on.
Increasingly I'm making a lot more use of tablets or smart-phones to browse the web. When doing this, the first thing you notice about a web page is if it behaves' nicely on a mobile browser or not.
By 'behave' I mean if I can read the contents easily, or do I have to continuously zoom in, zoom out and scroll around the page to read it. If a web page is not aware of the fact it may be viewed on a mobile browser then chances are it's actually quite a battle to read it.
In the web design community this is increasingly being seen as a bad etiquette, with people expecting pages to adapt themselves to fit the form factor of the browser they're being viewed in - in other words, the web page should be responsive.
It's also ironic if the web page of a mobile app isn't responsive and can't easily be viewed on a mobile browser. If this is the case, it's my view that the least you can do is make sure that it's easily viewable on devices other than desktop browsers. If not, you risk losing potential customers and, even worse, they may actually complain to you.
This happened to me recently with a website for a game I was releasing. I started to get people on Twitter complaining to me that the page made them scroll on their smartphone and that I should look into making it responsive.
The fact that it wasn't responsive was an oversight on my behalf and as soon as I got those complaints I immediately re-wrote the site to be aware of what it's being viewed on and adapt itself.
An example
If you are having a bit of trouble visualising what a responsive site looks like or does then we can use mine as an example.
Browse on over to my game site - if you are viewing it on a desktop browser then it will adjust its layout to fit the style choices I made for desktop.
To see how it responds to a smaller device, grab the right hand edge of the browser window and shrink it by dragging to the left. Once you reach a certain point you should see the page re-adjust its layout. This is especially noticeable if you are at the top of the page where the main navigation is.
If you are reading this article on a smartphone, of course, then unfortunately you are only going to get the mobile version.
So how is this done?
All of this is achieved through CSS and its ability to 'cascade' style. You don't need multiple CSS files or multiple HTML files, in fact my own site above is one single HTML 5 page with embedded CSS style tags.
The magic of responsive design takes place through a relatively new feature of CSS called Media queries. This is the definition:
"Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012 and is a cornerstone technology of Responsive Web Design."
But how do media queries work?
Explaining how CSS works is beyond the scope of this article, but it's worth noting CSS stands for Cascading Style Sheets. This means that you can override the meaning of a style in a cascading manner in a page.
So, to begin with, you may make the colour of all
tags green, but later on you decide you want to make them red. The
tag itself doesn't change - only its style.
Media queries are conditional CSS that only gets acted upon based on the condition set, which in this case would be the size of the viewport. So if a particular viewport size is detected by the CSS engine, all the conditional CSS in the query gets executed.
This allows your CSS code to change styles in a manner to match a mobile browser.
Explanations are all well and good, of course, but they don't beat looking at the code itself, so here's a very simple HTML 5 page with embedded CSS that does what my example above says - changes the
tag colours based on the media query.
So, at the end of all this, what's my conclusion?
Responsive web design is an expansive subject one too large to cover fully in this short article. However, hopefully this small primer will have served up a few reasons as to why you should consider adopting responsive design for your own websits - especially if it acts as the landing page for your mobile app.
Likewise, it would be a touch unfair to simply leave you wanting for more, so here are some links to where you can get more information on responsive web design:
- http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
- http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
- https://developers.google.com/webmasters/smartphone-sites/details
- http://www.html5rocks.com/en/mobile/responsivedesign/
Byron Atkinson-Jones is an experienced developer who has worked for the likes of EA, SEGA Sports Interactive, Lionhead Studios and notable indies such as Introversion and PomPom.
He is now a full time indie.
