Vitaly Friedman: Real-life responsive web design

In one of the most entertaining talks of the Thursday evening, Vitaly Friedman, the colourful personality behind Smashing Magazine, gave a talk about club entrance rejection stories, ASCII art, teletext, scrum process and web performance. Oh, and he threw orange fluffy balls to the audience. Orange fluffy balls are always an indicator of a good talk.

photo © Sebastian Weiß
As the context of the conference was about typography, there was no better way to start a presentation about the digital and typography intersection than showing pieces of ASCII art with examples from so early as the 40s. Decades later, the experience from these illustrations would transfer to the TV screen with BBC’s introduction of teletext, a digital TV guide compiled of ASCII art on steroids. A question directed to the audience “who designed these complex pages?” drew a smile on their faces, as they empathised with these early heroes for the amount of labour they put, but also started to realise the underlying metaphor of switching medium contexts, from print to screen.

“We need a responsive system for that”

A transition with a lot of open challenges, the biggest of which is dealing with the vast array of available screen sizes. “We need a responsive system for that” said Vitaly and quickly jumped into listing available methods of building this system. Brad Frosts’s ever-present Atomic Design methodology, living style guide tools and the modern front end developer’s mantra “create a tiny bootstrap for every project” marched through the big projection.

Of course, these are tools and as with every craft, tools on their own mean nothing if they’re not deployed in the appropriate process. So, as with many other talks in TYPO, the Scrum methodology principles of putting interdisciplinary teams working together on an incremental part of the project, made their appearance in these slides too. A slide of a typical waterfall process of a designer handing designs to a front end developer, handing work to a back end developer, handing work to an editor, accompanied by the rhetorical question “where does responsive design fit in all this?” illustrated the point that the process of creating a digital product requires involvement of more than one principles at the same time.

photo © Sebastian Weiß

A little more technical slides followed, like creating smarter urls and taking care of performance issues in mobile, before my and, possibly most of the audience’s favourite part came. In this, to emphasise the importance of performance tweaking, Vitaly made an experiment of how much it would cost him to download an assets-heavy website, in a foreign country, using a mobile carrier’s roaming charges. A (maybe not) surprising example of vogue.co.uk leading to a 93€ charge in megabytes and data fees raised some laughs, but also concerns from a lot of the front end developers among the crowd.

As with every self respected responsive presentation, the Guardian website was referenced as a great example of a mobile-first website (it is!), from their stealth mobile relaunch strategy to lazy loading their assets to give priority to content. Some impressive performance benchmarks followed, but despite the talker’s double attempts to draw the needed awe sounds from the crowd most of them stared at the stacked books in front of him, probably wondering if they would be thrown upon them too.

Vitaly Friedman

Vitaly Friedman

Editor-in-chief / Smashing Magazine (Freiburg)

Vitaly Friedman loves beautiful content and does not give up easily. From Minsk in Belarus, he studied computer science and mathematics in Germany, discovered the passage a passion for typography, writing and design. After working as a freelance designer and developer for 6 years, he co-founded Smashing Magazine, a leading online magazine dedicated to design and web development. Vitaly is the author, co-author and editor of all Smashing books. He currently works as editor-in-chief of Smashing Magazine in the lovely city of Freiburg, Germany.

As the long talk was way overdue, the closing slide picturing the Voyager Golden Record was a bit rushed through, however the metaphor of creating performant, sustainable websites that would last five or ten years (which equal to an eternity in web years) was clear, understandable and to the point.

Text — Spiros Martzoukos