Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Module design & UI Dev patterns

Dale Sande
June 14, 2012

Module design & UI Dev patterns

Working on medium to large scale web projects, CSS can get away from you really quickly. Without an honest methodology and process for managing your UI assets, failure is almost certain.

This presentation illustrates the failures of many cross team large scale projects. Poor reuse of CSS and HTML and the failure of the design comp process.

Discussed are techniques for using a styleguide framework, templating solutions, elemental and modulare development patterns in the UI and how they will totally save your bacon!

Dale Sande

June 14, 2012
Tweet

More Decks by Dale Sande

Other Decks in Design

Transcript

  1. Start from the upper left, right? <div id=”home- page”> that

    works. Styles are written based on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘copy pasta’ A major case of the div’itus Using IDs for styling to over-ride the cascade
  2. <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; "> ! <div id="FreeImageOfTheWeekPromo">

    ! ! <h5 class="text-important freeImageTitle">Free image of the week</h5> ! ! <div id="FreeImageContainer"> ! ! ! <table width="120" cellpadding="0" cellspacing="0"> ! ! ! ! <tbody> ! ! ! ! ! <tr> ! ! ! ! ! ! <td> ! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek"> ! ! ! ! ! ! ! ! <img src="|STK|60|764&amp;s=1" alt="portrait of a young woman smiling"> ! ! ! ! ! ! ! </a> ! ! ! ! ! ! </td> ! ! ! ! ! </tr> ! ! ! ! </tbody> ! ! ! </table> ! ! </div> ! ! <div id="FreeImageDetails"> ! ! ! <h6>Come back each week and stay inspired.</h6> ! ! ! <p>Stockbyte</p> ! ! ! <p>portrait of a young woman smiling</p> ! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a> ! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl= %2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a> ! ! </div> ! </div> </div> widget #1 by developer A
  3. <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; "> ! <div id="FreeImageOfTheWeekPromo">

    ! ! <h5 class="text-important freeImageTitle">Free image of the week</h5> ! ! <div id="FreeImageContainer"> ! ! ! <table width="120" cellpadding="0" cellspacing="0"> ! ! ! ! <tbody> ! ! ! ! ! <tr> ! ! ! ! ! ! <td> ! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek"> ! ! ! ! ! ! ! ! <img src="|STK|60|764&amp;s=1" alt="portrait of a young woman smiling"> ! ! ! ! ! ! ! </a> ! ! ! ! ! ! </td> ! ! ! ! ! </tr> ! ! ! ! </tbody> ! ! ! </table> ! ! </div> ! ! <div id="FreeImageDetails"> ! ! ! <h6>Come back each week and stay inspired.</h6> ! ! ! <p>Stockbyte</p> ! ! ! <p>portrait of a young woman smiling</p> ! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a> ! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl= %2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a> ! ! </div> ! </div> </div> widget #1 by developer A
  4. <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; "> ! <div id="FreeImageOfTheWeekPromo">

    ! ! <h5 class="text-important freeImageTitle">Free image of the week</h5> ! ! <div id="FreeImageContainer"> ! ! ! <table width="120" cellpadding="0" cellspacing="0"> ! ! ! ! <tbody> ! ! ! ! ! <tr> ! ! ! ! ! ! <td> ! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek"> ! ! ! ! ! ! ! ! <img src="|STK|60|764&amp;s=1" alt="portrait of a young woman smiling"> ! ! ! ! ! ! ! </a> ! ! ! ! ! ! </td> ! ! ! ! ! </tr> ! ! ! ! </tbody> ! ! ! </table> ! ! </div> ! ! <div id="FreeImageDetails"> ! ! ! <h6>Come back each week and stay inspired.</h6> ! ! ! <p>Stockbyte</p> ! ! ! <p>portrait of a young woman smiling</p> ! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a> ! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl= %2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a> ! ! </div> ! </div> </div> widget #1 by developer A Cause I need two classes and an ID to make a header!
  5. <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; "> ! <div id="FreeImageOfTheWeekPromo">

    ! ! <h5 class="text-important freeImageTitle">Free image of the week</h5> ! ! <div id="FreeImageContainer"> ! ! ! <table width="120" cellpadding="0" cellspacing="0"> ! ! ! ! <tbody> ! ! ! ! ! <tr> ! ! ! ! ! ! <td> ! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek"> ! ! ! ! ! ! ! ! <img src="|STK|60|764&amp;s=1" alt="portrait of a young woman smiling"> ! ! ! ! ! ! ! </a> ! ! ! ! ! ! </td> ! ! ! ! ! </tr> ! ! ! ! </tbody> ! ! ! </table> ! ! </div> ! ! <div id="FreeImageDetails"> ! ! ! <h6>Come back each week and stay inspired.</h6> ! ! ! <p>Stockbyte</p> ! ! ! <p>portrait of a young woman smiling</p> ! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a> ! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl= %2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a> ! ! </div> ! </div> </div> widget #1 by developer A Cause I need two classes and an ID to make a header! HTML tags ... no one uses those.
  6. <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; "> ! <div id="FreeImageOfTheWeekPromo">

    ! ! <h5 class="text-important freeImageTitle">Free image of the week</h5> ! ! <div id="FreeImageContainer"> ! ! ! <table width="120" cellpadding="0" cellspacing="0"> ! ! ! ! <tbody> ! ! ! ! ! <tr> ! ! ! ! ! ! <td> ! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek"> ! ! ! ! ! ! ! ! <img src="|STK|60|764&amp;s=1" alt="portrait of a young woman smiling"> ! ! ! ! ! ! ! </a> ! ! ! ! ! ! </td> ! ! ! ! ! </tr> ! ! ! ! </tbody> ! ! ! </table> ! ! </div> ! ! <div id="FreeImageDetails"> ! ! ! <h6>Come back each week and stay inspired.</h6> ! ! ! <p>Stockbyte</p> ! ! ! <p>portrait of a young woman smiling</p> ! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a> ! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl= %2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a> ! ! </div> ! </div> </div> widget #1 by developer A Cause I need two classes and an ID to make a header! HTML tags ... no one uses those. Is that a table? Oh no you didn’t!
  7. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo">

    ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B
  8. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo">

    ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Ahhh ... this is the same
  9. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo">

    ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Ahhh ... this is the same This is NOT!
  10. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo">

    ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B
  11. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo">

    ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B IDs in two separate stylesheets, that’s better?
  12. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo">

    ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Let’s define a color at the <body> tag, that’s good.
  13. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo">

    ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Let’s define a color at the <body> tag, that’s good. But wait ... we are overriding by changing a whole widget block?
  14. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo">

    ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Let’s define a color at the <body> tag, that’s good. But wait ... we are overriding by changing a whole widget block? Yup ... let’s reapply that color again. USE THE POWER OF THE ID!
  15. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo">

    ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Let’s define a color at the <body> tag, that’s good. But wait ... we are overriding by changing a whole widget block? Yup ... let’s reapply that color again. USE THE POWER OF THE ID!
  16. What are elements? Visual elements are the basic building blocks

    of the UI. Well engineered individual elements reduces duplication and increases consistency.
  17. What are modules? Using the engineered visual elements, construct modules.

    Caveat ... modules can also be assembled of other smaller modules and UI patterns (mind blown)
  18. What are modules? Header module Hero module Nav module Hero

    copy module Article module List module
  19. GREAT CONCEPT bad name • Identify reusable objects • Be

    semantic w/HTML • Minimize selectors • Extend your classes • ‘Style’ separate from content • ‘Content’ separate from container This is GREAT stuff
  20. OBJECT ORIENTATED CSS ... shortcomings • CSS Selectors are not

    objects • Relies heavily on ‘presentation classes’ • Requires maintenance of DOM elements for design updates • Promotes extending in the DOM, not the CSS • Uses vanilla CSS
  21. THE OOCSS PROCESS the classing of the DOM OOCSS, in

    short, is a process of defining standardized presentational selectors which are in turn applied to the DOM. Extensions of such selectors are then extended in the DOM for added effect. It is likely that you will see examples like what you see here. <button class="btn btn- primary btn-large"> ! <i class="icon-white icon- envelope"></i> ! Button Generator </button>
  22. THE OOCSS PROCESS the classing of the DOM OOCSS, in

    short, is a process of defining standardized presentational selectors which are in turn applied to the DOM. Extensions of such selectors are then extended in the DOM for added effect. It is likely that you will see examples like what you see here. <button class="btn btn- primary btn-large"> ! <i class="icon-white icon- envelope"></i> ! Button Generator </button> What’s with using the <i> tag for ‘icon’ now?
  23. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been

    using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by default are added to the site’s CSS. From grid systems to UI elements, CSS bloat is a real issue. Ironically this bloat is what OOCSS is supposed to address.
  24. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been

    using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by default are added to the site’s CSS. From grid systems to UI elements, CSS bloat is a real issue. Ironically this bloat is what OOCSS is supposed to address. Twitter’s bootstrap default includes 4914 lines of CSS.
  25. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been

    using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by default are added to the site’s CSS. From grid systems to UI elements, CSS bloat is a real issue. Ironically this bloat is what OOCSS is supposed to address. Twitter’s bootstrap default includes 4914 lines of CSS.
  26. THE CSS DREAM redesign without DOM editing Imagine a world

    where new design requirements are only addressed by updating CSS? Functional modules and view templates are not edited. I don’t feel OOCSS will get us there, but OOSCSS will.
  27. OBJECT ORIENTATED SCSS the future of silent selectors What if

    we lived in a world where the ‘object’ selectors from OOCSS can be created, but never manifest themselves as CSS until they are used in semantic application? What if we could seamlessly extend selectors in our CSS and not have to touch the DOM? What if ....
  28. SASS 3.2 re-writing what we can do with CSS Extending

    elements in vanilla CSS is hard to track. Between nested selectors and the sheer volume alone make this an arduous task. Sass gives us clarity. The ability to really define objects in our SCSS and apply them to semantic selectors within our CSS. The dream realized. // silent classes %kung { background: green; color: yellow; } %foo { background: orange; color: red; font-size: 12px; } // selectors extending silent classes .foo_one { @extend %foo; } .foo_two { @extend %foo; } // output CSS .foo_one, .foo_two { background: orange; color: red; font-size: 12px; }
  29. Cool. Developed the module in an abstract environment. Now we

    can use this anywhere. All UX/UI cleanly encapsulated.
  30. Cool. Developed the module in an abstract environment. Now we

    can use this anywhere. All UX/UI cleanly encapsulated. When developing, no elements were created. Typography and color are all inherited.
  31. Cool. Developed the module in an abstract environment. Now we

    can use this anywhere. All UX/UI cleanly encapsulated. Follow the example HTML and you are rockin! When developing, no elements were created. Typography and color are all inherited.
  32. Button element Radio button, label and text UI pattern Checkbox

    and label elements Scroll box UI pattern
  33. Button element Radio button, label and text UI pattern Checkbox

    and label elements Scroll box UI pattern Calendar data UI pattern
  34. Button element Radio button, label and text UI pattern Checkbox

    and label elements Scroll box UI pattern Calendar data UI pattern Button element
  35. Wow, the markup is the same? Just add some ‘fail’

    to the blocks and you are AWESOME!
  36. SUMMARY what have we learned? Comps are a failed communication

    resource between designers and devs As devs, we need to change our contextual starting point.
  37. SUMMARY what have we learned? Comps are a failed communication

    resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped.
  38. SUMMARY what have we learned? Comps are a failed communication

    resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped. We can do it better!
  39. SUMMARY what have we learned? Comps are a failed communication

    resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped. We can do it better! Embracing elements, patterns and modules makes our UI code manageable, maintainable and sustainable.
  40. SUMMARY what have we learned? Comps are a failed communication

    resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped. We can do it better! Embracing elements, patterns and modules makes our UI code manageable, maintainable and sustainable. Vanilla CSS frameworks will cause you much pain
  41. SUMMARY what have we learned? Comps are a failed communication

    resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped. We can do it better! Embracing elements, patterns and modules makes our UI code manageable, maintainable and sustainable. Vanilla CSS frameworks will cause you much pain Sass is re-writing the future of CSS.
  42. SUMMARY what have we learned? Comps are a failed communication

    resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped. We can do it better! Embracing elements, patterns and modules makes our UI code manageable, maintainable and sustainable. Vanilla CSS frameworks will cause you much pain Sass is re-writing the future of CSS. OOCSS is ok, but OOSCSS is amazing!