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. View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. the
    power
    simplicity
    of

    View Slide

  6. tools
    power

    View Slide

  7. git
    sass
    less
    grunt
    yeoman

    View Slide

  8. jQuery
    boilerplate
    modernizr
    bootstrap

    View Slide

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

    View Slide

  10. Polyfills are a tax.
    —Alex Russell

    View Slide

  11. the web
    “platform”

    View Slide

  12. web
    flash
    native

    View Slide

  13. 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 Slide

  14. scroll
    tap
    swipe
    drag

    View Slide

  15. find
    buy
    publish
    share

    View Slide

  16. 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 Slide

  17. web
    android
    iOS

    View Slide

  18. CSS
    JavaScript
    HTML
    web

    View Slide

  19. 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 Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. 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 Slide

  26. CSS
    JavaScript
    HTML

    View Slide

  27. HTML

    View Slide

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

    View Slide

  29. input type="number"

    View Slide

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

    View Slide

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

    View Slide

  32. CSS
    JavaScript
    HTML

    View Slide

  33. CSS

    View Slide

  34. selector {
    property: value;
    }

    View Slide

  35. CSS
    JavaScript
    HTML

    View Slide

  36. JavaScript

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

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

    View Slide


  43. Download Chrome

    View Slide

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

    View Slide



  45. View Slide




  46. View Slide


  47. Create a new list

    View Slide

  48. View Slide

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

    View Slide

  50. ember
    angular
    backbone

    View Slide

  51. “web app”

    View Slide

  52. View Slide

  53. CSS
    JavaScript
    HTML

    View Slide

  54. progressive
    enhancement

    View Slide

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

    View Slide

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

    View Slide

  57. View Slide

  58. View Slide

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

    View Slide

  60. the power
    simplicity
    of

    View Slide

  61. a pattern
    simplicity
    of

    View Slide

  62. View Slide

  63. View Slide

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

    View Slide

  65. aggressive
    enhancement

    View Slide

  66. futurefriend.ly

    View Slide