You 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.
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!
Recommended for YouWebcast: Your Viral Voice: How to Create Conversations that Convert to Sales
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
- Layouts & templates
- Fancy Tools
- FitText – A plugin that makes font-sizes flexible.
- FitVids – A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
- Elastislide – A responsive jQuery carousel plugin.
- Supervised – A fullscreen background slideshow plugin.
Have you attempted responsive design yet? Let us know what your experience was like in the comments below.
Photo courtesy of Brian Slutskiy