The Future of Web Design—SmashingConf 2016 (Barcelona)

Last week I attended SmashingConf 2016 in Barcelona. During two days I had the chance to listen to great speakers from the design world. It was a fantastic event in which I learned a lot of new stuff. Do you want to know the topics we discussed and the things I learned? Keep reading!

Staging

Until last week, I’ve mainly attended to WordPress-related events and, even though the WordCamps in which I had the opportunity to participate were outstanding ?, SmashingConf took it to the next level ?. First of all, the venue was one of the most beautiful locations in Barcelona—el Palau de la Música Catalana.

I mean, FFS 😳😍😳 #smashingconf pic.twitter.com/6S2e8ee5gq

— Belén 😱 (@ladybenko) October 25, 2016

The Palau is a concert hall designed in the Catalan modernista style by the architect Lluís Domènech i Montaner. It was built between 1905 and 1908 for the Orfeó Català and inaugurated February 9, 1908. If you’ve never visited it, I strongly recommend you add it in your list of destinations:

It’s simply breathtaking. But don’t take my word for it—just read the following tweet by one of the speakers:

Getting excited for #smashingconf – venue is incredible! But that stage doesn't half look intimidating… 😱 pic.twitter.com/XtCj0Lt2sc

— Laura Elizabeth (@laurium) October 25, 2016

Excellent Organization

First impressions always matter, but so does everything else. As I said, choosing the Palau for such an event was a brilliant idea. But, to be honest, so was every detail surrounding the conference.

There were up to 16 different talks distributed in two days with a single track per day. Talks were paired so that, every two talks, the attendees had the chance to grab a cup of coffee, network with our colleagues, and get back to business. If you’re used to two tracks per day, you might think that a single track limits the amount of topics that can be covered. And, in general, you’re right. But in this particular case we had the chance to cover the most important topics in detail.

Actually, I think that a single track was one of the best decisions made by the organizers. Sure, attendees might not be able to choose what talks they want to attend, but a single track has some advantages. On the one hand, you won’t miss a single talk, because, well, there are no two talks at the same time. On the other hand, a single conference is easier to manage, because people won’t need to move from one room to another every now and then—all attendees will be at the same place at the same time.

Each talk lasted 35-40 minutes and was followed by a Q&A section. And, once again, I can’t help but congratulate the organizers. As you know, allowing the audience to ask questions to the speaker is tedious—you need to have someone in the room offering a mic to each attendee, the questions might not be clear and some time might be lost… sometimes, people are so shy that no one dares to ask a question at all!

The organizers of SmashingConf prepared a collaborative Google Drive document ✍ in which all attended could take notes together and write down their questions as the talk progressed. Once it was over, the host sat down with the speaker and ask them the questions we wrote in the document. Quite clever, huh?

Finally, if you take into account the snacks we were given in the Palau, the arcade machines they added so that we could play, the contests we had (drawings, Lego creativity…) o the OcculusRift kit the organizers gave away… well, you have the greatest conference ever! I mean, we even had a plank contest! How cool is that?

Wow. (Amazing!) #SmashingConf Barcelona photos by @Littlemad. https://t.co/razcRwzmoX pic.twitter.com/aQ5mkqNqME

— SmashingConf (@smashingconf) October 28, 2016

If I had to criticize something, it’d probably be the fact that lunch wasn’t included in the conference…? But, hey, we were in Barcelona‘s city center, so it wasn’t very difficult to find some nice place to eat ?

The Best 3 Talks (IMO)

I enjoyed absolutely all talks, no exception. Speakers were fantastic and I learned a lot from each and everyone of them. But if I had to choose three, and only three talks, these would be my podium.

Bronze. Designing Choice

In this talk, Adrian Zumbrunnen explained how our designs might improve the user experience and might guide the user into taking one action or the other. This talk deserves the third place in my ranking because of his discussion on friction. As you may already know, it’s usually believed that the more fluid and fast the interaction between a user and a web is, the better results you’ll get (more sales, more happiness, more engagement… whatever). Well, as it turns out, this isn’t always true. And Adrian showed us several examples.

One of these examples was his own website. Adrian decided to run the following experiment: what if my website was designed as if it was a chat window? Adrian modified his website so that it looks like a chat app and, hence, give to the user the illusion that they are talking to Adrian himself, in real time:

If we want the user to believe that someone—Adrian—is actually talking back to them, we need to add some friction. How? Quite easy! Adding some delay for every message “Adrian” typed and including the “ellipsis” feedback. By the time a visitor “talks” to Adrian, the conversation is already scripted, so we could instantaneously drop the answers to the visitor’s choices. But in order to create this illusion of an actual chat taking place, we need to add this pauses, we need to implement some friction. Brilliant!

Silver. SVG in Motion A Smashing Case Study

Sara Soueidan‘s talk was outstanding. I was really impressed by her communication skills and how well she presented a lot of technical concepts so that we, the audience, could follow her. Her talk was very detailed and we had the chance to learn some of the tricks she applies in her work. It looks like, in the end, building web pages so that they look as the designer intended them to is quite an art!

RT @nucliweb: Awesome talk by @SaraSoueidan at #smashingconf #LotOfTips #css #svg #a11y pic.twitter.com/0ZrPDQ5i48

— Deborah Edwards-Oñoro (@redcrew) October 25, 2016

The thing I like the most was the idea of using simple HTML to build your pages, instead of a bloated markup. You have to make sure that your website looks “good” on any browser (which means no CSS an no JavaScript—just plain HTML). Once this is working, it’s time to add some spicy CSS and make it look great. I already knew the importance of this approach, but looking at someone like Sara applying it is really inspiring.

Automatic font-size redimension (Fuente).

But why does Sara deserve the second position in my ranking? Because among all the hacks she shared (watch the talk in her website), she showed us the following magic CSS formula:

which makes the text scale up/down linearly based on the viewport size. Do you want to know how it works? Read this post to learn the maths behind it!

Gold. Revolutionize Your Page: Real Art Direction on the Web

Finally, the best talk of the whole event was Jen Simmons‘ talk. For those of you who don’t know her, Jen’s designer and developer advocate in Mozilla. She has a lot of experience in design, which one can sense in her digital art.

Jen showed a lot of CSS functionalities that will be mainstream in the upcoming months. If we’re lucky, we won’t use rigid frameworks such as Bootstrap anymore—the future of CSS will make website design easy and powerful. I think that the easiest way to get an idea of how cool this talk was is to actually watch the talk. The one I attended to is not online yet, but this one is quite similar to it:

I also encourage you to visit her website and, especially, the labs section, where you’ll find all the examples she shared in her talk. There you’ll see the following, beautiful header section:

or how a extremely simple HTML snippet:

along with some CSS rules can become an exact HTML replica of a classic advertising poster:

which also adapts to the screen size! ?

Other Talks

Finally, I’d like to briefly summarize the whole event in a minute or so. Here you have a quick overview of the conference! ?

1. To Hell for Type, by Marcin Wichary. One of the developers and designers in Medium explained the importance of typography and how complicated it is to make it look perfect.
2. Designing Meaningful Animation, by Val Head. Don’t use animations “just because you can”. Animations are very powerful and can improve your design. There are 12 basic animation rules (by Disney) that’ll enhance your work; learn them.
3. Designing for Display, by Jessica Svendsen. We live in a digital era. Jessica explained how she approaches design. She moved away from technology and explores her creativity in different ways, using real live elements (a camera, lights, shadows, papers, …).
4. The Small Things That Add Up: How to Find What Design Factors Influence Conversion Rates, by Tammy Everts. If you could only fix one or two parameters of your website, which ones would they be? Time to load? Time to first byte? Number of DOM elements? Tammy gave us some insights and discussed the importance of making decisions based on real data.
5. The Tail and Its Dog, by Stephen Hay. Websites should tell a story. Unfortunately, nowadays they don’t—they all look the same, they lack a soul. But we can do better—even “bad” designs are actually good if they help us tell the right story.
6. How Testers Can Be a Liability for Your Team, by Ulrika Malmgren. Do you have a team of testers? Having one and learning how to work with them is the next step towards excellence.
7. SVG in Motion A Smashing Case Study, by Sara Soueidan. Crafting a page with some basic HTML and spicing it up with CSS is not always easy. Sara shared some of the hacks she has been applying recently and… well, they’re pure art.
8. Resilience, by Jeremy Keith. Web was designed from scratch to be resilient, to adapt. Because of its inherent simplicity, it can quickly evolve and incorporate new technologies, while still being accessible to older devices. So keep that in mind when building a website—implement the core functionality of a website with accessibility in mind, and then improve it and make it better with CSS and JS.
9. Mysterious talk by mysterious speaker. There isn’t much to say here. Just one tip—read this post (spoiler alert, the author is the mysterious speaker) and discover how over 15 years ago someone warned us about web accessibility.
10. Selling Design Systems, by Laura Elizabeth. Typography, colors, styles, components… we use a lot of element to build a website. If you’re working on a large project with several developers, make sure to create a design system—i.e. a document with the guidelines you all must follow, or else you won’t create a coherent and unified product. But don’t overuse it! Small projects might not need one.
11. Responsive Web Apps with Container Queries, by Jonathan Snook. CSS media queries are great for responsive designs. But they only apply to viewport size. What if we could use them at a component level? In this talk, Jonathan shared his experience creating responsive components with container queries.
12. Revolutionize Your Page: Real Art Direction on the Web, by Jen Simmons. A glance at the future. An inspiring talk. It’s almost time to drop rigid frameworks and get used to the upcoming CSS.
13. Designing Choice, by Adrian Zumbrunnen. A few tips and tricks to improve the interaction with our users.
14. Conversion Rate Optimization Techniques in Ecommerce, by Christian Holst. Christian has been working for several years with e-commerce companies. During this time, he gathered tons of data about what works and what doesn’t in selling products online. In this talk, he shared some of his findings.
15. The Website Obesity Crisis, by Maciej Ceglowski. Web is getting fat fast. Nowadays, the average size of a single web is similar to Doom’s original binary ? This was the funniest talk in the conference.

I’d like to come back next year. What about you?

Featured Image by Jiuguang Wang.