Smashing Magazine Conference 2014 in Whistler Recap

Vitaly and his crew at Smashing Magazine always put on a great conference, and the Whistler show was no exception. The format was the same as the NYC conference in that there were two full days of conference talks, sandwiched with workshops, in a scenic location. What differed this time was the overall friendliness of the crowd who were about 42% Canadians and mostly eager to ski. Sadly, the weather really didn’t cooperate and it either drizzled or massively poured the entire time. Umbrellas from the Hilton were a hot commodity. The hotel was exceptional, the venue pristine, and the food fantastic (better than NYC as there was more space to serve lunches). I attended the talks only, not the workshops, although I would have liked to have been able to attend Brad Frost and Vitaly’s workshops on RWD. Of particular note was the conference party at the hotel on Wednesday night, complete with pop-rocks, a custom cocktail, and a roast-your-own s’mores bar and chocolate fountain which was quite unbelievable. Kudos to Vitaly and Smashing Magazine for always putting on an impeccable show.
Below are the notes I took from all the talks.
Marcin Wichary from Medium – Redesigning the Underline
Marcin talked enthusiastically and in depth about his obsession with making underlines beautiful on Medium. He wasn’t able to make them perfect but found a happy place where it was ‘good enough’. Exceptionally detailed and entertaining talk.
Susan Robertson – Style Guides
Susan’s talk was more low-key but very detailed about the need for teams to have Style Guides. She noted that Style Guides don’t have to be beautiful, but they should be useful and not a statement of brand, but rather a round up of patterns. Following on work done by Mailchimp’s UI Pattern Library, Starbucks, Stanford, KU and CodeForAmerica, she demonstrated the utility of getting the patterns into the style guide first, and then proceeding to development if at all possible. Good ideas as well on maintaining these guides.
Stephen Hay – Designing in the Browser
Stephen discussed dropping Photoshop for mockups and instead using more agile modern tools:  “Photoshop is the best tool to show your client what their website will never look like”. He recommended stopping thinking about layout and starting to think about structured content rather than containers. RWD should be additive and should be designed from simple to complex. He maintained that sketching should always precede coding.
John Allsopp – Offline Web
This was a really good talk about taking your app offline. John went into depth about how we really don’t need the internet to create amazing WebThings. We can take our application offline by persisting data in the browser and testing whether we are online or not and responding to context. He discussed Application Cache and all the tricks and limitations it offers, showing how it can be useful if you understand its quirks. He discussed using sessionStorage to ensure that data only persists in a session, and localStorage to reduce the need for server-side storage. He also discussed indexedDB and pouchDB as excellent for storing data in an offline state. We can respond to network status by adding an eventListener:
window.addEventListener(“offline”, updateUI()), and if navigator.onLine == true, the user MAY be online and we can respond accordingly. He discussed the File API and how it can be used as well to store data like photos etc, and how in the future we could replace App Cache with service workers. Finally, he gave us the link to his forthcoming book on the subject:
Zach Leatherman (Filament Group) – Remodeling @font-face
Zach gave a detailed discussion of how we can use new formats for fonts, including woff, woff2, truetype, and opentype, organizing the way they are downloaded to minimize “FOUT” (Flash of unstyled type) or “FOIC” (Flash of Invisible content).
Dave Shea (CSS Zen Garden) – Rolling your own CSS Framework
Dave gave a case study of the way his team at Mobify created their own CSS Framework/Methodology
Jenn Lukas – The Developer’s Ampersandwich
Jenn gave an engaging and upbeat discussion of handling fonts and the challenges they pose in the context of a ‘sandwich’ of content
Marcy Sutton – Accessibility
Marcy’s talk was an eye-opening one on accessibility and how screen-readers can sometimes mangle our webpages if we don’t design for accessibility, which we really should be doing. The big takeaway is judicious usage of the
ARIA (accessible rich interface) roles, which I need to study more.
Yoav Weiss – Responsive Images
Coming to a browser near you: Responsive Images! Yoav is an expert in web performance and member of the Responsive Images Community Group which got the <picture> element crowdfunded, nice work. He discussed the evolution of the responsive image from the not-well-received srcset proposal by Apple to <picture> with picturefill polypill. He demonstrated the markup and its use on the WWF website. The biggest issue now is browser compliance and compatibilities…eventually hope to see this all smoothed out. Of note is the fact that we abuse peoples’ data plans on mobile if we don’t properly deliver responsive images.
The Mystery Speaker – Jonathan Snook on Becoming a Deep Generalist
An autobiographical journey of a developer/author/generalist
Lyza Gardner – Combating Web Weariness
Lyza presented what really was performance art in a hand-drawn slide deck discussing the zen art of web design and how we can simplify to avoid web weariness
Brad Frost – Atomic Design
This was not surpisingly a fantastic talk by a recognized luminary in the field. Brad discussed how we need to get away from the idea that we are creating ‘web pages’ and instead look at our design as comprised of atomic that congregate together naturally to form modules. He questions bringing the sameness of Foundation/Bootstrap with their one size fits all look/feel into the web. He showed his and Dave Olson’s Pattern Library ( solution to help people think and build along these lines. Using this library allows you to craft atoms > molecules > organisms > templates > pages and have a solid foundation on which to build your site. I think it also helps in creating style guides. This is a well fleshed-out project that I hope to dig into carefully.
Patrick Hamann – Case Study : the new
Patrick gave us an overview of his team’s work on the Guardian and how it was conceived as a content-driven site with four goals in mind: building a modular and decoupled system, not a site, designing features for access first, agnostic of device, embracing the unpredictable nature of the web, and measuring every feature’s utility and value.
Val Head – UI Animation using CSS only
Val was one of several speakers who concentrated on animation, which many conference viewers noted appeared to be a coming trend in that it was the focus of several talks and new tools to be released in Chrome devotees. Val primarily discussed CSS-driven animation and describes its use as applicable for revealing more content (like card swapping) or
leading people thru your experience. Very good talk with live coding.
Kyle Simpson – CSS { YAWN:YAY! }
Kyle discussed a tool called ‘grips’  that he has built at Getify to create CSS templating, rather than using SASS or another preprocesser which dumps out sometimes messy CSS. He insists that we need to demand more of our tooling.
Tim Kadlec – In Between
Another excellent animation talk, notably in its creation of an apt parallel between Vitaly and Groo of Despicable Me :) – Tim discussed how the in-between moments when items are loading are important and can be leveraged to improve user experience and how animation ‘eye candy’ can be truly valuable to ease the perception of lag. Rather than using progress bars, we can use ‘skeleton screens’ to tell a user what comes next (for example Facebook and the Polar app). Very valuable observations and practical solutions in this talk.
Paul Irish – Getting to Fast
Of course the conference was capped with the entertaining and educational talk about web performance by the inimitable Paul Irish, who treated us to analyses of several conference-goers websites and the performance mistakes they are making. Much of what he said should be ‘givens’ at this point (minify/concatenate files, inline most important CSS, avoid blocking js and css in the head, watch out for image size) – Smashing Magazine’s website did well in this comparison. He also showed new tools coming to Chrome including an eyedropper tool and animation controllers (again with the animation!). Using WebPageSpeed he demonstrated a visual filmstrip that can be made of a page while loading, valuable to discuss with clients/managers. He explained latency and packets in a very accessible way, and finally recommended to invest in performance always, rather than new features, for true ROI.
All in all a great conference! A little glitch on the return flight home and an extra night in Toronto, but Canadians are so friendly and kind, it wasn’t really painful.

Leave a Reply