Posts about Design

Jeremy Keith got a little hardboiled yesterday. I particularly like this paragraph that echoes everything I’ve been saying for years about setting wrong expectations:

Loz Gray reflects on his eighteen-months working with the Guardian on their responsive site. There is so much experience here to learn from.

This post is an extract from my chapter in Smashing Book 3, titled ‘Designing Atoms and Elements’ written in March 2012.

Has a client ever said to you:

“I don’t like the design”?

I hope you enjoyed yesterday’s new, Madness-inspired home page header. We certainly enjoyed making it.

Jordan Moore (who wears rattlesnake skin shoes) on how to give users the option to “Toggle a Responsive Design On and Off”:

If you listen to Unfinished Business, you’ll know that I’m a big, big fan of Hammer For Mac, the app its developers say lets you create HTML builds & templates quicker, more efficiently & more conveniently. Hammer works for us because these days we mostly deliver static HTML and CSS templates, instead of static visuals, and we rarely develop complete sites.

I’d always admired the work of, and the people behind the Web Standards Project. What they had achieved in only a few short years in bringing browser vendors and tool authors together behind open standards was nothing short of magnificent, so when I was asked to join the project on March 31st 2005 it was an ambition fulfilled.

Two great reads this week, on connected subjects:

Two things about the iPad mini as I’ve owned one since Friday:

You might think — because all the talk at the moment is about seven inch tablets, in particular the iPad mini vs Google’s Nexus 7 vs Amazon’s Kindle Fire HD — that a seven inch tablet was a seven inch tablet was a… Right? Wrong.

I spent a couple of hours this afternoon upgrading this site’s iOS ‘Add to Home Screen’ icons and startup screen images.

Thibaut Sailly added an extra dimension to the three-lines responsive navigation icon discussion by suggesting that the three horizontal lines could represent a gesture.

I’m glad that the three-lines icon I suggested first, back in March is now being established as a sort of standard.

There’s been a lot written about device testing over the last year. Jeremy instigating open device testing labs has rightly generated a lot of column inches like Smashing Magazine’s Establishing An Open Device Lab. However, I think we need to be clear just what we mean by testing.

Thank-you to everyone who tweeted and emailed about the site. The reaction was overwhelmingly positive. More than I’d hoped for. And I’d hoped for a lot. Some of the comments came with bugs I need to fix and suggestions for improving the site and its performance overall. I’m really grateful for that. A little bit of follow up from yesterday’s site launch.

If you’re reading this in anything other than a browser, open Chrome, Safari or Firefox (if that’s your thing,) because I’ve designed a new website for Stuff & Nonsense.

In the later part of last year, my good friend and colleague David Roessli and I started a new project together — to redesign ISO, the International Organization for Standardization. I wrote about it a little in November 2011.

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

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.

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.

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.

This year’s been one of my busiest for speaking, teaching and designing for clients. You might not be able to tell that though, because when I deconstructed this site a few months ago, my portfolio was one of the things that didn’t find its way back. I’ll rectify that in the new year, but in the meantime I wanted to share some of the projects I’ve been working on, starting with this — a redesign for ISO, the International Organization for Standardization.

After pushing my redesign live yesterday, I’ve been asked a few times about why I pulled respond.js (and with it, CSS3 Media Query support for older versions on Internet Explorer) from the new site.

I’ve been wanting to create a new look for Stuff & Nonsense for a good, long while, but I felt daunted by how much work I imagined there’d be for a redesign. My work diary is so full that I couldn’t see the time I thought I needed, so the site stagnated and over the last few months I couldn’t bear to look at it. Then a few weeks ago, Elliot spontaneously redesigned his site and inspired me to follow suit.