• Save
The Fast And The Fabulous
Upcoming SlideShare
Loading in...5
×
 

The Fast And The Fabulous

on

  • 13,257 views

You've got a sneaking suspicion that design impacts performance. What next? Your engineers know nothing about design and your designers know nothing about performance. How can you get everyone on the ...

You've got a sneaking suspicion that design impacts performance. What next? Your engineers know nothing about design and your designers know nothing about performance. How can you get everyone on the same page? Which design flaws must you absolutely avoid? How do engineers slow designs with poor CSS? This presentation covers the best practices in design and OO CSS for fast, maintainable sites.

* Abstraction
* Flexibility
* Grids
* Location dependent styles

Velocity Conference, 2009

Statistics

Views

Total Views
13,257
Views on SlideShare
11,449
Embed Views
1,808

Actions

Likes
66
Downloads
0
Comments
4

11 Embeds 1,808

http://www.parisvega.com 1441
http://parisvega.com 319
http://www.slideshare.net 20
http://onecreativeblog.com 11
http://masulsa.wordpress.com 5
http://translate.googleusercontent.com 4
http://tumblr.esthernam.com 3
http://static.slidesharecdn.com 2
http://webcache.googleusercontent.com 1
http://www.tumblr.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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.

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

The Fast And The Fabulous The Fast And The Fabulous Presentation Transcript

  • Nicole Sullivan THE FAST AND THE FABULOUS
  • WHY ARE YOU HERE?
  • IS CSS DESIGN OR ENGINEERING?
  • IS YOUR CSS FILE GROWING LIKE A WEED?
  • GOOD NEWS CSS and front-end architecture have a huge impact on performance.
  • AND BAD NEWS If I don’t do my job right, I can slow your site down to a crawl
  • 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.
  • WHAT COUNTS? toward fast design
  • PAGE WEIGHT the heavier your page, the slower it will be
  • TOTAL REQUESTS
  • TOTAL REQUESTS
  • REQUIRED: ❖ Firefox ❖ Firebug ❖ http://OOCSS.org http://www.slideshare.net/stubbornella
  • WHAT IS OBJECT-ORIENTED CSS? A framework? A tool? A philosophy?
  • MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful
  • HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...}
  • HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here
  • HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here
  • “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  • “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  • CSS “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  • CSS CIRCA 2005 total spaghetti
  • CSS CIRCA 2008 a little better
  • RATHER THAN MAKING OUR CODE PLAY NICE We built big fences
  • BUT FOR PERFORMANCE?
  • SITES GET SLOW As file size and HTTP requests are not optimized
  • CSS CIRCA 2009
  • OBJECT ORIENTED CSS best practices for performance, scalability, and most importantly, ease of use.
  • 9 BEST PRACTICES 1. Component library: reuse 5. Be Flexible and redundancy 6. Learn to love grids 2. Consistency: Avoid location-dependent styles 7. Avoid non-standard browser fonts 3. Abstraction 8. Avoid height alignment 4. Optimize images and sprites 9. Choose your bling carefully
  • LEARN MORE designing fast websites
  • LEARN MORE image optimization Even Faster Webistes with Stoyan Stefanov
  • CREATE A COMPONENT LIBRARY of reusable “legos”
  • REUSING ELEMENTS MAKES THEM performance “freebies”
  • COMPONENTS ARE LIKE LEGO Mix and match to create diverse and interesting pages.
  • BUILD HTML FROM THE COMPONENT LIBRARY. New pages should not generally require additional CSS
  • Heading Level 1 Heading Level 2 HEADINGS Heading Level 3 Getting the look and feel you want with the semantics you Heading Level 4 need. Heading Level 5 Heading Level 6
  • Default List ‣ Toggle List List Item 2 ‣ List Item 2 List Item 3 ‣ List Item 3 LISTS ❖ Action List ❖ List Item 2 Should be available to all ❖ List Item 3 modules on the page.
  • SITE-WIDE LEGOS ❖ Headings ❖ Lists (e.g. action list, external link list, product list, or feature list) ❖ Module headers and footers ❖ Grids ❖ Buttons ❖ Rounded corner boxes ❖ Tabs, Carousel, toggle blocks
  • AVOID DUPLICATION Wasting performance resources on components that can’t add value.
  • 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!
  • HOW ABOUT AN EXAMPLE? Yahoo! Personal Finance
  • 2+ DIFFERENT TAB STYLES. COULD THEY USE THE SAME IMAGES?
  • 3 contour components are too similar. Chose one.
  • Changes in module width, background color, or background image are an excellent example of module reuse.
  • AVOID LOCATION- DEPENDENT STYLES Sandboxing is better than spaghetti, but leads to performance problems
  • AVOID WHAT?
  • FUNCTION AREA()
  • FUNCTION AREA()
  • FUNCTION AREA()
  • EVERY NOW AND THEN...
  • RETURNED DIAMETER
  • BROKEN.
  • IN CSS WE DO THIS ALL THE TIME
  • BROKEN.
  • A Heading should not become a Heading in another part of the page.
  • AVOID EXAMPLE #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color undefined for h3, so it will be ‣ unstyled in new modules, ‣ developers forced to write more CSS for the same style
  • AVOID EXAMPLE h3{color:black;} #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color defined (better!) ❖ Weather and tabs override default h3 ‣ three styles for h3 cannot co-exist in the same module ‣ default style cannot be used in weather and tabs without costly overrides ❖ Weather and tabs h3 can never be used outside of those modules
  • CONSISTENCY Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module.
  • TRY THIS INSTEAD h1, .h1{...} h2, .h2{...} h3, .h3{...} h4, .h4{...} h5, .h5{...} h6, .h6{...} ❖ Global values defined ❖ Semantics respected (while allowing visual flexibility)
  • NEED MORE THAN 6 HEADINGS? Really? Any duplicates? Any too similar?
  • STILL NEED MORE HEADINGS? .category{...} .section{...} .product{...} .prediction{...} ❖ Extend the heading object via a class on the object itself ❖ Avoid using the cascade to change display of nested objects
  • ABSTRACT reusable bits of code
  • person-man-photographer person-woman-photographer REPETITION OF CODE caused by a failure to abstract different levels of semantics
  • SEPARATE: ❖ Container and Content ❖ Structure and Skin ❖ Contour and Background ❖ Objects and Mixins
  • SEPARATE CONTAINER AND CONTENT define the boundaries of each object
  • Media Subheading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. image or flash OPEN EDITABLE ZONE
  • image or flash OPEN EDITABLE ZONE
  • 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
  • MIX AND MATCH Container and content objects to achieve high performance design.
  • SEPARATE CONTOUR AND BACKGROUND transparent on the Inside!
  • 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.
  • SEPARATE STRUCTURE FROM SKIN two separate classes
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. EXAMPLE: MODULE
  • mod block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft
  • mod block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft
  • mod complex mod complex
  • mod pop
  • SKIN Makes it pretty. The goal is very predictable skins, complexity is absorbed by the structure object and shared across the site.
  • /* ----- simple (extends mod) ----- */ .simple .inner { border:1px solid gray; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } .simple b{ *background-image:url(skin/mod/corners.png); } Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  • WHAT BELONGS IN THE SKIN? Every value in the skin should be predictable, something that can easily be calculated or measured. Colors Borders Images
  • BE FLEXIBLE Extensible height and width.
  • Grids control the width
  • Content controls height
  • FIXED DIMENSIONS limit the ways in which a module can be reused
  • LEARN TO LOVE GRIDS and believe they can be beautiful
  • GRIDS < 1K ❖ 13 tiny lines of code ❖ Simple syntax ❖ Easy (even for beginners) to create complex layouts ❖ Infinite nesting and stacking http://wiki.github.com/stubbornella/oocss/grids
  • HTML line unit 1/4 unit 3/4 lastUnit
  • HTML unit 1/4 unit 3/4 lastUnit
  • (1) .line, .lastUnit {overflow: hidden; _overflow: visible; _zoom: 1;} (2) .unit{float: left; _zoom: 1;} (3) .size1of1{float:none;} (4) .size1of2{width:50%;} (5) .size1of3{width:33.33333%;} (6) .size2of3{width:66.66666%;} (7) .size1of4{width:25%;} (8) .size3of4{width:75%;} (9) .size1of5{width:20%;} (10) .size2of5{width:40%;} (11) .size3of5{width:60%;} (12) .size4of5{width:80%;} (13) .lastUnit {float:none; _position: relative; _left:-3px; _margin-right: -3px;width:auto;}
  • digital mash
  • Jason Santa Maria
  • Jason Santa Maria
  • Jason Santa Maria
  • Jason Santa Maria
  • fluid 960 grid system
  • OUTCOMES If the theory is right, it should yield better results.
  • TEMPLATE • 807 bytes • 13 lines of code • easily extended to custom page and column width
  • GRIDS • 574 bytes • 14 lines of code • Percentage widths adapt to different page sizes • Includes halfs, thirds, fourths, and fifths • No gutters • Infinite nesting and stacking
  • MODULE • 1.3K (structure) • 22 lines of code • Width and height agnostic • Three structures • 264 different combos of skins
  • YOUR TURN! Modify the template
  • http://wiki.github.com/stubbornella/oocss
  • 1. Remove right column http://wiki.github.com/stubbornella/oocss
  • 1. Remove right column 2. Change left column width to 300px http://wiki.github.com/stubbornella/oocss
  • 1. Remove right column 2. Change left column width to 300px 3. Save as myPage.html http://wiki.github.com/stubbornella/oocss
  • hint: simply delete hint: add one the right column class to the left 1. Remove right column column 2. Change left column width to 300px 3. Save as myPage.html http://wiki.github.com/stubbornella/oocss
  • http://wiki.github.com/stubbornella/oocss/grids
  • 1. Add four 1/4 grids inside the main column 1/4 1/4 1/4 1/4 http://wiki.github.com/stubbornella/oocss/grids
  • hint: copy grids from the docs and modify the size and number of units 1. Add four 1/4 grids inside the main column 1/4 1/4 1/4 1/4 http://wiki.github.com/stubbornella/oocss/grids
  • http://wiki.github.com/stubbornella/oocss/module
  • 1. Insert “grab” module in each unit http://wiki.github.com/stubbornella/oocss/module
  • 1. Insert “grab” module in each unit 2. Change modules to grab, onlinestore, faq, and about http://wiki.github.com/stubbornella/oocss/module
  • 1. Change block headers to baz, online, help, and info
  • 1. Remove left column
  • 1. Paste popup_html.txt after the foot
  • 1. Paste popup_html.txt after the foot 2. In mod_skins.css, create a new rounded corner box called gblock which inherits from pop
  • LET’S KEEP TALKING... http://stubbornella.org nicole@stubbornella.org “stubbornella” on the web... twitter, dopplr, slideshare, everywhere... http://github.com/stubbornella/oocss/ http://groups.google.com/group/object-oriented-css