Testing, testing,
123..
Website and web app device testing
note: some images have been removed
because of copyright
Who the heck are you?
● web designer
● front end developer
"integrator"
● over ten years of
experience
● freelance/ compan...
Overview
● Why you should test mobile
● General Guidelines
● Some tools and techniques
● A demo of a few of Adobe Inspect
...
Testing. It helps.
To test or not to test,
that is the question...
Why test for
mobile?
the mobile market is only getting larger
More Importantly
Money...!
I could show a fancy graph but I think
we all know it’s true now.
Also
Find problems early
Testing is an integral part of creating a quality
product.
Provide as good of a user experience a...
Bad Experience =
Less Visitors, Less Money...
Two main approaches
Responsive Design User Agent Adaptive
Native app
testing?
hybrid applications that can be tested in
the browser first can be helpful.
Goals
Find out what’s going on.
Fix it if necessary.
Some general guidelines
Stick to standards when possible.
Develop a solid framework and go with it.
Beware of plugin promi...
So how do we
test?
Some useful tools and techniques
Emulators vs
Hardware testing
Which should I use?
Use both
Each of them has pros and cons
Emulator Pros and Cons
Pros
Easy testing
Desktop based
You have to do it
anyway
Cheaper
Fast
Cons
Doesn’t use a device’s
b...
Actual Device Pros and
Cons
Pros
If it works, it works
Accurate performance
Accurate bandwidth
Real touch events
Real test...
A few Emulators
Ripple emulator extension
Firefox web developer toolbar Addon
http://beta.screenqueri.es/
http://responsin...
Desktop/ Device
based options
Other options - chrome for android and firefox plus Apple’s safari and Win
Phone:
https://de...
Some thoughts
on owning
devices
try to get the major devices
Adobe’s Inspect Tool
Weinre based
http://people.apache.org/~pmuellr/weinre/
Rundown:
http://html.adobe.com/edge/inspect/
I...
Some Hybrid remote
options
I don’t endorse these by the way. Just examples.
http://www.deviceanywhere.com/
Browsershots (h...
Weinre is
Firebug for
devices (sorta)
Not quite as powerful but Super
Convenient
Let’s check it
out!
hands on demo starts here
Some other tips
“Mobile First”
Pushing the envelope means extra testing
Clear local and server cache before testing
Kindle...
Go forth and test yourself !
Upcoming SlideShare
Loading in …5
×

Testing html5 meetup slideshare

343 views
267 views

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
343
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Testing html5 meetup slideshare

  1. 1. Testing, testing, 123.. Website and web app device testing note: some images have been removed because of copyright
  2. 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. 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. 4. Testing. It helps.
  5. 5. To test or not to test, that is the question...
  6. 6. Why test for mobile? the mobile market is only getting larger
  7. 7. More Importantly Money...! I could show a fancy graph but I think we all know it’s true now.
  8. 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. 9. Bad Experience = Less Visitors, Less Money...
  10. 10. Two main approaches Responsive Design User Agent Adaptive
  11. 11. Native app testing? hybrid applications that can be tested in the browser first can be helpful.
  12. 12. Goals Find out what’s going on. Fix it if necessary.
  13. 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. 14. So how do we test? Some useful tools and techniques
  15. 15. Emulators vs Hardware testing Which should I use?
  16. 16. Use both Each of them has pros and cons
  17. 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. 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. 19. A few Emulators Ripple emulator extension Firefox web developer toolbar Addon http://beta.screenqueri.es/ http://responsinator.com/
  20. 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. 21. Some thoughts on owning devices try to get the major devices
  22. 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. 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. 24. Weinre is Firebug for devices (sorta) Not quite as powerful but Super Convenient
  25. 25. Let’s check it out! hands on demo starts here
  26. 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. 27. Go forth and test yourself !

×