Key Take-Aways from Responsive Field Day 2015

In September I got the chance to swing down to Portland to attend Responsive Field Day, a one-day conference on responsive web design and development. I’ve been wanting to attend a web design conference for a while, but they’ve always been a bit too expensive for me. This one was nice because they specifically aimed to keep costs-low for attendees and the one-day format made it easier to take the time off of work. Overall I really enjoyed it and managed to get a lot out of it. The format, I thought, was great because they grouped speakers together by similar topics and then had question and answer panels after each group of speakers. Here are some of my notes from the talks (talks are also available in full on YouTube).

Designing for a Global Audience

I liked Sophie Shepard’s talk on designing for a global audience. I haven’t worked on too many projects myself that are wide enough reaching as to require multiple languages, but I thought her talk was useful in considering how to approach these types of projects.

  • She emphasized using clarity in all of your labels and wording so that they might be easily translated (don’t use wit, slang, or regional terms).
  • Use words over icons because words are easier to translate across languages and cultures than icons.
  • She talked about considering audiences in third-world countries that might have unreliable connectivity or have different requirements for forms, especially for addresses.
  • She also talked about using context to personalize user experiences. For example, Facebook changes their globe icon to match your location. She also referenced this article on Medium that shows how Uber changes their app experience around the world.

Designing Performance

There were several talks on performance I enjoyed.

Val Head briefly talked about perceived performance in her talk on animation.

  • She referenced CSS Triggers as a place to see how much effort is required by the browser in manipulating various CSS properties.
  • Regarding perceived performance, she referenced this article on Viget’s blog about an experiment they did to see how long people would wait based on different styles of loading animations. They concluded that slower, more complex animations helped reduce the perceived wait time.

Steve Sounders talked about the difficulties in measuring performance. The current tools we have to measure page load don’t necessarily capture the page load speed that the user experiences (load time does not equal display time). The time it takes for elements to show up on the page and for users to be able to interact with them is what matters. He recommended using the W3C’s user timing specs to target specific elements on the page. You can identify what the most important elements are on the page and then use performance.measure() to get a more accurate representation of how the user experiences the page loading time.

Another great talk on performance was given by Yesenia Perez-Cruz. She talked about creating performance budgets and using them as a constraint in the design process.

  • To do this you first determine what your performance budget is going to be by researching competitors and comparing load times using WebPageTest. This might include a file size limit, a server request limit, and a page load time based on specific connection speed.
  • The performance budget would be determined early on in the design phase so that it can be taken into consideration during the bulk of the design process. As a designer you then have to be mindful in the design you are creating of how many high resolution images you are using, how many font files, and how many different files are going to be requested in order to develop your design.

Designing Modern Layouts

Another talk that I thought was inspiring was by Jen Simmons. She pointed out that a lot of current websites look very similar in their use block and column based layouts. Her talk encourages designers to take inspiration from the history of graphic design and early websites and to utilize newer CSS specs to create more interesting layouts. She demos some examples on The Web Ahead site, including using CSS shapes to shape text around an image as is done frequently in print magazines. It’s worth it watch her talk for all of the visual inspiration!

Fin

Those were some of my favorite talks. I may cover more notes in a later for post. I’ll end with my conference tweets below.