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.
TRANSCRIPT
Ian Brennandesign.development
ibrennan.co.uk | @nannerB
Presenter
Presentation Notes
Short introduction to who I am and some of the brands / projects I have worked on.
Web BrowsersAnd browser version support
Presenter
Presentation Notes
Talk through the big 5, and why we focus on them. �Browsers use a layout engine, this takes the markup and presentation information and paints a picture in the browser. Chrome and Safari use WebKit, Firefox uses Gecko, Internet Explorer uses Trident and Opera uses Presto
Browser Usage StatisticsJune 2011
42.5%28%22.1% 5.1%1.7%
g.statcounter.com
Presenter
Presentation Notes
These 5 browsers cover 99.4% of web traffic.
Browser Usage StatisticsGrowth July 08 – July 2011
g.statcounter.com
Presenter
Presentation Notes
Chrome has seen big growth, down to self promotion through Google’s other product offerings. ��Internet Explorer is no longer the force it once was.
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%
Presenter
Presentation Notes
Interesting balancing of %’s over versions. Chrome has a very good upgrade policy, and forces users to get the latest version. Mozilla have recently changed their rollout procedures, and will be increasing version numbers at a faster pace. Internet Explorer 8 remains the most common browser, followed by Chrome 12.
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%
Presenter
Presentation Notes
The statistics from my own website. A noticeable difference between the general statistics.
Why Is It Different?Target audience
Modern Web Browser, supports latest technologies.
Older browser, installed by IT. Likely to be Internet Explorer.
Presenter
Presentation Notes
Your browser statistics are heavily effected by your target audience. My own site is targeted towards web designers and developers. It is reasonable to expect them to be using the latest browsers hat support new tech.
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
“
”
Presenter
Presentation Notes
The importance of your own data cannot be stressed enough. Develop the site to your audience, not that of a generic web.
Supporting BrowsersRule of thumb
Latest+2 previous
Latest LatestNoneLatest+2 previous
Presenter
Presentation Notes
The general rule of thumb for browser support. Of course this can change between projects, but as a standard we should always look to cover these browsers which captures roughly 90% of general traffic.
Internet Explorer 6.0/sigh
Presenter
Presentation Notes
At the time of release Internet Explorer 6.0 was a cutting edge modern browser. A lot of the web is moving towards no longer supporting this ancient browser, but that’s not always a wise move.
Internet Explorer 6.0Usage statistics
Presenter
Presentation Notes
Internet Explorer 6.0 is still a huge player in the browser landscape. It is important to understand your target market before deciding whether or not to support the browser.
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.
Presenter
Presentation Notes
A few common problems with Internet Explorer 6.0, that we as Developers have to work around.
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
“
”
Presenter
Presentation Notes
Yes, we can work on something that meets in the middle.
The Layers
Behaviour
Styling
Markup
JavaScript / jQuery
CSS
HTML
Presenter
Presentation Notes
The three layers of front end development, the most important layer being at the bottom. Of course, for heavily AJAX driven sites this model somewhat changes, and the Behaviour and Styling swap places.
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.
“
”
Presenter
Presentation Notes
This is what we strive to create.
The Way Things Look
Firefox 5.0 Internet Explorer 7.0
Presenter
Presentation Notes
Oh look, my own website doesn’t look right in Internet Explorer 7. However, the core functionality remains the same.
The Way Things Look
Firefox 5.0 Internet Explorer 6.0
Presenter
Presentation Notes
Race For Life adopt a friendly message asking users to upgrade their browser to be able to experience the website in full glory. They also provide different styling for IE6, by simplifying the “flare” whilst remaining functional.
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
Presenter
Presentation Notes
A few years ago it was all the rage for front end developers to create pixel perfect html/css. This is no longer the case, we no longer aim to create a page that looks exactly the same across every browser. Instead, we look to make pages that function exactly the same across every browser.
HTML5 And Other Awesome ThingsYey!
Presenter
Presentation Notes
The new buzz word in web development is HTML5, and it’s awesome.
We Can Use It NowYes, even in Internet Explorer 6
Presenter
Presentation Notes
HTML5 has been designed in such a way that we can use it now, and it works in old browsers! (sort of)
What Can It Do?WordSquared.com
Presenter
Presentation Notes
A Massively Multiplayer Online Word Game. Each pixel on that map represents a single scrabble tile, and it goes on forever and ever!
What Can It Do?WordSquared.com
Presenter
Presentation Notes
The project uses HTML5 technologies to create the game, no Flash here thank you very much!
What Can It Do?Chrome.AngryBirds.com
Presenter
Presentation Notes
Well known mobile game Angry Birds has been adapted to the web using HTML5 technologies.
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
Presenter
Presentation Notes
HTML5 introduces more semantic markup, allowing us to develop pages that degrade gracefully and enhance user experience.