I remember the time when our biggest worry was about making stuff work in IE6. And sometimes I think that it was far easier then. Now we have not only to worry about IE crazy stuff (though now it’s much better) but also with a lot of new browsers /OS combinations and also a lot of screen sizes.
We can’t deny the power of mobile design. Actually, research shows that in a few years mobile will overtake desktop browsing. But also, you can’t live in the future and need results now. Like, right now.
Here we’ll see a few ways to take your current site and turn it into a mobile friendly one, with little effort. We’ll see CSS basics, HTML optimization, WordPress and jQuery plugins and other cool stuff you should be aware of.
So, let’s rock!
What is this responsive thing, and why should I care?
Photo By: Yutaka Tsutano
Responsive design is when your site automatically fits in the user’s device. So if the user has a small screen, the elements will rearrange to show you main things first. You’ll have bigger buttons, more blank space between elements to avoid accidental activation, and so forth.
But why should I do all of this?
First of all, it’s far easier than you’d ever imagine.
With so many tools out there, all you’ve got to do is to know the basics to create great mobile versions of sites. It’s super easy to be mobile-friendly, you just have to know a little about devices, media queries and how to do small changes in your layout.
Second, it’s worth the effort (and it gets better when you remember how little that effort is).
Just a little example, according to W3Counter Apple iOS increased 180% from 2011 to 2012 while OSX stayed almost same. So in a few months you can actually expect to see more mobile browsing than desktop browsing (at least in the Apple world).
The same thing will certainly happen with other devices. So, be ready for big changes in the near future.
Oh, and the bad news is that if you already have your own site you’re late to make it responsive. That’s because the best scenario is when you do things for mobile first and after that you do the desktop version. So, when you start your next project, think about it earlier, ok?
With such great tools, grid systems, libraries out there it’s pretty easy to increase your conversion rates, and please your audience with mobile specific sites. But before talking about the tools we need to know the basics, devices, browsers, resolutions. Well, let’s go through them.
Despite tools, we have 3 points that you must know when designing for mobile devices. Here they are:
OS and browsers
We have mainly 5 OS types out there:
- iOS – for iPhones, iPads, iTouches
- Android – The most used OS for mobile devices, it’s everywhere
- BlackBerry OS – You don’t want to mess with this guy, it’s awful
- Symbian OS – Mostly for Nokia guys
- WebOS – Almost dead, poor guy
- Many, many others…
Just looking at this small list you understand why it’s way harder to do mobile-friendly sites than desktop ones, right? I mean, for desktops you have mainly 2 OSs (no Linux, I won’t count you). Ok, but it gets worse when we think about browsers and capabilities:
- Safari – The best thing out there.
- Android Webkit – Kind of good also, little slower than safari but works pretty good
- Dolfin – I’ve never used this guy, sorry. But it’s Samsung’s browser and seems to work pretty well
- Blackberry Webkit – The best option for blackberries
- Opera mobile – I’ve heard of this guy a while ago, it’s pretty good also, and improving a lot
- Palm Webkit – Don’t know a lot about this one, but it has good support to standard stuff
- Nokia Webkit – JS performance isn’t really good
- Well, you got the point
So, be ready to test a lot of things if you want a really good result. But as we do for desktop development, you just can’t lose tons of hours dealing with browsers issues, so stick with the top 3 and you’ll be good to go.
They range from 320×240 to 640×960, so you can’t just set absolute values as you are used for desktop development.
Also, since you already have your site you could use analytics data to figure out which is the best minimum values for you.
This one is tricky. Apple introduced the retina display which means that pixels are much smaller there. If you want a really good looking website, especially regarding icons and background images you should use bigger images for iOS.
CSS @media queries, it’s far easier to use than you’d guess
I must admit, I first heard about media queries a long time ago, though I only learned it last year. I think I just procrastinate whenever I can, right? Well, you don’t need to, my friend. Those media queries are just simple rules you add in your CSS to target only devices included on the rules.
It’s pretty much same as programming. Take a look at this code:
It’s just saying:
“IF (it’s a screen device) AND (its screen width is between 320 and 480), body will have a red background”
CSS-tricks.com gave us this amazing snippet:
All you’ve got to do is to fill the blanks
Elements to rearrange
Once you start doing things you’ll notice that it’s not just about making the site one column instead of multiple columns. Actually a few elements will cost you too much space, and you’ll need to remove them. You have a few standard options on this also:
Replace the menu with a dropdown
Hiding sidebar elements
You can just get rid of elements you don’t want for the sidebar, using this CSS:
Also, depending on how your HTML has been done you may want to switch content to the top of the HTML, and move the sidebar to the bottom, or even use JS to just show it when the user clicks on “show” or something like this.
“Jump to” links
It’s a good practice to have something like this in your code, so screen readers and mobile users can just skip to content instead of scrolling a lot (assuming that you have the sidebar first, or a common menu):
Shortcuts and tools
I know you love to get your hands dirty doing all this coding stuff, but you don’t need to re-invent the wheel. We’ve got a few plugins to help you on this
We’ve got quite a few plugins, but the ones I like most are:
And why not make use of the best JS library to help you on this? So here we have a few things where you can use jQuery to enhance user experience:
More cool stuff
Also, you can use a grid system to help you on this, like the 1140px grid.
Last but not least
I’ve found this extension a few days ago. It helps you to do responsive layouts if you work with Fireworks, automatically setting the media queries and adjusting the layout. It’s just awesome!
So, what do you think about it?
Do you have any advice on mobile design? Want to share your experience or have anything else to say? Don’t forget to leave a comment!
About the Author:
I’m a WordPress and FrontEnd (HTML5, jQuery, CSS3) specialist from Itajubá, Brasil. I just love writing about obscure topics, doing some cool stuff and helping people out there.
Published April 30th, 2012 by Rochester Oliveira