Hi and welcome to responsive design weekly number 102.
This weeks feature site is Hip Hip Hooray. This is a beautiful site. The mobile interface is a joy to use and it contains some great transitions between the review and edit states for printing.
Before we get into the links I wanted to plug the IndieGoGo campaign to raise money to implement Picture Element into Blink. Yoav’s awesome and you should totally support him (and get yourself a bada55 tshirt in the process)
I usually put a long description about the headline, but today you’re just going to have to go look yourself because I simply can not do this justice. Must See! Brilliant!
Host up to 100 websites with (mt) Media Temple’s award winning 24/7/365 premium customer support. We’ll keep your site online so use Special Promo Code 1DOLLAR and sign up today!
Nielsen Norman Group take a look at two award winning intranets and how they used responsive design to improve usability across mobile and tablet devices.
Apart from the backing of different navigation menus across different viewports, which I disagree with, the rest of the article has sound advice.
Nathan Ford, one of the brains behind Grid Set App, delivers an overview of grids and explains how content layout based on dynamic ratios will improve your website.
Cook Smarts have implemented a responsive design solution using ReSRC.it. This article reviews their approach.
A test for 12 popular websites built responsively.
Stephen Hay, of Responsive Design Workflow book fame, put his two cents into the “why do all responsive sites look the same” debate.
While he agree’s that developers and designers need to work together to produce better results, Stephen doesn’t think this is the cause of the sameness. Instead he puts the blame back on ourselves across three areas.
The past few weeks we’ve had more and more flex-box related links. This week Sean covers implementation in the real world from the latest browsers all the way back to IE8.
This tutorial looks at including the window.matchMedia function to include breakpoints within your JS. While it’s not supported across all browsers it does have a pretty good coverage. Lucky for you they’ve included a polyfill to help out.
Jake details how you are able to throttle your internet connection when testing locally. This is great if you’re going to be using emulators on your super-fast broadband and want to ‘feel’ what it’s like on a slower data connection.
Plugins and Tools
Get the benefits of background-size:cover; but for standard tags with this jquery plugin
Visually design responsive layouts from the content out. We’re taking this for a test spin this week and will report back how it goes.
Workshops and Conferences
Two workshops from the clever folk over at Sparkbox — Build Responsively and Frontend Tooling. The site is pretty kickass too!
RDO is back again for another year and once again their keeping the costs down and the amazing up.
Brad Frost and Aaron Gustafson are leading the troups through this existing workshop series. Limited to only 25 seats.
CodePen of the Week
Google Charts paint when you load the page. Just incase you need them to repaint on an orientation change on a device, or if someone simply resizes their browser then this will ensure they’re still responsive.
Responsive Table A table that switches between a list for mobiles and a table for larger viewports.
That’s all for this week. This weeks podcast touched on a few tips on approaching typography responsively and will be up on the site in a few days, don’t forget to subscribe.
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.