Responsive Design Weekly #86

Hello and welcome to responsive design weekly #86!

This week our responsive image is from Thrillworks who has recently been working with BlackBerry in creating a new responsive site for their WordPress BlackBerry Blog.  We’ve been lucky enough to get in touch with Arley McBlain, the lead front end dev on the project, to get the lowdown on some of the more interesting aspects of the build.Check out what he’s got to say.

Headlines

Surveying the Big Screen

A List Apart chimes in this month with a look away from mobile and how content can be rendered on the largest of screens. Mike Pick looks at a variety of approach examples and provides a great overview for each of the options.

The Business of Responsive Design

This was one of the talks I explained during my introduction to this newsletter last week, this one in particular was by Mark Boulton.

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

“View mode” approach to responsive web design

A really great article looking specifically at the difficult task of search and filters on mobile devices. I’m really excited to read this because it was only a few days ago that we came up with the same usage pattern while working on a complex search results layout.

Bootstrap 3.0.3 released

If Twitter Bootstrap is your thing and you’ve had some problems with bugs then this is your day. The latest release is primarily a bug fix release so check it out and see if this might solve some of your problems.

The Latest New York Times Web App Misses The Point Of Responsive Design

Remember when iPads came out and all the magazines released PDF versions of their print magazine and called them iPad Apps? Well it seems the NYT has done something similar here but worse – they’ve gone to the trouble of using HTML and media queries to do it.

Chrome DevTools for Mobile: Screencast and Emulation

Paul Irish introduces remote debugging and proper mobile emulation within Chrome.

The average web page has grown 151% in just three years

This doesn’t really surprise me, but the unfortunate thing is there is still an upwards trend. More than half the page size is due to images, so while you’re trying to keep page size down why don’t you forget about trimming another few characters from your CSS and just use one less JPG.

How Walmart.ca’s Responsive Redesign Boost Conversion by 20%

A great case study around increasing conversions and some of the issues that were faced during the year long process.


Tips

Tracking Events Responsively With The New Google Analytics

In this new section I wanted to try and catch some work arounds or tips and tricks that help you with your responsive design.

This one is about capturing the width of the viewport through Google Analytics. Basically GA will only track the device width. This is fine for tablet and phone because it’s rare (or is it even possible at all) to change the width of the browser other than full screen. With laptops and monitors though you can change the width based on your particular setup. This tip will allow you to track the width of the browser, rather than just the device.

Tutorials

How to use Foundation’s advanced features

If you’ve been using Foundation, or if you want to see what it’s capable, then this video is for you. This shows how to include tool tips and a carousel using the tools that come with Zurb’s Foundation.

SVG ICONS FTW

An in-depth look at creating SVG icons and applying CSS, filter effects and finally interactivity to the icons (they’re ALIVE)

CodePen of the Week

Animated SVG responsive clock

This pen has come from the tutorial above from Codrops and is a wonderful example about what is possible with a few lines of JS and some SVG.


Finally

That’s all for this week. I wanted to let you know that I’ve just enabled Social Pro on Mailchimp, so if you’ve got a Twitter/Facebook/LinkedIn account then I’ll be sending you an email to let you know about accounts/pages/groups that are associated with this weekly email that you might be interested in.

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.

Noah news this week is that he’s growing well and weighed in around 7kg at 11 weeks and he went to his first xmas party today (complete with a typically bad xmas outfit).  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>