Blogging and all that Malarkey

Make starting with Bootstrap easier by starting with StyleBootstrap.

I guess if you’ve been following my tweets or Instagram photos, you’ll know that I’ve been in Australia presenting a series of ‘Fashionably flexible responsive web design’ workshops. I had the most amazing time in Australia and I want to say a huge thank-you to John and Maxine for helping me make it possible. I’d also like to thank everyone who attended for contributing to the discussion and sharing their experiences. I couldn’t have built a full day’s workshop without referencing the work of others. So my special thanks go to John Allsopp (again), Mark Boulton, Brad Frost, Jeremy Keith, Ethan Marcotte, Brian and Stephanie Rieger, Luke Wroblewski and all the designers and developers whose work I featured. With the Australian tour now over, I’ll be working on adapting the workshop’s content for a new video. More on that another day. But today I’m making available the slides from my Australian workshops on Speaker Deck. Of course slides without commentary and context are worth only so much. But hell, you just had to be there.

When we’re designing responsively, getting type sizes right can be tricky. On small screens especially, we need to make sure that passages of body text are comfortable to read and that we don’t set headings too large or with too much leading. Tools like Fireworks and Photoshop can’t cut it for responsive design — they’re bringing a knife to a gun fight — so I needed to find a way to decide on my type sizes before I start using Fireworks or Photoshop. So I made type reference files and uploaded them to a server (and now to GitHub.) There’s really not much to them. They contain only headings, paragraphs and small text, but of course you could expand them to include any number of different content types if you need to. I open them on all my test phones, e-readers and tablets. Because different typefaces need different treatments, I made type references for both serif (Georgia) and sans-serif (Helvetica) typefaces. The next time I start a project, I’ll likely hook up one to my Typekit account too, so that I can test my web fonts on real devices before (and during) a design. I’m sure that smarter people can improve the tools for a technique so I’ve posted my files up to GitHub (whatever that is.) Responsive type references on GitHub.

Mark Boulton: Gridset is a tool for making grids. It lets you create whatever type of grid you want: columnar, asymmetrical, ratio, compound, fixed, fluid, responsive and more. It serves multiple grids to your site based on breakpoints for different devices. Using it is as simple as embedding a link. Oh hell yeah!

Brad Frost wrote about Responsive Navigation Patterns, Alexis Fellenius Makrigianni followed up with his thoughts. Both mention a responsive design pattern that was the subject of much debate at this month’s series of Fashionably Flexible Responsive Design Workshops in Australia — transforming a navigation lists into a select menu using scripts like TinyNav.js at small screen sizes.

There’s barely a day at home when I don’t have music playing. Either (mostly) through an old (but good) set of Creative Labs speakers I connected to my iMac or (sometimes) through my Sony separates and a pair of fabulous B&W speakers on stands. When I’m on a plane or a train it’s a pair of Klipsch s4i in-ear headphones. But there are plenty of times when I’m traveling and staying in hotel rooms or rented apartments for a week or two at a time when I don’t want to listen through headphones. I don’t mean cranking it up for partying, just a little ambience. The speakers on my Macbook Air are acceptable, but I still carry my whole music collection on a fat old iPod Classic as my library’s bigger than my Air’s hard-drive and I don’t (yet) use iTunes Match. (If I ran rented rooms, I’d make sure that every one came with an iPod/iPhone speaker dock. (Come on hotel owners, they’re not expensive.) That leaves me with using portable external speakers of some sort or another.) For the last couple of years I’ve carried a little X-mini capsule speaker on longer trips. It’s small, light and OK, it’s never going to tick all the volume/quality boxes, but it makes a reasonable sound when my music doesn’t contain a lot of bass. Funnily enough, I’ve noticed that if I plonk the X-mini on a large, flat surface like a table, the sound improves. I’m no audiophile, so I guess it has to do with vibrations or something. That’s why, just before leaving for Australia on this six week trip, staying in rented apartments, I was interested in an offer from mobilefun.co.uk to test a travel speaker designed to use vibrations in just that way — a Pocket Boom Portable Vibration Speaker.

So I’m sitting in the studio, alone, this morning, listening to The Talk Show while I get my head clear for a day’s work, when the Mac behind me starts to talk (video below. How can this even happen?

It’s only three weeks until I’ll be flying down under to Australia to escape the British winter. While I’m there I’m hosting four Fashionably Flexible Responsive Web Design workshops — one in Perth, Melbourne, Sydney and Brisbane. Perth: February 14th Melbourne: February 17th Sydney: February 24th Brisbane: February 28th This Fashionably Flexible Responsive Web Design workshop’s completely new and I’m excited because as well as talking about hot responsive topics, I’m putting the focus of this workshop onto design. In particular we’ll cover how to make the design decisions that designers (and developers) need to make everyday in the responsive workflow: Designing from the content out Responsive typography Content or navigation first Adapting navigation When to apply layout Content inspired breakpoints Slide deck. (Work in progress) I’ve been evolving the format over the last few months at private events for NRK and Finn.no, both in Oslo, and if the reaction of those folks is anything to go by, Perth, Melbourne, Sydney and Brisbane will be a blast. “Thank you for a great day. It really inspired our developers and we’ve just rolled out the first of our responsive pages already. If our developers get this excited every time you’re, here I think we’ll need to have you come over every other month.” Espen Dalløkken — Finn, Oslo, Norway. For the next few weeks, I’ll be refining the workshop’s content some more and building some brand new boilerplates for attendees to take away. I hope I’ll see you there.

My Last.fm favourites I don’t use Last.fm socially, but I left it scrobbling so it could compile the soundtrack to my 2011.

I can’t quite believe that it’s been six years since Drew MacLellan first published 24 ways. Now ably assisted by a talented team of volunteers, Drew’s made his magazine a web designer’s stable read. I’ve had the honour of writing a little something for it every year. My contribution, There’s No Formula for Great Designs is out today. Andy Clarke re-examines the formula used to convert static to fluid grids, and describes how he adapts it within his own custom grids to maintain connectedness in designs across devices. Like great design, there’s a perfect Christmas out there somewhere, but there’s no formula for it. Every year, I agonise over what I write for 24 ways, because the overall quality of articles just keeps on getting better. My top pick of this year has to be Front-end Style Guides by Anna Debenham. 24 ways is a shining example of people volunteering their knowledge and time, giving back to our industry to help others. I’m proud to have contributed again. (I’ve gathered links to all my articles, including past writing for 24 ways, onto one new page.)