“Responsive Design is no longer a luxury, but a necessity.” Especially when it comes to testing, mobile website testing still is in its child’s shoes and developers face a hard time getting the best result out of their work. In this blog post we are going to show how to set up the perfect mobile website testing workflow and how to easily conduct browser tests for mobile.

1. @tompeham I @usersnap
HOW TO APPROACH MOBILE
WEBSITE TESTING

2. THIS IS ME!
@TOMPEHAM I @USERSNAP

3. @TOMPEHAM I @USERSNAP
Say hi!
THIS IS ME!

4. BEFORE WE GET STARTED…
You can find all resources here.

5. HOW TO APPROACH MOBILE
HERE IS
WEBSITE TESTING

6. “Responsive Design is no longer a luxury, but a
necessity.” - InVision

7. What does RWD mean?
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.

8. Getting started with mobile testing
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.

9. What to look out for
When it comes to mobile website testing there are 4 basic
things to look out for. These are:
1. Does the site look great on each device
2. Is it free of bugs on each device
3. Is the interface user-friendly on each device
4. Is the site optimized for each device

10. Validate your HTML and CSS code
You should first try to validate the HTML code of your page.
It’s not because the website works for you that it’ll work for
everyone.
So the most important step is to make sure you’ve covered
the basic and the website is on par with all HTML and CSS
standards.

11. W3C mobileOK Checker
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: https://validator.w3.org/mobile/

12. Chrome Developer Tools
The Chrome Developer tools are a great place for fixing HTML and
CSS issues. Through the whole testing workflow, the Chrome
Developer Tools should be your home base.

13. Test on different browsers and operating
systems
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.

14. Testing on BrowserStack
Browserstack is a web service that allows access to desktop and
mobile devices and can be used by professionals to test their sites.
https://www.browserstack.com

15. Test for different mobile devices
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.

16. Testing with Android Emulator and iOS
Simulator
Since comprehensive testing on each mobile device is often not
possible due to cost and time limitations, a mobile device testing
suite works best in testing.
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.
Here are some of the best emulators…

17. Responsinator
Responsinator is great tool for testing your responsive web design.
It’s free of any cost and works great for performing a quick layout
check. http://www.responsinator.com/

18. Am I Responsive?
Am I responsive is a web based tool that will show you if a certain
website has an responsive web design. Though it’s more a tool for a
quick and simple check, than for testing and bug tracking purpose.
http://ami.responsivedesign.is

19. MobiReady
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. http://ready.mobi

20. Mobile testing after deployment
As with all things development related, there’s no guarantee that
after deployment, your website will be flawless. In fact, there will be
bugs, always.
So, after deployment, you’re going to want to keep an eye on your
responsive website.
Here are two great tools to help you…

21. Pingdom
This tool monitors how the user experiences the website and where
they might find potential hiccups.
http://tools.pingdom.com/fpt/

22. Usersnap
Usersnap helps you get information about bugs, without bothering
your users all too much. https://usersnap.com

23. THAT WAS A LOT…

24. Enjoyed this presentation?

25. Enjoyed this presentation?
Yes you did? Awesome.

26. Enjoyed this presentation?
Yes you did? Awesome.
Give it a tweet!

27. Enjoyed this presentation?
Yes you did? Awesome.
Give it a tweet!
PLEASE! :)

28. ONE LAST THING…
JUST PING US ON TWITTER.