SlideShare uma empresa Scribd logo
1 de 16
And a little bit about Page Load, too.
 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.
 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
 Audience Browser Stats*
*Stats taken from Google Analytics for www.SeniorMarketSales.com fromAugust 15, 2010 thru September 14, 2010
 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).
 Audience Browser Stats*
*Stats taken from Google Analytics for www.SeniorMarketSales.com fromAugust 15, 2010 thru September 14, 2010
 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)
 Reset.css (zero-out)
 http://developer.yahoo.com/yui/reset/
 May be a bit excessive
 99% Compatible
 Page Load
 Average browser load of complete HTML page
including all objects/components
▪ HTML
▪ CSS
▪ JavaScript
▪ RSS
▪ Flash
▪ Frames/iFrames
 How Page Load is Measured
 Overhead
▪ Server
▪ Header
▪ Cookies
▪ Requests
 4-Part Process
▪ Start
▪ Connect
▪ First Byte
▪ Last Byte
 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
 YSlow for LTCFA
 YSlow for beta.LTCFA
 Pingdom for LTCFA
 Pingdom for beta.LTCFA
 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.

Mais conteúdo relacionado

Mais procurados

Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
Zoe Gillenwater
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web apps
Chris Love
 
บรรณานุกรม
บรรณานุกรมบรรณานุกรม
บรรณานุกรม
IShadow' Leo'os
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
Bruce Morrison
 
Koubei banquet 35
Koubei banquet 35Koubei banquet 35
Koubei banquet 35
Koubei UED
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbas
 

Mais procurados (20)

Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web apps
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
บรรณานุกรม
บรรณานุกรมบรรณานุกรม
บรรณานุกรม
 
How i acheived a pretty good google page speed insights score
How i acheived a pretty good google page speed insights scoreHow i acheived a pretty good google page speed insights score
How i acheived a pretty good google page speed insights score
 
10 tips to improve the usability of Joomla - Joomla World Conference 2014
10 tips to improve the usability of Joomla - Joomla World Conference 201410 tips to improve the usability of Joomla - Joomla World Conference 2014
10 tips to improve the usability of Joomla - Joomla World Conference 2014
 
Wordpress multisite
Wordpress multisiteWordpress multisite
Wordpress multisite
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to know
 
WordPress Multisite Q&A
WordPress Multisite Q&AWordPress Multisite Q&A
WordPress Multisite Q&A
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
 
Squeeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla WebsiteSqueeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla Website
 
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
 
Koubei banquet 35
Koubei banquet 35Koubei banquet 35
Koubei banquet 35
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Cast a wider net
Cast a wider netCast a wider net
Cast a wider net
 
Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009
 
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...
 
WebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile WebWebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile Web
 
Make mobile web apps rock
Make mobile web apps rockMake mobile web apps rock
Make mobile web apps rock
 
How To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud ChampionHow To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud Champion
 

Semelhante a Cross-Browser Compatibility, and a little bit about Page Load, too.

The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
Andy Davies
 
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
Ovadiah Myrgorod
 

Semelhante a Cross-Browser Compatibility, and a little bit about Page Load, too. (20)

The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
 
IRJET- A Personalized Web Browser
IRJET-  	  A Personalized Web BrowserIRJET-  	  A Personalized Web Browser
IRJET- A Personalized Web Browser
 
IRJET- A Personalized Web Browser
IRJET- A Personalized Web BrowserIRJET- A Personalized Web Browser
IRJET- A Personalized Web Browser
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Building the next generation of browser apps today
Building the next generation of browser apps todayBuilding the next generation of browser apps today
Building the next generation of browser apps today
 
Building fast webapps, fast - Velocity 2010
Building fast webapps, fast - Velocity 2010Building fast webapps, fast - Velocity 2010
Building fast webapps, fast - Velocity 2010
 
Flourish2011
Flourish2011Flourish2011
Flourish2011
 
New trends on web platform
New trends on web platformNew trends on web platform
New trends on web platform
 
Mastering Mobile Web with 8 Key Rules
Mastering Mobile Web with 8 Key RulesMastering Mobile Web with 8 Key Rules
Mastering Mobile Web with 8 Key Rules
 
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal ...
 
Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta
 
Responsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonResponsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparison
 
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
 
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the web
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
 
Web design services
Web design servicesWeb design services
Web design services
 

Último

Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
210303105569
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
ZurliaSoop
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 

Último (20)

How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 

Cross-Browser Compatibility, and a little bit about Page Load, too.

  • 1. And a little bit about Page Load, too.
  • 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
  • 12.  YSlow for LTCFA
  • 13.  YSlow for beta.LTCFA
  • 15.  Pingdom for beta.LTCFA
  • 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.