Artifact Conference 2013

Last month I was fortunate enough to attended the inaugural Artifact Conference in Austin, Texas. Artifact is “a two-day, single-track conference for DESIGNERS adapting to the challenge of designing for a MULTI-DEVICE world”. That description was exactly what I was looking for while preparing myself to dive into the world of Responsive Web Design.

It all started with Jennifer Robbins having an idea for a pow-wow to discuss a new workflow for a multi-device web, since our old processes and workflows are no longer cutting it. She tweeted about it and Christopher Schmitt from Environment for Humans obliged within two minutes. Thank you both!

@jenville I’m in!

— Christopher Schmitt (@teleject) August 29, 2012

The Talks

Jennifer Robbins reminded us that the old ways of “over the wall” handoffs need to be replaced with Agile development cycles of design – develop – repeat. She shared with us some of her favorite tools for visual responsive layout like Adobe Egde Reflow, Froont and WebFlow. Her keynote also hinted at what a treat we were in for over the next two days.

Here are the key characteristics of her new workflow:

• From waterfall to agile process.
• From silo’d departements to integrated teams.
• From pages to systems (content modules).
• From static deliverables to working prototypes.
• From “Big Reveal” to clients as collaborators.

I love the way she articulated “From” the old “To” the new process with her slides.

The next session was lead by a dream team of designers; Yesenia Perez-Cruz, Dan Mall and Ben Callahan and was all so visually entertaining. At one point during the session, Dan Mall showed a lengthy scrolling element collage that gave me and @mpgilbertusa vertigo. Yesenia talked about using style tiles to get through the struggles of a redesign. Dan started out with riddles, but explained that riddles in web design are bad because too much abstraction and lack of content/context leads to miscommunication. He also gave the advice “Solve your own problems by using the success and failures of others”. Ben shared the importance of HTML prototypes, because style prototypes can be shown on devices, show interaction, show accurate web type and colors, etc.

One of my biggest takeaways from Andrew Pratt was the idea of a digital style guide and its importance during the development process. Why do we need a digital style guide?

• They create consistent and uniform code.
• They create efficiency by reusing UI elements and patterns.
• They avoid re-doing work that other team members have already done.
• They’re great for new UI team member to get to know the brand.

It’s important to build the style guide during the design/development process instead of it being a deliverable after the fact.

Dave Rupert tackled the ever frustrating topics of responsive images. With ~60% of websites page weight being images, this topics cannot be ignored. There are many approaches you can take depending on the needs of the project. We have Data URIs, SVG, Icons Fonts, @srcset & <picture> and server-side solutions. That’s enough to make your head explode! At the end; there’s lots of options. Use your brain.

Jenn Simmons shared her design process for coming up with responsive layouts:

• Design content structure.
• Design source order.
• Design narrowest layout.
• Design wider and wider layouts.

You can view her slides from this presentation to get a better idea of what her design process is. Jenn said something important that really stuck with me: “Important content shouldn’t whisper at you.”

Jason Pamental reminded us of the importance of web fonts and how design is 90% words, so don’t make the other 10% do all the work. With regards to performance; it takes time to load fonts. So only load the ones you need.

Jason said that we can declare our independence from resolution dependence with icon fonts! There are many already out there in the wild, but it’s fairly easy to creat your own with tools like Icomoon and Font Awesome.

Responsive Design Patterns Workshop

Attending Brad Frosts workshop was like getting a peek into his bag of responsive tricks!

The first thing that Brad taught us was that it’s okay to add responsive elements in small stages. For example, start with adding a responsive footer, then later the header, etc. As long as you make sure you have a roadmap to convert the entire site to responsive eventually.

Breakpoints – Let the content not the device width determine the breakpoints. Start with the smallest screen first then expand until it looks like shit… time for a breakpoint! Use major and minor breakpoints – You can have breakpoints that make minor little tweaks. BUT, don’t over do it.

Scrolling – When scrolling on mobile, you’re scrolling back in time, diving deeper into content. Use conditional loading while scrolling so you can give the user the content only when they need it. Read Jeremy Keith’s article: Conditional Loading for Responsive Designs.

Touch Considerations – Accommodate for touch… always. Don’t rely on hover states. Look for opportunities to provide enhancements for touch devices, such as swipe gestures. Be mindful of ergonomics and how people hold different devices.

My favorite code snippet from the workshop:

if (touch) { 
    /*Make touch friendly*
} else {
    /*oh, just kidding, make everything touch friendly*/
}

Navigation Patterns – Find the balance between navigation accessibility and unobtrusiveness. Avoid overlay menus to avoid goofy link tap highlighting color bleed through. Do not disabling tap-highlight-color. Test in as many environments as possible. Be explicit with navigation icons (Hamburger with the word “menu”). Be aware of navigation animation performance concerns.

Conclusion

Artifact Conf is the first of its kind as it is a conference for designers adapting to the challenge of designing for a multi-device world. However, other conferences have been incorporating RWD into their programs. As far as I know, Artifact Conf was an experiment and is currently not scheduled to repeat next year. If it does, I would recommend attending because this stuff is changing so rapidly, it can be assumed that next year would provide fresh information and inspiration.

Please enjoi Brad Frost’s closing video: