How Good Does Your Site REALLY Look on Mobile Devices? [Free Tool]

    by Meghan Keaney Anderson

    Date

    September 19, 2013 at 11:00 AM

    mobile-device-rendering-toolOur stat-hounds cannot keep up. Figures for website traffic from mobile devices have jumped again. This time from 13% in 2012 to nearly one-fourth (24%) in the first quarter of 2013 -- a 78% increase in total.

    So if it's all the same to you, whenever someone asks about mobile driven traffic from this point forward, we're just going to say, "more than the last time you looked."

    You already know that mobile is a force to be reckoned with, and odds are, you've put some thought into it. You may have pulled up your site on your mobile phone or checked it out on a tablet to see how the experience comes across. But as you add more content and consumer tech adds more and more devices, it can be difficult to scale that approach.

    Enter HubSpot's Device Lab, a free tool we've just created to help you see how your site looks across all sorts of devices -- from iPhones to Galaxys to Desktops. It's a little like playing dress up with your website, except this game could save you from losing a hefty slice of your visitors to competitor sites.

    Here's how the tool works. Check it out. It's still in beta, which means we're working on making it perfect, but please do give it a try.

    How to See What Your Site Looks Like on Different Mobile Devices

    Put the URL you'd like to view into the Device Lab:  

    You can choose your own homepage, a new landing page you've created, or even a competitor's site. What you want to look for in the results is how the overall experience changes from device to device. Are the images loading properly? Is your page getting cut off? Does the visitor from that device have to zoom or scroll excessively to find a call-to-action (CTA) or fill out a form?

    device-lab

    In just a couple of seconds you'll get a custom report:  

    The first thing you'll notice in the report is a meter for the percentage of overall internet traffic driven by each device. For now, this is just a guideline based on average internet usage, but there are a number of free tools that will help you get custom reporting for your own site, the easiest being the mobile report within Google Analytics, if you have that set up.  

    Snippits-test

    Next, you'll see a visual of how your site looks when viewed on the six most commonly used mobile devices:

    • iPhone4 and 4S
    • IPhone5
    • Nexus
    • Samsung Galaxy
    • iPad
    • Plus a desktop view for comparison 

    A sample cut from HubSpot's Device Lab Report

    Android-View

    What to Do With This Report

    There are three possible outcomes from this report:

    1. You are happy with the way your site looks on every device. Congratulations! As my dad would say, "You done good, kid." Since the visuals are good, you can now move on to thinking about how you can adapt your content strategy to drive more conversions from mobile devices. Think about how buyer behavior changes on mobile and try to identify the most common and essential actions a visitor takes on your site. Then prioritize your content to make that interaction frictionless. 
    2. You are happy with parts of it, but see some problems. Maybe some devices look better than others, or the top of your page looks good, but when you scroll down there are some elements that look off -- perhaps, a video or image that isn't adapting well to the device. In this case, make yourself a checklist. If you have a designer on staff, HubSpot's got a bunch of tips available for how to make page elements like iframes, videos, and images responsive for mobile devices. 
    3. It's a hot mess. Don't panic. Take a look at your mobile traffic numbers to see where your audience is on the curve of mobile adoption. Again, you can get a sense of this in Google Analytics or by taking a look at benchmarks by industry. If your numbers are on par with or ahead of internet averages, you'll want to look at moving to a mobile-optimized platform for your next website redesign. HubSpot's Content Optimization System uses responsive design to automatically repackage your website to fit any device. And when it comes to creating a complete mobile strategy, you can take things piece by piece.

     So now you know how it works, and you're prepared for any outcome -- why not give it a try?

     

    SUBSCRIBE TO HUBSPOT'S MARKETING BLOG

    Join 300,000+ fellow marketers! Get HubSpot's latest marketing articles straight to your inbox. Enter your email address below:

    Search Inbound Hub

    Subscribe to Marketing Articles by Email

    Subscribe by RSS

    Follow HubSpot

    Call Us: 1-888-HUBSPOT