My wife has her iPad out, shopping for a dress. Our two year old daughter, Pearl, will be a flower girl soon in an upcoming family wedding. I hear Robin sigh and tap on her tablet incessantly, incredulously turning her iPad around to reveal a popular children’s clothier’s site virtually unusable on a tablet. “Oh,” I sigh knowingly, “looks like they don’t have responsive design.”

We have no “home computer,” and don’t plan on purchasing even a laptop. My son shows me things on my iPhone I knew nothing about. He’s five. It’s the future, and it is upon us. Just refer to your family Christmas list. Nearly half of all American kids wanted an iPad for Christmas in 2012.

Apple, Amazon, Samsung, Microsoft, Google (I could go on) are all innovating on already great products for the mobile web. Each screen resolution and size is different. There are tablets, phones, gaming consoles, on and on. Consumers bounce around between many of these devices when shopping and buying. How can brands develop an omnichannel plan that serves every device? How can you possibly keep up?

The answer: Responsive design. If you’re just now learning about it, you’re about three years behind the curve. Ethan Marcotte labeled 2012 the year of responsive design while Mashable and Smashing Magazine so-named 2013. Responsive design simply makes your website work on any device by automatically resizing to fit the screen. Here is a brief tutorial if you’d like to geek out on it for a bit. And a more in depth dive into what it is and how to use it.

Responsive design: One site to rule them all

My sister in law is a lead visual designer for Nordstrom and does window displays for Gastehaus Schmidt. The big idea is to place compelling displays in high traffic areas that will draw shoppers in. When you walk into Nordstrom, you’re greeted with creative displays that are captivating, fresh, and inviting.

Responsive design is like this. It places your site where the people are, and makes it look good. They’re on their iPhone5 waiting at the doctor’s office pricing out vacation ideas. They’re on their couch with their tablet looking up flower girl dresses. Chances are good that you’re reading this on your phone or tablet right now. If you only have a mobile site, chances are it doesn’t accommodate the tablet. If you have an iPad-formatted site, have you reviewed it on the Nexus or Kindle Fire? Responsive design makes your site work for any screen.

But just making your design “fit” on a screen doesn’t mean it’s going to be successful on a mobile device.

Making responsive designs successful

Great responsive design isn’t just about making your site appear unbroken on smaller screens. It’s about the user interface design and the experience that people have while visiting your site on a mobile device. You’ve got to consider the user experience on a tablet vs. phone, and cannot assume that the same styles for your desktop web presence will work when adapted to a smaller screen or device.

Great responsive design will follow these tips:

  • Use larger calls to actions like your main navigation. Include bigger buttons for our bulky thumbs to click on.
  • Simplify content. Be thoughtful about what content you show on a tablet vs. phone or midsize device vs. small. What’s the most important thing? Do you really need that footer there?
  • Data, data, data. Data should always inform our decisions on the web. Get some analytics to find out what devices your users are coming from such as tablet vs. phone.
  • Streamline submission forms. Make inputs larger, stacked in order, or even ask for less information from a mobile user.
  • Avoid pop ups. We’ve all experienced this. You click on a product image on your phone to see it larger, and now your entire screen is black and you can’t find the “close” icon to make it go away.
  • Make search obvious and visible. Chances are, if users are on their phones, they are using Google to get to your product pages or a specific area of your site. However, if they get there and it’s not what they are looking for, having a clear and accessible search bar will only help.
  • Choose scrolling over multiple pagination. Wouldn’t you much rather scroll on your phone or tablet than have to load multiple pages to get the same amount of content?
  • Design with the browser, not Photoshop. It’s futile to guess in Photoshop how your responsive design will respond to various screen resolutions and sizes. Get your creative team designing in the code first and you’ll save yourself a designer vs. developer battle.
  • Scale your images and pictures. There are ways to accommodate images so they scale down nicely for smaller devices and be sure to keep up with retina displays too.
  • Keep up. Responsive design is constantly improving and different methods and techniques are being developed on as you read this. Be sure to do your homework on all the various ways to execute and pick one that is right for you, your customers, and your future.

Hopefully this article inspires you to begin taking an “omnichannel first” approach to your web presence. If you haven’t incorporated responsive design, now is the time to move in that direction.

By the way, we bought my daughter’s flower girl dress on the iPad from a different site that was responsive – selling the same dress.

If you’re interested in learning more, consider these articles:

4 Responses to “Responsive design: How to make your site effective on every size screen”

  1. Great article Billy. The thing that always bites me is hover states. If you design for web first and then retrofit you will probably be weeding lots of hover states out of your design.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>