Responsive Design Weekly #74

Novni Responsive Design Layout

Hi there and welcome to another responsive design week! This weeks’ image comes from a recently launched site novni.com. Jack Roscoe wrote to us on G+ to let us know about this site he’s been working on. It’s amazing. Aside from the idea of the site itself, the responsiveness and performance from mobile to desktop is top class. To follow up I shot a few questions back to Jack to tell us more about the site and you can read all the answers in this weeks’ feature interview with Jack Roscoe.

Last week I added a bookmarklet that didn’t pass MailChimps allowed email content and subsequently sent out a link that did nothing. Sorry about that.  You can get the bookmarklet by heading to Am I Responsive and dragging it to your bookmarklet bar from there.  The bookmarklet has now become apart of my daily “I’ve just found a new site, is it responsive?” workflow now.

Before we get into this weeks links I’m happy to say that last Friday I managed to finally meet some of our most commonly featured authors in the newsletter. Aaron Gustafson, Brad Frost, and Luke Wroblewski were all over in the UK and at dConstruct, a conference organised by Jeremy Keith (another person frequently featured). It was awesome to finally say hello to them all in person, and thank them for all the amazing work they do and share.  Good people.

Alright, lets get into those links.

Headline

Notes on ‘It’s a Write/Read Mobile Web’

Although LukeW’s talk at the Smashing Conference was focussed on a Write/Read web it touched on a few important points. Many implementations of responsive design that I see seem to focus purely on how the content is going to be consumed, and less so on how we can contribute to that content. At the very least the contact forms and comment boxes on our sites should be an area we work on to make the interaction process (creating content) easier. At the other end of the scale look at the complex interactions of booking a flight on a mobile device and imagine a better interface that takes advantage of touch and GPS inputs that are readily available to us instead of relying on the mouse and keyboard controls that currently constrain our interfaces.

Responsive Images Meeting Notes

These are a great notes from Shane covering an entire days worth of discussions in Paris earlier this week. There’s sure to be a few concise blog posts following up, but there’s some great links contained within here. A big thank to RICG for putting it all together.

Sponsor

Get your 10% discount for the Frontend Brothers gig!

The Frontend Brothers is a mind blowing, no profit, friendly and relaxed front end conference in Bologna, Italy on the 20th of September. The band is composed by Paul Annett, Ben Hammerslay, Rachel Nabors, Bruce Lawson, Aaron Gustafson, Nishant Kothary, Marta Armada, Sebastian Golasch and Seb Lee-Delisle.

Do you need any other reason to join? With the discount code “youMeThemEverybody” the first 25 of you are getting a 10% off the ticket. Get it now!

Cool Design Jobs - Get Hired!

Articles

Smashing Conf: Responsive Web Design is Easy/Hard

In Dan Malls latest presentation he talks about how Easy responsive design is… oh and also how hard it can be. The link to the presentation is below in this email and it is well worth clicking through to pick up a few nuggets of information (my favourite was around taking phrases used project workshops and turning them into powerful visual hooks).

Smashing Conf: Real Life Responsive Design

Heard of The Guardian? Andy Hume talks about the real life approach to a large scale responsive site that already has a mobile version. Some great tips on a mobile first and performance.

Responsive Image Container

Yoav takes a really detailed look into an option he has put forward for a responsive image format rather than use a HTML markup solution. Is it perfect? Probably not, but please take look through and feedback on the good the bad and the ugly.

Responsive Navigation On Complex Websites

Navigation is one of the more difficult elements of a responsive design, especially if you’ve got an existing desktop site you’re trying to migrate. This smashing article takes a look at some complex examples and how they have overcome the issues.

Progressive Enhancement: It’s About the Content

Last week we headlined with some drama around progressive enhancement, this week Happy Cog’s Stephen Caver weighs in with his own thoughts.

Updates to CSS Grid Layout

The CSS Working Group have published an updated to the CSS Grid Layout Spec.

How we built the website for responsive.io

A few weeks ago we ran Responsive.io as a featured responsive image resource. This week we came across (actually they emailed me) their blog article about how they approached the build of the site. I was excited to see that they started off inside IA Writer getting the most important parts right, the content, before creating the content in the browser and applying the design from there.

Ben Callahan on Responsive Web Design and Broken Processes

A great interview with Ben from the guys at QCat. We originally ran another similar interview last December.

The How-To Guide to Responsive Email Design

Here’s an infographic to go with the below links explanation for media queries in html emails. Did you know people look at their phones an average of 150 times a day, and 80% of those people will delete the email if it doesn’t look good on mobile?

How to use the right media queries in HTML email

If you’re still coding HTML emails by hand… I’m sorry. But hey, I feel your pain having gone through many hours on this email template. This article talks about a quirk with Outlook.com on IE9 and how to overcome it.


Tutorials

Responsive website using AngularJS

Oh dear, a responsive website in JavaScript, are you mad? A little, but it’s always good to see how approaching a problem in another way can give you ideas for solutions to other problems.

Make SVG Responsive

I have to admit the dimensions inside an svg file always had me scratching my head until I learned step two and three from this article.

Presentation

BBC News: Responsive Images

A responsive images solution use at the BBC. It doesn’t follow either <picture> or the srcset methods but instead is a solution baked to suit their own needs. It’s available on GitHub if you want to contribute or use it yourself

Responsive Design is Hard/Easy! Be Afraid/Don’t Worry! 

These are the slides from Dan’s presentation at the Smashing Conference.


Codepen of the week

pictureTime

This weeks pen is a polyfill by Chuck Carpenter for National Geographic, this is based on the picturefill polyfill by Scott Jehl but uses the <picture> element rather than <span> tags. There’s another image solution being worked on by National Geographic and we’ve been in touch with Cory Brown to discuss how that all works.  We’ve got a post on that and more on the state of RWD images coming up next week.


Jobs

JavaScript Jedi at Vanamco

You want to build fancy instead of reinventing the wheel? You’re into networked JavaScript and native extensions? The more asynchronous, the better? Then make sure to have a look at our opening for a JavaScript Jedi!

Responsive News — Come Work with Us!

The BBC Responsive News team are hiring for three positions. Web Developer, Lead Web Developer, and Senior Software Engineer.

Do you have a position your trying to fill? Get in touch and run an ad through the newsletter.


That’s all for 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>