SlideShare a Scribd company logo
1 of 69
NICOLE SULLIVAN




Design Fast Websites
don’t blame the rounded corners!
Exceptional Performance
         at Yahoo!
Quantify and improve the
performance of all Yahoo!
   products worldwide
Y! Performance Research
    Engineering Team




     Nicole Sullivan, Anande Kishore (intern),
   Stoyan Stefanov, Philip Tellis, Swapnil Shinde
Make your users happy

• Users care if sites are fast.
• I can’t give you the solution
• I can help you understand the problem.
Why talk about
performance?
1: Because fast is better
2: Because sites are bigger
Modern web sites &
applications have changed
      architecturally.
From 2003 to 2008:
   97K to 312K.
25.7 to 49.9 objects.
In past 12 months, Top 1000 sites:
       From 250K to 310.4K.
WebSiteOptimization.com/speed/tweak/average-web-page
3: Time is money
+100 ms
Amazon:1% drop in sales


       +100 ms
+400 ms
Yahoo!: 5-9% drop in
   full-page traffic

     +400 ms
+500 ms
Google: 20% fewer
    searches

    +500 ms
Users care about
 performance!
Performance Fruit
(some low, some high)
Web Dev Philosophy

• Work out of respect for the design.
• Designers make our code as beautiful and
  clever on the outside as it is on the inside.
• Respect the original design vision.
  consistent design = clean code = fast site.
9 Best Practices
1. Create a component         5. Avoid non-standard
   library of smart objects      browser fonts.

2. Use consistent semantic    6. Use columns rather than
   styles                        rows.

3. Design modules to be       7. Choose your bling
   transparent on the            carefully.
   inside.
                              8. Be flexible.
4. Optimize images and
   sprites.                   9. Learn to love grids.
1
    Create a component
          library
         of smart objects
Components
  are like legos
Mix and match to create diverse
     and interesting pages.
Site-wide legos:
• Headings
• Lists (e.g. action list, external link list,
   product list, or feature list)
• Module headers and footers
• Grids
• Buttons
• Anything else that should be consistent
   site-wide.
Reusing elements
  makes them
   performance “freebies”
Legos first
Design individual pages only once all the legos have
                   been defined.
Avoid redundancy
Nearly identical
  modules
Headings 3 and 5 are too similar.
Rule of thumb:
If two modules look too similar to include on
the same page, they are too similar to include
together in a site, choose one!
2
    Use consistent
    semantic styles
A   Heading should not become a        Heading


        in another part of the page.
Consistent site-wide
Consistency
Writing more rules to overwrite
 the crazy rules from before.

  e.g. Heading should behave
  predictably in any module.
How about an
  example?
  Personal finance
3
    Design modules to be
         transparent
           on the inside.
Contour blocks       Background blocks       Content Objects -
                                         headings, paragraphs, lists, headers,
                                               footers, buttons, etc.


                                             Capital of the Canterbury region and the largest city
                                             on the South Island (population just over 300,000)
                                             exudes a palpable air of gentility and a connectedness
                                             with the mother country.
                                             Read more...




                 X                       X



                             1:n
Making it look
                 fab
        Requires careful choice of pixels.



               Bonus: Consider PNG8 for
                progressive enhancement



http://alistapart.com/articles/mountaintop/
Pitfalls
Variable or gradient
   backgrounds.
4
    Optimize images and
          sprites
Optimize sprites
1. How many pages
   does your property
   have?

2. Is your site modular?
   (hint: it should be!)

3. How much time can
   your team spend on
   site maintenance?
9 Image Optimizations
1. Combine like colors      6. Reduce anti-aliased pixels -
                               via size and alignment
2. Avoid whitespace
                            7. Avoid diagonal gradients
3. Horizontal better than
   vertical                 8. Avoid alpha transparency

4. Limit colors             9. Change gradient color
                               every 2-3 pixels
5. Optimize individual
   images, then sprite
Careful with Logos
Very recognizable so small changes will be noticed
                   more easily.
Try progressively
enhanced PNG8
Avoid filters
    Why is the AlphaImageLoader used?

 IE6 and earlier don’t natively support alpha
transparency. This filter forces that support.
Problem with filters

• Blocks rendering, freezes the browser
• Increased memory consumption
• Per element, not per image!
Solution: Avoid
          AlphaImageLoader
1. BEST: avoid completely, use PNG8 which degrades gracefully in IE < 7

2. Fallback: use underscore hack so the filter is applied only to IE < 7

   #elem {

   background: url(some.png);
   _background: none;
   _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
                 (src='some.png', sizingMethod='crop');

   }
Progressively
enhanced PNG8
Build a binary transparency image.
  In Fireworks, add a few alpha
        transparent pixels.
IE6




                                          Firefox
                                          Opera
                                          IE7+
                                          Safari



Good browsers get more
  And the dinosaurs get an acceptable fallback
Experimental Data
  Removing Alpha Image Loader



                            100ms
                            Yahoo! search
Crush images

Step 1: Quality, Designer chooses quality (e.g. via save
for the web)
Step 2: Non-lossy compression to squeak the last
bytes out of the image.
demo




http://smushit.com
5
    Avoid non-standard
      browser fonts.
6
    Use columns
      rather than rows.
7   Choose your bling
       carefully.
     Consider your market and users.
8
     Be flexible.
    Extensible height and width.
• Grids control width
• Content controls height
9
    Learn to love grids.
Flickr Photo Credits:


•   idigit_teddy: http://www.flickr.com/photos/design_inspiration/238542495/


•   lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/


•   Gimli_36: http://www.flickr.com/photos/navillot/1878124531/


•   NathanFromDeVryEET: http://www.flickr.com/photos/
    thatguyfromcchs08/2300190277/


•   Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/
    set-72057594060779001/
Thanks!
Nate Koechley - YUI. High Performance
Websites:
✴   http://www.slideshare.net/natekoechley/high-performance-web-sites-2008




Yahoo! Exceptional Performance Team:
✴   http://developer.yahoo.com/performance/




A list apart:
✴   http://alistapart.com/articles/mountaintop/




Tom Chi - Yahoo! Search
Let’s keep talking...
 http://developer.yahoo.com/performance/
           http://stubbornella.org
          nicole@stubbornella.org
“stubbornella” on the web... twitter, dopplr,
                everywhere...

More Related Content

What's hot

Amazon Aurora 성능 향상 및 마이그레이션 모범 사례 - AWS Summit Seoul 2017
Amazon Aurora 성능 향상 및 마이그레이션 모범 사례 - AWS Summit Seoul 2017Amazon Aurora 성능 향상 및 마이그레이션 모범 사례 - AWS Summit Seoul 2017
Amazon Aurora 성능 향상 및 마이그레이션 모범 사례 - AWS Summit Seoul 2017
Amazon Web Services Korea
 
찾아가는 AWS 세미나(구로,가산,판교) - 메가존과 함께하는 클라우드 컴퓨팅
찾아가는 AWS 세미나(구로,가산,판교) - 메가존과 함께하는 클라우드 컴퓨팅찾아가는 AWS 세미나(구로,가산,판교) - 메가존과 함께하는 클라우드 컴퓨팅
찾아가는 AWS 세미나(구로,가산,판교) - 메가존과 함께하는 클라우드 컴퓨팅
Amazon Web Services Korea
 

What's hot (20)

Apache Jackrabbit Oak - Scale your content repository to the cloud
Apache Jackrabbit Oak - Scale your content repository to the cloudApache Jackrabbit Oak - Scale your content repository to the cloud
Apache Jackrabbit Oak - Scale your content repository to the cloud
 
CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers
 
게임을 위한 DynamoDB 사례 및 팁 - 김일호 솔루션즈 아키텍트:: AWS Cloud Track 3 Gaming
게임을 위한 DynamoDB 사례 및 팁 - 김일호 솔루션즈 아키텍트:: AWS Cloud Track 3 Gaming게임을 위한 DynamoDB 사례 및 팁 - 김일호 솔루션즈 아키텍트:: AWS Cloud Track 3 Gaming
게임을 위한 DynamoDB 사례 및 팁 - 김일호 솔루션즈 아키텍트:: AWS Cloud Track 3 Gaming
 
XML
XMLXML
XML
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptUnit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
 
Modern Data Warehousing with Amazon Redshift
Modern Data Warehousing with Amazon RedshiftModern Data Warehousing with Amazon Redshift
Modern Data Warehousing with Amazon Redshift
 
Navigation and Link
Navigation and LinkNavigation and Link
Navigation and Link
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
Amazon Aurora 성능 향상 및 마이그레이션 모범 사례 - AWS Summit Seoul 2017
Amazon Aurora 성능 향상 및 마이그레이션 모범 사례 - AWS Summit Seoul 2017Amazon Aurora 성능 향상 및 마이그레이션 모범 사례 - AWS Summit Seoul 2017
Amazon Aurora 성능 향상 및 마이그레이션 모범 사례 - AWS Summit Seoul 2017
 
Selenium locators: ID, Name, xpath, CSS Selector advance methods
Selenium locators: ID, Name,  xpath, CSS Selector advance methodsSelenium locators: ID, Name,  xpath, CSS Selector advance methods
Selenium locators: ID, Name, xpath, CSS Selector advance methods
 
BEM - CSS, Seriously
BEM - CSS, SeriouslyBEM - CSS, Seriously
BEM - CSS, Seriously
 
Amazon Aurora Deep Dive (김기완) - AWS DB Day
Amazon Aurora Deep Dive (김기완) - AWS DB DayAmazon Aurora Deep Dive (김기완) - AWS DB Day
Amazon Aurora Deep Dive (김기완) - AWS DB Day
 
Sig du kan li' mig - indholdsstrategi for sociale medier. Udvalgte huskelister.
Sig du kan li' mig - indholdsstrategi for sociale medier. Udvalgte huskelister. Sig du kan li' mig - indholdsstrategi for sociale medier. Udvalgte huskelister.
Sig du kan li' mig - indholdsstrategi for sociale medier. Udvalgte huskelister.
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
Object storage의 이해와 활용
Object storage의 이해와 활용Object storage의 이해와 활용
Object storage의 이해와 활용
 
Java script aula 06 - dom
Java script   aula 06 - domJava script   aula 06 - dom
Java script aula 06 - dom
 
찾아가는 AWS 세미나(구로,가산,판교) - 메가존과 함께하는 클라우드 컴퓨팅
찾아가는 AWS 세미나(구로,가산,판교) - 메가존과 함께하는 클라우드 컴퓨팅찾아가는 AWS 세미나(구로,가산,판교) - 메가존과 함께하는 클라우드 컴퓨팅
찾아가는 AWS 세미나(구로,가산,판교) - 메가존과 함께하는 클라우드 컴퓨팅
 

Viewers also liked

Viewers also liked (6)

The Designer Startup
The Designer StartupThe Designer Startup
The Designer Startup
 
Uncle Sam Wants You (To Optimize Your Content For Mobile)
Uncle Sam Wants You (To Optimize Your Content For Mobile)Uncle Sam Wants You (To Optimize Your Content For Mobile)
Uncle Sam Wants You (To Optimize Your Content For Mobile)
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
Rhyme scheme
Rhyme schemeRhyme scheme
Rhyme scheme
 
Rhyme scheme
Rhyme schemeRhyme scheme
Rhyme scheme
 
Depression
DepressionDepression
Depression
 

Similar to Design Fast Websites

Yahoo - Web Images optimization
Yahoo - Web Images optimizationYahoo - Web Images optimization
Yahoo - Web Images optimization
Eduard Bondarenko
 
20170112 Agile Sketchup Modeling Guide
20170112 Agile Sketchup Modeling Guide20170112 Agile Sketchup Modeling Guide
20170112 Agile Sketchup Modeling Guide
Katya Kean
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Emma Jane Hogbin Westby
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Nicole Sullivan
 
Optimisation and performance in Android
Optimisation and performance in AndroidOptimisation and performance in Android
Optimisation and performance in Android
Rakesh Jha
 
Design Best Practices for WordPress
Design Best Practices for WordPressDesign Best Practices for WordPress
Design Best Practices for WordPress
Suzette Franck
 

Similar to Design Fast Websites (20)

Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furious
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Yahoo - Web Images optimization
Yahoo - Web Images optimizationYahoo - Web Images optimization
Yahoo - Web Images optimization
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
 
20170112 Agile Sketchup Modeling Guide
20170112 Agile Sketchup Modeling Guide20170112 Agile Sketchup Modeling Guide
20170112 Agile Sketchup Modeling Guide
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
The Good, the Bad and the Ugly things to do with android
The Good, the Bad and the Ugly things to do with androidThe Good, the Bad and the Ugly things to do with android
The Good, the Bad and the Ugly things to do with android
 
Optimisation and performance in Android
Optimisation and performance in AndroidOptimisation and performance in Android
Optimisation and performance in Android
 
TAPES.pptx
TAPES.pptxTAPES.pptx
TAPES.pptx
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 
Web Zurich - Make your animations perform well
Web Zurich - Make your animations perform wellWeb Zurich - Make your animations perform well
Web Zurich - Make your animations perform well
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimization
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
 
Deliver Perfect Images At Any Size
Deliver Perfect Images At Any SizeDeliver Perfect Images At Any Size
Deliver Perfect Images At Any Size
 
Deliver perfect images at any size
Deliver perfect images at any sizeDeliver perfect images at any size
Deliver perfect images at any size
 
Design Best Practices for WordPress
Design Best Practices for WordPressDesign Best Practices for WordPress
Design Best Practices for WordPress
 

More from Nicole Sullivan

More from Nicole Sullivan (12)

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
Why are you here?
Why are you here?Why are you here?
Why are you here?
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 

Recently uploaded

Recently uploaded (20)

A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 

Design Fast Websites

  • 1. NICOLE SULLIVAN Design Fast Websites don’t blame the rounded corners!
  • 3. Quantify and improve the performance of all Yahoo! products worldwide
  • 4. Y! Performance Research Engineering Team Nicole Sullivan, Anande Kishore (intern), Stoyan Stefanov, Philip Tellis, Swapnil Shinde
  • 5. Make your users happy • Users care if sites are fast. • I can’t give you the solution • I can help you understand the problem.
  • 7. 1: Because fast is better
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. 2: Because sites are bigger
  • 16. Modern web sites & applications have changed architecturally.
  • 17. From 2003 to 2008: 97K to 312K. 25.7 to 49.9 objects.
  • 18. In past 12 months, Top 1000 sites: From 250K to 310.4K. WebSiteOptimization.com/speed/tweak/average-web-page
  • 19. 3: Time is money
  • 21. Amazon:1% drop in sales +100 ms
  • 23. Yahoo!: 5-9% drop in full-page traffic +400 ms
  • 25. Google: 20% fewer searches +500 ms
  • 26. Users care about performance!
  • 28. Web Dev Philosophy • Work out of respect for the design. • Designers make our code as beautiful and clever on the outside as it is on the inside. • Respect the original design vision. consistent design = clean code = fast site.
  • 29. 9 Best Practices 1. Create a component 5. Avoid non-standard library of smart objects browser fonts. 2. Use consistent semantic 6. Use columns rather than styles rows. 3. Design modules to be 7. Choose your bling transparent on the carefully. inside. 8. Be flexible. 4. Optimize images and sprites. 9. Learn to love grids.
  • 30. 1 Create a component library of smart objects
  • 31. Components are like legos Mix and match to create diverse and interesting pages.
  • 32. Site-wide legos: • Headings • Lists (e.g. action list, external link list, product list, or feature list) • Module headers and footers • Grids • Buttons • Anything else that should be consistent site-wide.
  • 33. Reusing elements makes them performance “freebies”
  • 34. Legos first Design individual pages only once all the legos have been defined.
  • 36. Nearly identical modules Headings 3 and 5 are too similar.
  • 37. Rule of thumb: If two modules look too similar to include on the same page, they are too similar to include together in a site, choose one!
  • 38. 2 Use consistent semantic styles
  • 39. A Heading should not become a Heading in another part of the page.
  • 41. Consistency Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module.
  • 42. How about an example? Personal finance
  • 43. 3 Design modules to be transparent on the inside.
  • 44. Contour blocks Background blocks Content Objects - headings, paragraphs, lists, headers, footers, buttons, etc. Capital of the Canterbury region and the largest city on the South Island (population just over 300,000) exudes a palpable air of gentility and a connectedness with the mother country. Read more... X X 1:n
  • 45. Making it look fab Requires careful choice of pixels. Bonus: Consider PNG8 for progressive enhancement http://alistapart.com/articles/mountaintop/
  • 47. 4 Optimize images and sprites
  • 48. Optimize sprites 1. How many pages does your property have? 2. Is your site modular? (hint: it should be!) 3. How much time can your team spend on site maintenance?
  • 49. 9 Image Optimizations 1. Combine like colors 6. Reduce anti-aliased pixels - via size and alignment 2. Avoid whitespace 7. Avoid diagonal gradients 3. Horizontal better than vertical 8. Avoid alpha transparency 4. Limit colors 9. Change gradient color every 2-3 pixels 5. Optimize individual images, then sprite
  • 50. Careful with Logos Very recognizable so small changes will be noticed more easily.
  • 52. Avoid filters Why is the AlphaImageLoader used? IE6 and earlier don’t natively support alpha transparency. This filter forces that support.
  • 53. Problem with filters • Blocks rendering, freezes the browser • Increased memory consumption • Per element, not per image!
  • 54. Solution: Avoid AlphaImageLoader 1. BEST: avoid completely, use PNG8 which degrades gracefully in IE < 7 2. Fallback: use underscore hack so the filter is applied only to IE < 7 #elem { background: url(some.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='some.png', sizingMethod='crop'); }
  • 55. Progressively enhanced PNG8 Build a binary transparency image. In Fireworks, add a few alpha transparent pixels.
  • 56. IE6 Firefox Opera IE7+ Safari Good browsers get more And the dinosaurs get an acceptable fallback
  • 57. Experimental Data Removing Alpha Image Loader 100ms Yahoo! search
  • 58. Crush images Step 1: Quality, Designer chooses quality (e.g. via save for the web) Step 2: Non-lossy compression to squeak the last bytes out of the image.
  • 60.
  • 61. 5 Avoid non-standard browser fonts.
  • 62. 6 Use columns rather than rows.
  • 63. 7 Choose your bling carefully. Consider your market and users.
  • 64. 8 Be flexible. Extensible height and width.
  • 65. • Grids control width • Content controls height
  • 66. 9 Learn to love grids.
  • 67. Flickr Photo Credits: • idigit_teddy: http://www.flickr.com/photos/design_inspiration/238542495/ • lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/ • Gimli_36: http://www.flickr.com/photos/navillot/1878124531/ • NathanFromDeVryEET: http://www.flickr.com/photos/ thatguyfromcchs08/2300190277/ • Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/ set-72057594060779001/
  • 68. Thanks! Nate Koechley - YUI. High Performance Websites: ✴ http://www.slideshare.net/natekoechley/high-performance-web-sites-2008 Yahoo! Exceptional Performance Team: ✴ http://developer.yahoo.com/performance/ A list apart: ✴ http://alistapart.com/articles/mountaintop/ Tom Chi - Yahoo! Search
  • 69. Let’s keep talking... http://developer.yahoo.com/performance/ http://stubbornella.org nicole@stubbornella.org “stubbornella” on the web... twitter, dopplr, everywhere...