How to Stay Relevant

Future of Web Design, London 2014

Transcript

1. HOW TO STAY RELEVANT
   #FOWD 04/14
2. PETER GASSTON
   @stopsatgreen
   broken-links.com
3. TECHNOLOGIST & FRONT-END LEAD
   rehabstudio.com
4. Desktop Tablet Mobile March 2008 March 2014
5. THINK ABOUT THE FUTURE
7. “By anticipating what’s next, we can react to today’s concerns but also build long-term value for people and businesses.” //futurefriendlyweb.com/
8. CSS LAYOUTS
   grid layouts
9. GRID LAYOUT .parent { display: grid; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 10em auto 40px; }
10. GRID LAYOUT .child { grid-column: 2; grid-row: 2; } 1 2 3 4 2 3 4
11. GRID LAYOUT a b 1 2 3 4 2 3 4 .a { grid-column: 2 / 4; } .b { grid-row: 1 span 3; }
12. GRID LAYOUT b a 1 2 3 4 2 3 4 @media(foo) { .a, .b { grid-column: span 3; } .b { grid-row: 3; } }
13. ?
14. //bradfrostweb.com/blog/post/atomic-web-design/
16. OOCSS BEM Java Applets Dynamic Drive React Fruit Machine jQuery UI Bootstrap Web Components
17. WEB COMPONENTS
    1. Custom Elements
18. “Everything is an element.” //polymer-project.org/docs/start/everything.html
19. <img src="foo.png"> <input type="range">
20. <google-maps latitude="" longitude=""> <ajax-call url="" on-response=""> <video is="video-camera">
21. <x-gif src="foo.gif"> //geelen.github.io/x-gif/
22. <x-gif src="foo.gif" ping-pong>
23. //coding.smashingmagazine.com/2014/03/04/introduction-to-custom-elements/
24. WEB COMPONENTS
    2. HTML Imports
25. <link rel="import" href="foo.html"> <g id="circles" fill="#000000"> <circle id="n" cx="50" cy="18.4" r="18.4"/> <circle id="ne" cx="72.4" cy="27.6" r="18.4"/> <circle id="e" cx="81.6" cy="50" r="18.4"/> <circle id="se" cx="72.4" cy="72.4" r="18.4"/> <circle id="s" cx="50" cy="81.6" r="18.4"/>
26. WEB COMPONENTS
    3. Shadow DOM
27. <input type="range"> ! ! ! ! ! <div> <div id="track"> <div id="thumb"></div> </div> </div> </input>
28. WEB COMPONENTS <template> Mutation Observers Scoped Styles
29. ? ?
30. Platform / Polyfills Polymer Core Polymer Elements X-Tag Core Brick Polymer X-Tags //polymer-project.org/ //mozilla.github.io/brick/
31. THE OUTCOME Meaningful Markup Reusable Elements Consistent UI?
32. THE CHALLENGES Proliferation of crap Performance A11y & I18n
33. “Web components are just a tool that will enable you to write better… front end code. They are not a silver bullet that automagically makes everything work.” //soledadpenades.com/2014/03/25/web-components-silver-bullet/
34. REMEMBER THE BASICS
35. THE BASICS
    accessibility
37. THE BASICS
    progressive enhancement
38. “When an elevator fails, it’s useless. When an escalator fails, it becomes stairs. We should be building escalators, not elevators.” //jakearchibald.com/2013/progressive-enhancement-still-important/
39. THE BASICS
    performance
40. //moto.oakley.com
41. “Oakley’s monster page of baubles.” //hawksworx.com/blog/oakleys-monster-page-of-baubles/
42. 471 HTTP requests 85.4MB page weight 2'45" DOMContentLoaded 4'10" Load
43. 47 percent expect a web page to load in two seconds or less. 40 percent abandon a website that takes longer than three seconds to load. //blog.kissmetrics.com/loading-time/
44. 79 percent of shoppers dissatisfied with performance are less likely to visit again. 52 percent say that page load performance is important to their site loyalty. //blog.kissmetrics.com/loading-time/
45. “Performance is of course a hugely important measure in this age of the mobile web, but performance for performance’s sake trivialises what we do.” //threechords.org/blog/the-web-less-engine-more-gas/
47. AUTOMATE
48. “We shape our tools and then our tools shape us” - Marshall McLuhan (attr.) //vimeo.com/11697990
49. //twitter.com/SlexAxton/status/426939308998549505
51. Bower Git Grunt Require Sass B G G R S
52. //twitter.com/mattpointblank/status/356899458384019456
53. WORKFLOW
    responsive workflow
54. //www.slideshare.net/stephenhay/uie-28445621
55. //www.slideshare.net/stephenhay/uie-28445621
56. //twitter.com/jmspool/status/425981610488770560
57. “Technical skills still matter, but today making digital services that meet users’ needs also depends on our ability to collaborate across many types of boundaries.” //alistapart.com/article/people-skills-for-web-workers
58. HAVE EMPATHY
59. //youtube.com/watch?v=BKorP55Aqvg
60. //twitter.com/Cennydd/status/448131750099951616
61. //twitter.com/jensimmons/status/423495392001814529
62. //tabcloseddidntread.com/post/80169170722/get-the-latest-bullshit-delivered-fresh-to-your
63. //tinyurl.com/ptch4u7
64. OPEN YOUR MIND
67. “If you are only skeptical, then no new ideas make it through to you. You never learn anything new.” //www.positiveatheism.org/writ/saganbur.htm
68. Pilkunnussija Comma f***er ,
69. Miereneuker Ant f***er
71. //twitter.com/thomasfuchs/status/447358565867859968
72. //www.youtube.com/watch?v=ijtQP9nwrQA
73. THE FUTURE THE BASICS AUTOMATE HAVE EMPATHY OPEN YOUR MIND
74. PETER GASSTON
    @stopsatgreen
    broken-links.com