Smashing Magazine (http://www.smashingmagazine.com
) is a well-respected online ‘zine whose European-based founders have built a vibrant community of developers and designers who appreciate both the development aspect of designing for the web, and the design challenges that developing for the web presents. I’m an avid reader of their various channels and am a big admirer of their lead honcho, Vitaly, whose cheerful presence online translated perfectly to creating a happy atmosphere at the conference where he ringmastered with pride. The conference talks were advertised as “one track” – so everyone was in the large conference hall of the Times Center (next door to the NYT building and conveniently near Port Authority), which allowed/obliged developers to absorb more design-oriented talks, and designers to hear more developer/code-centric talks. I thought this was a great idea as being exposed to different ecosystems and mindsets is what conferences should be about.
The June 2014 conference in NYC was their first in the U.S.! So I and the many folks who flew in from all over the country were very happy to snap up tickets for the 350 coveted spots. The conference was formatted as speakers + extra workshop days led by those industry leaders; I opted in for the conference only so won’t report on the workshops. The conference kicked off on Monday evening with an open bar and lightning talks by attendees. These ranged from a risky and skeptically-received discussion of using php for mockups to a thoughtful review of creating environmentally-friendly websites – I learned that HostGator offers a Green Certificate (http://secure.hostgator.com/forward.php?page=green-web-hosting.shtml&gclid=CLi1_6rdiL8CFdBi7AodN1IAag
) which you’d never know from visiting their homepage. Good to know.
Tuesday morning kicked off two days of consecutive talks. Here are my notes on these:
- Aarron Walter (MailChimp): Connected UX
- tagline: “data for everyone, and everyone’s data!”
We should be using technology to tell stories. And to tell good stories, we need to do research to gain knowledge and enable judgement-calls. But too often, we “learn it and lose it” by not connecting all the disparate data offered by our users’ actions and feedback. What we should be doing is tying threads together to find meaning; once we find connections we can think strategically. Aaron demonstrated how, at MailChimp, he introduced a process of gathering user feedback via a backgrounded process, into Evernote where it could be analyzed and acted upon so as to create a story. This works great for usability testing and understanding user gestures such as closing their accounts. Takeaway: try IFTTT to feed data to Evernote (so far it’s working well for me!)
- Meagan Fisher (http://owltastic.com/ freelancer, previously art director at ChartBeat) : The Business of Design
- tagline: “what’s the most beautiful thing I can create that still fulfills the customer’s requirements?”
Design is all about relationships. Meagan gave solid advice on how to find people who will pay, how to choose from those people who might want you, how to figure out how much work can you do, and how to understand your own workflow, capacity and limitations. She also gave advice on how to say no: for example if a client can’t describe their business model, walk away! Avoid narcissists or those who impose a style on you. Doing good work is about finding a balance between humility and confidence. And don’t forget, designs always take 1.2x longer than you think you can stand. How to keep a client? “stop, collaborate, and listen”. Meagan strongly advocated daily standup, quick meetings, and/or frequent phone conversations. To break artist’s block, start with a warmup and create something awful…it may lead to really good work.
- Scott Jehl (http://FilamentGroup.com): The Elusive, Inclusive Web App
- tagline: “access to apps (or ‘web thangs’ – because the word ‘app’ is so vague) should be inclusive, never exclusive.”
Scott is part of Boston’s Filament Group, the folks who are deeply involved with jQuery Mobile and who host the Open Device Lab in Boston. I have connections there and was really excited to meet Scott whose code has helped me immensely with our RWD projects. This talk was the most developer-centric and thus one of the most interesting and useful to me. Scott reminds us that we are the exception, not the rule, in terms of our access to web technologies. We must build inclusively:
– start with RWD
– one size HITS all
– average size webpage is 1.75MB.
– Responsive Design is Responsible Design
– we must pay attention to performance, accessibility.
– sites need to sometimes work offline
One caveat – RWD broadens access so your page load times may actually GO UP in your analytics, because more people on lower-end devices are able to access your content.
Use webpagetest.org to test < a useful tool mentioned by several speakers.
Recommendations on speeding up the critical path:
– inline your critical code into the header
– use “cut the mustard” tests – if your browser can support X, then load script X.
– add classes using progressive enhancement.
– instead of writing mobile-first css, write global-first css to at least load the layouts, and then load the components and paint the fancy stuff
– loading stylesheets asynchronously, ensuring it’s not blocking when loading. External css blocks as well as external .js so consider inlining
– images should be responsive too!
Fast architecture recommendations:
1. take json
2. use mustache template and merge data in
3. pass from server quickly to client
4. use namespace to tag elements and inject into page.
Fast navigation strategies:
1. create embedded views using mustache tempting
2. use pushstate and popstate to navigate quickly.
Notes on fonts:
Don’t use CDN-delivered webfonts – while fonts are loading, the text is hidden. Instead, load a local version of a fonts.css file that are data inlined. Or, put fonts file into local storage.
Element queries will replace media queries, but they’re not yet available in all browsers.
- Jonathan Hoefler (founder of typography.com): Fonts on the Web, Fonts for the Web
This was a technical discussion of choosing fonts for the web, very interesting but a little long right before lunch and after Scott
Hoefler is famous for the font that he created Hoefler Text, (http://www.typography.com/fonts/hoefler-text/styles/
) and discussed the creation of his cloud typography platform (http://www.typography.com/cloud/welcome/
), a CDN that gives each browser a proper typography solution (one wonders about the speed, given Scott’s dismissal of web fonts right before).
- Andy Hume (http://andyhume.net) – from the Guardian. Real-life Responsive Web Design
- tagline: “progressive enhancement makes sites ‘resilient’”
Andy provided more practical solutions that dovetailed nicely with Scott’s talk, to speed up the Responsive web experience. He advocated measuring early and often, and make sure you know what you’re measuring and comparing, using webpagetest.org and speedcurve.com. Make sure to gzip your content and use cache-control: max-age=315360000 to cache (we need to do this latter on our sites). Like Scott, he discussed the ‘first byte’ – time to wait before first byte of html is rendered – and how to reduce that lag, including:
– eliminating any redirects
– start the rendering as fast as you can and don’t block!
– construct the DOM, render DOM tree, layout, and then paint.
– avoid remote CSS
– inline critical css
this tool can determine critical css on your pages and give you the inlined bits
– HTML pre-parser – prescanner or speculative scanner, which searches through the html and grabs any incoming url to store in cache. But current strategies of inlining scripts breaks the preparser. We can use <script src… async> to handle that, but beware, browsers may not support async.
– http2 SPDY – this will change some characteristics of html rendering. For now, we can use concatenation and spriting, but http2 enables multiplexing and cache pushing.
- Fabio Carneiro (MailChimp): Hard-Won Lessons in Responsive Email Design
- tagline: “Design for Distraction. Emails are consumed via one eye, one thumb, and at arms length.”
This was a fascinating talk about how to handle responsive design in an email context. It’s well-known that designing html emails is a nightmare, but MailChimp has some great tools to help. 87% of all emails from MailChimp are now responsive. They have retired their fixed-width email editor and fixed-width template.
Interestingly, various email clients handle email layouts differently.
Gmail is particularly bad…Outlook is bad too – it doesn’t use an html rendering engine to render html……you can always design for one or the other client, but it’s best if you can find a base design that meets most needs.
– to do this, understand the four types of emails:
ecommerce emails (buy me)
social emails (join me)
article/content emails (read me)
transactional emails (your credit card was denied etc).
NB! Emails aren’t websites, so ditch the navigation and footer links! (ex. Zappos as an anti pattern)
Future trends: mobile-first in email is starting to become more prevalent, but watch out, some clients don’t support max-width or media queries.
course at treehouse: teamtreehouse.com/library/html-email-design
- Mark Boulton (Designer/Director at Monotype): My Handbook
- tagline: “understand the thinginess of the thing”
This talk had a lot to do about usability. Making things is messy, but if we pay attention, understand the truth of the materials, and are mindful, we can create great things.
-Always be talking.
-Watch real people use what you build.
-Usability testing doesn’t have to be complex or academic.
-Don’t hide from content
-Rely on data, not instinct
Wednesday started with the big reveal of the Mystery Speaker! Jessica Hische, who does really amazing, beautiful work as a designer. As an example, she gave a before and after view of the MailChimp logo, which she changed typographically and gave it a new lease on life. This ad campaign blew me away: http://jessicahische.is/secretlyintofancylattes
. One takeaway from her process flow is that she recommends researching – especially offline research. Visual research sessions can be totally separate and not project-based.
- Oliver Reichenstein (http://ia.net): Information Entropy
- tagline: “SLOW THE F*** DOWN”
This talk was the most eye-opening for me of the non-technical talks. I really loved it. It really spoke to me and I am hoping that I can internalize it entirely into my workflow.
We make 50 million books per year, and 50 million new websites. Are we hypnotized by numbers? Is there a correlation between numbers and WORTH?
The vortex of plastic particles in the sea is like what is cluttering our mind.
Do we really know what we’re doing?
Entropy – you cannot inverse the process of chaos unless you use a lot of energy to do that. We’re good at making messes…but maybe we’re also good at cleaning them up?
Embrace negativity! Sit on it, let it percolate, then react.
As designers, we copy and repeat, alter a little, copy, repeat
It’s the little things that are appreciated. Build them into your app. Take the time to care for the details.
It’s not about being cool. It’s about being serious and detail-oriented.
Don’t be afraid to have some secrets. You don’t have to overshare.
Don’t reduce for coolness, reduce so it works better.
- Dan Rose (psetiquette.com): Clandestine Photoshop
- tagline: “Photoshop can be used like a fountain pen, but you can also treat it as a paint roller”
A talk on how to integrate Photoshop into your workflow. Photoshop is not for embellishment, but is mostly used for the full-page comp. Don’t fight wanting to comp altogether, just adjust the scope (rather than designing in the browser altogether). Consider creating element collages – not a final deliverable, but used just to establish the feel of a website, not pixel-perfect. Try before you invest loads of time:
. A very useful tool is Pagelayers.com – which allows you to export from a browser to Photoshop.
- Tim Brown (Adobe Typekit): Universal Typography
works at Adobe Typekit.
This was a technical talk for lovers of type! It discussed:
– relationship between web and typography
– fundamentals of typesetting
– questions on role of typesetting in RWD
As web workers we must understand the fonts we use: some fonts work better larger, some smaller, ex: Verdana doesn’t look good on Retina. Typography used to be a set of fixed conditions, but with web typography, you have to flex.
This was a good autobiographical talk which I had to unfortunately cut short as I had to catch the bus. Cassie is a very approachable artist who is now creative director at Mozilla; she traced her career route in an engaging fashion.