Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Looking for a place to hang my helmet

11,759 views

Published on

My opening keynote from Responsive Field Day 2015 (https://www.responsivefieldday.com/) in Portland OR.

Published in: Technology
  • Be the first to comment

Looking for a place to hang my helmet

  1. LOOKING FOR A PLACE TO HANG MY HELMET @brad_frost
  2. MORE
  3. FLEXIBLE MEDIAFLUID GRIDS MEDIA QUERIES
  4. MORE
  5. I have no control over the network. It could be fast, it could be slow, it could be down entirely. -Tim Kadlec http://timkadlec.com/2015/06/thriving-in-unpredictability/
  6. I have no control over the end device. It could be a phone, a laptop, an e-reader, a watch, a tv. It could be top-of-the line or it could be budget device with low specs. It could be a device released the other day, or a device released 5 years ago. http://timkadlec.com/2015/06/thriving-in-unpredictability/
  7. I have no control over the client running on that device. It could be the latest and greatest of modern browsers. It could be one of those browsers we developers love to hate. It could be a proxy browser. It could be an in-app browser. http://timkadlec.com/2015/06/thriving-in-unpredictability/
  8. I have no control over the visitor or their context. They could be sitting down. They could be taking a train somewhere. They could be multitasking while walking down the street. They could be driving (I know). They could be color-blind. http://timkadlec.com/2015/06/thriving-in-unpredictability/
  9. The web is not a platform. It’s a continuum. -Jeremy Keith https://adactio.com/journal/6692
  10. MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY) MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)
  11. THERE’S NO SUCH THING AS FUTURE-PROOF
  12. BUT WE CAN BE FUTURE-FRIENDLY futurefriendlyweb.com
  13. The projects you're working on today will be interacted with on devices that haven't been invented yet.
  14. https://www.youtube.com/watch?v=sGo08-SP_Ww https://www.youtube.com/watch?v=sGo08-SP_Ww
  15. https://www.youtube.com/watch?v=sGo08-SP_Ww https://www.youtube.com/watch?v=sGo08-SP_Ww
  16. MORE
  17. We’re not designing pages, we’re designing systems of components. -Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  18. http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
  19. ATOMIC DESIGN
  20. atomicdesign.bradfrost.com
  21. atomicdesign.bradfrost.com ONLY $10!!!
  22. MORE
  23. MORE
  24. HTML5, Mustache, Handlebars, Blade, Jade, Twig, Bootstrap, Foundation, Material Design, CSS3, Sass, Less, SMACSS, OOCSS, BEM, jQuery, Angular, Ember, Meteor, React, React Native, Backbone, React again (just in case), NodeJS, Espresso, CoffeeScript, IcedCoffeeScript, Java, Cappuccino, Express, Ionic, Cordova, PhoneGap, Git, SVN, MongoDB, NoSQL, MySQL, YourSQL, HerSQL, OurSQL, AWS, .NET, ASP, Python, PHP (lol JK), Ruby, Ruby on Rails, Drupal 7, Drupal 8, Django, Django Unchained, Wordpress, Wordpress Plugin Development, Joomla, Perch, CQ5, Photoshop, Sketch, Macaw, Froont, Adobe Edge Reflow, Adobe Image Ready, Adobe InDesign, Balsamic, Microsoft Azure, Microsoft Paint, and a whammy bar.
  25. When I am trying to learn a new technology, it's easy to Google and look at a tutorial and read some code. What's hard is to really wrap my head around why I want to use which thing. That's frequently the thing that's not well- explained or well-documented. -Jen Simmons http://thewebahead.net/99#transcript
  26. Great minds discuss ideas. Average minds discuss events. Small minds discuss people. -Henry Thomas Buckle
  27. Great minds discuss principles. Average minds discuss technologies. Small minds discuss tools. -Brad Frost
  28. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  29. MORE
  30. Breadth Depth
  31. COMPLEX NAVIGATIONDEATH TO THE WATERFALL
  32. INFORMATION ARCHITECTURE VISUAL DESIGN DEVELOPMENT
  33. INFORMATION ARCHITECTURE VISUAL DESIGN DEVELOPMENT
  34. INFORMATION ARCHITECTURE VISUAL DESIGN DEVELOPMENT
  35. INFORMATION ARCHITECTURE VISUAL DESIGN DEVELOPMENT
  36. MORE
  37. The ability to fix text, to set it, to distribute that text to others in such a way that it can be reliably accessed by everyone such that everyone gets the exact same text, turns out to be required for a society to rapidly increase its collective understanding of the world. -Mandy Brown
  38. And it’s a requirement because learning is an iterative and cumulative process, where each bit of knowledge is refined and developed and built on to make the next. -Mandy Brown
  39. MOREDEVICESENVIRONMENTS PEOPLEBUZZWORDS CONTENT BROWSERS TOOLING INFORMATIO SCREENSIZES FEATURES PRODUCTSSERVICESFUNCTIONALITY CUSTOMERS FORMAT USER FORMFACTORSCONTEXT
  40. ๏Responsivedesign ๏Progressiveenhancement ๏Designsystems ๏Simplicity ๏Principles ๏Collaboration ๏Sharing ๏Respect
  41. https://www.flickr.com/photos/ofernandezberrios/2719742541
  42. THANKS!@brad_frost

×