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.
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.
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.
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.
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.
This is very useful article. Opera Mobile Emulator is my favourite.
Yes I agree, its a great tool.
Thank you for sharing this article. This is really cool idea on how to easily view WordPress is mobile devices. I will apply this on my smart phone.
Glad you found it useful Jerralyn. Let us know how you get on.
Nice blog…thanx for sharing this awesome post. I like the way you describe the technical detail of phones.
With the release of WordPress 4.5, you can now preview your site using the WordPress Customizer, right from the admin area of your site. As soon as you update to version 4.5, you’ll be able to use this new device preview feature.
Here’s a quick video walkthrough:
https://www.youtube.com/watch?v=DcoY8nKos2M