Responsive design is all the rage these days, as well it should be…
First impressions are a big deal, especially online — last week’s post all about bounce rates was a testament to that. As mobile traffic continues to climb, it’s impossible to tell how users will view your site the first time. Will it be on a desktop, a tablet, or a smartphone?
What’s more, users now expect a similar content experience across all major platforms. If they don’t get a quality experience, well… your bounce rate will almost certainly go up (as high as 61%). In fact, Google is now ranking mobile optimized sites higher.
According to SEOmoz’s Kristina Kledzik, responsive design will be the industry standard in no time. She’s right. Personally, I think we’re already there.
Here’s what I mean: If your page looks crappy on a mobile device, you’re going to have a tough time convincing people that you know what you’re doing — especially if you’re positioning yourself as tech and/or marketing expert.
Would you trust an SEO company that had a bunch of broken flash players on its mobile page? Of course you wouldn’t; it makes no sense. Poor design blows a hole in your credibility.
Would you think twice about ordering with a e-commerce site that didn’t display on your Galaxy S3? Of course you would.
The first step on the road to recovery is to admit that you have a problem. Right?
So how do you know you have a problem? Sure, you could go into Best Buy and test your site on every device you can get your hands on… but that’s pretty time consuming. It’s a lot smarter to use one of these device simulator tools. Here are a few of our favorite mobile developer tools:
1. The Responsive Web Design Tool - Developed by designer/developer Matt Kersley, this tool is a one stop shop for checking your site layout. Basically, this is a great resource for running quick visual check-ups on how your site will LOOK on mobile — i.e. it’s a design tool, not a full scale simulator (or emulator).
Here’s what I really like about it: The RWDT will show you if there’s a problem with your current design on any of the major devices. If you dabble in design, but not the coding side of things, this is a great previewer. You can simply paste your url after the tool’s url (e.g. http://mattkersley.com/responsive/?drivingtraffic.com).
As you can see, I checked my author site and apparently I have issues on some small smartphones, but because it looks fine on the iPhone, iPad, and most Android devices… I’m gonna let it slide.
2. Screenfly – Screenfly is second on the list, but not second best. Screenfly is intuitive and smooth to operate. It also features a lot more device previews than the Responsive Web Design Tool.
The example photo to the left shows DigitalMarketer.com on a 7″ Kindle Fire HD. Screenfly has a bunch more smartphone models (even the Motorola RAZR V3M).
Screen fly is a simulator — like Apple’s iOS simulator, so it doesn’t fully emulate the experience on different mobile platforms.
Like the Kersley tool, Screenfly will operate using your internet connection’s download speed. It’s tough to experience what load times may be like on your 4G network.
3. Adaptive Images – Image load times are a huge part of why mobile users bounce. They are using smaller screens with slower connection speeds. If your images take too long to load, you’ll lose traffic.
This tool makes your images smarter. Basically, Adaptive images helps your site detect what type of device a users is on and loads an optimized version for their device. Very cool.
This tool is a must for graphic designers, even if it seems a little bit over your skis as a developer/coder. Don’t worry; the site has a ton of helpful information to help you get started.