By now, we've all seen responsive designs that have given us endless hours of fun resizing our browsers and watching what happens. And now that you’ve seen it, you totally want it, right? But is it really what you need? While I’m a big fan of responsive design, it’s not a panacea for all the ills of the web. Here are a couple things to consider when determining whether or not responsive design is right for your site.
Responsiveness vs. Advertising
One of the biggest challenges with responsive designs is advertising. People are paying you to put ads on your site, and quite often you are contractually obligated to keep the ad at a specific size and/or position on the “page”. This is easily achieved in a print layout of a newspaper or magazine, but when you take it to the web and start to do things like resizing the portal through which your content is being seen, it becomes a little more complicated.
Tip #1: When designing with responsive in mind, make sure you have all the facts about your advertising needs. Know whether or not the ads can be resized and if there are any stipulations about placement. Also, know the format the ads are coming in -- if they’re HTML embeds, they’re not going to be resizable.
Mark Boulton has written a bit about responsive advertising that you may find useful: http://bit.ly/vqNRIr
Responsive != Mobile Site/App
One of the reasons you may want a responsive design is to make your site more accessible via mobile devices. This does not, however, mean that you’re going to have the same level of control over the experience you’re crafting for your user as you would with a mobile-specific site or app.
Tip #2: Design with your users in mind. Consider what your users will most likely be using your site for when they access it from a mobile device. Do they need access to all the information your site has to offer, or are they just trying to order a pizza on their way home? Responsive designs are good for making all your content available, regardless of screen size, whereas mobile sites/apps are good for allowing users quick access to their most commonly performed tasks.
Planning and Process
Responsive design doesn’t just happen; it has to be carefully planned out like any other design. Here are a few tips as you begin planning things out:
- Define your major breakpoints (the widths at which you will rearrange the content on the page to accommodate a smaller screen size) – 1024 (full-width/desktop), 720 (iPad/tablet), and 320 (mobile phones) are a good place to start.
- Throw your pixel perfection out the window. You have to be willing to accept the bending and flexing of content in order to get it to work with a responsive design. And while you’re at it, toss out the idea of cross-browser perfection – some properties just aren’t available across all browsers.
- When you’re wireframing/sketching out your smaller screen size layouts, remember that content is going to get rearranged, not regenerated. The page isn’t being reloaded, just reshaped, so you can only pare down the content you started with, not add to it.
- Beware the image-heavy pages. As noted above, you’re not reloading the page as it hits a breakpoint, so whether or not you’re displaying images at a smaller screen size, you’re stuck with downloading them.
So to sum things up, having a responsive design is sexy, but it's not necessarily the right fit for everyone.