4 Steps to a Blissful Marriage Between Content and Responsive Design
By Flying Hippo
Responsive web design is hard. Really, really hard. There are an impossible amount of variables on every page that can trip designers up, not to mention content. It’s enough to make anyone feel like they should just give up on it, even before they start.
If you use the internet on a mobile device or other small screen, you’ll frequently see pages that drive you nuts. Lazy attention to hierarchy and navigation, along with the complete removal of features found on the desktop version of the same site can make for a user experience that makes you want to chuck your iPhone at a wall. Making matters worse, if you delete content on your site, your users will get frustrated when they can’t find the information they need.
Finding a happy ground between content and responsive design can be met. And, just like any relationship, it’s just about finding the right balance.
Don’t Toss All Your Content
The first step to a great mobile experience: don’t arbitrarily remove content found on the desktop version.
You might want to. It might be painful, even. But think hard before you start slicing away. Instead, offer an easy link to the desktop version of the site where users can find the info they’re looking for, if it’s not on the mobile version.
There are plenty of times where it’s appropriate to offer content on the desktop version of a website, while hiding that same content on a mobile device. Removing content simply because it takes more work to display well on a mobile device isn’t one of them. The worst offenders of this that I have seen are news sites that remove image galleries on the mobile site, even though they are critical to the story.
By selling your mobile users short, you’re wholly dismissing nearly 30 percent of total web traffic and 15 percent of sales. And no one can afford to do that.
Design For Mobile First
If the main reason content is hidden on mobile sites is due to technical problems, then a good solution is to start designing and developing on mobile first.
It’s much easier to build up a site through CSS than it is to break it down, and working through issues on mobile first will help you avoid wasting time on desktop solutions that don’t scale down well.
More than anything else, getting the user experience perfect on mobile is critical — even more than it is on desktop. Virtually all mobile devices that have Internet access are touchscreen smartphones. People with smartphones demand that the site be pliable and fit their needs, down to every last swipe and touch.
While this interaction is undoubtedly cool, the downside is that when things go wrong, they feel like they’ve gone really wrong. How many times have you tapped the incorrect button? You can just feel the error, and you hit the back arrow 15 times to try to make up for it. That panic and annoyance is avoidable.
Desktop versions of websites should be as user friendly as possible too, but they can usually get away with more. Think mobile first and fill in the blanks later for desktop users.
Study What Others Do
It’s one thing to design for mobile, but it’s entirely another to know how people interact with mobile. Sure, your mobile design looks cool, but is it as beneficial to the user as you would like it to be?
When in doubt, look at what other people are doing. There’s infinite places to get great inspiration for your design, and there’s hundreds of experts out there who provide great resources to get your design in shape. One place I love to look is Brad Frost’s Responsive Web Design Patterns. These clean, simple, responsive designs for various components can be a great help when designing tables, columns, menus and more.
Do Research
There’s nothing that is more frustrating than designing for mobile only to learn that your layout doesn’t work on every mobile device. Because of the intrinsic differences between iOS and Android (even between different Android and Apple devices, browsers and more), designers can get stuck.
One way around this is a great service called BrowserStack. By simulating how your design works in dozens of different browsers and devices, developers and designers can work out any kinks in their device before rolling it out.
It’s inevitable: mobile is the platform of the future, and if you’re not designing for mobile first, you’re lagging behind. But don’t fail to appreciate the content already on your site.
Developers, designers and content creators can meet in the middle and find a happy middle ground. It just takes a little planning.
Photo courtesy sop220
