Embed Size (px)
DESCRIPTION
Cross-Browser Compatibility =Art and science of building web sites that look, feel and function similarly on various Internet Browsers and/or Devices.Page Load = The amount of time (sec/ms) it takes to load a single web page and the entirety of its components.
Citation preview
Cross-Browser CompatibilityAnd a little bit about Page Load, too.
2 Things I’m looking to improve
Cross-Browser Compatibility Art and science of building web sites
that look, feel and function similarly on various Internet Browsers and/or Devices.
Page Load The amount of time (sec/ms) it takes to
load a single web page and the entirety of its components.
Cross-Browser Compatibility
Do web sites need to appear exactly the same on all browsers? No, but they still need to work Graceful Degradation/Progressive
Enrichment Are some browsers more important
than others? Yes, consider audience browser majority
Cross-Browser Compatibility
Audience Browser Stats*
*Stats taken from Google Analytics for www.SeniorMarketSales.com from August 15, 2010 thru September 14, 2010
Cross-Browser Compatibility
Trends IE6 is not like FireFox* IE7 is not like FireFox* IE8 is a tad-bit like FireFox* IE9 could be more like FireFox* than it is
to previous IE versions Predictions
How is the majority altered by trends? How are skill-sets altered by trends?
*In this case, the term FireFox is used to represent progressive, forward-thinking browsers with an emphasis on building a standards-compliant Interent (including Safari, Chrome, Mozilla and a few others).
Cross-Browser Compatibility
Audience Browser Stats*
*Stats taken from Google Analytics for www.SeniorMarketSales.com from August 15, 2010 thru September 14, 2010
Cross-Browser Compatibility Tools
Reset.css (zero-out)▪ Reset defaults on all elements
Adobe Browser Lab▪ https://browserlab.adobe.com▪ Screen Shots Only▪ Free until Jan 2011
CrossBrowserTesting▪ https://crossbrowsertesting.com▪ Screen Shots + Live Test▪ Small monthly/yearly charge (150 min/month)
Cross-Browser Compatibility
Reset.css (zero-out) http://developer.yahoo.com/yui/reset/
May be a bit excessive 99% Compatible
Page Load
Page Load Average browser load of complete HTML
page including all objects/components▪ HTML▪ CSS▪ JavaScript▪ RSS▪ Flash▪ Frames/iFrames
Page Load
How Page Load is Measured Overhead▪ Server▪ Header▪ Cookies▪ Requests
4-Part Process▪ Start▪ Connect▪ First Byte▪ Last Byte
Page Load
Tools YSlow? Yahoo Developer Network▪ FireFox Web Dev Plugin (also avail. on other
browsers)▪ https://addons.mozilla.org/en-US/firefox/addo
n/5369/▪ No cost
Pingdom Tools▪ http://tools.pingdom.com▪ No cost
Page Load
YSlow for LTCFA
Page Load
YSlow for beta.LTCFA
Page Load
Pingdom for LTCFA
Page Load
Pingdom for beta.LTCFA
The Take-aways
Improve Internet user experience by Developing web sites and apps that look
and feel and function in an increasingly similar form.
Developing web sites that load as quickly as possible.
