Pin It

Everything You Need To Know About Responsive Web Design

Responsive web design is a way to design your website in a way that will “respond” to any screen size.  Instead of defining your website in pixels, responsive codes are written as percentages.  That way, your website will work on every smartphone, tablet, laptop and desktop computer.

There are many benefits of a responsive website, and most of those will be discussed below.  You will learn:  Why responsive design is important, how it helps SEO, where you can learn to code responsive websites and lastly, where you can find high-quality responsive WordPress themes.  Feel free to tell all your friends you are up-to-date on this trending web culture by sending a quick tweet.

Part One: The Definitive Introduction To Responsive Web Design.

Does It Really Matter?

responsive web design

Why should you care about responsive web design?  We all need to stop thinking about mobile optimization as the “wave of the future.”  In reality, we are already living in a smartphone influenced world.  686 million new smart phones will be sold this year.

Morgan Stanley predicts that by smart phones will outsell PCs this year.  If you wait until 2013 to make your website mobile friendly, your site will be outdated.  To be fair, responsive web design is not the only way to make your website mobile friendly.

You can also create a completely new site (m.example.com) or you can use javascript to show different content on different devices.  Each one of these options have their limitations, and you need to research the best solution for your business.

If you combine a responsive website, with CSS3′s ability to reorganize your content I think a responsive site is the the best solution for most websites.  Let’s look at some of the benefits of responsive websites.

Are Responsive Websites Better For SEO?

responsive web design

If no one knows about your website, it is not going to matter what you put on it.  Today, digital marketing consists of a mixture of inbound marketing and advertising.  A big portion of getting people to visit your website is SEO.

Sometimes SEO can seem mysterious, and confusing, but occasionally Google will tell you exactly what they want you to do.  In the case of Responsive websites, Google recently published a mobile site guideline which states:

“Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.”

A responsive website keeps all information on one URL.  This makes it easier for people to share, link to, and revisit your website.  If you have multiple versions of your website, the links pointing to m.example.com may not benefit your main website, example.com.  2012 and 2013 will be big years for mobile SEO.

Did you know that people visit search engine more than they vista any other website?  Here is the scary part.  If your website isn’t optimized for mobile queries, Google might not show it to mobile searchers.  In fact, if everything else is equal, they prefer to show one of your mobile friendly competitor’s sites instead.  This is serious.

Where To Start Learning Responsive Web Design

treehouse

The internet is full of tutorials on responsive web design.  One of my favorites is the “Introduction To Responsive Design” course by tree frog.  In this free course, Treehouse team members show you a video where they walk you through a foundational principle.

Once you’ve watched the video you are prompted to practice what you were taught in an interactive code editor.  Their first challenge teaches you how to change your font sizes from pixels to a fluid “em.”  You can also read their blog, which is full of fluid design tips.

This exhaustive article by Smashing Magazine is another good resource.  Smashing Mag walks you through almost 100 different aspects of responsive design.   There is too much information to repeat in this blog post.  So, go check it out for yourself.

Part Two: Who Else Uses Responsive Web Design?

Examples Of Sites That Use Responsive Design

Here is the fun part!  If you are anything like me, you are probably fueled by being around other creative people.  Well, there are limitations to “being around people” online, but you can interact with things people create.

Here are a few of my favorite responsive websites. (Note: in order to refrain from being self-promoting, I left my website out of this list, but you should check it out. My website is completely responsive.)

Trello:

trello

Trello is a productivity tool.  You can use it to organize your life, and collaborate with a team.  I use it for all of my projects.  One of the coolest things about Trello, is the fact that it works on any device.  Trello is completely platform independent.  It will look just as good on a phone as it will on a big screen TV.

What makes Trello’s fluid design great?  Creating a fluid website is hard enough.  Fog Creek took this web-app one step further.  In addition to looking good on any device, it works on any device .

Trello has drag and drop functions, and an interactive UI that is usually lost on cross-platform websites.  No matter what device, or screen size you use, you will get a fully functional Trello website. I use this to help me keep track of all my client projects.

The Boston Globe:

the boston globe

There are a lot of responsive websites, but not a lot that have as much content as the Boston Globe.  The development team that created this site actually engineered their own script (titled: RespondJS) to handle image and media resizing on the fly.

What Makes The Boston Globe great?  This website has a lot more to think about then simply, blog posts and navigation. They are a multi-media news platform.  They serve up video clips, huge images, millions of news articles and of course, advertisements.

Every element on their website responds to a browser size.  This website uses bleeding edge media queries, and HTML5 code to make every aspect of their site work together.

Part Three: The Easiest Way To Get Your Own Responsive Website.

Good responsive wordpress themes

So, responsive web design is a pretty cool thing, right?  If you want a fluid website, there are a few ways to get one.  First, you can hire a web design company to make one for you ( guess what, we make responsive websites!)  Secondly, you can use one of these WordPress themes to get started on your own responsive website.  Here are a few of the best.

#1: Simply Called, Responsive Theme by Theme ID

responsive theme

This website is not only fluid, it is also free, minimalist, and follows most essential UI standards for conversion optimization.

#2: Gather by Theme Trust

gather theme

Gather is a premium ecommerce theme.  This site pushes the expectations of responsive design.  Unlike most responsive websites, the mobile renderings are full of images, and graphics.  This theme is only $40, and as of Friday, September 21st they were having a buy one get one free sale.

#3: Art Board by Themeforest

artboard theme

This last theme is a full featured photography-portfolio design.  This kind of theme is especially hard to find because it can be difficult to keep a large portfolio light-weight, responsive, and un-cluttered.  Art Board does a good job at accomplishing all the needs of a modern photography portfolio .

#4 Test Often, Test Everything

The most important part of making changes to your website, is to test everything you do. Every change you make should increase a KPI (key performance indicator.) It is your job to decide what your KPIs are, and measure how your changes affect them.

Use Google Analytics, A CRO tool like Optimizely, and a customer survey tool like Qualaroo to find out if your changes are helping or hurting you.

We would love to hear what your opinions are on responsive web design. Leave us a comment to join in on the conversation.

By Bryant Jaquez: Bryant is the founder of BrewSEO, a creative inbound marketing and web design company in Redding Ca. You should follow him on Twitter.



Related Posts Plugin for WordPress, Blogger...

2 Comments

  1. Starlight Dreamwalker

    Good, sound advice that I had not even thought about until I read your article

    Thank you

    October 5, 2012 at 9:24 am Reply

Leave a Reply