Responsive Design Weekly #82

fffunction

Hello and welcome to responsive design weekly #82

This week our feature image comes from the talented folk over at fffunction. They started out with an idea to build a single page history of their past years work and it slowly evolved into the website you see today. They kindly answered a few questions about their approach to the project which you can find in the articles below

Twitter was a buzz earlier in the week with updates from Artifact conference, and from everything I read was simply amazing. Unfortunately there aren’t any videos available but someone of the speakers have shared their slides below and we have featured them below.

Just before we get started I wanted to point out the marvellous response that has been had in raising money for @MollyDotCom. Molly has done wonders for our industry and if you would like to contribute please head to http://www.gofundme.com/HelpUsHelpMolly

Alright – Lets get linking

Headlines

Responsive design, screens, and shearing layers

Ethan Marcotte chimes in with his own post after Lukes post last week warning us that we shouldn’t rely on the viewport for our designs. Ethan argues that although we shouldn’t depend on that solely, it’s the best foundation from which to start

On Using Browser Viewports to Understand Screens

Lukes post last week generated Ethans post above, but has come back to clarify his thoughts on the subject as a result. I love a good conversation across a series of blog posts

Sponsor

Verb: 72-Font Super Family (the complete series)

There’s no better way to get your next project moving than with the awesome Verb font family.  Based on the sans-serif typeface, the Verb font family is a friendly and heart-warming font chock full of bold confidence and tons of energy. Not one to sit still for a moment, Verb includes four subfamilies: Regular, Condensed, Extra Condensed, and Compressed. Even more, each subfamily sports 9 different weights.
See the font

Cool Design Jobs - Get Hired!

Articles

Of viewports and screens, input modes and event handlers

Peter (quirks mode) has been doing a lot of research into viewports lately and because of the headline posts this week he’s decided to see if all that research could help make a better decision about the interface your working through

Over 40% of Emails are Opened on a Mobile Device

As time goes on and more of you are subscribing to our newsletter we’re seeing a very similar trend. We’re not quite at 40%, but it’s getting close. This article is an introduction to the next one from Zurb

Pattern Library

Mailchimp have created their own little pattern lab from their recent move to their responsive web app for sending newsletters just like this one.

Responsive Email: Building a Framework in a Template World

Email framework from Zurb. Isn’t it ironic that the developer of one of the largest web front end framework is looking at emails, while one of the largest email companies (Mailchimp) is looking at a front end framework

Sketch Notes

These sketch notes came across my laptop 3 times over the space of the week. They cover the Artifact Conference in its entirety, Brad Frosts RWD Workshop and the build responsively workshop from Spark Box (not to mention notes from most of the ShopTalk shows

Responsive HTML Emails: a Different Strategy

Responsive emails are difficult to get right…. much harder then getting your site sorted. Fog Creek have written about their email strategy

Rebuilding Fffunction

A year in review beautifully illustrated in this responsive site. Find out more about how they improved image loading, included canvas animations and tested across devices to avoid crashes

Responding to environmental lighting with CSS Media Queries Level 4

Jordan takes a look at the luminosity proposal for the next Media Query spec. This would provide you with the ability to “brighten” your design for a given screen state in the same way that you can change things like Instapaper from night to day for easier reading

Responsive Web Design

In this article Rachel talks about the design theory behind RWD rather than looking in the coding techniques

Killer Responsive Layouts With CSS Regions

Regions is something new for the CSS specification. Not all browsers have jumped on board just yet but this article provides us with some practical approaches as to how it might benefit a responsive layout in the future

It’s a Big Piece of Pie, It’s Amore: Introducing Pizza, Our Responsive Pie Charts

An introduction into how Foundation came up with their new pie charting tool


Tools & Plugins

Size Calculator

This is something that goes along with LukeW’s post last week looking at viewport and screen sizes. Identify the perceived size of a device easily by adjusting the size and distance from your subject

imazen/slimmage

Marc Stoecker sent me an email after last weeks newsletter with news of something he’s been working on

Pizza Pie Charts

This is a great responsive pie chart plugin for all of you that are using Foundation

Tutorials

Double breakpoint bug

Watch out how you’re coding your breakpoints to avoid doubling up on your rules and possibly overwriting the wrong one. This occurs when you mix min and max width queries

Automate Your Responsive Images With Mobify.js

A great indepth tutorial for serving responsive images using Mobify.js from Samashing Magazin

Transformer Tabs

Tabs are a typical layout pattern when trying to display multiple pieces of content within a single page location. Chris Coyier has come up with a way to do this responsively. YAY

Conditional Media Query Mixins

Chris takes a more in-depth look at using Sass mixins to improve your media queries workflow. Many of you will already be using the @include bp(medium) { /*styles*/}, but he extends it further allowing you to omit all media queries for non supporting browsers.

Presentations

Responsive Layouts Beyond the Sidebar

Jen Simmons recently gave this presentation at Artifact Conference and was kind enough to publish the slides. These are all HTML pages and most of them a clickable to some truly great resources

Responsive Typography

CodePen of the week

Responsive Accordian to Tabs

Here’s another application of the responsive tabs solution from Chris. Code Pens are so good at /showing/ how things are done.


Jobs

Senior UI Developer

The User Interface Development Department at Verndale is looking for an experienced and passionate UI Developer to help develop rich interactive web-based applications. You will be challenged to turn feature requirements and designs into highly interactive, accessible web applications that support the exchange of information between the application’s users and its back-end web databases.

Font End Developer

The role involves building full cycle of user experience and design optimisation, along with the development of new sites, microsites, intranets, internal applications, and identifying how you can add value to our, and our customers’, business.


Finally

Just before I pushed the button to send this weeks email I came across a tweet from Josh Clark sharing URL-CAP.  This awesome tool takes a screenshot of your site at 320px, 768px and 1440px and provides it for you in a png file format to download.  This was on the roadmap for Am I Responsive but to include the browser chrome around the images as you normally see it so I’m really excited to see someone else already half way there.  Very cool, check it out!

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.

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>