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

The Power Of Simplicity

The Power Of Simplicity

We're working on increasingly complex websites. There's a temptation to match this growth with increasingly complex solutions. But there's a real value in keeping things simple ... or at least starting things simple. If you can build a solid robust foundation, there's a good chance that your work will be future-friendly.

Jeremy Keith

October 25, 2013
Tweet

More Decks by Jeremy Keith

Other Decks in Technology

Transcript

  1. the
    power
    simplicity
    of

    View full-size slide

  2. git
    sass
    less
    grunt
    yeoman

    View full-size slide

  3. jQuery
    boilerplate
    modernizr
    bootstrap

    View full-size slide

  4. Stop soling problems you don’t yet have.
    —Rachel Andrew

    View full-size slide

  5. Polyfills are a tax.
    —Alex Russell

    View full-size slide

  6. the web
    “platform”

    View full-size slide

  7. web
    flash
    native

    View full-size slide

  8. It’s hard not to be disappointed by HTML if you’ve
    developed for iOS, Windows, or other mature
    platforms as I have.
    —Joe Hewitt
    What the web is and is not

    View full-size slide

  9. scroll
    tap
    swipe
    drag

    View full-size slide

  10. find
    buy
    publish
    share

    View full-size slide

  11. e control which designers know in the print medium, and oen
    desire in the web medium, is simply a function of the limitation of
    the printed page.
    We should embrace the fact that the web doesn’t have
    the same constraints, and design for this flexibility.
    —John Allsopp
    A Dao of Web Design

    View full-size slide

  12. web
    android
    iOS

    View full-size slide

  13. CSS
    JavaScript
    HTML
    web

    View full-size slide

  14. My loe for responsive centers around the idea that my website
    will meet you wherever you are—om mobile to full-blown
    desktop and anywhere in between.
    —Trent Walton

    View full-size slide

  15. e web is responsive on its own—by default. It’s us that’s been
    breaking it all these years by placing content in fixed-width
    containers.
    —Andy Hume

    View full-size slide

  16. CSS
    JavaScript
    HTML

    View full-size slide

  17. input type="number"
    input type="search"
    input type="email"
    input type="url"

    View full-size slide

  18. input type="number"

    View full-size slide

  19. input type="number"
    inputmode="numeric"

    View full-size slide

  20. input type="number"
    pattern="[0-9]"

    View full-size slide

  21. CSS
    JavaScript
    HTML

    View full-size slide

  22. selector {
    property: value;
    }

    View full-size slide

  23. CSS
    JavaScript
    HTML

    View full-size slide

  24. Every user is a non-Javascript user while a page is loading.
    —Scott Jehl

    View full-size slide


  25. Download Chrome

    View full-size slide

  26. Progressive enhancement is more about dealing with technology
    failing than technology not being supported.
    —Andy Hume

    View full-size slide


  27. Create a new list

    View full-size slide

  28. be conservative
    in what you send;
    be liberal in
    what you accept.

    View full-size slide

  29. ember
    angular
    backbone

    View full-size slide

  30. “web app”

    View full-size slide

  31. CSS
    JavaScript
    HTML

    View full-size slide

  32. progressive
    enhancement

    View full-size slide

  33. do websites need to
    look exactly the same in
    every browser?

    View full-size slide

  34. do websites need to
    look exactly the same in
    every browser . com

    View full-size slide

  35. ere is a difference between support and optimization.
    —Brad Frost

    View full-size slide

  36. the power
    simplicity
    of

    View full-size slide

  37. a pattern
    simplicity
    of

    View full-size slide

  38. cutting the mustard
    if (document.querySelector
    && window.addEventListener) {
    // enhance!
    }

    View full-size slide

  39. aggressive
    enhancement

    View full-size slide

  40. futurefriend.ly

    View full-size slide