How to Preview WordPress sites on Mobile Devices

Whether you are designing sites for clients or are managing your own WordPress website, having the ability to be able to check how the site looks on a mobile device is now becoming increasingly important.

With an 81% growth in smartphone usage in 2012, according to a report by Cisco, there is a good chance an increasing number of the visitors to your site will be browsing via a mobile device.

But how do you go about ensuring your site works just as well on an Android phone or an iOS iPad as it does on a desktop PC or laptop? While you might have access to one or a few of these devices of your own to test your sites on, not everyone has such a wide range of devices at their disposal. This is where mobile device emulators come into use.

Services for Previewing your WordPress Sites on a Mobile Device

These screen size and mobile device emulators can help you see how your website performs on a range of platforms. You can test the responsiveness and the usability of your site and then make any necessary changes to ensure you are not turning away a growing proportion of internet users who are browsing on smartphones and tablets.

Preview your WordPress Sites on the iPad and iPhone

iPad Peek is a great website that lets you take a look how your site renders on the small screen of the leading tablet device from Apple. It also allows you to see how your sites look on the iPhone with current support for versions four and five of the popular smartphone.

The site is very easy to use. Simply enter the URL of the site you wish to browse into the address bar on the browser of the device and you can see how the site looks. The virtual devices can be rotated for either use in portrait or landscape mode.

Visit iPad Peek

Multiple Device Emulator

Mobile Phone Emulator is another free service that allows you to preview and use your site on a range of devices. This mobile device emulator currently has support for a range of smartphones from Apple, Samsung, BlackBerry and HTC. This makes the site a good choice for testing a number of mobile browsers and devices.

You can change the screen orientation with this service giving you a number of options for previewing sites.

Visit Mobile Phone Emulator

Set your Own Screen Size

The Screenfly online service from Quirk Tools allows you to preview your sites on an even greater range of screen sizes. The devices include not only tablets and smartphones but also televisions, netbooks and desktops of all sizes.

While this service doesn’t display the outline or case of the devices like the other options. It does offer much more in the way of features and screen sizes. More devices are covered here which is ideal for those wishing to see how their site looks on the Kindle Fire or a Motorola Razr to name just a few. The best feature is perhaps the ability to enter your own screen dimensions for compatibility with a range of sizes.

Visit Screenfly

Opera Mobile Emulator

This is a free desktop application for developers building sites that they want to ensure work equally well on the Opera browser used on a range of popular mobile devices.

Once installed you can choose from an impressive range of mobile devices. Once you’ve made your selection a new browser window will popup that emulates the interface of that device and how it renders websites.

This seems to be the most advanced tool of all the devices on this category I’ve seen so far and is definitely worth checking out.

Get the Opera Mobile Emulator

Prospect for Clients with the MobiLead Magnet Plugin

This premium WordPress plugin not only allows you to preview sites on the smaller iPhone screens but it also lets you compare two different sites and then show the results to prospective web design clients.

This is a great feature to have when you are approaching clients. You can display their website that isn’t mobile friendly alongside a site that is, clearly showing them the difference. When a client has been shown how their site is performing on smartphones it will be hard for them to turn down your offer of building them a mobile friendly responsive website.

With the Mobilead plugin you can create any number of these comparison pages, one for each potential client you are reaching out to.  The plugin also has the ability to email these leads with a custom message and link to this comparison page showing them how there website really looks on a mobile device.

While the price tag of this plugin can’t really be justified by those who simply want to check their own site for mobile compatibility. For those in the business of building mobile friendly websites for clients, it’s a great way to make your case for being hired.

Get the MobiLead Magnet plugin (not available anymore)

Other Mobile Ready Tests

How the site looks is one way to see how your websites perform on a range of devices. However, there are some other tests you can carry out that to do a mobile audit on your WordPress sites. Here are some other options:

• Mobi Ready: get detailed information of how your site performs on a mobile device
• Google PageSpeed Insights: find out the PageSpeed score of your sites, a metric Google uses to rank sites
• Chrome Dev Tools: carry out mobile emulation including touch events in the Chrome browser

How to Make Your Site Mobile Friendly

When it comes to building a site, whether using WordPress or not, that is mobile friendly, Google recommends that a responsive design is used.

Responsive Design

This means the same site is served to users no matter whether they are browsing on a desktop or a smartphone device. The same site is displayed but thanks to using a responsive design, elements of the page such as the layout, formatting and images are resized to best suit the device.

While this sounds quite tricky, thankfully for WordPress users, there are a growing number of responsive themes available making the transition to this type of fluid layout very easy.

Parallel Mobile Site

Another option is to create a separate mobile site that resides on a subdomain of your root domain, such as http://m.www.wpkube.com. When a mobile user is detected this parallel site is shown to them. If you already have a large site using lots of custom design elements and aren’t keen on the idea of switching themes or rebuilding your theme to make it responsive, this could be a suitable options.

This approach however, is more complicated to manage as you are effectively running two sites. If you are adding new content on a regular basis, keeping these two sites up to date will be an on-going effort. From an SEO point of view your link building activities will also need to be refocused to cover both sets of domains. The risk of duplicate content can also arise if the 301 redirects are not managed correctly.

When it comes to building a separate mobile-only site, services like Dudamobile offer a popular solution.

Conclusion

With more and more users browsing the web using a mobile device, and a wealth of statistics out there to show that mobile traffic is increasingly becoming buyer traffic, not optimising your WordPress site for smartphones and tablets can put your blog, business or online project at a serious disadvantage.

Hopefully you now have the tools to evaluate your sites on mobile devices using these smartphone and screen size emulators and the information to remedy any problems you discover.