Responsive Design Weekly #67

Responsive Design is

Welcome to another week of responsive goodness!  This week I’m throwing the soon to go live responsivedesign.is site back up as our feature site. After a few tweaks on the design and a lot more work finalising the content we’re going be launching the new site middle next month along with a few other specials to be released in early September.  Until then though, lets take a look at….

Headline

Client Relationships and the Multi-Device Web

Matt Griffin hits the nail on the head in this brilliant article explaining how we can improve communications with our new and existing clients in this brave new world.


Sponsor

Responsive email design tips, templates and tutorials

Did you know that 44% of all emails are opened on a mobile device? Take the pain out of creating responsive and mobile-friendly emails with dozens of examples, tricks, webinars, infographics and other resources. Get inspired and learn more.
Cool Design Jobs - Get Hired!


Articles

5 lessons from a responsive web design classroom

Learn some RWD lessons from Sam who has taught over 200 students over the past two years. Find out how she not only shifted their toolsets, but their whole way of thinking.

Breaking Development: Before the Media Query

Erik Runyon outlines the importance of performance in responsive Web design and some approaches to improving download speeds online (thanks to LukeW)

Page Speed is Only the Beginning

Another great overview from one of the great talks at the BD Conference (and thanks again to LukeW)

Does Flexbox Have a Performance Problem?

A follow up post by Chris from CSS Tricks looking at whether or not Flexbox had the performance problems posted a few weeks ago. Please test your own implementations and share the results so we can wee where the issues may lay.

When RWD goes bad

A look at the Curry’s responsive design and some bad design patterns with their navigation. It seems to be caused by a retrofit approach, something to keep in mind if you’re looking to do the same.

Want a Glass-Ready Site? Foundation’s Got You Covered

The team at Zurb, creators of Foundation, got their hands on a pair of Google Glasses. See just how their framework held up and plans to improve on the experience

How we built a fully responsive betting app

This case study from 14 Islands looks at how they approached the build, listing the troubles they faced and the tools and techniques they used to overcome their issues.
“Fully responsive web applications is not just a pipe dream anymore. With the right mindset, tools and processes it all becomes possible.”

Thoughts on Media Queries for Elements

This was written back in February but is an interesting look at extending CSS to provide the ability to write element queries.

Your Responsive Website Design Isn’t Mobile Enough

Looking past the design and at the content. This article argues that our former long tail content pages need to be re-addressed moving forward.

The 62.5% Solution?

While I hope that most of your are setting your font size correctly I think Tracy Rotton’s article shows that there’s still some people following this practice. She also has a few helpful Responsive Mixins which you can find down in the resources section of this weeks email.


Tools & Tutorials

TOOLS

I want to use

If you create a page using <insert feature>, that means that only xxx.xx% of mobile users can use it. This helpful tool uses “caniuse” as its datasource to show how many mobile users will be able to take advantage of your website features.

Pixel density tests

I came across this pixel density testing tool while researching element queries this week. Tyson Matanich has done a whole lot of awesome stuff for RWD, this is but one of them.

sass-responsive

Some responsive SASS mixins to get you going with RWD including breakpoints, hidpi and a nice fallback for using REM’s.

Off Screen Navs

Off screen navigation to the left of me, off screen contact form to the right, here I am stuck in the middle with content.

TUTORIALS

Pure: What, Why, & How?

A few weeks ago we featured Pure – the Yahoo baked responsive framework. This week TutsPlus steps through the process of creating a site with responsive forms, tables, menus and more.


Code Pen of the Week

Off Canvas Partial Touch Template

Using hammer.js and Flexbox Oliver Knoblich has come up with a new design pattern for an off canvas menu. Check it out, fork it, make it better.


That’s all we’ve got for this week, I hope you found one or two things that helped you out today, 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 $3.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=""> <strike> <strong>