How to Stay Relevant

How to Stay Relevant

Future of Web Design, London 2014

9d9f17e37b751b9f83081ba3dd44bab4?s=128

Peter Gasston

April 09, 2014
Tweet

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

  6. None
  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/

  15. None
  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

  36. None
  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/
  46. None
  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

  50. None
  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

  65. None
  66. None
  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

  70. None
  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