Many users nowadays connect to the web directly from mobile – skipping any desktop experience. So why would you risk using them? Learn from the web-bugs we found and give a fair and beautiful experience to your users!

1. Unblock users – Why mobile web compatibility is
(so) important
Ioana Chiorean
CodeCamp Cluj - November 2016

2. Who is Ioana?
● Mozillian for more than 7 years doing
several roles within the community
● CodeWeek Ambassador
● QA Team Lead @ SOFTVISION
@ioana_cis
#lifeofamozillian

4. “ a global community of people who
believe that openness, innovation,
and opportunity are key to the
continued health of the Internet.”
Mozilla is ..

5. Mozilla > Firefox
● Firefox
● Firefox for Android
● Firefox for iOS (Focus)

7. COPYRIGHT
https://whatcanidoformozilla.org
MozActivate RUSTA-FRAME

8. What exactly ?
● Compatibility
○ Web Compatibility
■ Mobile Web Compatibility

9. What causes cross-browser incompatibilities
Developers who use browser-specific features
Browser vendors
who rush to implement features developers want before they are standardized.
who are slow to implement standards and fix bugs in their browsers.
Sites that employ user agent sniffing
Developers who are over-reliant on a single toolset
Growth in the industry
many new web developers to join the field
many platforms to deploy on

10. Why? Oh why..
● Smartphones everywhere
● Busy bees
● Professionals. Yes you!
Why is Mobile Web Compatibility important?

11. Stats

12. Stats

13. What is she talking about?
#2439 #1163 #1937

14. What is she talking about?
#1896 #3639 #1818

15. Tools
You don’t even have to have a smartphone
Browser DevTools
Cross-browser-testing tool
Understand which browsers have
implemented web features before using
Them
Coding tools that can improve cross-browser
compatibility

16. What is she talking about?
NASA blanck page on mobile
#1984
Wired reorganized elements
#2292
Hacker News hierarchicall display
#2135
Other examples

17. What you get? Is what you see..
● More users (yay!)
○ Users won’t switch browsers, they’ll switch sites
● Less angry feedback ( yay twice!)
● Cooler things?
● Smarter you. Yes you!
○ Staying current with the latest technologies, frameworks, and
techniques.
Why would you do this?

18. Convinced?
Wink wink -> https://webcompat.com/

19. How It Works..
● Report a bug for any
website or browser.
● Our team of volunteers
diagnoses the bug.
● We send a fix to the
site owner or browser.

20. Team & Resources
Adam Stevenson ➡️ @adamopenweb
Alexa Roman ➡️ @calexity
Daniel Davis ➡️ @ourmaninjapan
Guillaume Demesy ➡️ @magsout
Karl Dubost ➡️ @karlpro
Mike Taylor ➡️ @miketaylr
compatibility@lists.mozilla.org
Bug "Ready for Outreach"
Web Compatible JavaScript and CSS
Try the activity out:
https://activate.mozilla.community/webcompat-sprint/
https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/
aka the heroes

21. Questions?
@ioana_cis
@webcompat
ioana@mozilla.com
Slides already available:
http://bit.ly/WebCompatCodeCamp