As you are having someone work on a new website for your business, are you checking that the web pages are mobile optimized for different devices? It’s not just good — it’s vital to know — how your web pages look on mobile devices.  But not everyone outside of web designers and developers know there are preview tools and techniques available that are free, and do a pretty good job. So for non-developers, this article is for you.

The numbers tell us mobile optimized pages shouldn’t be ignored.

In a recent Neilsen consumer report included findings that US adults spent on average 34 hours per month using the mobile internet on smartphones. By comparison, they spend 27 hours on the PC internet.  That means visitors to your site are more likely to be seeing it on a mobile device, even if later they visit a full site using a PC.

Even for business purposes, the percentages don’t vary, because there are few areas of business in which employees are not using smart phones and tablets. Mobile optimized versions of pages are essential.

And when you get to the point of having beta (test) pages available via web, you really need to know that your site pages are rendering well.  But if you only have access to one or two devices, and they are only Apple iOS or Android, you might feel stuck.

How do you preview? Web tool and lower-tech options.

Web tools — recommended

The first thought might be to run around the office and borrow different devices from other people.  But there are tools out on the web that are free and very helpful.  And if nothing else, there is a way to ‘fake’ device width by just using your browser window.

One of my current favorite tools for previewing a web page on a variety of mobile devices is mobiletest.me. This site will ask you to pick from 6 popular devices on the home screen, then ask you to input in your web page URL. Voila!  A close representation of the device with your site page. An added plus is that in most cases, the page is fully clickable. Nice!

Hubspot Device Lab also does a commendable job emulating web pages on mobile devices, but doesn’t always render graphics quickly. Along with showing several devices, it includes statistics. Brick&Mobile also offers a web page with an emulator for six popular mobile devices.

Lower tech method — an inexact fallback method, with shortcomings

There’s another method that will at least allow you to see a general idea of how responsive web pages look.  As with most things low tech, you also give up a few things. First, you’ll only be able to see how things appear and behave based on the PC you are using to browse the site.  So you won’t see the exclusions and behaviors of AndroidOS or iOS. You are only able to see how the code changes to meet a narrower device screen.

Here’s how to see how your site page responds to a narrower device: If you browse to the page to be tested, then take your browser lower right corner, and grab and narrow the window, you’ll see the content reflow and respond. You can make your browser window very narrow, simulating the relative width of a mobile device.  The reason this works is because the code on a responsive design page changes based on the width of the browser window. On mobile devices, lines of code provide for changes based on number of pixels wide a viewing screen might be. So ona fixed-screen device, like an iPhone, a page renders to execute in the narrow/tall design, and also the wide/short formats.

So why even bother with this method?  Two reasons:  You might be blocked by a corporate firewall from using the first method described above, or you might be looking at pages that are not yet deployed on the web, and you are looking at them from within a corporate network.

So what if things aren’t working the way you need?

If you page isn’t working, there are three things you can do:

1. Are you happy with the way your site looks on every device? Job done!, But go beyond mere visuals on your mobile optimized pages, to user experience. Is your site visitor being led to information that is useful to them and builds toward business for you?  If not, make some changes to make the user experience smoother, shorter, and less complicated.
2. Is it mostly OK, but it still has some problems? If some features aren’t working, or some devices don’t render well, assess how important it is to find alternate solutions, and prioritize which you need addressed first.  Navigation and interaction issues are top priorities to be fixed.
3. Are you ready to put a bag over it? I get a lot of clients who complain about the look of their site, and the first thing I ask is to look at the traffic numbers and any existiing analytics. Are their number of mobile visitors significant or not?  Are they seeing lots of drops and falloffs from certain pages?  If the numbers are acceptable and in line with industry benchmarks, I advise clients to proceed slowly with changes and improvements. If not, it’s time to look at developing new site assets following a strategy that  provides for the audience and their level of mobile adoption.   This should not be treated like a sprint-paced website fix, but instead, a methodical web migration.  Hubspot offers more specific thinking on prioritizing mobile efforts that asks some very good questions to think about.

Having the ability to preview your site on mobile devices will help you assess where your site is now, and where you need to take it in the future. Don’t just leave it in the hands of your developers. They are no doubt doing their best for you, but these tools and methods to check your web pages on mobile devices are easy to use, and as close as your computer.

Want to know more? Subscribe to Creative Observations, my weekly blog email.