Search

How to Turn Any Site Into a Responsive Site

Share

Check out our new Exotico UI Set. Free and premium versions available.

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 Web Design

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).

Mobile Stats

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 {
 backround: 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

WP Fluid Image

WordPress Mobile Pack

WordPress Mobile Pack

Any Mobile Theme Switcher

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

ResponsiveSlides.js

Isotope

Isotopes

TinyNav.Js

TinyNav.js

More cool stuff

Also, you can use a grid system to help you on this, like the 1140px grid.

1140 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!

Firewoiks

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.

Follow Rochester: WebsiteTwitterYouTube channel

 

Royalty-Free Graphics

Comments are closed.