What is Responsive Web Design? Think Mobile.

What is Responsive Web Design?

Responsive web design is setting up one’s website so it will look good on any platform, whether it is a desktop browser, a mobile phone, or a tablet like the iPad. Well-designed responsive web design allows for a subtle transition from one platform to the next, so the user has smooth experience and doesn’t lose good and attractive design just because the platform is smaller than a large browser.

Learn more:

What is an Example of Responsive Web Design?

As an example, I will talk about how I converted http://www.leoraw.com/blog/ to responsive web design. About half a year ago, I switched the theme of that blog to the Twenty Ten theme, thinking, oh, this is now the default theme for WordPress, that would be a good way to go for many platforms, right? Wrong. One of my friends reported that my blog on her iPhone looked like a lot of white with a bit of imagery in it. Sigh. So I took a theme that was responsive to mobile platforms, changed it, added parts of another theme that was responsive to mobile platforms, tweaked a few settings here and there, combined it with some jQuery for older browsers and the media queries CSS, and here is the resulting recipe page on my friend’s iPhone:
iphone with chickpeas recipe
And the home page on her iPad:
ipad with garden photo

Warning: this isn’t the easiest thing to do. It did take a fair amount of time, and I’ve been designing websites for over ten years. So if you want your site to be responsive, find a designer that knows how to implement responsive web design and plan that you may have to adjust your web layout so it will work with the adjustment changes. Your images will probably have to be re-sized, and you may find the easiest way to get your site to look good on mobile is to use display: none for parts of your layout – meaning, don’t show it on mobile.

Can I See How Responsive Design is Responsive?

If you want to get a taste of how a good responsive design works, take a site such as http://www.leoraw.com/blog/ and view it in the latest Firefox browser. Re-size the browser slowly so you can see the changes as the size of the screen gets smaller. It’s rather fun to view.

What are Alternative Solutions for Mobile?

For this blog, Websites for Small Biz, I have an alternate theme for mobile, the WordPress Mobile Pack. That is still the easiest way to go with setting up your browser for mobile platforms. But it’s boring and takes out the images. Originally, this blog had a mobile theme separate from the main theme. But no more – I love the way responsive web design looks, so this blog did get converted to responsive, as well.

Can I Afford Responsive Web Design?

An alternative way to ask that question: Can I afford not to have my website show up in a clear, beautifully-designed and usable fashion on platforms besides basic browsers? Would I lose customers? One can also specifically choose a WordPress theme that has already been set up for responsive web, such as these 10 Free Responsive WordPress Themes. The easiest one to choose is the Twenty-Twelve theme – a great choice that now comes with WordPress.

Want more about responsive web design?

Please share:Pin on PinterestTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

11 thoughts on “What is Responsive Web Design? Think Mobile.

  1. Leora – This sounds interesting, currently I am just using the WP Mobile plugin for proper display on mobile devices. Needs more insight I feel. Thanks for sharing.

    1. As your site relies heavily on text, this might not be a big issue for you now. But it is certainly worth understanding, especially if you are viewing a site that is more visual.

  2. You have also write post. But I have used a great tool to test responsive wed design.
    Please have a look http://ruit.mytechlabs.com

    It is completely free tool.

    Here you can test ui on devices such as iphone,ipad,samsung galaxy android etc. with deffirent relosution on a single page or separate page.

    1. Barbara,

      Excellent question! I had to look up a decent response. From Smashing Magazine: “An adaptive layout will give you more control over the design because you only have a handful of states to consider. In a responsive layout you easily have hundreds of states — sure, most of them with very minor differences, but they are different nonetheless — which makes it harder to know exactly how your design will look. This makes a responsive layout more difficult to test and predict with absolute certainty. That said, this is also the beauty of a responsive layout. By allowing some uncertainty on a superficial level, you gain certainty on more fundamental levels. Sure, you can’t predict with pixel-perfection how the design will work in a 943 × 684 pixel viewport, but you can rest assured that it works well — that the fundamental features and layout structures are meaningfully deployed.” http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/

  3. Good introduction to responsive design, Leora. And I like how this post sneakily performs the secondary function of showing off that your work is generally gorgeous.

    I’m surprised you didn’t include Twenty-Twelve in the list of free responsive themes. Is there something I don’t know? Should I be testing the theme instead of taking it for granted? (A blogger’s life never lacks chores to be performed, and I haven’t gotten around to checking my sites on mobile.)

    BTW, I’ve added CommentLuv on the Blog Academy site. It eagerly awaits your next visit.
    Max Christian Hansen recently posted…Nine Great Things About Google+ as a Social MediumMy Profile

    1. Max, I see I originally wrote this post in 2011. Twenty Twelve is a great theme – I always suggest it to people who don’t know what theme to use. I should really update this post with new links to responsive themes – thanks for the idea.

      Testing a theme on mobile is always a good idea. It only takes a few minutes to see it on a phone. If you want to test it on every phone, you will go crazy, so don’t worry about that.

      I’m wondering if Blog Academy was the same site I joined years ago? I suppose I will have to go on and find out.

Comments are closed.