• Why you should care about responsive web design

    Sure, web design and development might be a little over your head. Maybe you forked out for a designer to build your site, maybe you bought a premium theme or use a free one. Maybe you’ve heard this buzzword “responsive design” being bandied about here and there. But what has it got to do with you?

    Well, the short answer is: a lot. But let’s start at the beginning.

    What is responsive design?

    I first heard about the concept in Sara Cannon’s presentation at WordCamp San Francisco last year. Basically, the idea is that your website design responds to the visitor’s screen size, so their experience is optimised no matter if they’re viewing on a high-definition display, a smartphone, or a tablet.

    Unlike using a plugin to make your site more friendly to mobile visitors, responsive design allows you to have full control over what the user sees. You can set scale and position for images, text blocks, sidebars and navigation items.

    How do you do it?

    Firstly, check if your site is already responsive. If you’re using WordPress, there are many responsive themes out there already, including the default Twenty Eleven theme. Studiopress are in the process of making their premium themes responsive, so if you use a Genesis child theme you could just wait it out until an update is available.

    If you aren’t using a responsive theme, then hold on to your hats, I’m about to get technical! You’ll need to add a few lines of code to your theme’s CSS file, which many normal website owners aren’t comfortable with. But if you are comfortable with tinkering around, responsive designs use media queries, to determine the visitor’s device screen size and make the appropriate CSS changes. Most modern browsers support media queries.

    You’ll also need to look into an adaptive grid system, especially specifying sizes in percentages, rather than pixels, to make everything fluid. If that’s too techy for you, you can certainly enlist the help of a web designer to make your site responsive.

    What does it look like?

    As I mentioned earlier, Twenty Eleven, the current default WordPress theme, is already responsive. To see it in action, go to the Twenty Eleven demo site and try resizing the browser window all the way down to iPhone size. Notice how all the elements scale down and reposition themselves so the site is still usable and readable at various sizes? Cool, huh?

    Another good example is the Food Sense website. Head over there and try resizing the window to see the responsive goodness.

    Why should I care?

    Can you imagine the frustration a visitor experiences when they navigate to your website on a mobile browser, only to have the page take a long time to load, the text unreadably teeny tiny, and having to scroll and zoom in and out to get where they’re going? That visitor is probably not going to stick around long.

    In contrast, a responsive design will give your visitors a slick and customised experience, that will highlight the most important elements of your site. That translates to more time spent on your site, and more potential customers!

    Extra resources

    For more inspiration and examples of sites that are using responsive design, head over to one of these galleries:

    Post By Tessa (18 Posts)

    Tessa is passionate about designing for and teaching WordPress! She also has a background in performance, video, design, photography and writing. She lives in San Francisco with her husband, baby boy and cat.

    Tessa recently launched a new website, WP SuperGeek: Your fearless WordPress help desk. WP SuperGeek offers courses, advice, and a forum to ask questions. They speak geek so you don't have to!

    Website: → WP SuperGeek

    Connect

If you like it, please share it!

Join in! There's already been 7 comments

  1. Mel February 01, 2012 @ 9:13 pm

    Wow Tess, thanks for writing about this, Responsive Web Design sounds really cool! And it’s definitely needed as an increasing number of people access websites on iPhones and iPads.

    • Tessa Needham February 02, 2012 @ 1:12 am

      Thanks Mel! It is very cool – now I just have to get time to put it into action on my site!

  2. Jan February 02, 2012 @ 1:11 am

    Hi Tess I really enjoyed your article. At least it has made me aware that there is more out there than meets the eye. Thanks

  3. Gabby April 30, 2012 @ 10:46 pm

    Hi Tessa-great article! responsive web design I shot at the moment! Thanks for sharing

  4. Kylah May 22, 2012 @ 2:01 pm

    Hi Tessa, thanks for the informative post. I think I have come across it before, but I’m glad I’ve re-read it as it has motivated me to check my website is responsive 🙂

  5. […] for your WordPress site, or modify your existing theme to be responsive. I’ve written an entire article about responsive design, but in a nutshell, it means that your WordPress theme will adapt its elements to fit into to the […]

  6. […] This post originally appeared on Grassroots Internet Strategy. […]