How to Turn Any Site Into a Responsive Site
This page may contain links from our sponsors. Here’s how we make money.
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?
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.
Keypoints
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.
Screen sizes
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.
Pixel density
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:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
background: red;
}
}
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:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
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
You can use this technique explained on CSS tricks also (it’s amazing, isn’t it?). It relies on media queries and JavaScript, but I’d better replace the media queries part with JavaScript code so you make sure your menu will work with disabled JS.
Hiding sidebar elements
You can just get rid of elements you don’t want for the sidebar, using this CSS:
@media (max-width: 960px) {
#sidebar .hideme { display: none; }
}
Reposition elements
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):
<ul id="skip-nav"> <li><a href="#main">Jump to content</a></li> <li><a href="#search">Jump to search</a></li> <li><a href="#comments">Jump to comments</a></li> </ul>
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
WordPress plugins
We’ve got quite a few plugins, but the ones I like most are:
WP Fluid Images
WordPress Mobile Pack
Any Mobile Theme Switcher
jQuery plugins
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:
ResponsiveSlides.js
Isotope
TinyNav.Js
More cool stuff
Also, you can use a grid system to help you on this, like the 1140px grid.
