Sure, it’s a first-world problem. But it’s more than a little annoying: you want to know, let’s say, the contact number for a nearby restaurant. You load the webpage from your smartphone, only to find that the text shows up in teeny-tiny print.
A minute of touch-screen pinching and squeezing later, you’ve finally got the text to a readable size. But you still can’t find what you’re looking for. Instead, the number is buried on another page, or in a corner you can’t possibly see once you’ve zoomed in.
If memories like these make you want to chuck your phone across the room or use your tablet as a boomerang, take a deep breath. It doesn’t have to be this way.
Changing up design to fit the medium
That’s why there’s Responsive Web Design (RWD), a way of leveraging current web standards to adapt the layout of what you’re displaying, no matter where you look at it. Like mobile web platforms themselves, it’s a new concept. But as more people access the Internet via mobile devices, it’s gaining ground—and making for a much friendlier browsing experience.
There are a few different frameworks you can use to get your site mobile-ready. I like Foundation’s intuitive, easy-to-use interface. Another good one is Bootstrap, from Twitter. And WordPress has also developed some responsive themes for bloggers.
Foundation allows you to lay out pages quickly and logically within a flexible, nestable system. Upload your content into preset grids, and enter rules in CSS to dictate how windows will appear on various devices. Foundation applies ratios to areas of content (rather than absolute pixel sizing), ensuring that fields remain proportional. Plus, Modernizr is built in, ensuring your site looks its best even on older browsers.
Giving users what they need
What’s great about RWD is that you can emphasize what really matters. If your client wants customers to call, give ’em a landing page with a fat, clickable button they can use to dial the number right from the site. If they want users to be able to make reservations with ease, make sure a reservation schedule shows up on top.
If you’re a developer and you’re not using RWD yet, you should be. It’s a huge timesaver because it means only one development cycle, and one set of code applied to all devices. Just add in the media queries, which control which style rule gets applied, to your CSS, and voila—no more writing entirely separate code for a mobile-only site.
Here at Atomic, we try to incorporate RWD into client projects by default. The way we see it, it’s just the way web design should be done. While some prevailing wisdom favors the ‘Mobile First’ approach, we kind of turn that model on its head. We make desktop sites the best they can be, and go from there to create amazing mobile versions, without sacrificing quality.
The world is going mobile. Don’t let your site be the cause of any smartphone-projectile-related misfortunes. You’ve been warned.
Does your website need to clean up its mobile act? Contact Atomic Interactive to learn how to make responsive web design work for you.