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

1. LOOKING FOR A PLACE TO HANG MY HELMET
@brad_frost

6. MORE

12. FLEXIBLE MEDIAFLUID GRIDS MEDIA QUERIES

15. MORE

16. 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/

17. 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/

18. 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/

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

20. The web is not a platform.
It’s a continuum.
-Jeremy Keith
https://adactio.com/journal/6692

21. MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY)
MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)

22. THERE’S NO SUCH THING
AS FUTURE-PROOF

23. BUT WE CAN BE FUTURE-FRIENDLY
futurefriendlyweb.com

24. The projects you're working on today
will be interacted with on devices
that haven't been invented yet.

25. https://www.youtube.com/watch?v=sGo08-SP_Ww
https://www.youtube.com/watch?v=sGo08-SP_Ww

26. https://www.youtube.com/watch?v=sGo08-SP_Ww
https://www.youtube.com/watch?v=sGo08-SP_Ww

27. MORE

28. 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/

29. http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/

33. ATOMIC DESIGN

35. atomicdesign.bradfrost.com

36. atomicdesign.bradfrost.com
ONLY
$10!!!

39. MORE

43. MORE

45. 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.

46. 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

47. Great minds discuss ideas.
Average minds discuss events.
Small minds discuss people.
-Henry Thomas Buckle

48. Great minds discuss principles.
Average minds discuss technologies.
Small minds discuss tools.
-Brad Frost

49. UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY

50. MORE

52. Breadth
Depth

57. COMPLEX NAVIGATIONDEATH TO THE WATERFALL

58. INFORMATION ARCHITECTURE
VISUAL DESIGN
DEVELOPMENT

59. INFORMATION ARCHITECTURE
VISUAL DESIGN
DEVELOPMENT

60. INFORMATION ARCHITECTURE
VISUAL DESIGN
DEVELOPMENT

61. INFORMATION ARCHITECTURE
VISUAL DESIGN
DEVELOPMENT

63. MORE

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

67. 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

79. MOREDEVICESENVIRONMENTS
PEOPLEBUZZWORDS
CONTENT
BROWSERS
TOOLING
INFORMATIO
SCREENSIZES
FEATURES
PRODUCTSSERVICESFUNCTIONALITY
CUSTOMERS
FORMAT
USER
FORMFACTORSCONTEXT

80. ๏Responsivedesign
๏Progressiveenhancement
๏Designsystems
๏Simplicity
๏Principles
๏Collaboration
๏Sharing
๏Respect

81. https://www.flickr.com/photos/ofernandezberrios/2719742541

82. THANKS!@brad_frost