One rainy Whistler and #smashingconf

When I first saw that Smashing Mag was coming to Canada and close by i.e. Whistler, BC.  I booked an Early Bird Ticket.

I have found both their emails and books very useful.  I paid with my own dime, so I could not afford the workshops.  Most of my multiple day conferences have being Rails/Ruby/Data/Product/Startup so I was very curious what the people would be like at a Front end conference.

It was a mixture of designers, developers and product people.  This conference was a good mix of people, nationalities and friendly. Culturally it felt like a fusion of an European and North American conference.  The lightning talks (the evening before the conference started) were a nice touch i.e. short talks given by conference participates who were not speaking as part of the main schedule.

I learned, relearned an incredible amount of information. The conference was well organized, the staff were friendly.  To be honest I think I am still processing some of it.  The food was good.  The venue was good.  The main room was a little dark for me, but there was an ALT viewing spot with couches and a fireplace and skylights, this was awesome. I felt overall the conference itself was good value for money – but I did get it on early bird 🙂 The workshops felt expensive.

VITALY FRIEDMAN “Its important you should not FREAK OUT!” opening #smashingconf in #whistler

You can find most of the decks here you can see the twitter conversation at #smashingconf and I will add the link for videos when it appears.

My Learnings

• First make your site fast
• Deliver core content first, then progressively enhance
• Pay attention to size of everything and what it is blocking
• Make it responsive. Build for mobile first.
• Design in the browser, wire frames are wasted time for designers
• Always consider accessibility
• Have a style guide that everyone is responsible for maintaining
• Use sessionstorage and local storage
• Make it all modular and plug and play
• Design is not a service. Designers have to sit in the team

Things to explore

• FlexBot CSS
• Book -> Creativity Inc

The future is

1. SVG Fonts
2. <Picture>
3. http2
4. Service workers
5. Offline, maybe..

Things for the organizers to consider:

It was a really well run conference, here are some ideas to add a bit more magic 🙂

Pre-Conference ask the attendees what they really want

Send out a questionnaire what are the top three things you are trying to figure out. Share the results.  This would help guide the conference, spot trends that are emerging.  Encourage lighting talkers, to talk on similar topics or not.

Help lone travellers meet others

At the Ruby on Rails Conference (Railsconf) they have scheme, which allows a number of students and diverse backgrounds into the conference for free.  They also ask for volunteers to act as their mentors throughout the conference. I am sure some of the sponsors would consider giving

Other thoughts

I just covered the talks I watched in full.

Marcin Wichary

A great talk about typography, perfectionism, underlines and sanity. Funny & serious well presented

Deck – aresluna.org/whistler

Susan Robertson

Use style guides as a way to explore, define and guide.  Make it part of feature development. Examples for automated styleguides for web sites

A great resource http://styleguides.io

Deck – https://speakerdeck.com/susanjeanrobertson/style-guides-why-bother 

Yoav Weiss

mix & match <picture>/srcset/<img>/<source> to give users a specific image file according to viewport & display quality. <picture> is not ready yet but hopefully soon.

Deck – http://yoavweiss.github.io/smashingconf_whistler/#/

Marcy Sutton

Start at the beginning and make it part of the process. ARIA accessibility helps out with JavaScript.  All of us someday will need websites to be accessible as our eyes fail us.

Getting start with ARIA

Deck – http://marcysutton.github.io/a-web-for-everybody/#/

Jenn Luksa

Great presenter and Sass to boot. Resources

Deck – http://www.slideshare.net/JennLukas/smashingconf-whister-developers-ampersandwich

Stephen Hay

Design in the browser. Wireframes are wasted designer time. Sketch.

1. Focus on small screens first
2. Then colour and type
3. Uses a sketch in code tool

Deck – http://www.slideshare.net/stephenhay/sculpting-text-easing-the-pain-of-designing-in-the-browser

John Allsopp

Cache do not use for performance.  Use sessionstorage and localstorage

Deck – http://www.webdirections.org/speakeasy/presentations/SmashingOffline/offline.html

Dave Shea

Choosing your journey with CSS is more about the communication and how the team views it, rather than the methodology you use

Jonathan Snook

Do not grow up to be a specialist, explore, play and grow. Luck is what happens when preparedness meets opportunity http://snook.ca

Deck – https://speakerdeck.com/snookca/becoming-a-deep-generalist

Brad Frost

Atomic Design –  a methodology for creating robust design systems. Working from the ground up. Example http://patternlab.io

Patrick Hamann

Well presented and a great case study.  Build modular and decoupled systems. Design features for access(deliver in layers) first. Embrace the unpredictable nature of the web. Every feature must be measurable. You can see The Guardians Front end here https://github.com/guardian/frontend.  Their Mobile site is faster than their Web site.  Consider what you put in your first 14 KB, load the html first, JavaScript & fonts next (this usually stops the page loading), than analytics and adverts.

Deck – https://speakerdeck.com/patrickhamann/building-theguardian-dot-com

Val Head

Awesome fun lady. CSS can do some cool animated interactions. Choose the mood that fits the brand. Timing 0.2 to 0.6 seconds.

Deck – http://www.slideshare.net/valhead/putting-your-uis-in-motion-on-the-web

Paul Irish

Getting to fast – I did not see this talk, and I am looking forward to the video release 🙂

Deck – https://docs.google.com/presentation/d/1qoginKKkdrRpIPGjJakt1y17iXsIBSaInaHbR4JyCIk/edit#slide=id.g330e5fec5_00