Overview of testing guidelines. Slidedeck from HTML5 LA developers meetup event on August 13, 2013. Some things references are from the live demo.

1. Testing, testing,
123..
Website and web app device testing
note: some images have been removed
because of copyright

2. Who the heck are you?
● web designer
● front end developer
"integrator"
● over ten years of
experience
● freelance/ company /
small and enterprise
● principal at Context
Multimedia and Mario
Noble Design
● organizer SCWDD
Mario Noble

3. Overview
● Why you should test mobile
● General Guidelines
● Some tools and techniques
● A demo of a few of Adobe Inspect
● Edge Code and Reflow if time permits
● Tips and Tricks

4. Testing. It helps.

5. To test or not to test,
that is the question...

6. Why test for
mobile?
the mobile market is only getting larger

7. More Importantly
Money...!
I could show a fancy graph but I think
we all know it’s true now.

8. Also
Find problems early
Testing is an integral part of creating a quality
product.
Provide as good of a user experience as
possible.
Keep that money! Don’t get sued!

9. Bad Experience =
Less Visitors, Less Money...

10. Two main approaches
Responsive Design User Agent Adaptive

11. Native app
testing?
hybrid applications that can be tested in
the browser first can be helpful.

12. Goals
Find out what’s going on.
Fix it if necessary.

13. Some general guidelines
Stick to standards when possible.
Develop a solid framework and go with it.
Beware of plugin promiscuity
Unit test - break things up into manageable
pieces where possible
Measure your analytics to figure what should
get priority
There is no such thing as perfect testing

14. So how do we
test?
Some useful tools and techniques

15. Emulators vs
Hardware testing
Which should I use?

16. Use both
Each of them has pros and cons

17. Emulator Pros and Cons
Pros
Easy testing
Desktop based
You have to do it
anyway
Cheaper
Fast
Cons
Doesn’t use a device’s
browser
Inaccurate results
Performance is not
accurate
Bandwidth not
representative

18. Actual Device Pros and
Cons
Pros
If it works, it works
Accurate performance
Accurate bandwidth
Real touch events
Real testing
Cons
Expensive
Can’t cover all devices
Needs to be kept up to
date
May not model real
world performance
and bandwidth

19. A few Emulators
Ripple emulator extension
Firefox web developer toolbar Addon
http://beta.screenqueri.es/
http://responsinator.com/

20. Desktop/ Device
based options
Other options - chrome for android and firefox plus Apple’s safari and Win
Phone:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
http://lucasr.org/2012/03/28/remote-debugging-in-firefox-mobile/
https://developer.apple.
com/library/safari/documentation/AppleApplications/Reference/SafariWebConte
nt/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402572(v=vs.
105).aspx
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone

21. Some thoughts
on owning
devices
try to get the major devices

22. Adobe’s Inspect Tool
Weinre based
http://people.apache.org/~pmuellr/weinre/
Rundown:
http://html.adobe.com/edge/inspect/
Installation
http://www.adobe.com/devnet/edge-
inspect/articles/browser-testing-across-devices-
with-adobe-edge-inspect.html

23. Some Hybrid remote
options
I don’t endorse these by the way. Just examples.
http://www.deviceanywhere.com/
Browsershots (http://browsershots.org/)
http://info.perfectomobile.com/automate-mobile-app-testing.
html?
utm_source=Google&utm_medium=CPC&utm_campaign=
Search_Mobile_Testing_US_Canada&utm_term=Remote&
gclid=CKnk1a2N-bgCFYN_QgodZ30AWg
http://mobilelabsinc.com/deviceconnect/
Check with the hardware manufacturues too

24. Weinre is
Firebug for
devices (sorta)
Not quite as powerful but Super
Convenient

25. Let’s check it
out!
hands on demo starts here

26. Some other tips
“Mobile First”
Pushing the envelope means extra testing
Clear local and server cache before testing
Kindle Silk issues
If at first you don’t succeed, Refresh...
Inspect might also help with Accessibility
debugging.

27. Go forth and test yourself !