Drawing the Line with Browser Compatibility
Upcoming SlideShare
Loading in...5

Drawing the Line with Browser Compatibility






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Drawing the Line with Browser Compatibility Drawing the Line with Browser Compatibility Presentation Transcript

  • DRAWING THE LINE WITH BROWSER COMPATIBILITY Jake Smith ConFoo - March 10, 2010 http://joind.in/1285
  • 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 other motor skill deficiencies http://joind.in/1285
  • 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 provides better netbook support • Modern OS (Windows 7 and Linux) = less IE6/WIN XP http://joind.in/1285
  • 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
  • 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 http://joind.in/1285
  • Common issues • Double Margin • Float Container • Hover Buttons http://joind.in/1285
  • Double Margin • Any margin applied to floated elements • Solution - display: inline; http://joind.in/1285
  • Float Container • Element breaks containment, overflow: hidden/ auto is not enough • Solution - float: left the containing element http://joind.in/1285
  • 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 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
  • 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 • Element width http://joind.in/1285
  • Quirks Mode Diagram Quirks Mode Doctype: http://css.maxdesign.com.au/listamatic/about-boxmodel.htm http://joind.in/1285
  • CSS Framework http://joind.in/1285
  • Reset • Many available CSS Resets: • Eric Meyer Reset (Most Popular) • YUI CSS Reset • Many more... http://joind.in/1285
  • 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 • !important for modern browsers • Most common hack reset * {} Browser Render Hacks: http://centricle.com/ref/css/filters/ http://joind.in/1285
  • IE Conditionals • Specifically target version of Internet Explorer • Extra HTTP Request http://joind.in/1285
  • IE Conditionals (Example) http://joind.in/1285
  • 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
  • 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 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
  • 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
  • Client Awareness http://joind.in/1285
  • 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
  • Have Tech Specification in contracts • Browsers Supported • Surcharge and/or possible timeline increases http://joind.in/1285
  • 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 support for HTML 5 • Zero support for Internet Explorer • Supported in Mobile Browsers http://joind.in/1285
  • HTML 5 Video Detection Dive Into HTML 5 - Detect: http://diveintohtml5.org/detect.html Modernizr: http://www.modernizr.com/ http://joind.in/1285
  • 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 • 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
  • 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
  • Graceful Degradation/Progressive Enhancement • RGBA • Background vs background-color • Border Radius http://joind.in/1285
  • RGBA Example http://joind.in/1285
  • 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
  • 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 http://joind.in/1285
  • 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
  • Google Voice (HTML5/CSS3) http://joind.in/1285
  • 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
  • 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
  • HTML 5 Geolocation - Firefox 3.6 HTML 5 Geolocation Demo: http://html5demos.com/geo http://joind.in/1285
  • HTML 5 Geolocation - Firefox 3.6 HTML 5 Geolocation Demo: http://html5demos.com/geo http://joind.in/1285
  • HTML 5 Geolocation - iPhone (Safari) HTML 5 Geolocation Demo: http://html5demos.com/geo http://joind.in/1285
  • Questions? Concerns? Confusion? http://joind.in/1285
  • 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