3 Awesome Mobile Web Design Tools

By on April 4, 2013
responsive-web-design

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.

 

 

 

 

About Josh Loposer

Josh is the managing editor of Digital Marketer, as well an aspiring novelist. Find out more about what Josh is working on on Facebook, Google, or on his website.

5 Comments

  1. mobile marketing

    May 6, 2013 at 7:22 pm

    Hello there, just become alert to your blog thru Google, and found that it’s truly informative. I am going to watch out for brussels. I’ll appreciate for those who proceed this in future. Lots of other people will probably be benefited from your writing. Cheers!

  2. Sandy

    April 17, 2013 at 11:28 am

    Hi Josh, I have to say, I agree about making mobile friendly websites, but it is not the end of the day. Nowadays devices are pretty clever in resizing sites automatically.

    Our data shows that difference between computers, tablets and mobile phone users is about 5-7%.

    This said: almost the same number of page views, same time spent on site, similar bounce rates.

    Only hick-up point is the actual checkout where data entry is required. IF that get’s addressed, then most sites will be pretty alright.

    This is based on 250k visitors in 2013.

  3. Paul Profitt

    April 6, 2013 at 11:47 am

    Hi Josh, very interesting article. I will have to give these 3 services a try once I have re-installed the WP-Touch Pro plugin. I have book-marked this page for future use.

  4. Tisa

    April 6, 2013 at 11:33 am

    Thank you Josh for the great tools!

  5. bonuspress

    March 19, 2013 at 11:57 pm

    Generally I do not learn article on blogs, however I wish to say that this write-up very forced me to take a look at and do it! Your writing taste has been amazed me. Thank you, very nice post.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>