Blogging and all that malarkey

A lot’s changed since I wrote the original ‘320 and Up’ — my ‘tiny screen first’ responsive web design boilerplate — one year ago.

A lot’s changed since I wrote the original ‘320 and Up’ — my ‘tiny screen first’ responsive web design boilerplate — one year ago.

It’s been almost three years since I launched, what most people thought of as the bat-shit crazy Universal Internet Explorer 6 CSS stylesheet.

I’ve been working on a small travel site over the last few weeks and came across an interesting responsive web design challenge.

If you’ve been using Twitter and the Twitter app for iPhone for a while, you’ll probably miss having access to your direct messages in the toolbar since Twitter replaced it with the ‘discover’ button (whatever that does.) Don’t worry, because some friends of mine who work at Twitter in San Francisco showed me a way to unlock a hidden power user mode that puts DMs back in the toolbar.

When I upgraded my phone to an iPhone 4S it instantly took over as my main camera. I use Camera+ and ProHDR, olloclip lens attachments and POPA and I couldn’t be happier with the results I get.

This week I was sat in a hotel in London and uploaded at photo to Instagram. It was a kangaroo I met a couple of weeks ago at a sanctuary near Brisbane.

It’s a half decent photo.

OMG! KANGAROOS ARE SOOO CUUUTE!

But posting the photo felt wrong.

I know plenty of people who post Instagram photos from weeks or even months back. But Instagram isn’t Flickr and photos on Instagram should be from today, or at a push from yesterday.

You know. Like insta(nt).

Anything else is a Delayagram^™.

You know those responsively designed sites where — on small screens like smartphones — navigation is either hidden or set at the bottom of a layout, then revealed when you click a button? Well, I think we need a standard ‘show navigation’ icon for that button in responsive web design.

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.

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.

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

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.

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

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.

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.)

“What have you bought this time?” she asked, handing me the heavy box that the courier had just handed her. I’m sure I looked surprised because, for once, I hadn’t ordered anything.

What did you think about …?

I’ve just come off stage at An Event Apart San Francisco where I delivered ‘Smoke Gets In Your Eyes’, my talk about CSS3 animations, for the last time. The talk uses a a mad, mad, mad, mad manimation as vehicle to explain CSS3 animations and encourage people to use them (and other emerging CSS properties) for more than for cool, edge case demonstrations. For everyone not at An Event Apart this year, I’ve uploaded my slides on Speaker Deck.