• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • Themes
    • Elegant Themes
    • Thrive Themes
    • OptimizePress
  • Hosting Reviews
    • WPEngine
    • Bluehost
    • A2 Hosting
    • Kinsta
    • WPX
  • Coupons
    • WPEngine
    • Flywheel
    • HostGator
    • A2 Hosting
    • WPX Hosting
WordPress Tips & Tricks

How to Preview WordPress sites on Mobile Devices

Last Updated on: December 12, 2015 Joe Fylan 6 Comments

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.

iPad Peek

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.

Mobile Device Emulator

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.

ScreenFly

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.

Opera Emulator

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.

Opera Phone Emulation

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.

MobiLead Magnet Review

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.

+ Share
Disclosure

Joe Fylan

Joe Fylan loves using WordPress to create websites and enjoys writing about this topic for a number of blogs. If you'd like to work with Joe, visit his website today.

Related Posts

Back to all articles
  • Top WordPress Support And Maintenance Services

    10 Best WordPress Maintenance and Support Services in 2021

  • ‘Your PHP Installation Appears to Be Missing the MySQL Extension Which Is Required by WordPress’: What It Is and How to Fix It

    ‘Your PHP Installation Appears to Be Missing the MySQL Extension Which Is Required by WordPress’: What It Is and How to Fix It

  • How to Add FAQ Schema in WordPress

    How To Add FAQ Schema In WordPress – Step-by-Step Guide

Coupons

View more deals
  • Imagely Coupon
    20% OFF

    Imagely Coupon

    Photographers and WordPress are a match made in heaven. The flexi
    Get This Deal
  • 20% OFF

    Flothemes Coupon

    As an experienced photographer, it’s not always easy to get the
    Get This Deal
  • Nexcess coupon code
    Save 40%

    Nexcess Coupon

    Looking to save money on managed hosting from Nexcess?
    Get This Deal
6 Comments Leave a Reply
  1. Mladen says

    August 5, 2013 at 5:27 pm

    This is very useful article. Opera Mobile Emulator is my favourite.

    Reply
    • Joe Fylan says

      August 6, 2013 at 2:53 am

      Yes I agree, its a great tool.

      Reply
  2. Jerralyn Tanoc says

    September 20, 2013 at 7:23 am

    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.

    Reply
    • Joe Fylan says

      September 30, 2013 at 5:07 pm

      Glad you found it useful Jerralyn. Let us know how you get on.

      Reply
  3. veronica says

    October 6, 2013 at 6:26 am

    Nice blog…thanx for sharing this awesome post. I like the way you describe the technical detail of phones.

    Reply
  4. Dave Warfel says

    April 4, 2016 at 7:42 pm

    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

    Reply

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

1How to Start a WordPress Blog (Step by Step Guide)
2How to Install WordPress - The Complete Guide
36 Best Options for Managed WordPress Hosting Compared
4The 6 Best WordPress Hosting Providers for 2021 Compared
5Top 9 Landing Page Plugins for WordPress (2021)
69 Best List Building Plugins for WordPress In 2021
7How to Fix the 500 Internal Server Error on Your WordPress Website
8Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2021)?
9What is a Gravatar and Why You Should Get One
10Thrive Themes Review: A Look At The Full Membership
117 Best WordPress Migration Plugins Reviewed and Compared for 2021
12OptimizePress Review: Create Landing Pages with Ease
13How to Make a Website: Complete Beginner’s Guide
14WordPress.com vs WordPress.org: Which is Best for Me?
15Top 22 Best Free Stock Photo Resources For Your Site
1617 of the Best Google Fonts for 2021 (And How to Use Them in WordPress)
17LifterLMS Review: Is it The Ultimate WordPress LMS Plugin?
18How To Fix ‘503 Service Unavailable’ WordPress Error
1911 Best Contact Form Plugins for WordPress in 2021
20How to Use BackupBuddy – The Best Backup Solution for WP??
21How to Add a Custom Logo to Your WordPress Site
22Kinsta Review: Real Test Data + My Likes And Dislikes
23How to Fix Error Establishing a Database Connection in WordPress
24Thrive Architect Review – Best Landing Page Plugin for WordPress!

WPEngine: 50% OFF Deal

Save 50% on one of the best managed hosting providers.

Get this Deal

Flywheel(our review)

Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Twitter Facebook

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • Thrive Leads
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Thrive Architect
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • LifterLMS Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
  • FloThemes
More Deals »
© Copyright 2021 WPKube ® All Rights Reserved.
  • About
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy