Responsive Design Weekly #102

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)

Headline

Srcset and sizes

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!

Advertising

$1.00 Web Hosting Exclusive Offer for Designers, Bloggers, and Developers!

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!

Articles

Responsive-Design Intranets with Apt Content Prioritization

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.

Content-out Layout

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.

Responsive images and the beauty of food

Cook Smarts have implemented a responsive design solution using ReSRC.it. This article reviews their approach.

12 websites that prove RWD and performance CAN play well together

A test for 12 popular websites built responsively.

Responsive Design Sameness

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.

Tutorials

flexbox in the real world

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.

Using Media Queries in JavaScript

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.

Throttle Bandwidth for Testing

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.

GulpJS + SASS + BrowserSync ftw

Plugins and Tools

imgLiquid.js

Get the benefits of background-size:cover; but for standard  tags with this jquery plugin

Responsive Layout Maker Pro

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

Build Right: Workshops for a better web

Two workshops from the clever folk over at Sparkbox — Build Responsively and Frontend Tooling. The site is pretty kickass too!

Responsive Day Out, Brighton

RDO is back again for another year and once again their keeping the costs down and the amazing up.

Responsive Design and Beyond Registration, Chattanooga

Brad Frost and Aaron Gustafson are leading the troups through this existing workshop series. Limited to only 25 seats.

Mobile Viewports workshop, San Francisco (and elsewhere)

CodePen of the Week

Google Charts responsive

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.

Lastly

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 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>