1. DRAWING THE LINE WITH BROWSER COMPATIBILITY
Jake Smith
ConFoo - March 10, 2010
http://joind.in/1285
2. Who are you and who
is your audience?
http://joind.in/1285
3. Demographics
• Is your potential user “tech savvy”?
• Users with disabilities?
• Color blindness or other motor skill deficiencies
http://joind.in/1285
5. Netbook Revolution
• 2009 Year of the netbook
• Nvidia ION makes video playback amazing
• Flash Player 10.1 provides better netbook support
• Modern OS (Windows 7 and Linux) = less IE6/WIN
XP
http://joind.in/1285
6. Enter the Chrome
• Brand Recognition
• Chrome will be pre-installed on Sony PCs
• Everyone knows google, so they trust Google
• Chrome already taken more market share than
Safari
http://joind.in/1285
7. IE 6, Why can’t I quit
you?
http://joind.in/1285
8. IE 6 in the wild
• School Networks
• Large Companies
• Older Demographic
• Windows XP
http://joind.in/1285
10. Double Margin
• Any margin applied to floated elements
• Solution - display: inline;
http://joind.in/1285
11. Float Container
• Element breaks containment, overflow: hidden/
auto is not enough
• Solution - float: left the containing element
http://joind.in/1285
15. Hover Buttons
• When an “<a>” is in the hover state, and set to
display: block; and the containing “<li>” is floated
you have to hover over the link and not the entire
block element.
• Solution: set containing <li> to position: relative; or
display: inline-block;
http://joind.in/1285
24. CSS Hacks
• _ hack for IE 6 and below
• * hack for IE 7 and below
• !important for modern browsers
• Most common hack reset * {}
Browser Render Hacks: http://centricle.com/ref/css/filters/
http://joind.in/1285
25. IE Conditionals
• Specifically target version of Internet Explorer
• Extra HTTP Request
http://joind.in/1285
30. Cost Benefit
• Analyze current view trends
• Define aspects of site that must function identical
regardless of browser
• Present/Prepare estimate on Browser Testing/
Development separate from “Development/
Production” time.
• Navigation should always be accessible NO
MATTER WHAT (Mobile, IE, etc)
http://joind.in/1285
31. Lies, Damn Lies and Statistics
• Statistics are skewed/manipulated
• IE 6 is as low as 6% and as high as 20%
• Research your product/client current stats and/or
target market
• Initial research will be paid off by further reach
to clients
http://joind.in/1285
33. Inform early and often
• Consult the client on current browser trends
• Inform them of possible inconsistencies in
antiquated browsers
• Set/Manage Expectations
http://joind.in/1285
34. Have Tech Specification in contracts
• Browsers Supported
• Surcharge and/or possible timeline increases
http://joind.in/1285
37. HTML 5 Video vs Flash
• CPU Usage
• Who does it effect? Mobile, Netbook and Nettop
• No full screen support for HTML 5
• Zero support for Internet Explorer
• Supported in Mobile Browsers
http://joind.in/1285
38. HTML 5 Video Detection
Dive Into HTML 5 - Detect: http://diveintohtml5.org/detect.html
Modernizr: http://www.modernizr.com/
http://joind.in/1285
39. Vimeo Flash 10 (Macbook Pro in Safari)
http://joind.in/1285
41. Vimeo HTML 5 (Macbook Pro in Safari)
http://joind.in/1285
42. Vimeo HTML 5 (Netbook in Safari)
http://joind.in/1285
43. @font-face (CSS3)
• Renders perfect in all measurements
• EOT, OTF, SVG fonts
• Legal issues
• You may use this font for Font-Face embedding, but only if you put a link to www.exljbris.nl on
your page and/or put this notice /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ in
your CSS file as near as possible to the piece of code that declares the Font-Face embedding of
this font.
Delicious Font EULA: http://www.josbuivenga.demon.nl/eula.html
http://joind.in/1285
44. Font Stacks
• Quicker production turnaround
• Example: font-family: "Lucida Grande", "Lucida Sans
Unicode", "Lucida Sans", Verdana, Tahoma, sans-
serif;
Popular Font Stacks: http://www.awayback.com/revised-font-stack/
Installed Font Matrix: http://media.24ways.org/2007/17/fontmatrix.html
http://joind.in/1285
47. CSS3 - Media Queries
• [max/min]-[width/height]
• Media Types: screen, print, handheld, projection,
braille, speech
• Three ways to implement: import, link and CSS
• Handheld interpreted by older mobile phones
• Current smart phones (iPhone/Android) utilize
“screen”
W3C Media Queries: http://www.w3.org/TR/css3-mediaqueries/
http://joind.in/1285
53. Google Voice mobile/web application
• Google vs. Apple APP store
• HTML 5/CSS3 mobile “Google Voice”
Google Voice: http://m.google.com/voice
http://joind.in/1285
55. Mobile Apps give you more control
• Less environment concerns
• Objective C (iPhone), Java (Android) and WebOS
(Pre)
• Titanium (Appcelerator), build apps with web
technology
Titanium Appcelerator: http://www.appcelerator.com/
http://joind.in/1285
56. HTML 5 Geolocation
• Not quite to a browser near you, Firefox 3.5+ only
• Not officially HTML 5, governed by “Geolocation
Working Group”
• iPhone and Android 2.0 only supported mobile
devices
http://joind.in/1285
57. HTML 5 Geolocation - Firefox 3.6
HTML 5 Geolocation Demo: http://html5demos.com/geo
http://joind.in/1285
58. HTML 5 Geolocation - Firefox 3.6
HTML 5 Geolocation Demo: http://html5demos.com/geo
http://joind.in/1285
59. HTML 5 Geolocation - iPhone (Safari)
HTML 5 Geolocation Demo: http://html5demos.com/geo
http://joind.in/1285