bossing around | Ruben Bos

Naconf: Trent Walton

We’re just back from Nottingham, for the New Adventures in Web Design Conference. One of the speakers we really wanted to see was Trent Walton. If you’re not familiar with Trent, his personal blog is a great showcase of both fonts and responsive design. He’s also well-known for his work for Lost World’s Fair, a website to show the capabilities of fonts and CSS3, working together with great designers like Jason Santa Maria and Frank Chimero.

To improve you have to break rules.

Trent pushed the possibilities of web design. In his great talk he explained how: to improve you have to break rules.

Pure CSS3 used for amazing titles

This accounts especially for the work he has done with fonts. To create these layouts, Trent had to add html, like loads of <spans> and classes to every character. To make this process easier, they created Lettering.js, a script that injects spans with classes around the characters. So you get something like<span class=”char1”>T</span> <span class=”char2”>H</span><span class=”char3”>I</span><span class=”char4”>S</span><span class=”char5”>!</span>. Semantic and codewise it’s crappy, but Trent’s tip: don’t think about compatibility but about what you want.

That might not be preferable, but because of examples like this, CSS3 changes like ::nth (to select child elements) get proposed or implemented faster. Pushing possibilities on the web forward.

Responsive Web Design

Trent also had his struggles with Responsive Web Design. According to Trent this is difficult to learn because it isn’t bolt-on, a new CSS3 trick can be implemented in projects, but to build responsive websites, you’ll have to completely change the way you work and think. From the start. And when going responsive, the flexible grids, fluid images and media queries are the ‘easiest part’. The difficult part: “can fine control of web type coexist with responsive web design?”.

FitText

In web design, we choose the size of fonts and placement of elements, to correspond with what we want to communicate. With responsive design, this is difficult because because you have several states. One website feels like 1000 PSD’s instead of one. “To think about the web responsively is to think in proportions instead of pixels”. To make text and video scalable, Trent’s company created FitText.js and FitVids.js.

To help you even more: Erskine Design, who also organised a great bowling event at Naconf, just launched Gridpak, a Responsive Grid generator. Elliot Jay Stocks tweeted after the event that he created a Photoshop grid for responsive web design.

This post was published on the Mangrove blog.