{"id":3599,"date":"2015-08-26T13:24:37","date_gmt":"2015-08-26T11:24:37","guid":{"rendered":"https:\/\/usersnap.com\/?p=3599"},"modified":"2025-08-06T12:59:52","modified_gmt":"2025-08-06T10:59:52","slug":"mobile-first-how-to-approach-mobile-website-testing","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/mobile-first-how-to-approach-mobile-website-testing\/","title":{"rendered":"Mobile first: How to approach mobile website testing?"},"content":{"rendered":"\n

Smartphones seem to have taken over desktop computers in terms of usage. The number of smartphone users has increased tremendously in the last few years and by 2016, there will be more than 2 billion smartphone users. In addition, half of the internet\u2019s usage comes from mobile devices.<\/p>\n\n\n\n

This development affects also web design for some years. InVision recently stated in one of their blog posts<\/a>:<\/p>\n\n\n\n

\n

\u201cResponsive Design is no longer a luxury, but a necessity.\u201d<\/p>\n<\/blockquote>\n\n\n\n

Especially when it comes to testing, mobile website testing still is in its child\u2019s shoes and developers face a hard time getting the best result out of their work.<\/p>\n\n\n\n

In this blog post we are going to show how to set up the perfect mobile feedback<\/a> & website testing workflow<\/a> and how to easily conduct browser tests for mobile.<\/p>\n\n\n\n\n\n\n

Try Usersnap for User Testing<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

What does RWD mean?<\/h2>\n\n\n\n

This means that developers should be creating their websites so a user can access it from any smart device, be it iPhone, smartwatch, Kindle or notebook, without running into problems.<\/p>\n\n\n\n

Responsive Design: A perfect all-in-one solution?<\/h2>\n\n\n\n

The screen size, platform and orientation and even all the elements of a design adjust to make it compatible for viewing on that particular device.<\/p>\n\n\n\n

That way, the size of the smart device doesn\u2019t matter. For example, if the user switches from their computer to the iPad, the website automatically switches to accommodate for the change in resolution, image size and scripting abilities. It has become so common and so important that designing with mobile in mind has earned its own name: Responsive Design<\/strong>.<\/p>\n\n\n\n

Since responsive web design eliminates the need for a custom design and development for each new gadget that\u2019s released, the concept can save you quite a lot of time.<\/p>\n\n\n\n

But, since it\u2019s supposed to support virtually any type of device, the techniques used should be as robust as possible.<\/p>\n\n\n\n

Why mobile testing matters.<\/h2>\n\n\n\n

However, when designing websites, developers still face some hard time in getting the best results out of their work.<\/p>\n\n\n\n

Website developers and designers often do not invest a large enough amount of resources in testing the compatibility of their sites on different mobile devices.<\/p>\n\n\n\n

Testing for mobile usage is still at a nascent stage but with the help of a proper testing workflow<\/strong>, the methods of testing and the right mobile testing tools, testing your website for responsiveness is going to become a lot easier.<\/p>\n\n\n\n

How to get started with mobile website testing?<\/h2>\n\n\n\n

Since there are so many different devices to view a website on today, there\u2019s a lot to take into account.<\/p>\n\n\n\n

They come with different screen sizes and resolutions, operate on different network speeds and have different hardware capabilities.<\/p>\n\n\n\n

All these differences make it important that a website is tested thoroughly before it\u2019s made available on different platforms.<\/p>\n\n\n\n

\n

According to Guy Podjarny\u2019s research<\/a>, regardless of the screen size, 72% of responsive websites require the same resources, even on slow mobile network connections regardless of what needs to be displayed.<\/p>\n<\/blockquote>\n\n\n\n

And since users expect short load times, it won\u2019t be long before they head over to a competitor\u2019s page. When testing sites for mobile devices, there are 4 basic things to look out for. These are:<\/p>\n\n\n\n

    \n
  1. Does the site look great on each device<\/li>\n\n\n\n
  2. Is it free of bugs on each device<\/li>\n\n\n\n
  3. Is the interface user-friendly on each device<\/li>\n\n\n\n
  4. Is the site optimized for each device<\/li>\n<\/ol>\n\n\n\n

    Now, there are a lot of different devices out there.<\/p>\n\n\n\n

    \n

    The goal of mobile website testing is to deliver a consistent but relevant experience to users across all those different devices, and that can be really hard to manage.<\/strong><\/p>\n<\/blockquote>\n\n\n\n

    So, where do you even begin? Well, your testing should take place in five areas to cover everything properly.<\/p>\n\n\n\n

    Validate your HTML and CSS code<\/h3>\n\n\n\n

    You should first try to validate the HTML code of your page. It\u2019s not because the website works for you that it\u2019ll work for everyone. So the most important step is to make sure you\u2019ve covered the basic and the website is on par with all HTML and CSS standards.<\/p>\n\n\n\n

    W3C mobile OK Checker<\/b><\/h3>\n\n\n\n

    W3C is a web based automated validation tool and is one of the best tools to check the compatibility of your site on mobile devices. The tool offers several tests that determine the user-friendliness of the mobile website.<\/p>\n\n\n

    \n
    \"w3c<\/figure>\n<\/div>\n\n\n

    Chrome Developer Tools – the mobile testing allrounder<\/h3>\n\n\n\n

    The Chrome Developer tools which you probably all know are a great place for fixing those HTML and CSS issues. Through the whole testing workflow, the Chrome Developer Tools are your home base. Whether you\u2019re checking the behavior of your website on various screen resolutions or you\u2019re testing the loading times with Network throttling.<\/p>\n\n\n\n

    The Chrome Dev tools are the place to be.<\/p>\n\n\n

    \n
    \"chrome<\/figure>\n<\/div>\n\n\n

    Test on different browsers and operating systems<\/h3>\n\n\n\n

    You should then test your website on multiple browsers, especially the ones which are most popular in your target audience. This probably means testing in Firefox, Chrome, Safari or Internet Explorer.<\/p>\n\n\n\n

    In addition to this, also check your site on different operating systems like Mac or Linux. It might happen that a site looks completely fine on one of the browsers but break completely on some other browser, or work on one browser on one OS but not the same browser on a different OS.<\/p>\n\n\n\n

    Testing on BrowserStack<\/h3>\n\n\n\n

    Browserstack is a web service that allows access to desktop and mobile devices<\/a> and can be used by professionals to test their sites. It is a paid service. Though a part of the service is available in a free version, the paid version has a lot more features.<\/p>\n\n\n

    \n
    \"browserstack<\/figure>\n<\/div>\n\n

    Try Usersnap for User Testing<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

    Test for different mobile devices<\/h3>\n\n\n\n

    This is where it gets difficult. After testing your site on your desktop, resize the browser window and check the appearance on different preset sizes.<\/p>\n\n\n\n

    Test on real mobile devices<\/h3>\n\n\n\n

    The best way to test the responsiveness of any site is by simply testing it on different mobile devices. The user experience varies depending on the page loading time, pixel densities and the size of the tap targets.<\/p>\n\n\n

    \n
    \"mobile<\/figure>\n<\/div>\n\n\n


    \nSince comprehensive testing on each mobile device is often not possible due to cost and time limitations, a mobile device testing suite<\/strong> works best in testing. A suit consists of many popular web browsing devices and helps in physical testing under real conditions.<\/p>\n\n\n\n

    Testing with Android Emulator and iOS Simulator<\/h3>\n\n\n\n

    Other than testing on the real mobile devices, you can also use an emulator. Emulators are software that are mainly designed for testing apps and default web browsers.<\/p>\n\n\n\n

    However, because of the slow speed of emulators, they\u2019re not very good for testing mobile sites. They don\u2019t even show all the features of a physical hardware device. But if you don\u2019t have any other testing options, an emulator works pretty ok by ensuring basic testing.<\/p>\n\n\n\n

    Responsinator<\/h3>\n\n\n\n

    Responsinator is great tool for testing your responsive web design. It\u2019s free of any cost and works great for performing a quick layout check.<\/p>\n\n\n

    \n
    \"responsinator<\/figure>\n<\/div>\n\n\n

    Am I Responsive?<\/h3>\n\n\n\n

    Am I responsive is a web based tool that will show you if a certain website has an responsive web design. Though it\u2019s more a tool for a quick and simple check, than for testing and bug tracking purpose.<\/p>\n\n\n

    \n
    \"Am<\/figure>\n<\/div>\n\n\n

    MobiReady<\/h3>\n\n\n\n

    MobiReady is basically an online testing tool. It performs a number of tests and provides a comprehensive result for the compatibility of your website for the mobile use. It also sends error report so that you know the areas where you can bring improvement.<\/p>\n\n\n

    \n
    \"mobi<\/figure>\n<\/div>\n\n\n

    Connectivity options<\/h3>\n\n\n\n

    Websites rely on network connectivity to provide the required functionality. In a test environment, set up wi-fi network and test the site\u2019s load speed under different conditions.<\/p>\n\n\n\n

    \n

    Although nothing new, responsive web design isn\u2019t about being able to be displayed well in different scenarios, it\u2019s about being usable in different scenarios.<\/strong><\/p>\n<\/blockquote>\n\n\n\n

    Unfortunately, being responsive usually means an increase in loading time as more assets need to be loaded. Thankfully, RESS is there to help with that.<\/p>\n\n\n\n

    RESS (=Responsive Web Design + Server Side Components)<\/strong> is basically the addition of server side components that get loaded dynamically, and according to what a specific device requires. There\u2019s no use to load a full resolution image on a small cell phone, but it might be on a desktop.<\/p>\n\n\n\n

    Mobile testing after deployment<\/h3>\n\n\n\n

    As with all things development related, there\u2019s no guarantee that after deployment, your website will be flawless. In fact, there will be bugs, always.<\/p>\n\n\n\n

    So, after deployment, you\u2019re going to want to keep an eye on your responsive website. Your users will be bumping into them from time to time as they\u2019re spending way more time on the site then you\u2019ll ever be able to.<\/p>\n\n\n\n

    So aside from checking and testing for bugs and issues with each new deployment, you should also be catching bugs that still linger in your current deployment.<\/p>\n\n\n\n

    But, here\u2019s the great news. There are tools for that as well.<\/p>\n\n\n\n

    Pingdom<\/h3>\n\n\n\n

    We talked about optimizing load time. But how about uptime? We\u2019re not just referring to entire sites being offline. It can just as well be that a single asset is offline as well. That\u2019s where pingdom comes in. This tool monitors how the user experiences the website and where they might find potential hiccups.<\/p>\n\n\n

    \n
    \"pingdom<\/figure>\n<\/div>\n\n\n

    Usersnap<\/h3>\n\n\n\n

    Imagine you or one of your users found a bug or some critical issue with your responsive web design. Well, it\u2019s your job to try and get enough information out of that user to go ahead and fix that bug. Usersnap helps you get that information, without bothering your users all too much.<\/p>\n\n\n\n

    As smart devices become more popular, preparing your site for mobile customers is crucial. Testing is the most important part of being prepared.<\/p>\n\n\n

    \n
    \"usersnap<\/figure>\n<\/div>\n\n

    Try Usersnap for User Testing<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

    Wrapping it up.<\/h2>\n\n\n\n

    This was quite a lot, I know. For getting started with mobile website testing I’ve shown you some basic questions which need to be answered. Besides that, I’ve shown you some tools and workflows you should consider while testing your responsive web design<\/a>.<\/p>\n\n\n\n

    Using those tools during your QA process will get you better results for your new website or web app.<\/p>\n\n\n\n

    The point of this article, however, is for you to understand the cost of neglecting the importance of mobile website testing. Starting with testing early pays off!<\/p>\n\n\n\n

    PS: Prefer a short summary of mobile testing? Check out this Slideshare presentation:<\/strong><\/p>\n\n\n\n