What is Responsive Web Design?
Responsive Web Design (or RWD) is a term used to describe websites that resize and shift their elements around automatically to accommodate different screen sizes. When you view a responsive website, you can see the elements move around if you grab the corner of your browser window and make it larger and smaller. Or you can see how it compares while on a desktop vs. a tablet and/or smartphone.
Websites are made responsive using media queries in the CSS. A media query is basically a line of code that figures out the resolution of the device the site is being served on. When it determines that the device screen size is less than a desktop website, it serves up different style definitions. The web designer is the one to determine how the elements should display at which resolutions. More on this in a bit….
Let’s Play with Responsive Design!
To get a better feel for responsive design, let’s first play with a couple shall we? The 3 examples below have nicely written case studies done on them that do a good job of explaining the responsive features and what it does well. When clicking on the examples below, play with them by resizing your browser window back and forth. This is best done on a desktop or laptop computer.
As you resize the window back and forth, you’ll see how the elements shift, stack and resize themselves. Three columns turn into two and then one as you make the window narrower and narrower. Some sites turn their horizontal navigation items into a vertical list or sometimes even condensed into a drop down menu. You’ll also notice most of the images change size as well.
Case study on responsive web design site, GreyGoose.com – click image
Case study on responsive web design site, BostonGlobe.com – click image
Case study on responsive web design site, BarackObama.com – click image
Why Should You Care About RWD?
2013 has seen a rapid increase in tablet and smartphone use, in fact 56% of Americans now own a smartphone1. And “a third (34%) of American adults ages 18 and older own a tablet computer like an iPad, Samsung Galaxy Tab, Google Nexus, or Kindle Fire—almost twice as many as the 18% who owned a tablet a year ago”2. This is why it’s absolutely crucial that your website or blog translate well on all platforms and give your readers the best experience so they come back for more.
But My Website Looks Just Fine on a SmartPhone!
Most websites will look just like they do on a desktop, only shrunken down. Why is this a problem?
It’s not a great user experience to have to zoom into a site and scroll side to side just to be able to read it. It’s better when things realign themselves so that they can appear larger (and more readable) on small screens. Another reason is so that buttons and links are “fat-finger friendly” meaning they are larger and easier to click.
How Do I Test My Site if I Don’t Own an iPad or Smartphone?
Easily! Just type in your URL at this website: http://quirktools.com/screenfly. Then you will be able to view your blog on multiple screensizes and even rotate the screen to see how it looks. What this tool won’t do though is tell the site that it’s a mobile display so it won’t show a mobile-only version of the blog.
To see the mobile version of your blog, you can switch the user agent on your website’s browser to pretend it’s a mobile display. This will trick your website into serving up the mobile version:
Chrome:
- Install the User-Agent Switcher for Chrome by going to Settings > Tools > Extensions.
- If you already have some extensions installed, scroll to the bottom and click “Get More Extensions” then search for User-Agent Switcher for Chrome.
- Once installed, you’ll see a little icon that looks like a piece of paper put on a Zoro mask up in your toolbar (probably to the right).
- Click it and choose the platform you’d like to view.
- Remember to switch it back to Chrome > Default when you’re done!
Firefox:
- Click on Tools > Add-Ons and select “Get Add-Ons” to the left.
- Search for User Agent Switcher and install it.
- Restart Firefox.
- Go to Tools > User Agent Switcher and choose the platform you’d like to view.
- Remember to switch it back to Default User Agent.
Safari:
Here’s a quick guide to switching the user agent in Safari.
Internet Explorer:
I’ll be honest, I don’t use IE much because it’s never been friendly to web designers so I don’t have any insight as to how to switch the user agent. But I’m sure Google will help! You may consider using another browser for a better browsing experience! 🙂
56% of Americans now own a smartphone … a third (34%) of American adults ages 18 and older own a tablet … twice as many as the 18% who owned a tablet a year ago”
Ok, So How Do I Make My Website Responsive?
Well I’ll be honest with you: it’s not that easy. I’ve been designing websites for over 10 years and there was still a bit of a learning curve. Like I said earlier, the web designer has to add media queries to the style sheets that tells the website to do different things at different resolutions. Another thing designers do is use relative sizing as opposed to absolute sizing. For example we use percentages or scaling sizes like “ems” or “rems” instead of definite “pixel” sizes.
But I’m not going to go into this here. If you really want to learn more about it, you can check out these beginner tutorials on responsive web design.
What You Can Do Instead
You’ve basically got two options:
- Use a pre-made responsive theme or template for your blog
- Enable the mobile site on your blog
1. Use a pre-made responsive theme or template for your blog
Check out some of these demos and play with resizing your browser window to see how they react to different screen sizes.
Blogger blogs
Here are a few nice responsive Blogger templates:
Pinfinity Blogger Template resembles a Pinterest layout.
Main Photo template by Main-Blogger is a free responsive template. Download it here.
Here is a list of more, or you can search Google for some responsive Blogger templates.
Self-hosted WordPress blogs
Doing a Google search on “responsive wordpress themes” will bring you hundreds of results but below are a few that I personally like:
This Vertical Responsive Theme* is free this week only on Creative Market!
Frau from Lizard Themes is a pretty in pink responsive theme that’s free.
Gather Theme from ThemeTrust is $49
Or check out this completely exhaustive list of premium responsive WordPress themes. There must be at least 100 listed here and some of them are really cute!
WordPress.com blogs
Some really impressive responsive themes, both free and premium available for free WordPress.com sites.
2. Enable the mobile site on your blog
Ok so this is really not a responsive solution but I believe it’s definitely worth mentioning and a very acceptable alternative. You can enable the mobile site for your blog so that if your blog is not responsive, it will at least serve up a mobile-friendly version of your blog on smart phones for a better user experience.
Blogger blogs
If your blog is on Blogger you probably already know your site has a mobile version. Blogger mobile puts your blog out in a mobile friendly format (similar to an app) that is easy to use and read. Make sure this option is turned on by going into your dashboard, then clicking Template then the Settings icon under Mobile view. Select “Yes. Show mobile template on mobile devices.” and you can choose the template you want to use.
Self-hosted WordPress blogs
You can turn on the mobile site (which is kind of a generic app-like version of your site) by turning on JetPack. Once you’ve enabled that you can activate the Mobile Theme.
Go into your Dashboard, click JetPack on the left towards the top, Don’t do this if your theme is already responsive. Check it first on a smartphone to be sure.
WordPress.com blogs
If your blog is on WordPress.com, you can turn on the mobile version of your site here too. In your Blog Admin, go down to Appearance > Mobile. Then click “Enable Mobile Theme.”
Is Responsive Design For You?
Heck yes it is! It’s for anyone who has readers on smart phones and tablets and those numbers are multiplying by the day. Test your blog now on different devices or on Screenfly. Borrow devices from friends and family. If your site doesn’t look good or is not easy to read, time for a new theme! If you are blogging regularly, it’s imperative to keep up with the times and boy are they a-changin’.
Learn More About Responsive Web Design
Why 2013 Is the Year of Responsive Web Design
What The Heck Is Responsive Web Design?
Beginner’s Guide to Responsive Web Design
Learn More About CSS and Web Design
Don’t put off learning HTML + CSS! Here’s what you need to know << plus download the free HTML and CSS cheat sheets here!
See more Web Design Terms.
Sources:
1. http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
2. http://pewinternet.org/Reports/2013/Tablet-Ownership-2013.aspx
*Referral link
What are your thoughts on responsive design? Care to share or ask questions? Did I mention I LOVE comments??
If this was useful for you, please share, tweet or pin this now. Thank you!
This was really interesting, Marianne! I love how you explain these concepts in terms even non-techie people like me can understand. And it’s really helpful that you give all of the links to help us do as much as we can ourselves. My site is not responsive so I’ll put it on my list of things to work on! Thanks!
Hi Bobbi, I’m glad it was easy to understand! Yes this whole responsive thing is pretty new and so there are lots of sites not quite compliant for various screens, but it’s at least good to be aware of your limitations so you can plan ahead for when users start to get really saavy.
Thanks again for stopping by Bobbi!
Again, so much great content. Thank you for speaking to people like me, Your language is one that even I can understand and all of the screen shots and links that you include really help me. I just bought a theme to build myself a site and had decided that responsive was the only was to go. Cheers.
Kate that’s great! It’s definitely the way to go! I actually must admit that I have a few kinks to work out on my own blog’s responsiveness! :-O
Thank you for letting me know that it was easy to understand, that’s my goal and I’m glad to know I’m doing my job!
Hi Marianne, what a well-done article! I enjoyed looking at my site on Screenfly. I had never done that before. A few months ago I switched to a responsive theme. I’m happy I did – ‘cuz mobile is where it’s at now.
Hi Susan, thank you! And I’m so glad that you were able to check your new blog out in different screen sizes, kind of fun isn’t it?
Lots of excellent information Marianne and definitely something we should be on the ball about. Whilst reading I downloaded the Chrome User-agent Switcher so will be checking out my site. I have installed
WP Touch Mobile Plugin – what do you think of that one?
I’ll be going through your recommendations very carefully – mobile is key these days.
Mega informative, thanks for all your time and research Marianne,and sharing with us 🙂
Jacs
Hi Jacs, thank you, I’m so glad it was helpful for you!
I actually haven’t used that plugin myself only because my site is responsive for the most part and I wanted the graphics to carry through on mobile. I did have the JetPack mobile site turned on for a bit and it seemed very similar and I thought it worked just fine. You’ll have to let me know how you like the plugin if you use it.
Wow, you packed this blog with easy to understand, valuable links, and all around good insights. Thank you.
Hi Suzanne, thank you for coming over and checking out the article. I’m glad to hear it was easy to understand 🙂
Thank you for this content rich post that had me heading to check on sreenfly and thanks for the link to the free theme which looks great- whether I will shift from Genesis I will have to consider I do have the plugin so I know it looks okay on a phone, just misses my images
Hi Suzie! I am on Genesis as well and my theme coded written responsively. I did do a lot of customization though that may have screwed up some of the responsiveness of it 😉
Anyway, if your site looks ok on smaller screen sizes, then don’t worry about shifting from Genesis.
I noticed you have the mobile version running and that works just fine!
Great information as always, Marianne.
I have a responsive theme – but an inadequate brain to make it work properly 🙂
Haha Gary, like I said even I had a bit of a learning curve! I’m still working out some links on my own site.
Hello Marianne, Thank you for this resource. I love resources that I can share with others. I think the information you have provided is written in very simple and easy to understand terms, making it possible for quick implementation. -Peace & Blessings! -Phyllis
Hi Phyllis and thank you for the kind words! I’m so glad you find it useful and I appreciate you sharing it 🙂
Hey Marianne!
Another awesome post!
Two quick questions:
1) You have to have the Jetpack plugin for self hosted WP sites in order for what you suggest above to work if you don’t have a mobile responsive design, right?
2) Does the WP Mobile plugin work just as well for a self hosted WP site?
I (unfortunately) do not have a mobile responsive site, and I’ve tried WP Mobile, but I think it fights with my homepage slider – let’s just say, things got a little wonky so I had to deactivate the plugin. 🙁
Any suggestions?
Hi Kimberly!
I have not used the WP Mobile plugin so I can’t say how it compares to Jetpack. Yes you do have to have Jetpack activated in order to use the mobile site feature.
I have used the Jetpack version and I think it works great! Since you are having trouble with the WP Mobile plugin, give Jetpack’s a try. You can keep all the other features of Jetpack turned off if you don’t want them on.
Does that answer your question?
Marianne
Thank you so much! I have a wordpress.org site and it’s Genesis. Everything I’ve read makes it seem like responsive plugins don’t play well with Genesis, but the Jetpack Mobile worked! Thank you so very much! Found you on SITS forums and following & signing up as a thank you!
Oh how sweet Kimberly, thank you! And I’m really glad you were able to find a solution that works here! I really appreciate you letting me know.
Wow! You hit all my favorite talking points! Great post. Thank you for posting such a great article…!
User accessibility with any device is essential to receiving the highest amount of traffic on your website. As you shared, the inconvenience of scrolling unnecessarily, zooming in and out, and struggling to click on links/buttons will greatly impact return user numbers. Thanks for sharing your methods of responsive web design!
Thank you so much for this awesome article. Great information about RESPONSIVE WEB DESIGN. You have done a great job. Keep up with the good work.
Great article thanks a lot but it’s not easy to design a website with a responsive theme The info is awesome and helps a lot
Hi Kimberly!
I have not used the WP Mobile plugin so I can’t say how it compares to Jetpack. Yes you do have to have Jetpack activated in order to use the mobile site feature.
Implementing the wrong website design can have a tragic impact on a webmaster. This post is very helpful for all the web design terms..thank you.
Getting responsive web design is mandatory due to immense competition. People are shifting their business digitally and for that a brand website with responsive elements is vital to entertain the visitors and call them to action.