Posts about External links

In 2012, the iPad accounted for 94.64% of all tablet based traffic according to Chitika's network study.

That’s the one that got me.

Google’s pushing responsive web design in their most recent developer guidelines. Dig a little deeper for their “Why we recommend responsive design.”

Roger references me and Brad and suggests a better way to solve small screen navigation than the all too common select menu navigation pattern.

I like this a whole lot better.

Stephen feels the pain of CSS3 columns.

Useful for people who still use Firefox as their development browser.

320 and Up now includes Sass files (in both Sass and Scss formats) thanks to Sass superhero (and one of my favourite designers) Jina Bolton.

I’ve updated the project page.

Contribute to 320 and Up on Github or download the files.

The startup culture is similar to professional sports in that it requires a fleet of fresh-out-of-college kids to trade their lives and their health for the potential of short-term glory. “Old farts” are often excluded from that culture, not because we’re lousy coders but because we won’t put up with that shit.

Harry Roberts:

Loosely, the single responsibility principle states that every module or chunk of code (a function etc) should do one job well and one job only. The benefits of this are mainly in the way of maintainability and extensibility.

I didn’t know this approach had a name or think to look.

Jordan Moore (who has a name like a country singer:)

Say for example we want to present an article in the narrow single column view, but before the article appears in the stacking order we have: a header (containing site name etc), navigation, maybe even a banner advertisement, then the article. The heart of the page is buried beneath items that may be less important in this context. Rather than brutally hiding these items with a display:none property we can reorder them using another CSS property - flex box.

It takes something to make me sign in and blog on a Sunday, but this is good. Very good. Read the whole thing. Then study Jordan’s demo page. Brilliant.

Now this is handy. It adds viewport width and height as a :before pseudo element on the body to help you determine breakpoints for content-first responsive design. Here’s Matt’s test page with the debugger* enabled. Download the debugger from Github.

* Snort

Remember Matt Stow and his responsive retina images using CSS and a spacer PNG? (Now updated.) Well, Matt’s been at it again, this time with a solution to the image map problem in responsive design. Matt’s solution recalculates area coordinates to match the image size on load and window.resize. Clever. View the demo page or download the plugin from Github.

Honestly, I’ve been wanting to start hoarding candles, fire-lighters, tins of corned beef (it’s nice. Really.) and other things for a while. I know the collapse of civilisation is much more likely to come from a petrol strike these days, but hey. It’s a zombie survival map. My wife thinks I’m mad.

This came at the perfect time for me this week (thanks Chris), as one of the projects I’m working on required icon fonts. I chose Font Awesome because it works so well with Twitter’s Bootstrap and even comes with files for my beloved LESS.

More from Matt Stow. This one had gone clean out of my head. When I was in Sydney in February, Matt showed me a Fireworks extension he’d written for exporting responsive prototypes.

Now I use Fireworks almost every day — it’s my ‘go to’ design tool and so much more efficient than Photoshop for web designing — but I’ve never used it’s code output, not even for a ‘rough as a badger’s arse’ prototype, let alone anything I’d show to anyone. But Matt’s extension worked flawlessly when he showed it to me.

I’m going to try this and if Fireworks is your thing, test this out too and let’s compare notes.

Matt Stow emailed me from Sydney with a link to his solution to the responsive/retina images problem. It’s a clever workaround that uses CSS and a transparent spacer PNG. Matt’s interested in your feedback (and so am I) so try it out and let Matt know your thoughts via Twitter.

Brilliant.

Now, when will our politicians, in all parties, communicate with such clarity and honesty.

James Weiner, who works on the front end team for GOV.UK :

Furthermore, designing in-browser exposes mistaken assumptions at the earliest possible stage in a build. This means we fail quickly rather than expending effort on high fidelity mock-ups that were based on mistaken assumptions.

How happy am I to read this? Really happy.

Read it.

Cennydd Bowles:

Following a recipe won’t make you a great chef – it just means you can make a competent bolognese. Great chefs don’t need cookery books. They know their medium and their ingredients so well that they can find excellent combinations as they go.

I love this. And I would go further. If your design process is more process than design, take a step back and rethink it. You don’t need what people’s say or do to tell you how to make a great design. Listen to your gut.

Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context.

Another fabulous piece of work by James Mellerson a topic that’s been on my mind for longer than I can remember.

Inspired by the observations of Luke Wroblewski, this Off Canvas layout demo has 3 panels that display differently depending on the viewport width.

Really nice work by Jason Weaver.

I was pleased to add my thanks (and so was General Ursus.) Jeffrey Zeldman go ape!