Learning Responsive Design: 5 Things To Get You Going

Learning Responsive Design: 5 Things To Get You Going

By Jesse PenningtonOct 8 /2012


responsive web designYou may have heard that responsive design, much like apps and mobile websites previously, is the new “it” thing that companies are increasingly inquiring about. Why is it so popular? Put simply, because it’s a one-size-fits-all solution for the ever-changing landscape of tablets, smartphones, and varying screen sizes. This article is for anyone trying to get a handle on this new form of web design & development. These five things will cover some preparation, best-practices, thought-leadership and further resources to help you learn more about responsive web design.

1. Make sure responsive design is compatible with your current Information Architecture and functionality requirements.

While the idea that you can have a single website that serves both web and mobile users is very appealing for obvious reasons, the reality is that responsive design is still an emerging practice that may not work with what you are currently doing.

There are many instances in which multiple experiences might serve users better and therefore raise important questions about adapting your information architecture (IA). Companies considering a responsive design approach need to ask themselves whether or not they can come up with a single IA that makes sense on both the web and mobile. This concern also goes hand-in-hand with assessing your functionality requirements because there are limitations that phone and tablet devices can impose on your ability to use client-side technologies like Javascript, etc. If your site requires the use of a lot of these things, a responsive design may force you to re-think key functionality depending on your expertise or available in-house talent. The end result – you may have to dumb down your web experience to support the mobile experience.

You may also be using a Content Management System (i.e. Wordpress, Hubspot, Joomla!, Ektron, Drupal, etc) that affects, limits, changes, or even stops your ability to execute the responsive design you want. Make sure you research your CMS limitations before wasting valuable time and resources preparing for something you can’t create in the first place!

2. Don’t go in blind – Get inspired by others first.

Sure, you want to be original, but if you’re new to this arena then you need the right frame of mind before you even start laying out the first pixel. There are already some great examples and ideas out there that will greatly help you or your team have the right mind-set when laying out the first wireframes for your new responsive site. Take a little time to check them out, have your developers dig into the source code, and arm yourself with some great inspiration for your first meeting!

3. Hiding Content – Be careful!

One of the most common missteps in first-time responsive designs is the penchant to hide content as the screen resolution gets smaller for the sake of aesthetics. Of course, you want it to look good, but when deciding your breakpoints and how the site will collapse as the screen shrinks you should follow this simple guideline: try not to punish users for the device they happen to be browsing with. Now, with that said, there are circumstances where this is unavoidable such as client-side scripts that won’t scale or content that you feel a mobile user would not be interested in. There are also common techniques such as reducing or hiding a footer or slider on a mobile screen that seem to be accepted practices. But the idea is not to get too comfortable or lazy with this methodology for the sake of just making things fit. Put simply – use this technique sparingly.

4. Keeping The Context - Don’t focus only on the screen size and the dimensions.

A laptop is not a tablet. A tablet is not a TV. A TV is not a smartphone. Focusing on only the screen size or dimensions loses sight of the user experience and creating a truly responsive design. Each device provides its own unique form factor, interface conventions, limitations and opportunities. We need to be thoughtful of all these variables in order to create experiences that feel natural to the user. For example, we sometimes forget that mobile phones can get user location, initiate phone calls, and much more. Try to be mindful of this as you choose your breakpoints and begin to scale your design. As James Pierce says in his article, when we forget about the context of what we are doing we end up with “[n]ot a mobile web, [but] merely a 320px-wide one.”

5. More Helpful Resources

Have you attempted responsive design yet? Let us know what your experience was like in the comments below. 

Jesse Pennington Author BioJesse is a Web Developer at Kuno Creative who regularly contributes his technical expertise to Kuno's blog. He carries a Master of Science in Mass Communcations and has over 3 years of experience in web development and design.

Photo courtesy of Brian Slutskiy