Responsive Design Weekly #22

Welcome to the Responsive Design Weekly!

So lets just jump straight into this weeks newsletter with a link off to the presentation notes from Responsive Layouts with Zoe Gillenwater. I’ve got a sneaking suspicion as I read through my notes that they get a little more cryptic as the night wore on. I’m looking forward to Chris Coyiers notes which I started taking about 6:30am. OUCH.

Also for all of you that are going to run out and buy a new stretchy iphone… don’t forget to add this to your list of media queries (not that we recommend responsive designs based on device size…. kind of defeats the awesomeness)

/* iPhone 5 ———– */
only screen and (min-device-width : 320px)
and (max-device-width : 568px) {
/* Styles */

Righteo then, lets get started!


Responsive Web Design Patterns | This Is Responsive 

With a twang of jealously because I may or may not be 80% through something extremely similar, you should definitely check out Brad Frosts examples page. There are working examples of layouts, navigation, images, media, forms and modules. If there’s one thing you click on for this newsletter this should be it

A List Apart: Articles: Testing Websites in Game Console Browsers

I know that no one is going to be surprised that people access the web on devices other than their deskops. This is why you’re subscribed! What I would expect is for some of you to assume that people wouldn’t access the sites on a game console.

Fortunately for you the smart and talented Anna Debenham has written a brilliant overview on the use of game consoles acting as browsers.


CSS-Only Sticky Headers for Tables, Using ‘position: sticky’ 
What’s neat about this is that you get the effect of the static table headers by introducing a few lines of css. No jQuery, no weird css that breaks the semantic intent of the content, and no javascript handlers built off scroll events. It’s not ready for prime time just yet, but it’s worth keeping in mind as you take on new projects.

Opt-Out Responsive Design?
An interesting question that was posted to Chris Coyier about a “click here for full site” capabilities if your using responsive design. I remember coming across this when I was first getting into responsive design but can not find the link to a demo someone wrote up. If anyone knows feel free to tweet us @reswebdes.

Why Responsive Design Isn’t a Cure-All
A suitable title but a flawed view. Why is it here in this newsletter? Well I wanted to point out that we need to correct bad arguments for a mobile specific website. They definitely have their place, but not for a lot of the reasons mentioned in this article.

The road to responsive images | Feature | .net magazine 
After more than a year of discussion in the development community about the best way to handle responsive images, the W3C finally took a hand earlier this year, asking Mat Marquis from the Filament Group to write a specification. In this article, I will review the events leading up to that decision, review the aims of the specification, and examine some of the problems yet to be solved.

Does Creativity Suffer With Responsive Workflows? – Vanseo Design
Steven has responded one of the readers comments on a previous article on responsive workflows with this article. It’s a really good read but my favourite quote is “Creativity is not in the tools we use. It’s not in the processes we follow. And it’s not in the workflows we set up. Creativity is in us. Change the tool, the process, the workflow and human beings will still find a way to be creative.”

The obsession with responsive websites
Ben Howdle takes a step back from the hype of RWD and goes over a few issues. Big sites, attitude to non-responsive designs and the lack of design in responsive sites.

Breaking Down Media Queries for Responsive Web Design 
This is another classic “getting started” article. It’s a bit of a sales pitch at the end and we don’t necessarily recommend you buy the books, rather just have a look at the article.

The Retailer and the Responsive Design Revolution
Pinching and panning around a retailer’s eCommerce site just doesn’t cut it anymore. If consumers can’t navigate or make a purchase easily on their smartphone or iPad, they’ll get frustrated and abandon their shopping cart. In short, providing a below par user experience on any platform translates into lost opportunity and lost sales.


Resources, Tools & Tutorials

Big Menus, Small Screens: Responsive, Multi-Level Navigation
If you’ve ever worked on a responsive website, you’ve no doubt had to tackle one of the trickiest problems in this emerging field: navigation. Basic sites with single level navigation has pretty much been sorted out now, but when you come to two or three levels (or more…. but seriously who does IA like that?) it can be quite tricky.  Tutsplus have given us another way to approach this still unsolved task.

An wordpress theme for Content Lovers

Joomla Bootstrap Templates | Joomla v2.5 and v3.0 
jQuery accordian to tabs – jsFiddle 

Stu Robson is back again and this time with a solution to handle tabbed content from wide to narrow viewports.

stack menu 
This is a new way of looking at navigation for a stack of articles on a small screen.

jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point
For those of you that love that new sticky property I mentioned above, here’s a great post covering how to polyfill the feature.

Designing for Retina Display
Just in case the last couple of retina tutorials weren’t enough for you we’ve decided to throw in another one.

Off Canvas
Inspired by the observations of Luke Wroblewski, this Off Canvas layout demo has 3 panels that display differently depending on the viewport width. The idea here is to have the two supporting panels of navigation and sidebar content hidden just off-screen to the left and right for easy access on small/medium viewports. Off Canvas is a design pattern, not a plugin or framework.
Baseline.js is a simple jQuery plugin for restoring baselines thrown off by odd image sizes. Simply call the plugin like so, passing the height of your baseline as a variable. It even works on responsive designs!



Sass in the Wild: At Branch & Responsive E-commerce with Shopify
How Branch built their pattern and mixin library, including their grid mixins which helped them make the site responsive faster, how Branch uses icon fonts, some pitfalls to avoid with overusing @extend’s, and lots more.

Responsive Web Design Seminar | MPA
Join MPA for a half-day (4 hour workshop, lunch and cocktail mixer post workshop) session wherein industry experts from agencies, service providers, and thought leaders provide an in depth look at Responsive Design’s implementation considerations, costs, and returns for publishers.
While I was looking at this I checked out The Cut and was disappointed that the search is pushed all the way to the bottom of the page on small devices.  Anyone else find that annoying?

New sites & Inspiration

Treaty Centre
I only just saw this from one of @rwd’s tweets.  It’s a great little site that is perfect for a shopping center.

Next week we’re going to take a closer look at the United Pixelworkers new sitebecause they’ve done some great stuff with Shopify.

If you’ve just launched a site or are getting ready for a launch then send us a link to the site with a bit of information about the choices you made in the build and we’ll feature you in this section.

Wrapping up…

That’s all we’ve got for this week. We had an email from Mighty Deals a few days ago so I’m hoping to be able to bring some responsive design freebies or at least some cheapbies to you in the next few weeks. If you want to see anything in particular covered then make sure you get in touch.

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>