$30 off During Our Annual Pro Sale. View Details »

Old Dog, New Tricks

Simon Collison
February 21, 2014

Old Dog, New Tricks

Awwwards Love Days, Paris February 2014.

In 2006 Simon wrote a successful book about learning CSS. Building the web wasn’t easy back then, but CSS was pretty basic. Simon also used to talk about systems a lot, but didn’t have many answers. Fast-forward to 2014 and everything has changed; that CSS book is both useless and wrong, and systems inform much of what we build. This talk will look at how the landscape changed for front-end designers, and how we must think more holistically about the scope of our projects. With practical examples he’ll explore the tools, methodologies and systems that reenergised him and helped make sense of the whole darned mess.

Simon Collison

February 21, 2014
Tweet

More Decks by Simon Collison

Other Decks in Design

Transcript

  1. View Slide

  2. 2006

    View Slide

  3. That book

    View Slide

  4. http://csswebdevelopment.com

    View Slide

  5. “Before this book, I felt like a monkey with a clipboard.”
    “Now, I feel like I have been promoted from a monkey with a clipboard
    to a human.”
    “Even if you don't want to learn the art of CSS and are a dairy cow farmer
    that dosn't speek english, i still recomend this book!”
    “I hope the royalties from the book pay for a comfortable retirement.”
    “For me, the book ended too soon.”
    “I bought this book in 2009, and I use it to this day to help me with CSS.”

    View Slide

  6. “I appreciate Simon's approach to learning. Ok ~ time for a cuppa tea and
    then back to it. Very English ~ I'm Australian so we have similar traditions
    and a cuppa tea is one I'm very glad for.”
    “He even tells you (often -- he's English!) when's a good time to grab a cup
    of tea.”
    “He also encouraged me to drink more tea.”
    “Take Simon's advice when he suggests getting a cup of tea.”
    “The author seems to have a thing for tea.”

    View Slide

  7. "Way too many hacks/workarounds for IE 5
    and other really old browsers."

    View Slide

  8. Ken Mosher “Timelord”
    “For a Brit his humor is NOT funny! Collison needs to
    read "Eats, Shoots and Leaves" if he wants to learn
    about British humor. In the meantime, just skip it;
    you're not John Cleese!”
    "I disagree that it's fantastic or any other superlative
    that others have applied.”
    4/5 stars

    View Slide

  9. View Slide


  10. Hedgehogs
    This is all about hedgehogs.
    Read more about
    hedgehogs.

    View Slide

  11. .block h3 {
    targeted heading styles
    }
    .block p {
    targeted paragraph styles
    }
    .block p a:link {
    targeted link styles
    }

    View Slide

  12. .home .content_main .section .block p a:link {
    very specific link styles
    }

    View Slide

  13. View Slide

  14. Web “pages”

    View Slide

  15. 2009

    View Slide

  16. "We don’t design web pages. We design systems”

    View Slide

  17. “What we build is rarely finished. We build systems that
    flex and grow with the client, the business, the
    organisation, the community, and the availability of new
    devices.
    “Once we have systems we understand, we can then
    learn to break their rules and be truly creative. ”

    View Slide

  18. “We’re beginning to think about the “systems” we use as
    more holistic, made up of much more than just
    mathematical foundations, but also the flexibility of
    colour, type families, use of whitespace, light and shade,
    form and shape.
    “By better understanding the possibilities of HTML and
    CSS, our ability to be creative and bold with systems
    increases significantly.”

    View Slide

  19. Base layer

    View Slide

  20. Basic HTML files & naming conventions
    PHP for basic templates prior to CMS integration.
    CSS: Stylesheets, IE-specific, reset, scratch files etc.
    JavaScript: jQuery, onload triggers, transparency support
    Other Assets such as folders for images, Flash etc.

    View Slide

  21. Allowed better collaboration within the team; the designer could
    jump into the developer’s code and vice-versa.
    Anyone who hadn’t even worked on a certain project could jump in
    and quickly solve problems because everything was on convention.
    Kept output fresh and ensured use of best practices.
    Established a thoroughly connected layer of base files allowing for
    swift CSS and JavaScript implementation and other assets.
    Made life easier for developers and designers... and anyone really
    Helped maintain quality control

    View Slide

  22. Root
    Root
    (circa 2009)

    View Slide

  23. Stylesheets
    (circa 2009)

    View Slide

  24. JavaScript
    (circa 2009)

    View Slide

  25. Assets
    (circa 2009)

    View Slide

  26. Pattern Libraries
    Anna Debenham
    24 Ways: http://24ways.org/2011/front-end-style-guides/
    Her book: http://www.fivesimplesteps.com/products/front-end-style-guides

    View Slide

  27. http://www.bbc.co.uk/gel/mobile/device-considerations/philosophy

    View Slide

  28. http://www.starbucks.com/static/reference/styleguide/

    View Slide

  29. http://ux.mailchimp.com/patterns/

    View Slide

  30. http://sfdc-styleguide.herokuapp.com/

    View Slide

  31. http://sfdc-styleguide.herokuapp.com/

    View Slide

  32. http://sfdc-styleguide.herokuapp.com/

    View Slide

  33. http://sfdc-styleguide.herokuapp.com/

    View Slide

  34. Present day

    View Slide

  35. Code sketches

    View Slide

  36. View Slide

  37. Sass
    http://sass-lang.com
    Dan Cederholm
    Sass for Web Designers
    http://www.abookapart.com/products/sass-for-web-designers

    View Slide

  38. @import "compass";
    // SASS variables
    $white: #fff;
    $black: #000;
    $grey: #ccc;
    $light_grey: #eeeeee;
    $mid_grey: #999;
    $dark_grey: #666;
    $darkest_grey: #333;
    $yellow: #ffffcc;

    View Slide

  39. http://compass-style.org

    View Slide

  40. @include border-radius(2em);
    @include box-shadow
    (rgba($black_light, 0.2) 0px 1px 10px 4px);
    @include box-sizing(border-box);

    View Slide

  41. http://smacss.com

    View Slide


  42. Hedgehogs
    This is all about hedgehogs.
    Read more about
    hedgehogs.

    View Slide

  43. .block h3 {
    targeted heading styles
    }
    .block p {
    targeted paragraph styles
    }
    .block p a:link {
    targeted link styles
    }

    View Slide


  44. Hedgehogs
    This is all about
    hedgehogs. class=“block_link”>Read more about
    hedgehogs.

    View Slide

  45. .block_heading {
    targeted heading styles
    }
    .block_intro {
    targeted paragraph styles
    }
    .block_link {
    targeted link styles
    }

    View Slide

  46. Systems

    View Slide

  47. Deliver Modules

    View Slide

  48. http://daverupert.com/2013/04/responsive-deliverables

    View Slide

  49. // haven / styles
    @import '_base';
    @import '_modules';
    @import '_theme';
    @import '_custom';

    View Slide

  50. .box {
    border: 1px solid;
    padding: 10px;
    }

    View Slide

  51. .box {
    @include border-radius(3px);
    @include box-shadow(inset 0 0 7px 2px rgba($black,0.03));
    border-color: $gray;
    font-size: 0.9em;
    padding: 15px;
    }

    View Slide

  52. View Slide

  53. Components
    Flexible grid
    Typography
    Navigation
    Accessible form controls
    Carousels
    Tabbed navigation
    Responsive tables
    Accordions
    Media lists
    Dropdowns
    Pagination
    Data tables
    Buttons
    Icon fonts
    Strategy
    Responsive images
    Responsive typography
    Accessibility architecture
    Legacy browser support
    Performance budget
    Interaction/Animations
    Responsive advertising
    Layouts
    Homepage layout
    Subpage layout
    Article index layout
    Article layout
    Product index layout
    Product detail layout
    Sign up flow
    Checkout flow
    http://daverupert.com/2013/04/responsive-deliverables

    View Slide

  54. http://filamentgroup.com/lab/grade_components/

    View Slide

  55. Patterns

    View Slide

  56. http://pattern-lab.info/

    View Slide

  57. Atoms
    Molecules
    Organisms
    Templates
    Pages

    View Slide

  58. Language

    View Slide

  59. My processes

    View Slide

  60. I am a module

    View Slide

  61. Two core systems

    View Slide

  62. Skeletor (internal project)

    View Slide

  63. Simplify the process of getting a new social
    application up and running.
    Standardize the assorted, non-core pages that are a
    part of each app (signup, login, settings).
    Treat the non-core pages like a core product and give
    them the attention they deserve.
    Create an implicit link between all Fictive Kin
    products by virtue of a shared user experience.

    View Slide

  64. Signup
    Login
    Settings
    Logout
    Purpose
    People
    — Following
    — Followers
    — Find friends
    — Invite friends
    Profile

    View Slide

  65. Fully tested
    Responsive
    Browser tested
    Monitored
    Accessible
    Optimised

    View Slide

  66. @import 'modules/_modules_functions';
    @import 'modules/_modules_mixins';
    @import 'modules/_base';
    @import 'modules/_core';
    @import 'modules/_forms';
    @import ‘modules/_buttons';

    View Slide

  67. @mixin img-block ($url, $width, $height) {
    ! background: url(#{$url}) 0 0 no-repeat transparent;
    ! display: block;
    ! height: $height;
    ! overflow: hidden;
    ! text-indent: -9999px;
    ! vertical-align: top;
    ! white-space: nowrap;
    ! width: $width;
    }

    View Slide

  68. .app-logo {
    ! @include img-block("img/bootstrap/app_logo.png", 214px, 23px);
    }

    View Slide

  69. Grayskull (internal project)

    View Slide

  70. Flask
    Flask-Script
    Blinker/Signals
    Boto
    Pyes
    Python-Dateutil
    Requests-OAuthlib
    Raven

    View Slide

  71. Templating

    View Slide


  72. class="isAccountActive(name)">

    [[service.display_name]]


    View Slide

  73. Data layers

    View Slide

  74. "twitter": {
    "name": "Twitter",
    "filters": {
    "collections": {
    "all": {
    "label": "All Tweets",
    "symbolset": "inbox"
    },
    "tweets": {
    "label": "Your Tweets",
    "symbolset": "user"
    },
    "favorites": {
    "label": "Your Favorites",
    "symbolset": "star"
    }
    }
    }
    }

    View Slide

  75. Modular everything

    View Slide

  76. 1:1 2:1 1:2 4:3
    16:9

    View Slide

  77.  
      Asset  goes  here  

    View Slide

  78. .asset  {
      position:  relative;
      width:  25%;  /*  (row  of  four  assets)  */
    }

    View Slide

  79. /* Aspect ratios:
    1:1 = 100%,
    2:1 = 50%,
    1:2 = 200%,
    4:3 = 75%,
    16:9 = 56.25% */
    .ar-1-1 .asset:before {
    content: "";
    display: block;
    padding-top: 100%;
    }

    View Slide

  80. /* Aspect ratios:
    1:1 = 100%,
    2:1 = 50%,
    1:2 = 200%,
    4:3 = 75%,
    16:9 = 56.25% */
    .ar-2-1 .asset:before {
    content: "";
    display: block;
    padding-top: 50%;
    }

    View Slide

  81. /* Aspect ratios:
    1:1 = 100%,
    2:1 = 50%,
    1:2 = 200%,
    4:3 = 75%,
    16:9 = 56.25% */
    .ar-1-2 .asset:before {
    content: "";
    display: block;
    padding-top: 200%;
    }

    View Slide

  82. /* Aspect ratios:
    1:1 = 100%,
    2:1 = 50%,
    1:2 = 200%,
    4:3 = 75%,
    16:9 = 56.25% */
    .ar-4-3 .asset:before {
    content: "";
    display: block;
    padding-top: 75%;
    }

    View Slide

  83. /* Aspect ratios:
    1:1 = 100%,
    2:1 = 50%,
    1:2 = 200%,
    4:3 = 75%,
    16:9 = 56.25% */
    .ar-16-9 .asset:before {
    content: "";
    display: block;
    padding-top: 56.25%;
    }

    View Slide

  84. .content  {
      position:  absolute;
      top:  0;
      left:  0;
      bottom:  0;
      right:  0;
    }

    View Slide

  85. Twitter
    Instagram
    Flickr
    Gimme Bar
    Pinterest
    Svpply
    Foursquare
    last.fm
    Pinboard
    Delicious
    Goodreads
    Tumblr
    image
    video
    text snippet
    GIF
    bookmark
    place
    status
    full page
    recipe
    article
    product

    View Slide

  86. To conclude

    View Slide

  87. Thanks :)
    @colly
    colly.com
    fictivekin.com

    View Slide

  88. View Slide