Looking for a place to hang my helmet

Preview:

Citation preview

LOOKING FOR A PLACE TO HANG MY HELMET@brad_frost

MORE

FLEXIBLE MEDIAFLUID GRIDS MEDIA QUERIES

MORE

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/

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/

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/

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/

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

https://adactio.com/journal/6692

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

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

THERE’S NO SUCH THING AS FUTURE-PROOF

BUT WE CAN BE FUTURE-FRIENDLY

futurefriendlyweb.com

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

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

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

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

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

MORE

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/

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

ATOMIC DESIGN

atomicdesign.bradfrost.com

atomicdesign.bradfrost.com

ONLY

$10!!!

MORE

MORE

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.

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

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

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

UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY

MORE

Breadth

Depth

COMPLEX NAVIGATIONDEATH TO THE WATERFALL

INFORMATION ARCHITECTURE

VISUAL DESIGN

DEVELOPMENT

INFORMATION ARCHITECTURE

VISUAL DESIGN

DEVELOPMENT

INFORMATION ARCHITECTURE

VISUAL DESIGN

DEVELOPMENT

INFORMATION ARCHITECTURE

VISUAL DESIGN

DEVELOPMENT

MORE

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

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

MOREDEVICESENVIRONMENTS

PEOPLEBUZZWORDS

CONTENT

BROWSERS

TOOLINGINFORMATION

SCREENSIZES

FEATURESPRODUCTSSERVICESFUNCTIONALITY

CUSTOMERSFORMATS

USERS

FORMFACTORSCONTEXTS

๏Responsive design ๏Progressive enhancement ๏Design systems ๏Simplicity

๏Principles ๏Collaboration ๏Sharing ๏Respect

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

THANKS! @brad_frost

Recommended