Responsive Design Weekly #30

Welcome to another week of responsive goodness.

A few weeks ago I attended the Web Directions South conference. If you have ever attended a conference you probably know the feeling of leaving with a renewed joy for the web industry and where it is heading, excited about all the possibilities that lay at your feet (or finger tips in this case).  You will also know that reality quickly smacks you in the face when you get back to work as the mundane day to day client work resumes and you see those ideals and inspirations fall by the way side.

All is not lost.

Last night I presented an overview of what I learned from the web directions conference, and in preparing the presentation I once again found that feeling of inspiration and excitement.

So why am I bringing it up now?

The conference focussed on increased mobile device usage, content strategy, and of course responsive design. What it also focussed on during the keynotes/big-picture is that we need to stop thinking about what is coming in the future. We have the tools of the future today, the future is now! We need to use these tools and capabilities to solve the boring and mundane problems that we face… the problems that plague us in our day to day working lives.

As you look through this weeks list of links imagine how these ideas, tips, tutorials, and implementations can fit into the site you’re working on, or perhaps how you would solve the problem/implementation differently.  If you learn anything from the result then I urge you to share it with the community through a CodePen or a blog post of your own.

Find a problem, build a solution, share your pain.

Alright enough of that now, lets get on with the links.


Responsive Navigation: Optimizing for Touch Across Devices 

Luke Wroblewski and Jason Weaver take a look at a series of touch screen devices ranging from 4″ smart phones up to 13.3″ touch screen tablet/laptops.  They divide the navigation techniques into Split Screen Navigation, Multi-Level Bottom Navigation, Split Screen Navigation with a background, and a Single Row.  They also take a closer look at the easy/okay/hard touch areas across all of the devices.  As usual, smashed it!

New Rule: Every Desktop Design Has To Go Finger-Friendly
It seems that Luke and Josh were together in looking at the touch capabilities of larger devices.
“A whole new category of touch devices is flooding the consumer market in coordination with the release of Windows 8: touchscreen laptops and tablet/keyboard combos. These new hybrid combinations of touch and keyboard create a new ergonomic environment… and fresh demands on designers.”


What We’ve Learned About Responsive Design 
A great article from the guys over at NewFangled web developers covering everything they’ve learned about responsive design during their first projects. They cover mobile first, navigation, slideshows…. everything that you would expect to find in a project really.

Bringing Responsiveness to the App World
The very first responsive theme that I bought was the IA responsive wordpress theme. Now it appears they’re extending their responsiveness into the IA Writer App itself.

The CSS physical unit problem
Details around why the ipad mini is causing a level of angst with front end and back end developers alike.

Breaking Down the Responsive ReadWrite Redesign
A break down of the implementation of ReadWrite redesign from the guys that brought us Zurb Foundation.
Examining The Next Web’s Latest Redesign
Zurb review The Next Web responsive redesign through their Verify testing tool. Overall it was a glowing review but they did make a few suggestions.

Two things about the iPad mini
Andy Clarke takes a swipe at the ipad mini (not in a bad way, well not all in a bad way)

RICG presents to HTML Working Group on Vimeo
During W3C’s 2012 TPAC, Marcos Caceres and Yoav Weiss presented the picture element, as well as the RICG’s use cases and requirements, to the HTML Working Group.

Responsive images use cases on Vimeo
During W3C’s 2012 TPAC, Marcos Caceres and Odin Hørthe Omdal got together to discuss how browsers can help solve the responsive images problem.

Mobile viewport update
Another one from Peter-Paul Koch this week, this one from a couple of weeks ago. in this post he covers
“visual viewport is the part of the site the user is currently seeing, and its dimensions are reported in window.innerWidth/Height. These properties also reflect zooming. Currently there are only five browsers that do not handle this correctly: Android 2, Palm, UC, Firefox, and IE9. Android 3+ and IE10 get it right.”

This Is An Updated Website.
Brad Frost has rolled out a redesign on his site and as you would expect it’s very mobile first and responsive. In this post he talks through the redesign process explaining how he came to decide upon the site elements as he went. Great use of vertical media queries as well! The best thing about the redesign, I think, is that Brad has focussed on the next big challenge of RWD… the performance/speed.

UI17: Building Adaptive Designs Now
In his Building Adaptive Designs Now talk at User Interface 17 in Boston, MA Aaron Gustafson outlined the importance of progressive enhancement in Web development. Here are LukeW’s notes from his talk.


Tools, Tutorials, & Meetups


Gamma Gallery – A Responsive Image Gallery Experiment
Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.

jResize Plugin, for one window responsive development
jResize is a responsive web development tool, built in jQuery to assist the workflow of developers on responsive projects. There are various tools for responsive development, iframes at different widths embedded in the page, and the tedious resizing of the browser. So here’s a different approach which grabs all your HTML, and resizes it inside the browser when you click the width you want. It’s dead simple.

Palm Reader — What media queries can my device see right now?
I thought this was worth another mention with all the hoo-hah around targeting the ipad mini through media queries (or inability to). Jordan Moore created this page which shows all the media query tests, with the darker ones are currently active on the device you are using.


responsive bounce in/out navigation
Stu Robson is back again with a great example of a bouncing navigation.

Off Canvas Menu with CSS :target
A really cool implementation of an off canvas menu using the :target CSS method. Turns out it’s rather impractical at the moment (IE9+ for target) but another example of people building awesome stuff.

How to Build a WordPress Theme with Twitter Bootstrap
Follow the path along to enlightenment….. or at least follow this path to find our how to build a wordpress theme with twitter bootstrap.


Chrome Mobile Office Hours with Brad Frost
Next Tuesday Brad is joining the Chrome team and will be talking about mobile and more importantly, speaking about responsive design.

Real-time Websockets, Mobile & Responsive; a Developers Boot Camp
New York is up and running again and it’s time for more meetups. Check out the two upcoming meetups organised by RWD NYC.

New sites & Inspiration

Skinny Ties is our feature site of the week thanks mainly to this great case study from Gravity Department

Seeing as we were going with one ecommerce site then why not go with another as well.  This knife store is another great example of responsive design, check out how the different search filter options are configured.

Wrapping up…

Well that’s all for this week. Congratulations to all those that voted Obama and commiserations for Romney. I guess this settles the argument about responsive vs mobile specific ;)

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>