Responsive Design Weekly #85

CSS Zen Garden entry by Trent Walton

Hello and welcome to another week of responsive design goodness. This weeks headlines are being replaced by an extended introduction as I cover off some of my favourite parts of the HandHeld Conference today.

Today I spent the day in Cardiff attending the HandHeld Conference in the beautiful Wales Millennium Centre.  The venue was huge and seated some 1200 attendee’s this year, 150 of which were students that had their way paid by Shopify.  Go Shopify!

I’ve written up a overview of the conference that I’ll post in next weeks newsletter (I like to let the talks float around in my mind for a while), but before we get into this weeks links I wanted to touch of a few points from some of my favourite sessions.

Jeremy Keith talked about The Long Web. He challenged us to focus on the URL first, making it intelligent and hackable so that it might be used as an API. This should mean that we should only deliver the content that matters to the user and treat secondary content, such as navigation, as additions. This means loading the secondary stuffbelow the content even in the markup, something that I’m going to try out with the responsive site to see how it works in practice.

Mark Boulton talked about responsive design specifically, but not so much the technical approach and instead the responsive design process. I love Marks’ speaking style and this was no exception. He talked about the Eiger mountain north face and how many years ago a climber called Andreas Hinterstoisser traversed an incredibly treacherous path of the mountain, leaving behind the ropes so that other climbers were able to more easily and safely climb the mountain in years to come. This is essentially what we are doing with responsive design today, both in our technical and workflow approach. We’re breaking new ground. What we do now will leave a legacy for designers and developers in the future.

Andy Clarke mentioned that Responsive design is a problem for everyone. It has made us look at why the process of client participation is broken, and amplified every issue we have in both our workflow as well as our client relationship. Andy talked about improving the communication with the client, and said we should never, ever, show a static image of a design to the client. Instead the best thing you can do is show them a useable prototype they can hold in their hand. They can feel it.

I’m not even going to get into Jeffrey Zeldman’s talk (which was my favourite) but I’m sure you can see that Craig and Amy did a stellar job organising a fantastic lineup this year and nailing a brilliant conference.

Before we get into the links I wanted to point out that this weeks feature image comes from a Trent Walton rendition of the CSS Zen Garden. Beautiful work.

Links!

Sponsor

10 One-Page Bootstrap Themes from DX Themes ($1 each!)

Cool Design Jobs - Get Hired!10 high-quality, professional Twitter Bootstrap themes for your website. Specifically, this offer includes 9 single-page HTML5 templates and 1 single-page WordPress portfolio theme. All 10 are built on the highly popular and easy-to-customize Twitter Bootstrap framework and with a responsive design. See the themes

Articles

WVU Research responsive redesign, web performance optimization and more…

A really cool case study into Chitra’s experience building the WVU Research website. He goes into debunking some myths and explains his workflow and process.

Media query/RWD/viewport survey results

Last week I invited you to complete an online survey about RWD, this week @ppk has delivered the results.

Behind Mailchimp’s Responsive Redesign

Luke Wroblewski covers Federico Holgado’s talk on Mailchimps approach to redesigning their app responsively. The main task was not to break anyones workflows, which I think they did a great job! I’ve only had one issue since the redesign and that has to do with the subscription email notifications and not the site itself.

Top 5 Tips for Making Fast RWD Sites

Guy is always pushing for faster websites so he’s prepared five tips for you to ensure your site is lightning fast!

Simplified Picture Element

The Next Big Thing: Responsive Icons

Responsive Design: A Critical Piece of User Experience

Scope Components, Not Pages

Proportionally-perfect Design

Responsive Web Design at DevCamp


Tools

Type Scale – A Visual Calculator

Help designers and front-end devs visualize and choose the right type scale for their projects.

Chopstick

Chopstick is a light-weight modular SCSS toolkit for responsive web design. It’s built in a modular way so you can comment or uncomment just the bits you like. You can choose to just use the mixins and variables, or use the entire modular boilerplate system

Video

Putting Flexbox into practice

In this video Zoe explainswhen to use flexbox, what the browser-specific variants are, and how to use it to build responsive multi-column page layouts without the headaches of todays techniques.

CodePens

Responsive Employee or Team Gallery

This is a nice little responsive image gallery. My only suggestion would be at the smaller devices it’s better to move the main image above the thumbnails rather then below, or once you touch a face it should scroll you to the main image below.

RWD SVG Drawing

Using last weeks feature on the Polygon approach to drawing SVG’s I’ve created one for our own logo.


Finally

That’s all for this week.  I’m knackered after a big day at the conference.  It was great to catch up with a few of our previous interviewee’s and meet some potential new ones too.

Thank you to those that sent through links to your own work last week, as always if you’ve written an article built a tool make sure you reply to this email or shoot me a tweet and let me know.

See you next week!

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>