Upload
ian-brennan
View
1.257
Download
0
Embed Size (px)
DESCRIPTION
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.
Citation preview
Ian Brennandesign.development
ibrennan.co.uk | @nannerB
Web BrowsersAnd browser version support
Browser Usage StatisticsJune 2011
42.5%28%22.1% 5.1%1.7%
g.statcounter.com
Browser Usage StatisticsGrowth July 08 – July 2011
g.statcounter.com
Browser Usage StatisticsJune 2011
g.statcounter.com
9
8
7
6
- 7.2%
- 26.3%
- 5.6%
- 3.4%
5
4
3.6
3.5
Other
- 14%
- 3.4%
- 8.6%
- 0.8%
- 1.2%
12
Other
- 19.8%
- 2.3%
11
10
- 1.1%
- 0.6%
5
iPad
Other
- 3.5%
- 0.8%
- 0.8%
42.5%28%22.1% 5.1%1.7%
The pure and simple truth is rarely pure and never simple
Oscar Wilde
Browser Usage Statisticsibrennan.co.uk
10.4%47.5%28.1% 11%2.4%++ +- +
42.5%28%22.1% 5.1%1.7%
Why Is It Different?Target audience
Modern Web Browser, supports latest technologies.
Older browser, installed by IT. Likely to be Internet Explorer.
Supporting BrowsersWhich web browsers should my website support?
The most reliable statistics are your own.Develop the site to your own audience and not that of the generic web
“
”
Supporting BrowsersRule of thumb
Latest+2 previous
Latest LatestNoneLatest+2 previous
Internet Explorer 6.0/sigh
Internet Explorer 6.0Usage statistics
Common IssuesTear your hair out moments
The box model
Min width / height
Transparent PNGs
IE6 does not account for padding and border when calculating an elements width
IE6 does understand the min-width / min-height CSS property, instead it treats width / heightthe same way
IE6 does not support alpha transparency on PNGs.
Should We Support It?Yes / No / Maybe / Could you repeat the question?
Yes!We are building a website for
an emerging market
We are focussing on public
sector systems
We have infinite resource and budget
No!Our site will be visited by
Western users
We want to rid the world of
old technology and push the
web forward
We have a limited resource and budget
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?
Progressive EnhancementAnd 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
“
”
The Layers
Behaviour
Styling
Markup
JavaScript / jQuery
CSS
HTML
The Ultimate GoalAnd 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.
“
”
The Way Things Look
Firefox 5.0 Internet Explorer 7.0
The Way Things Look
Firefox 5.0 Internet Explorer 6.0
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.
“
”
Pixel Perfect DevelopmentAn unrealistic and pointless exercise
HTML5 And Other Awesome ThingsYey!
We Can Use It NowYes, even in Internet Explorer 6
What Can It Do?WordSquared.com
What Can It Do?WordSquared.com
What Can It Do?Chrome.AngryBirds.com
It’s Not Just Fancy GamesRemember this quote?
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.
“
”Well, HTML5 helps to make this a lot easier
A Balanced ArgumentI’m not biased, honest.
ProsCleaner markup
Additional semantics of new
elements
Staying ahead of the curve
ConsThe spec isn’t finalised yet
Not everything works in
every browser
Allows for progressive enhancement of pages
Thank You For ListeningAny questions?
ibrennan.co.uk | @nannerB
http://g.statcounter.com
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
http://html5doctor.com
http://wordsquared.com
http://chrome.angrybirds.com