Responsive Design Weekly #23

Welcome to the Responsive Design Weekly!

So lets just jump straight into this weeks newsletter with a link off to the presentation notes from Retrofitting Websites with Responsive Design with Ben Callahan. I was hoping that Ben would make it over to Australia for a workshop at this years Web Directions South, but unfortunately he is not. It’s not all bad news though because instead I’m off to Mark Boultons day of Grids!  WOOT.

Righteo then, lets get started!


Introducing Foundation 3.1, Now with HTML Templates! by ZURB

It seems the guys over at Zurb have been working super hard and have released Foundation 3.1. They’ve improved some of the documentation around the sliders and modal windows, upgraded to jquery 1.8.1, provided a HTML template to get your project up and running even faster plus more awesome features with responsive navigation features.  BAM!

Smashing Conference via Brad Frost

Brad’s been hanging around the Smashing Conference and doing a pretty good job at overviewing the talks. Check out his takes on Andy Clarke, Mark Boulton, Nicole Sullivan, Jeremy Keith and many many more.


What’s Your Vertical?

Looking at responsive breakpoints and the fact that we now have to deal with shorter viewports (i.e. the width has increased, but the height remains the same).

Rundown of Handling Flexible Media

We love Chris, well at least I do, over here and here is another reason why. In this post Chris takes us through a few real world solutions to help us work with responsive media including images, vides and the often non-considered audio

iPhone 5 and iOS 6 for HTML5 developers, a big step forward

With the release of the ios6 this week following the iphone 5 announcement from last week there are a few things we can now do to target special features. The two that are exciting for me is being able to access the web inspector to see what’s happening and targeting the file input type for images and video.

Responsive Measure: A jQuery plugin for responsive typography

Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.

Why Your Responsive Design Depends on Content 

A close look at what travel Michigan has done with their new design. The author believes that they should have trimmed some fat when it comes to the smaller viewports, whereas this is brought up as a positive in the comments. Overall the content should be reviewed during the project and if you believe it isn’t suitable for the smaller/mobile devices, then what makes it suitable for the larger viewports

How Responsive Web Design Could Become an Alternative for Mobile Websites?

Will responsive design take the place of a mobile specific website?  Of course! But not just yet. Don’t get me wrong, I love the responsive bandwagon…. hell i’m up here riding shotgun.. but for companies that can afford two builds and maintaining two sets of content you are better with a mobile specific site (but dang, only just).

The Broken Design Process 

There is a rift between the old way we used to design websites and how we now do it in a responsive process. This article discusses the differing workflow processes you need to begin to think about.

Responsive Web Development as a Standard, Step-by-Step

In this article One Extra Pixel go over how more of us can include responsive coding as a new standard in web development in order to push forward the next era of the web.

Going Responsive: How UC San Diego Did It

Follow the story of how the University of San Diego went from 22 mobile apps to a responsive designs, a great overview for anyone in education.

CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS

A great way to include the elipses on text that overflows using pure CSS. You know it’s a good solution when Chris Coyier is the first to comment.

What Content Marketers Need to Know about Responsive Web Design

This is the new way of the web. You won’t have to manage multiple versions of your site in most cases. Responsive web design means you can write your content and publish once. No more keeping up with a mobile version of a site.

Resources, Tools & Tutorials


Following up from last weeks excellent article on vertical responsiveness, Bearded have shared their very own responsive grid on GitHub. Jolly good show chaps!

Respondu 0.0.4

Respondu version 0.0.4, a responsive image poly fill solution that piggy backs on the noscript idea using a hack to extract the noscript content cross-browser, has been released. This is unlike the solution from Filament Groups Scott Jehl. Worth checking out..

Full Screen Responsive jQuery Image and Content Slider:RSlider

RSlider is a full screen responsive image and content slider, with a nice and simple design it adjusted automatically to the width of your browser screen.

Fresco – A Beautiful Responsive Lightbox

There has been a lot of repsonsive sliders but not many responsive lightboxes. Fresco JS does just that. It is strange though that the website itself is not responsive.

Responsive jQuery Masonry Tutorial

This tutorial runs through how you would get jQuery Masonary working. I think it’s a little bit on the cheaters side of responsive design, but hey if it’s the right tool for the job then go crazy.

New sites & Inspiration

I know that I said this week I was going to take a closer look at the United Pixelworkers new site because they’ve done some great stuff with Shopify….. but I haven’t. Soz. The good side of that is that I’ve been spending a lot of my spare time with my awesome designer working on and coming up with a new newsletter layout.  Want to see it? Check it out and let us know what you think.

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…

Before we head off for the week I wanted to applaud the work of the Canadian Government for putting their Web Experience Toolkit up on GitHub for everyone to enjoy.

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>