This week I gave a speech on browser usage, the statistics behind it and how it effects the way we develop our web sites and applications.

1. Ian Brennan
design.development
ibrennan.co.uk | @nannerB

2. Web Browsers
And browser version support

3. Browser Usage Statistics
June 2011
22.1% 28% 42.5% 1.7% 5.1%
g.statcounter.com

4. Browser Usage Statistics
Growth July 08 – July 2011
g.statcounter.com

5. Browser Usage Statistics
June 2011
22.1% 28% 42.5% 1.7% 5.1%
12 - 19.8% 5 - 14% 9 - 7.2% 11 - 1.1% 5 - 3.5%
Other - 2.3% 4 - 3.4% 8 - 26.3% 10 - 0.6% iPad - 0.8%
3.6 - 8.6% 7 - 5.6% Other - 0.8%
3.5 - 0.8% 6 - 3.4%
Other - 1.2%
g.statcounter.com

6. The pure and simple
truth is rarely pure
and never simple
Oscar Wilde

7. Browser Usage Statistics
ibrennan.co.uk
28.1% + 47.5% + 10.4% - 2.4% + 11% +
22.1% 28% 42.5% 1.7% 5.1%

8. Why Is It Different?
Target audience
Modern Web Browser, Older browser, installed by IT.
supports latest technologies. Likely to be Internet Explorer.

9. Supporting Browsers
Which web browsers should my website support?
“ The mostthe site tostatistics areaudience
Develop
reliable
your own
your own.
and not that of the generic web
”

10. Supporting Browsers
Rule of thumb
Latest Latest Latest None Latest
+2 previous +2 previous

11. Internet Explorer 6.0
/sigh

12. Internet Explorer 6.0
Usage statistics

13. Common Issues
Tear your hair out moments
The box model
IE6 does not account for padding and border when calculating an elements width
Min width / height
IE6 does understand the min-width / min-height CSS property, instead it treats width / height
the same way
Transparent PNGs
IE6 does not support alpha transparency on PNGs.

14. Should We Support It?
Yes / No / Maybe / Could you repeat the question?
Yes! No!
We are building a website for Our site will be visited by
an emerging market Western users
We are focussing on public We want to rid the world of
sector systems old technology and push the
web forward
We have infinite resource and
budget
We have a limited resource
and budget

15. Should We Support It?
Yes / No / Maybe / Could you repeat the question?
Maybe?
We don’t want to exclude users from our website, even if they are using old
technology
Can we meet in the middle and produce something that works on a functional
level?

16. Progressive Enhancement
And degrading gracefully
“Progressive enhancement uses web
technologies in a layered fashion that
allows everyone to access the basic
content and functionality of a web page
”

17. The Layers
Behaviour JavaScript / jQuery
Styling CSS
Markup HTML

18. The Ultimate Goal
And not the one Wayne Rooney scored against Man City
“The markup should be of such a standard
that even with the behaviour and styling
layers disabled the user can still view the
content and navigate the site.
”

19. The Way Things Look
Firefox 5.0 Internet Explorer 7.0

20. The Way Things Look
Firefox 5.0 Internet Explorer 6.0

21. Start On A Level Playing Field
“There are a number of things we can do
to ensure we have a clean start to any
web project. The most important being a
CSS reset.
”

22. Pixel Perfect Development
An unrealistic and pointless exercise

23. HTML5 And Other Awesome Things
Yey!

24. We Can Use It Now
Yes, even in Internet Explorer 6

25. What Can It Do?
WordSquared.com

26. What Can It Do?
WordSquared.com

27. What Can It Do?
Chrome.AngryBirds.com

28. It’s Not Just Fancy Games
Remember this quote?
“The markup should andofstyling alayers disabled the
with the behaviour
be such standard that even
user can still view the content and navigate the site.
”
Well, HTML5 helps to make this a lot easier

29. A Balanced Argument
I’m not biased, honest.
Cons Pros
The spec isn’t finalised yet Cleaner markup
Not everything works in Additional semantics of new
every browser elements
Staying ahead of the curve
Allows for progressive
enhancement of pages

30. Thank You For Listening
Any questions?
http://g.statcounter.com
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
http://html5doctor.com
http://wordsquared.com
http://chrome.angrybirds.com
ibrennan.co.uk | @nannerB