Responsive Design Weekly #87

Hello and welcome to responsive design weekly #87!

This week we’re going to take a look at two rising stars in the responsive image wars, check out a few happenings from An Event Apart and give you a bunch of tutorials to work on this week in the lead up to Christmas (I know you’re not all working hard… now is the time to learn new things!).

This weeks image comes from The Guardian and all the good work they’ve been doing over the past few months. Contrary to their work on fallbacks to IE8 Andy points out in one of the articles why he simply won’t include some of their fallbacks for his own sites.

In Noah news he hits 12 weeks on Saturday and has officially mastered a one eyebrow raised look which is usually directed at me while doing something stupid to try and get a smile. #winning.  Lets get on to the links.

Headlines

Web Site Optimization With Browser-Specific Image Formats

Nicholas Doyle takes a really in-depth look at two new image formats that promise to help with a solution to responsive images, WebP and JPEG XR.

Sponsor

The Happy Cog Way

A series of eight instructional courses highlighting Happy Cog’s methods and best practices from prototyping to design, front-end development to site deployment. Each course includes video instruction, a full transcript, supplemental materials, and a roundtable discussion with members of the Happy Cog team. Learn more and get your copy: happycog.com/way

Cool Design Jobs - Get Hired!

Articles

The top 25 responsive design tools

I don’t normally do “Top n” list articles but I have included this for two reasons. 1: because it was produced by Brad Frost and he knows a thing or two about the web and especially RWD, and 2: because we’re featured at #3. Woo hoo, self promotion!

The Guardian’s take on Mobile-first Responsive Web Design and IE8

Andy Clarke takes a look at the guardians issues with rwd and older ie versions and explains why he (intentionally) ignores all of them..

Mobile viewports overview

Mobile viewports in table form.

Universal Typography

Typography is a major part of the web, and therefore responsive design. In this presentation Tim Brown shares some rules for setting type.

Preprocessing is for Everybody

Preprocessing is such an important part of improving your responsive workflow, yet for many people it’s something they shy away from because it’s not vanilla CSS. Most of the time that translates to “I’m really good at vanilla CSS and I’m scared to try something I might not initially be as good at”. I don’t mean to offend my vanilla CSS folk readers, but it is true for some. This overview of Chris Coyiers talk at An Event Apart should help kickstart you into at least trying it.

Browser-Sync: Sync Scrolls, Clicks, Forms And Edits In Multiple Browsers For Free

If you’re testing across multiple devices and haven’t ponied up for GhostLab yet then check out Browser-Sync, a free alternative.

60fps scrolling using pointer-events: none

This is great for desktop performance which all have pointers. But less useful for smaller touch screens.

Responsive Image Mapping

This technique looks at creating a responsive image map (RIM) that will define the size of the image used. This way the <img> tag remains the same but it uses a specified class name applied to the image, plus the RIM to determine the image to be loaded. To me this seems a little clunky, but it’s great to see more people throwing ideas around this difficult problem.


Tutorials

Grunt for People Who Think Things Like Grunt are Weird and Hard

Continuing with the great 24 Ways, Chris Coyier looks at getting started with Grunt for the more simple minded (I put myself in this category). While strictly not RWD, Grunt is a task manager that will run tasks specifically targeted to helping with RWD. Over xmas I’ll be putting together a Grunt RWD package for us to enjoy next year.

Five Steps to Building a Responsive Email With Ink

Zurb’s recently released zurb ink, a responsive html email framework. If you’re having issues getting started here’s a few simple steps to follow

The Responsive Hover Paradigm

Jen Lukas looks at how we can approach the traditional hover pattern in a responsive touch orientated world in this years 24 ways.

Imitating calc() Fallback or Fixed-Width Sidebar In Responsive Layout

A look at how the calc() feature can help with padding in responsive sites while still falling back gracefully for older browsers.

Resources

Overthrow

Overthrow is a framework-independent, overflow: auto polyfill for use in responsive design. It comes with a handy SideScroll which turns an overthrow into a nifty responsive carousel too.

Headroom.js

Headroom is a lightweight JS plugin that hides a normally fixed header when the user is scrolling down, and brings it back into view when you start to scroll up again. Very similar usage pattern to the address and search bar on iPhone iOS7.

<!– ResponsiveComments. –>

Not the comments I was hoping for on this one. I thought this was going to be an approach to responsive comments found at the end of an article or under a product or youtube video. Instead this is about <!– HTML Comments –> . I might be missing the point, but isn’t thins almost the same as just printing the HTML and using display:none;?  Don’t get me wrong, I really like the out-of-the-box thought that has gone into this, I just can’t see any practical use for it at the moment.

CodePen & GitHub Project of the Week

The Pen – Simple PX to EM3 Converter

This codepen of the week is a simple PX to EM convertor. Does what it says on the tin.

The Hub – guardian/frontend

Our github project of the week comes from the Guardian who are sharing their work on our feature image this week. Thanks Guardian!


Finally

That’s all for this week. I know that I promised to spam you all last week through social media channels but that’s just going to have to wait until the holidays. Dont’ forget to buy your significant others their xmas presents if that’s your thing. If you have a nerdy friend you should check out Jordan’s Web Design Holiday Gift Guide.

Thank you to those that sent through links to your own work last week, as always if you’ve written an article built a tool make sure you reply to this email or shoot me a tweet and let me know.

See you next week!

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>