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.

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