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!
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!
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.
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).
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
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 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.
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
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).
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.
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.
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.
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.
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 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..
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.
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.
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 responsivedesign.is 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.
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 a
n 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.