This document discusses cross-browser compatibility and page load times. It defines cross-browser compatibility as building websites that look, feel and function similarly across different browsers and devices. Page load is the time it takes for a webpage and all its components to load. The document recommends considering the majority audience browser and trends when developing websites. It also provides tools like Reset.css, Adobe Browser Lab, CrossBrowserTesting, YSlow and Pingdom to test cross-browser compatibility and optimize page load times.
2. 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.
3. 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
4. Audience Browser Stats*
*Stats taken from Google Analytics for www.SeniorMarketSales.com fromAugust 15, 2010 thru September 14, 2010
5. 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).
6. Audience Browser Stats*
*Stats taken from Google Analytics for www.SeniorMarketSales.com fromAugust 15, 2010 thru September 14, 2010
7. 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 + LiveTest
▪ Small monthly/yearly charge (150 min/month)
8. Reset.css (zero-out)
http://developer.yahoo.com/yui/reset/
May be a bit excessive
99% Compatible
9. Page Load
Average browser load of complete HTML page
including all objects/components
▪ HTML
▪ CSS
▪ JavaScript
▪ RSS
▪ Flash
▪ Frames/iFrames
10. How Page Load is Measured
Overhead
▪ Server
▪ Header
▪ Cookies
▪ Requests
4-Part Process
▪ Start
▪ Connect
▪ First Byte
▪ Last Byte
11. Tools
YSlow?Yahoo Developer Network
▪ FireFoxWeb Dev Plugin (also avail. on other browsers)
▪ https://addons.mozilla.org/en-US/firefox/addon/5369/
▪ No cost
PingdomTools
▪ http://tools.pingdom.com
▪ No cost
16. 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.