0
DRAWING THE LINE WITH BROWSER COMPATIBILITY
Jake Smith
ConFoo - March 10, 2010




                          http://joind....
Who are you and who
 is your audience?


       http://joind.in/1285
Demographics




 •   Is your potential user “tech savvy”?

 •   Users with disabilities?

     •   Color blindness or oth...
Technology Driving
 Browser Support


      http://joind.in/1285
Netbook Revolution



 •   2009 Year of the netbook

 •   Nvidia ION makes video playback amazing

 •   Flash Player 10.1 ...
Enter the Chrome



 •   Brand Recognition

 •   Chrome will be pre-installed on Sony PCs

 •   Everyone knows google, so ...
IE 6, Why can’t I quit
        you?


        http://joind.in/1285
IE 6 in the wild



 •   School Networks

 •   Large Companies

 •   Older Demographic

 •   Windows XP




              ...
Common issues




 •   Double Margin

 •   Float Container

 •   Hover Buttons




                       http://joind.in/...
Double Margin




 •   Any margin applied to floated elements

 •   Solution - display: inline;




                      ...
Float Container




 •   Element breaks containment, overflow: hidden/
     auto is not enough

 •   Solution - float: lef...
Float Container (before)




                 http://joind.in/1285
Float Container (HTML/CSS)




                http://joind.in/1285
Float Container (After)




                 http://joind.in/1285
Hover Buttons



 •   When an “<a>” is in the hover state, and set to
     display: block; and the containing “<li>” is fl...
IE 6 Techniques and
        Tips


       http://joind.in/1285
Proper Doctype




 •   Proper Doctype keeps you from Quirks mode

 •   Quirks mode can wreak havoc on layouts

     •   E...
Quirks Mode Diagram




Quirks Mode Doctype: http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

                  ...
CSS Framework



    http://joind.in/1285
Reset



 •   Many available CSS Resets:

     •   Eric Meyer Reset (Most Popular)

     •   YUI CSS Reset

     •   Many ...
Helpers




          http://joind.in/1285
Slice View




             http://joind.in/1285
IE Conditionals vs. CSS
        hacks


         http://joind.in/1285
CSS Hacks



            •     _ hack for IE 6 and below

            •     * hack for IE 7 and below

            •     !...
IE Conditionals




 •   Specifically target version of Internet Explorer

 •   Extra HTTP Request




                   ...
IE Conditionals (Example)




                http://joind.in/1285
Browser tools



           •     IE7.js, by Dean Edwards

           •     DD_Belated

           •     IE Tester (IE 5.5...
Additional Browser Tool




                http://joind.in/1285
Build a strategy, not an
     after thought


         http://joind.in/1285
Cost Benefit


 •   Analyze current view trends

 •   Define aspects of site that must function identical
     regardless ...
Lies, Damn Lies and Statistics



 •   Statistics are skewed/manipulated

     •   IE 6 is as low as 6% and as high as 20%...
Client Awareness



     http://joind.in/1285
Inform early and often




 •   Consult the client on current browser trends

 •   Inform them of possible inconsistencies...
Have Tech Specification in contracts




 •   Browsers Supported

 •   Surcharge and/or possible timeline increases




  ...
CSS 3 and HTML 5



     http://joind.in/1285
HTML 5 Video



   http://joind.in/1285
HTML 5 Video vs Flash



 •   CPU Usage

     •   Who does it effect? Mobile, Netbook and Nettop

 •   No full screen supp...
HTML 5 Video Detection




Dive Into HTML 5 - Detect: http://diveintohtml5.org/detect.html
Modernizr: http://www.modernizr...
Vimeo Flash 10 (Macbook Pro in Safari)




                http://joind.in/1285
Vimeo Flash 10 (Netbook in Safari)




                http://joind.in/1285
Vimeo HTML 5 (Macbook Pro in Safari)




                http://joind.in/1285
Vimeo HTML 5 (Netbook in Safari)




                http://joind.in/1285
@font-face (CSS3)



           •     Renders perfect in all measurements

           •     EOT, OTF, SVG fonts

         ...
Font Stacks




            •     Quicker production turnaround

            •     Example: font-family: "Lucida Grande", ...
Graceful Degradation/Progressive
Enhancement




 •   RGBA

     •   Background vs background-color

 •   Border Radius


...
RGBA Example




               http://joind.in/1285
CSS3 - Media Queries


           •    [max/min]-[width/height]

           •    Media Types: screen, print, handheld, pro...
CSS Queries Example (CSS)




                http://joind.in/1285
CSS Queries (HTML)




               http://joind.in/1285
Mobile Browsers



     http://joind.in/1285
The grass is greener in
     mobile land


         http://joind.in/1285
Driving browsers Webkit




 •   iPhone, Android and soon Blackberry phones
     utilize Webkit browsers




             ...
Google Voice mobile/web application




            •     Google vs. Apple APP store

            •     HTML 5/CSS3 mobile...
Google Voice (HTML5/CSS3)




               http://joind.in/1285
Mobile Apps give you more control



           •     Less environment concerns

           •     Objective C (iPhone), Ja...
HTML 5 Geolocation



 •   Not quite to a browser near you, Firefox 3.5+ only

 •   Not officially HTML 5, governed by “Ge...
HTML 5 Geolocation - Firefox 3.6




HTML 5 Geolocation Demo: http://html5demos.com/geo

                                 ...
HTML 5 Geolocation - Firefox 3.6




HTML 5 Geolocation Demo: http://html5demos.com/geo

                                 ...
HTML 5 Geolocation - iPhone (Safari)




HTML 5 Geolocation Demo: http://html5demos.com/geo

                             ...
Questions? Concerns? Confusion?




           http://joind.in/1285
Thanks For Listening
Contact Information
Email: jsmith@clickhere.com
Twitter: @jakefolio
IRC: #phpc & #dallasphp



Please...
Upcoming SlideShare
Loading in...5
×

Drawing the Line with Browser Compatibility

2,101

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,101
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Drawing the Line with Browser Compatibility"

  1. 1. DRAWING THE LINE WITH BROWSER COMPATIBILITY Jake Smith ConFoo - March 10, 2010 http://joind.in/1285
  2. 2. Who are you and who is your audience? http://joind.in/1285
  3. 3. Demographics • Is your potential user “tech savvy”? • Users with disabilities? • Color blindness or other motor skill deficiencies http://joind.in/1285
  4. 4. Technology Driving Browser Support http://joind.in/1285
  5. 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. 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. 7. IE 6, Why can’t I quit you? http://joind.in/1285
  8. 8. IE 6 in the wild • School Networks • Large Companies • Older Demographic • Windows XP http://joind.in/1285
  9. 9. Common issues • Double Margin • Float Container • Hover Buttons http://joind.in/1285
  10. 10. Double Margin • Any margin applied to floated elements • Solution - display: inline; http://joind.in/1285
  11. 11. Float Container • Element breaks containment, overflow: hidden/ auto is not enough • Solution - float: left the containing element http://joind.in/1285
  12. 12. Float Container (before) http://joind.in/1285
  13. 13. Float Container (HTML/CSS) http://joind.in/1285
  14. 14. Float Container (After) http://joind.in/1285
  15. 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
  16. 16. IE 6 Techniques and Tips http://joind.in/1285
  17. 17. Proper Doctype • Proper Doctype keeps you from Quirks mode • Quirks mode can wreak havoc on layouts • Element width http://joind.in/1285
  18. 18. Quirks Mode Diagram Quirks Mode Doctype: http://css.maxdesign.com.au/listamatic/about-boxmodel.htm http://joind.in/1285
  19. 19. CSS Framework http://joind.in/1285
  20. 20. Reset • Many available CSS Resets: • Eric Meyer Reset (Most Popular) • YUI CSS Reset • Many more... http://joind.in/1285
  21. 21. Helpers http://joind.in/1285
  22. 22. Slice View http://joind.in/1285
  23. 23. IE Conditionals vs. CSS hacks http://joind.in/1285
  24. 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. 25. IE Conditionals • Specifically target version of Internet Explorer • Extra HTTP Request http://joind.in/1285
  26. 26. IE Conditionals (Example) http://joind.in/1285
  27. 27. Browser tools • IE7.js, by Dean Edwards • DD_Belated • IE Tester (IE 5.5 - IE 8) • Developer Window (Webkit) & Firebug (Firefox) • Expression Web SuperPreview IE7.js: http://code.google.com/p/ie7-js/ DD_Belated: http://www.dillerdesign.com/experiment/DD_belatedPNG/ IE Tester: http://www.my-debugbar.com/wiki/IETester/HomePage Expression Web SuperPreview: http://expression.microsoft.com/en-us/dd565874.aspx http://joind.in/1285
  28. 28. Additional Browser Tool http://joind.in/1285
  29. 29. Build a strategy, not an after thought http://joind.in/1285
  30. 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. 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
  32. 32. Client Awareness http://joind.in/1285
  33. 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. 34. Have Tech Specification in contracts • Browsers Supported • Surcharge and/or possible timeline increases http://joind.in/1285
  35. 35. CSS 3 and HTML 5 http://joind.in/1285
  36. 36. HTML 5 Video http://joind.in/1285
  37. 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. 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. 39. Vimeo Flash 10 (Macbook Pro in Safari) http://joind.in/1285
  40. 40. Vimeo Flash 10 (Netbook in Safari) http://joind.in/1285
  41. 41. Vimeo HTML 5 (Macbook Pro in Safari) http://joind.in/1285
  42. 42. Vimeo HTML 5 (Netbook in Safari) http://joind.in/1285
  43. 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. 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
  45. 45. Graceful Degradation/Progressive Enhancement • RGBA • Background vs background-color • Border Radius http://joind.in/1285
  46. 46. RGBA Example http://joind.in/1285
  47. 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
  48. 48. CSS Queries Example (CSS) http://joind.in/1285
  49. 49. CSS Queries (HTML) http://joind.in/1285
  50. 50. Mobile Browsers http://joind.in/1285
  51. 51. The grass is greener in mobile land http://joind.in/1285
  52. 52. Driving browsers Webkit • iPhone, Android and soon Blackberry phones utilize Webkit browsers http://joind.in/1285
  53. 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
  54. 54. Google Voice (HTML5/CSS3) http://joind.in/1285
  55. 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. 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. 57. HTML 5 Geolocation - Firefox 3.6 HTML 5 Geolocation Demo: http://html5demos.com/geo http://joind.in/1285
  58. 58. HTML 5 Geolocation - Firefox 3.6 HTML 5 Geolocation Demo: http://html5demos.com/geo http://joind.in/1285
  59. 59. HTML 5 Geolocation - iPhone (Safari) HTML 5 Geolocation Demo: http://html5demos.com/geo http://joind.in/1285
  60. 60. Questions? Concerns? Confusion? http://joind.in/1285
  61. 61. Thanks For Listening Contact Information Email: jsmith@clickhere.com Twitter: @jakefolio IRC: #phpc & #dallasphp Please Post Feedback http://joind.in/1285 http://joind.in/1285
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×