SmashingConf Barcelona 2016: The End is Near

If there’s one thing I’ve learned during my time at this year’s Smashing Conference (presented by Smashing Magazine) it’s that the end of the web as we know it is quite near.

Is the whole web going to disappear? Obviously not. But part of the web is dying, and for good reason: a serious lack of creativity. Author and designer Stephen Hay mourned the loss of storytelling on websites today, a huge problem because as humans we are “wired for stories.” A plethora of today’s websites are filled with sameness and based on components that have been designed without taking the big picture into account.

Designer Jessica Svendsen, in her talk on Designing for Display, indirectly showed conference attendees that the current state of web design is largely lacking experimentation. It became very apparent during her talk, that compared to her world of visual design, web design has largely remained repetitive, bland, and has lacked substance over the past several years.

In fact, we seem to have reached a point where everyone wants the same thing on a website: a large hero image, a statement about why their company or product is so cool, a few equal height columns describing features, and a very pretty call to action button –  all of which should be set within rectangular blocks. Everything looks the same, and we’re bored as designers and consumers of the web. Jen Simmons of Mozilla described it well when she said, “we’re in some sort of a rut.”

Time to Turn the Web Upside Down

So how do we pull ourselves out of this rut and start creating better products that tell better stories? First we need to understand how we got here and why.

In many ways I think the web design industry has arrived at this point by the need to create beautiful websites that work on every screen-size, without killing performance. This has forced designers to rely on CSS and HTML over images to accomplish accessible, intricate designs. But while CSS has traditionally been rather limiting and filled with hacks, what we can do with CSS is rapidly changing. It’s about time to start getting weird and interesting with our designs again.

One example of expanding what’s possible on the web via CSS is the grid-layout spec, coming to browsers very soon, after years of development (Jen Simmons predicts we should see this around Spring 2017).  Using the grid-layout, we’ll be able to craft layouts for the web that have traditionally been viewed as impossible, and, we’ll create these layouts without the use of clunky CSS libraries, without performance-hindering javascript, without altering the order of HTML in a way that makes zero sense to screen readers, and without feeling like we are totally hacking something together. We won’t even need media queries to make our new grid layouts play nicely across viewports. Jen Simmons covered grid-layout extensively in her talk on Real Art Direction for the Web, and it was mind-bending. Anyone who is involved in the creation of websites should watch Jen’s talk.

We saw more of what’s possible with the latest CSS when Sara Soueidan took us behind the scenes of the in-progress redesign of Smashing Magazine’s website, demonstrating a myriad of new possibilities, including responsive type without media queries, shifting elements unexpectedly with transforms, non traditional layouts,  accessible SVG elements, and gorgeous drop-caps.

Sara also showed us the importance of accessibility; structuring HTML in a way that makes sense not just to screen-readers but also to the variety of technologies out there that are re-packaging web content for consumption on the fly (think Instapaper, Readability, etc..). For example, do you know what your website’s blog content looks like when saved with a read-later app, or how it sounds when it is spoken aloud by a screenreader? Or how about this… If Siri starts reading your website, will Siri curse you or praise you for your markup?

We also saw how animation can be entirely powered by CSS. I don’t just mean simple opacity animations on button rollover events – but animating shapes with complex timing events that can instantly inject personality into otherwise static designs, affecting how users perceive and react to various events.

Another one of my favorite talks on CSS came from Adam Zumbrummer. He’s  been taking a very different approach to designing for the web through the use of conversation and friction. I can’t do it justice, so trust me and check out his work first hand: https://azumbrunnen.me/ and http://uxchat.me/.

Progressive Enhancements

So, how do we start enhancing our web designs with awesome CSS and Javascript features while still supporting older browsers (and not wasting time, or money)?

As an industry we need to start focusing on Progress Enhancement, or adding in bits of enhancements to websites as we are able to, whilst establishing a baseline of features that must work for the website to accomplish its primary goal. Jeremy Keith, during his discussion Progressive Enhancement, shared a great insight: “there are lots of features on the Boston Globe website that require javascript. Reading the news isn’t one of them.” (see original tweet from Matt Marquis on this topic).

Let’s face it: in 99% of situations, it’s not worth it in terms of financial or performance costs to make sure an element is perfectly rotated 15 degrees, and vertically aligned in every single browser. So long as the content is there and easily consumable, we should be spending our time investing in the future.

Speaking of the future, John Allsop, author of the Dao of Web Design, talked a lot about the future of web technologies and how to predict what’s next. He took us on a trip down memory lane and made some interesting predictions based on past events. Here are some of them:

• The browser will disappear: content is first order and the browser is second
• Platforms will disappear
• Screens are going to disappear
• Voice control is never going to be a strongly relied upon interaction
• Native Apps will disappear – In the U.S. the average user is currently installing 0 new apps per month.

Will holograms or some kind of 3D interface disrupt our screen-driven world? Will iOS and Android soon become relics of another time similar to Sega and Atari? We’ll have to wait and see… But I do know that pretty soon we’ll be moving away from this and as a creator of things on the web, I cannot be more excited.

Note: The above only covers a portion of the talks that took place at Smashing Barcelona. Every talk was top-notch and I wish I could have covered them all in this one blog post.