How To Test Your Website On Mobile and Other Devices

How to test your website

In today’s video I’m going to show you how to test your website. As you know I’m a huge fan of getting feedback on your website to make improvements with my Website Checkup Tool.

There are a couple of other things that you might want to test on your website, and one of them is how it performs on mobile devices, tablets, and other operating systems and browsers.

In this training video I’ll show you three different tips for how to test your website in just five minutes.

How to Test Your Website On Mobile and Other Devices

Testing Your Website on Different Mobile Devices

I had a hard time finding concrete data on the overall global state of mobile vs. desktop users on the web. But looking at my own stats, I’m seeing that between 15% and 45% of my visitors are on a mobile device or tablet.

There are many claims that mobile is going to overtake computer usage in the next few years, and I think that this trend is especially important for us as website owners to take seriously.

To get started testing your website, give the Mobile Phone Emulator a try, it allows you to view your site on a number of different mobile devices.

You’ll want to see how your website looks in both vertical and horizontal modes, to see what others are seeing. Make sure that your site is viewable, clickable, and fully functional on a smaller screen.

Troubleshooting

If your site doesn’t show up properly, what should you do?

The first thing to do is to check what kind of mobile-friendliness your WordPress theme has, and what known issues might exist.

There are number of responsive website themes, and Headway is one of them. The idea here, is that when someone is using your website on a smaller screen, you can rearrange the elements on the screen to show only the most important stuff.

I love pointing to Smashing Magazine as an example of great responsive web design, just resize your browser by dragging and dropping the corner until you get a narrow and fully re-designed website.

So how important is responsive web design? I currently don’t use responsive web design on my website, but it’s just a matter of time before I do.

I like the aesthetics and the way the site looks on a big screen right now, and building a slightly different version of that for mobile devices is on my to-do list, but I know right now my site is at least fully functional on the web and on mobile.

How To Test Your Website for Different Browsers

You might be wondering why you even need to learn how to test your website on different browsers… and the answer is that even though there are some standards on the web, most of them are actually not enforced the same way by all the different web browsers.

That means that different browsers implement and display code slightly differently. This is especially true if you’re using more advanced code, special fonts, and other things that might appear wonky in different operating systems.

If you had someone else make your website, they should have checked your site on different browsers.

If you’re building your website yourself, then it’s really important to know how to test your website, otherwise you might miss some really important things that can make your site appear less professional.

Get started by running your site through Adobe Browserlab‘s free system.

Test Your Website On the iPad Tablet

If you don’t have an iPad but you’ve ever received a message from a visitor telling you there’s something that doesn’t display right… this is the tool you’ll need to use to test your website: iPad Peek.

I think it’s especially important to test things like members area videos, and other more advanced code that might not work on a less powerful or non-flash capable device.

You might also need to make tweaks based on the screen size, especially if you used code that positioned things using CSS and that might show up in a different spot.

Informal Survey: Over To You Now…

I’d love to know what your primary way of surfing the web is: desktop/operating system/browser, tablet, phone?

I personally do most of my browsing on my laptop using Mac OS X and the Chrome browser. But I would say that about 20% of my web-browsing time is spent on an iPad or iPhone.

How about you? Comment below!

10 Comments

  1. Melody Granger on January 9, 2013 at 10:13 am

    Hey Nathalie!

    When I check email from my phone, I may click a link to view info on a website…straight from my iphone. It drives me crazy when a website shows up funky on my mobile screen. However, I’ve found that it rarely happens. I like to watch videos on my iPhone! When those don’t play, then I’m sad. ;-)

    I prefer to check things out on my Mac laptop, but I do find myself on my iPhone when I don’t have my laptop powered up or I’m not near it.

    Really cool tips, thank you!!!

    xo, M



    • Nathalie Lussier on January 9, 2013 at 5:44 pm

      Awesome Melody! Glad your site is working on mobile devices! :)



  2. Carey Baker on January 9, 2013 at 5:21 pm

    Hey Nathalie,
    Great video! I was just checking for a emulator. Thanks.

    I have a unrelated question. Why do you have the links from this page leave your site altogether. Isn’t it a good Idea to leave a your page open so visitors don’t leave?

    Thanks in advance.
    Carey



    • Nathalie Lussier on January 9, 2013 at 5:44 pm

      Hey Carey! I prefer to have links open as they were designed to, I’ve read research that shows it’s bad user experience design to open links in new windows. If people want to open links in a new window or tab, they can control click or right click. :)



  3. Sonia Afonso on January 9, 2013 at 9:10 pm

    Hello Nathalie,

    Right on time!!!
    I’m constructing a new webpage and I would like to do this test.
    Can this be done during the development of he webpage, I mean, before being on the web?!?!

    Thank you, your work has been so helpful to me!

    Sonia



    • Nathalie Lussier on January 10, 2013 at 8:01 am

      Hi Sonia! Happy to hear that. :) You should be able to check your site out if you’re logged in, at least on the iPad emulator one. For the others, I’d recommend doing a test site or a test environment, where it’s live on the web but not at your main domain. Something like yourname.com/test :)



  4. Emily Sullivan on January 11, 2013 at 9:20 am

    Hey Nathalie,

    Thanks for these tips! It was a very timely video for me :)

    I tend to use my computer about 90% if I want an easier browsing experience but my iPhone also gets a lot of use as well.

    I was just on a site on my iPad that had a flash element that wasn’t working correctly so I had to switch to my computer. Fortunately for the person whose website it was I was interested enough in their content to make the effort to switch :)

    Gonna test my site today! thanks again!
    Emily



    • Nathalie Lussier on January 11, 2013 at 9:31 am

      Awesome Emily! I agree, my computer gets most of the browsing time but sometimes I click a link in an email or otherwise end up on the web on my phone so it’s good to double check that it all works. :)



  5. Natalia Real on February 12, 2013 at 7:27 pm

    Thanks, Nathalie! Super useful :)

    What you read about opening links in new windows being bad user experience design is interesting… because I often prefer it when something opens in a new window, and press “back” if it doesn’t so I can right-click! This is why I always end up with 20 tabs open haha, but I want to read everything!

    FYI, I love that you have both the video *and* the text. It’s awful when you *have* to watch the video — sometimes you just can’t afford those extra 5 minutes!



  6. jack on February 15, 2014 at 6:08 am

    Thanks for sharing tip and video..It is great to see our website in mobile screen. Because now every one is focusing on Mobile SEO.