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.
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:
- 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!
- 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.
Here’s a quick guide to switching the user agent in Safari.
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.
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.
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!
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.
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.
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
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.
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!
Hey friend, want free DIY design stuff?
I've got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!