Responsive Design Weekly #97

EF Tours Feature Site Preview

Hello again and happy Friday!

How was your week? Mine was exhausting but I alway love writing this newsletter to you on a Thursday evening because I know it’s almost the weekend (which means more Noah time).

I wanted to start off with a few corrections from last weeks newsletter:

  1. I’m sorry to Loz Gray for referring to “her” when I should have referred to “Him”. I blame my old flat mate Loz Greaves for that.
  2. Martin Wolf correctly pointed out that InstantClick.js didn’t remove the touch delay, instead if looks to preload the next page on hover or mouse down.

Phew, I feel better now. I wanted to say a big huge thank you to everyone that bought a RWD shirt through Cotton Bureau over the past 2 weeks, and those who couldn’t afford a shirt but shared it via Facebook and Twitter. We had a great response and there will be 82 that will be heading off to print. THANKS!

This weeks feature image comes to us from a longer time reader who emailed me a little while back.
I thought you might be interested in the website that we just launched: Student Tours and Educational Travel. We’re doing some neat RESS stuff on the site, and we’re working closely with design, content, video, and systems teams.

We’re still on track with our weekly podcast — this week it’s all about the humble navigation and some techniques around how to approach it on responsive sites.

That segways nicely into an article this week on the hamburger icon as well as a navigation plugin you can use… more on that further down. You can download the podcast, get it on itunes, or just subscribe to our own feed.

Righteo, lets get to those links.

Headlines

Climbing Mount Responsive

Jeremy covers off a recent trip to Germany for a 3 day responsive design workshop. During the workshop he found the real issues arose from the bigger picture stuff — how do you handle a transition from a large historic desktop site to a mobile first approach. To answer the question he posed three possible solutions, one of which is rebuild an m. site. Yes, that’s right, a mobile site. BUT, before you judge you should check out the other options and his reasons behind this approach. Smart guy.


Get a free responsive website—and code in any language.

Moboom is responsive design, simplified. Our responsive design studio + adaptive CMS now has a range of groundbreaking new features— like patent-pending server-side media queries, the ability to code in any language, and the fastest loading sites on the planet.

Try Moboom for free.
Moboom RWD Sites

Articles

Mobile First Responsive Design

Luke covers off Jason Grigsby’s talk on mobile first responsive design. Jason looks at 5 key areas that you should concentrate on including image sizes and conditional loading of content.

The Future of Responsive Images 

An overview of Mat Marquis walk through on responsive images. In his talk Mat covers all the options currently available and looks and some techniques you should be using today.

Mobile Menu AB Tested: Hamburger Not the Best Choice?

While I’m not exactly shocked that the word “Menu” performed better I’m glad someone has done the testing to back up our assumptions. Include the word if you can, but I think over time everyone will get used to the icon. I wonder if we had the same issue when using mail as an email icon… did people think they were going to get a letter if they clicked on it?

Responsive Design Frameworks: Just Because You Can, Should You?

Jen Kramer takes a detailed look at Bootstrap 3 and Foundation 5 and whether they’re worth using. Are these any different to the server side language frameworks we’ve grown to love because they make our lives easier?

Episode 15: Knowing Your Tools

An interesting interview with Ethan Marcotte during his recent trip over to Australia for the Respond Conference. Ethan talks about understanding your tools, how they approached the Boston Globe project for showcases by handing out different devices to see how it looks.

A Grunt workflow for the ‘gold’ standard

Responsive infographics workflow: the “datapic” 


Resources

Ridiculously Responsive Social Sharing Buttons

This is a great solution to social share buttons from the team at KNI Labs. Definitely something I’ll be including on our articles page over the weekend

Plugins

FlexNav

FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility.

Tools

tinytype 

This compatibility table shows the available default system fonts across a varity of mobile platforms. This can help deciding a font as an alternative to downloading a webfont to improve performance.

Viewporter

This tool allows you to test and resize your design to any viewport, or use your 1-6 keys to automatically resize it to a few presets (which are also customisable).

CONFERENCES

RWD Summit 2014 – April 1-April 3, 2014

RWDWEEKLY for 20% off any ticket

Artifact Conference 2014

Use the code RWDWEEKLY for $100 both of these conferences (Austin and Providence).

bemoresponsive

A very clever name for a very cool single day conference. Be More Respnosive is taking place in Baltimore and featuring a host of great speakers including Jeremy Keith, Karen McGrane and Estelle Weyl. It’s on 9th May so get your early bird today.


TIP OF THE WEEK: Responsive Navigation

This week the focus is on navigation options in responsive design. If you liked this then hit reply and let me know what you would like to hear more about next week.


Okay that’s it until next week, and if you get your responsive tshirts before next week please send me a twitter pic!

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>