Responsive Design Weekly #80

RWD Aquent University

Hello and welcome to another responsive design weekly email.

This week you will notice that this is hitting your inboxes a little later than usual. Apologies for that. The past two days I’ve been tied up with the SquizFB13 European User Summit where I did a talk on how to update your website without making any changes to it all.  This is being turned into a checklist to follow which I will share with you all next week.

We’ve got a few feature articles this week and a preview of the responsive interview with Steven Bradley from vanseo design, while the image this week comes from a hub of information on Responsive Design. This has given me an appropriate kick up the backside to finally finish my own version of this off.

Next week we’ll be back to the usual time and schedule.

Sponsor

eBook: jQuery Trickshots (100 advanced techniques)

This easy-to-follow eBook, jQuery Trickshots  by Martin Angelov, offers 100 advanced techniques for using jQuery. It’s a powerful resource that comes at a ridiculously low price. Yep, for less than the price of a movie ticket, you can learn how to master 100 jQuery techniques. No trick there; just 100 pure treats!

Cool Design Jobs - Get Hired!

Articles

Breaking Development: Prototyping Style

Ben Callahan shares how static drawing tools and browser prototyping can work together in a responsive design process for the Web (via @lukew).

comparison of picture and src-n

Wilto (Matt Wilcox) gives us a side by side comparison of the responsive image solution.

a responsive image solution 

A great server side solution that will return a responsive image based on the variables passed through as a part of the query string. If used along side Scott Jehl’s picturefill you could have a nice little all round solution.

Outlook: Your Best Worst Enemy for Responsive Emails

Emails are a great way to reach out to your audience (case in point). Just like browsers, each mail client will render your emails in a different way, and just like older browsers most of the visits and problems come from a Microsoft variety (although they’re helpind lead the way these days).

Art directed responsive images


Interview

This week Stephen Bradbury (from vanseo design) also published the interview he was so kind to give to us. Steven was a part of our e-book interviewees and you can read the first part of his interview here…

What was the best implementation of responsive web design you saw in 2013 and why?

This is a hard question for me to answer. I always have a hard time responding to questions about my favorite or what I think best. I don’t think there is such a thing as either. When I see a site I like for any reason, I’ll pause a moment and think about why I like it. Most of the time I’ll then move on to something else. Sometimes I’ll grab a screenshot or copy the URL. I never remember when I saw them and I resize my browser a lot less than you might think to test how responsive the page is.

However here are a few sites I like in part because of something they do responsively. They didn’t necessarily get created in 2013 or come to my attention in 2013. These first 2 sites I like for the same reasons

Both are responsive and neither does all sorts of fancy rearranging of their layout. Both are essentially single column layouts regardless of the device they’re seen in. They’re not typically what you think of when you think responsive, but I like both because of their simplicity. Neither site needs to grow past a single column and so a new layout isn’t forced just because the size of the browser can accommodate more. Sometimes I think designers (myself included) like to do something not because we should, but because we can.

Even more than the simplicity of both sites, I like the attention to detail in the type. Resize your browser and notice how the size of the type changes.

Information Architects has a great post about responsive typography and how the ideal font size depends on the viewers reading distance. We tend to hold our phones closer when reading so the font size of both sites is smaller at phone sizes. You don’t see a lot of responsive sites focusing on details like this. Some clearly do, but I think it’s still the exception rather than the rule.

When I come across a responsive site I like, it’s often not the whole site that attracts me, but specifically how it does one thing. That’s the case with David Bushell’s site. The site itself is great and David does a good job with responsive design in general. Why I like it though is the navigation. David implemented an off-canvas navigation pattern and at the time I came across his site I was looking to understand how to code off-canvas navigation. He wrote a tutorial for Smashing Magazine  showing how he built it. I particularly like the final example from the article that uses transitions and transforms to bring the menu into place……….

Read more about what Steven Bradley had to say about responsive design.


Jobs

Both of our jobs this week come from nextGen based in Nottingham.

We are a small team, running a global digital health business helping people improve their risk of developing key health disease states, through the use of an engaging online and  mobile web based health club environment. Based in the centre of Nottingham, we are looking for a top class, commercially experienced css/javascript/php coder who wants to help us unlock people’s lives for the

better.

  • Back End Developer nextGen
  • Front End Developer nextGen

For more information email nigel.ingham@roadtohealthgroup.com

Are you hiring? Get in touch and run an ad through the newsletter (free of charge, first in best dressed).


That’s all for this week, a quick thanks to Noah for helping me out this 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>