looking for a place to hang my helmet

82
LOOKING FOR A PLACE TO HANG MY HELMET @brad_frost

Upload: brad-frost

Post on 12-Feb-2017

7.797 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Looking for a place to hang my helmet

LOOKING FOR A PLACE TO HANG MY HELMET@brad_frost

Page 2: Looking for a place to hang my helmet
Page 3: Looking for a place to hang my helmet
Page 4: Looking for a place to hang my helmet
Page 5: Looking for a place to hang my helmet
Page 6: Looking for a place to hang my helmet

MORE

Page 7: Looking for a place to hang my helmet
Page 8: Looking for a place to hang my helmet
Page 9: Looking for a place to hang my helmet
Page 10: Looking for a place to hang my helmet
Page 11: Looking for a place to hang my helmet
Page 12: Looking for a place to hang my helmet

FLEXIBLE MEDIAFLUID GRIDS MEDIA QUERIES

Page 13: Looking for a place to hang my helmet
Page 14: Looking for a place to hang my helmet
Page 15: Looking for a place to hang my helmet

MORE

Page 16: Looking for a place to hang my helmet

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/

Page 17: Looking for a place to hang my helmet

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/

Page 18: Looking for a place to hang my helmet

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/

Page 19: Looking for a place to hang my helmet

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/

Page 20: Looking for a place to hang my helmet

The web is not a platform. It’s a continuum. -Jeremy Keith

https://adactio.com/journal/6692

Page 21: Looking for a place to hang my helmet

MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY)

MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)

Page 22: Looking for a place to hang my helmet

THERE’S NO SUCH THING AS FUTURE-PROOF

Page 23: Looking for a place to hang my helmet

BUT WE CAN BE FUTURE-FRIENDLY

futurefriendlyweb.com

Page 24: Looking for a place to hang my helmet

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

Page 25: Looking for a place to hang my helmet

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

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

Page 26: Looking for a place to hang my helmet

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

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

Page 27: Looking for a place to hang my helmet

MORE

Page 28: Looking for a place to hang my helmet

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/

Page 29: Looking for a place to hang my helmet

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

Page 30: Looking for a place to hang my helmet
Page 31: Looking for a place to hang my helmet
Page 32: Looking for a place to hang my helmet
Page 33: Looking for a place to hang my helmet

ATOMIC DESIGN

Page 34: Looking for a place to hang my helmet
Page 35: Looking for a place to hang my helmet

atomicdesign.bradfrost.com

Page 36: Looking for a place to hang my helmet

atomicdesign.bradfrost.com

ONLY

$10!!!

Page 37: Looking for a place to hang my helmet
Page 38: Looking for a place to hang my helmet
Page 39: Looking for a place to hang my helmet

MORE

Page 40: Looking for a place to hang my helmet
Page 41: Looking for a place to hang my helmet
Page 42: Looking for a place to hang my helmet
Page 43: Looking for a place to hang my helmet

MORE

Page 44: Looking for a place to hang my helmet
Page 45: Looking for a place to hang my helmet

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.

Page 46: Looking for a place to hang my helmet

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

Page 47: Looking for a place to hang my helmet

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

Page 48: Looking for a place to hang my helmet

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

Page 49: Looking for a place to hang my helmet

UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY

Page 50: Looking for a place to hang my helmet

MORE

Page 51: Looking for a place to hang my helmet
Page 52: Looking for a place to hang my helmet

Breadth

Depth

Page 53: Looking for a place to hang my helmet
Page 54: Looking for a place to hang my helmet
Page 55: Looking for a place to hang my helmet
Page 56: Looking for a place to hang my helmet
Page 57: Looking for a place to hang my helmet

COMPLEX NAVIGATIONDEATH TO THE WATERFALL

Page 58: Looking for a place to hang my helmet

INFORMATION ARCHITECTURE

VISUAL DESIGN

DEVELOPMENT

Page 59: Looking for a place to hang my helmet

INFORMATION ARCHITECTURE

VISUAL DESIGN

DEVELOPMENT

Page 60: Looking for a place to hang my helmet

INFORMATION ARCHITECTURE

VISUAL DESIGN

DEVELOPMENT

Page 61: Looking for a place to hang my helmet

INFORMATION ARCHITECTURE

VISUAL DESIGN

DEVELOPMENT

Page 62: Looking for a place to hang my helmet
Page 63: Looking for a place to hang my helmet

MORE

Page 64: Looking for a place to hang my helmet
Page 65: Looking for a place to hang my helmet
Page 66: Looking for a place to hang my helmet

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

Page 67: Looking for a place to hang my helmet

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

Page 68: Looking for a place to hang my helmet
Page 69: Looking for a place to hang my helmet
Page 70: Looking for a place to hang my helmet
Page 71: Looking for a place to hang my helmet
Page 72: Looking for a place to hang my helmet
Page 73: Looking for a place to hang my helmet
Page 74: Looking for a place to hang my helmet
Page 75: Looking for a place to hang my helmet
Page 76: Looking for a place to hang my helmet
Page 77: Looking for a place to hang my helmet
Page 78: Looking for a place to hang my helmet
Page 79: Looking for a place to hang my helmet

MOREDEVICESENVIRONMENTS

PEOPLEBUZZWORDS

CONTENT

BROWSERS

TOOLINGINFORMATION

SCREENSIZES

FEATURESPRODUCTSSERVICESFUNCTIONALITY

CUSTOMERSFORMATS

USERS

FORMFACTORSCONTEXTS

Page 80: Looking for a place to hang my helmet

๏Responsive design ๏Progressive enhancement ๏Design systems ๏Simplicity

๏Principles ๏Collaboration ๏Sharing ๏Respect

Page 81: Looking for a place to hang my helmet

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

Page 82: Looking for a place to hang my helmet

THANKS! @brad_frost