Responsive Design Weekly #81

Mixd.co.uk

Hi there and welcome to responsive design weekly #81.

This week I started digging back into the responsive images issues because it came up during my day job as a Technical Consultant for a web agency who offers a full stack of services for clients (all the services plus we have four core product offerings).

Anyway, during one of the email chains we were looking at including a responsive image handling solution baked directly into the CMS itself, rendering the implementation on the front-end almost not required at all. Rather than creating the image varieties (covering off bandwidth, DPI and art direction requirements) on the server during the creation/upload of the image assets we began to look at performing these tasks during the browser request stage.

This is effectively the same as the Adaptive Images solution with a few more caveats thrown into the mix.

Are you battling with similar problems at work?  If so drop me a line (hit reply to this email) and lets share some ideas to see if we can come up with something that might help a wider audience. As part of this research I’m going to publish an article “Responsive Images – a recent roundup” which will be finished for next weeks newsletter.

This weeks responsive image comes from the creative fellows over at Mixd.co.uk.  They recently launched a new responsively designed website and asked if we were interested in taking a look.  Bear/Crap/Woods.  I fired off a few questions about the implementation which I’m happy to say they have shared with everyone to read (check out the article links)

If you’ve just launched a responsive site your proud of and think the other readers might be interested you should hit reply and tell me more about what you’ve done.

Alright then. Links.

Headlines

There were two responsive icon discussions that occurred this week.

The first of which was a follow up aimed at Mark Boulton to do some more work aroundhis SparkIcons article. I’ve included Sparklines in data-rich sites but this is something different and it will be interesting to see what else Mark has to say around this.

ResponsiveIcons.co.uk

The other responsive icon discussion came about from the new ResponsiveIcons.co.uk website.  The premise was that the icon became more high-fedlic (is that even a word) as the size of the viewport increased.

Responsive Icons

I loved the idea and wrote a follow up post investigating ways to improve the implementation (mainly from a performance point of view).

Responsive Icons with SVG

That has since been followed up and further discussions have continued around twitter and dribble.

SVG icons seem to be the future, or at least we’re backing them to be.  I recently backed a successful KickStarter project that is working on layered SVG icons that are interactive.  #Winning.

Sponsor

Responsive Interview Series E-Book

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 a ton too.

Support the newsletter & buy now

Cool Design Jobs - Get Hired!


Articles

Breaking Development Conference (@lukew’s notes)

Breaking Development: The Server Side of Responsive Web Design

Dave Olsen talked through how RESS can provide the benefits of both responsive Web design and server-side optimization.

Schedule & Slides Breaking Development Nashville 2013

If Luke’s coverage of the BD Conference wasn’t enough, this is the schedule with related slides attached for you to review.

UI Design and Layout with CSS Flexbox

In his presentation at Breaking Development in Nashville TN, Stephen Hay shared the latest information about Flexbox.

Atomic Design

Brad Frost talked about the benefits of design systems on the Web and shared some tools he’s created to help people work quickly with responsive design.

Responsive Web Design: Relying Too Much on Screen Size

Luke takes a look at screen sizes from a different point of view, pointing out that relying on this alone doesn’t give us the enough information to provide the perfect interface.

Responsive Design: Keeping our thick client skinny

A great post looking at the responsive development of ladders.com. They looked at the analytics, came from a mobile first approach and delivered a winning solution.

Selling Responsive Web Design To Clients

Sometimes it can be difficult describing RWD to clients, and even more so if they see a difference in price between RWD and non responsive. Here are a few things to keep in mind..

How Responsive Design Can Increase Your Conversion Rate

I love a good infographic, but that’s not exactly why I included the link this week. It goes along with a link to this google analytics dashboard that will show you how your current website traffic is broken into mobile and desktop. It’s by no means exhaustive but it’s a good starting point if you’re interested in what your users are doing.

Building Mixd.co.uk

I fired off a few questions about the implementation, here are there answers.


Tools

Owl Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Combine matching media queries with Grunt.js

One of the issues with preprocessing with media queries is the repeating of media queries throughout the final CSS file. While this isn’t really a problem because GZIP eats up all that extra kb, the guys from Building Blocks have created a Grunt task to collate all the queries together.

Tutorials

Learn Responsive Web Design for Free

Build a responsive website with Edge Reflow CC

CodePen of the week

This weeks code pen comes in the form of another tool. I’ve started creating example code pens for each of the responsive tools we feature on the site, this week it’s for Retina.JS.


Finally

For those of you that have visited responsivedesign.is in the past you may have noticed that the design is finally starting to take shape on the site.  There’s still a lot of content I need to revisit, more templates that need to be applied and some tweaks to the layout and interactions but I’m really happy with how it’s shaping up.  If you have any tips, comments or feedback I’d love to hear from you.

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.

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>