How to Turn Any Site Into a Responsive Site

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

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

 

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

33 Responses

Comments are now closed on this post.

  • John Tanedo, April 30, 2012

    Great Article! I would love to try this on one of my clients’ websites… But the problem is the designs are a bit corporate ; with a featured slider and a 3 column services box . . . Will these also work on those kind of websites because so far from what I have read and seen on websites that are responsive, they are mostly 2 column and blog format websites…

  • Mitch Monsen, April 30, 2012

    I think Twitter Bootstrap would be a good addition to your list here. Lots of customizable aspects and comes with a fluid layout grid as well.

    It’s not technically “mobile responsive” but it will adjust to different screen sizes. Worth a mention, I suppose. :)

  • champico, April 30, 2012

    Houston we have a typo here : “background” line 5 in the first code snippet.

    Great article, I’m actually redesigning my company website and this article will definitely help, I also had a look at Twitter Bootstrap ( mentionned by Mitch ) and Zurb Foundation, I think they worth a mention.

    Great article, bookmarked !

  • Rochester, May 1, 2012

    @John

    Hey, thanks :)

    You can turn them into a single column website, that works best for any mobile site. Also, if you are running WordPress, try those plugins, they’ll make you job far easier!

    @Mitch
    Oh, that’s a good option indeed. I use it all the time :) But since the article was pretty long I’d rather just keep my top-top-top favorite items there. But we certainly will mention it in near future :)

    Thanks!

    []‘s

  • Melvin, May 1, 2012

    Thanks for the great article. I’ve been sorta procrastinating about diving into responsive design but know the value of it. I’ve been reading and playing with it but can’t avoid it anymore. This article is a good resource and is kicking me over the edge.

  • toptensthings, May 1, 2012

    Responsive Site is key for now! because you have to target and check the analysis of your site, and you need to cash those readers as well, thanks for useful tutorial, i would love to practice
    thanks

  • Steven Snell, May 1, 2012

    Champico,
    Thanks for pointing out the typo. I just fixed it.

  • Saya, May 2, 2012

    You explained in a very simple and nice language. Thanks

  • FredB, May 2, 2012

    Great article!

    To date I’ve converted or built from scratch 10-12 responsive sites.

    Mostly small sites, but I’m all prepared for the big one now!

    It’s a great way to go. My clients love their new responsive/adaptive sites, especially when I do a before and after screen shot, they can see the benefits.

    Start from mobile first, then build up. I optimize images to the max to reduce data downloads for slow or expensive mobile phones. Working up from mobiles also shows how much stuff you don’t need on a site, mobile or desktop.

    I try to give the mobile user the same experience as a desktop user.

    I’ve used a mix of different methods. Skeleton is a good way to go, or a responsive template from ThemeForest..com . Trying Goldilocks at the moment and it has a lot of potential.

    Go for it guys, it’s the future!

  • Think360studio, May 3, 2012

    Hi. Great article. As you had mentioned in your article about power of Mobile design, I totally agree with this view because now the coming world is the mobile world. So its very important that whatever a Web designer design any site, it should be mobile or Android friendly. Web designers who are from past 4 to 5 years in this field Have their own sites, its now difficult for them to make it mobile or Android friendly. I think now all those has to create new websites. In last i must say thanks to you for an awesome concept about the responsive website which you had given in a very easy language and in a very simple steps.

  • Gary, May 3, 2012

    Well written blog and easy to understand. So many people go too indepth into current trends in web design. This blog gets straight to the point.

    Keep them coming.

  • darshan, May 3, 2012

    This is what I was really looking for. I like the fill in the blanks part.

    Thanks for sharing the knowledge.

  • Laets, May 9, 2012

    Great article!, am still new to Graphic design…thanks for sharing your knowledge !!! keep them coming.

  • Robson Wolanski, June 20, 2012

    Now I know what is a responsive site!! Thanks for sharing your knowledge!!

    Really like the tips and now I have a checklist to use in my company website!

    Best regards!

  • John, August 3, 2012

    Great article and good to use WP plugging to make life a lot easier.

  • King Don, August 13, 2012

    Great resource. I’m looking to make a responsive theme for Magento.

  • Federico Capoano, September 14, 2012

    Funny, im writing this comment from a smartphone and this site does not have a responsive design :-P

    Nice article!

    • Steven Snell, September 17, 2012

      Federico,
      It is in process right now and should be completed pretty soon.

  • Alfian Effendy, December 30, 2012

    I think mobile will take over desktop use, So it’s highly recommended use responsive design in your website. Nice article. :)

  • Waqas, January 15, 2013

    Wow, it’s amazing. I am really thankful to you for this simple tutorial with the understandable examples.
    It helped me to understand the myth of responsive designs.
    Thanks!

  • Imad, February 7, 2013

    I must appreciate, that article had to get me started for making a site of my client responsive straight away.

  • Shamshul, February 8, 2013

    What is mean by fill the blanks?
    What I have to do ,do i have to paste the code.
    Can you please explain clearly or mail me the steps to get it done
    thanks

  • Shameer, February 12, 2013

    Great!!!. Got some idea on how to start one of my clients site to responsive. thanks

  • Steven Snell, February 12, 2013

    Shamshul,
    It means that you need to enter your CSS code for the different screen widths.

  • Michael Pehl, March 2, 2013

    To be honest, I would prefer starting from scratch instead of “converting” a site that is built on pixel widths.

    You must also think of the whole UI that should be converted, not only some columns and stuff.

    • Steven Snell, March 4, 2013

      Hi Michael,
      I agree with you that it is a more ideal situation to create a new responsive site from scratch. The point of the article is to show how responsive design works and that it is possible to change most fixed width designs into responsive designs.

  • Neeraj Bansal, May 16, 2013

    All your points are very helpful, thanks for this awesome post.
    But @JQuery plugins make website heavy which directly effect website loading time.

  • Vince Paul, June 12, 2013

    I’m starting to learn on making responsive sites and good thing I was able to read your post. At first I was intimidated in making sites responsive but because of this, it feels like it’s easier than I thought. Thanks for this. :)

  • K.S.S.Bhaskar, June 14, 2013

    The above point are very useful.
    I am very grateful and thanks

  • Cer, June 16, 2013

    then why your website isn’t that responsive?

  • Mauro, July 16, 2013

    hehe Cer, you killed me with that reply! :)

    Anyway, I´ve read a good article in Webdesigner magazine (UK), that explains exactly this a little more deeply. But I appreciate how briefly you did it, and those resources URL´s mentioned.
    Thanks a lot! Responsive is the way to go it seems… hard for and old web designer but… it´s unavoidable.

  • martin, September 18, 2013

    i have been updating my sites and starting new ones to be responsive and adaptive: HOWEVER;

    when i put in one media query it works.

    when i add a second i have to put !important behind every style so that it actually works.

    but i see others don’t

    why? what am I missing