Responsive Design Weekly #25

Welcome to the Responsive Design Weekly… this week a quarter of a century!

The biggest talking point this week has to be the new release of Microsoft.com.  A lot of kudos was thrown the way of the Build Windows site when it was first released, and if you liked that you’ll love the work that went into the new Microsoft site.

Nishant Kothary talks us through the the process of the redesign from the very first moments his wife roped him into speaking to the Microsoft team and takes you all the way along until the end.  The article is a fascinating insight into the process behind a responsive redesign on a major website like Microsoft.

Microsoft were ably helped along by the super smart trio over at Paravel.  Between Trent Walton, Dave Rupert and Reagan Ray you have just about the best team you could hope for working on a project.  There’s two articles that have come out of this team:

Disney also made the headlines this week with a responsive release of their own.  Unfortunately I get about 0.5 seconds look at it before it redirects me to home.disney.com.au, very much NOT what I was looking to find.

I’m very excited about our December interview series and am happy to annouce that Paul Lloyd and Andy Clarke have already kicked off with some great stuff. There’s a few others working on their answers as you read and I’ve got a few emails left to send out, but please let me know if you want to hear from someone in particular and we can see what we can do.

Headlines

Responsive web development with WordPress — a case study

Do you use wordpress? Do you like responsive design (duh, you’re subscribed right!?)

This article from Rachel McCollin on the Dev.Opera.com site takes you through the steps of RWD on wordpress. She starts out with a bit of planning, looks at the media queries, designs in the browser, making the images responsive using mobble, making the video responsive with the help of alistapart (http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/), makes the forms responsive and finally nails buddy press.

The article goes into quite a bit of detail, and like all projects there are caveats for the decisions made.

“Responsive IA: IA in the touchscreen era” 

This is a really great look into the touch aspects of repsonsive design. Martin Belam starts off with the Punch & Judy puppet show before winding up at designing your use cases carefully when thinking about a responsive approach. If you’re on a small screen, think BIG BUTTONS, think touch. A pretty awesome read really.

Articles

responsive woos

Neils Matthijs takes a look at responsive design and comes to the conclusion that everyone is f&^ked. Does he have a point? Well he raises some fair points in that everyone is struggling to come to terms with the best practices… because there aren’t any. It’s not that he doesn’t like responsive design, but he can see a lot of things that are built now will be thrown away in a year because it was done in haste, or we’ve found a better way to implement the solution. I don’t know about you, but that’s true of everything on the web… always ever.

Encouraging Better Client Participation In Responsive Design Projects

Andy Clarke expands on his recent presentation for the Smashing Conference in this article on SM. I wish he had of kept the original title “How to call your client an idiot, to their face, without getting fired, then have them thank you for it.”

Resolution vs. Density vs. Pixel Ratios

Are you still confused about pixel density, resolutions and rations? Thomas Fuchs explains them in this blog post which looks like it was taken from his book on Reinafy your website and apps now http://retinafy.me/

Don’t use JavaScript for Retinafying

It seems Thomas Fuchs has been busy this week giving us some insights into his book….

Why I don’t use frameworks

Do you use frameworks? I certainly do when I’m prototyping, however once I look toward production Frameworks can become more of a hindrance. Matt Wilcox explains his thoughts and recommends using your own framework that works for you.

[What I’m Reading] The responsive edition

I totally should have taken the week off this week and just pointed everyone to this list of links.

Responsive Design and Ad Creative: An IAB Report

IAB have created a white paper outlining their approach to online advertising in a responsive world. They’ve even provided a demo showing how things work using a product from responsiveads. We’ve been lucky enough to be offered a beta test of the new product that responsive ads are working on, so if any of our readers would like to run some repsonsive ads on the responsivedesignweekly.com then email me and let me know.  Don’t worry though, we’re keeping these newsletters ad free.

Responding to Responsive Design

Joe at Clickz gives some insight into the work he’s been doing with IAB around responsive design advertising. This is a great insight into how the recently released white paper came about.

5 Reasons Why Resonsive Design….

These two articles go head to head in a battle for the 5 best reasons to be or not to be responsive design (that is the question).

The Responsive Design Myth

Even though publishers like New York magazine, SB Nation and others are moving towards responsive design, and brands like Starbucks, Jack Daniel’s, Grey Goose, Sony, Microsoft have also embraced it this article talks about why responsive design isn’t a Web design cure-all like many believe. Patrick Emmons, director of professional services at Adage Technologies, says in fact it’s a little overrated.

Resources, Tools & Tutorials

RESOURCES

Responsive Images using IIPImage

An alternative to the adaptive image techniques we’ve mentioned in the past, this is another option to run it sever side on the fly. It claims to be faster and more efficient than the adaptive images php solution.  I’d be interested to hear if anyone has tried this out yet.

Retina/high dpi media queries

Another post from Chris Coyier this week with this very detailed list of retina/high dpi media queries to get your started.  I’ve noticed more and more people are using github as a publishing and collaboration platform. Awesome.

Wilto/draft-prop 

Wilto has uploaded the responsive images proposal onto github to allow for ease of basic issue tracking, and public contributions to the editing and formatting of the proposal.

Remember don’t do everything there though, he also points out that discussion of potential/outstanding issues with the proposal should remain on the HTML WG mailing list, RICG mailing list, or both.

Shop Talk Show with Brad Frost

This awesome podcast got even more awesomer the other week when Brad Frost joined up with Chris Coyier and Dave Rupert.  This is the link to the notes to the show or listen to the episode yourself (recommended!).

inuit.css v4.0.0

Inuit.css has receive a complete overall with the release of 4.0.0. In the release post Harry explains the difference between inuit and bootstrap (seeing as bootstrap seems to be the yardstick these days). The framework actually runs on a couple of the big sites over at sky.com so it’s worth taking a look.

TUTORIALS

Media Queries Tutorial – Convert Burnstudio into a Responsive Website

This tutorial runs you through how to make an existing site responsive by retrofitting some media queries. Now because this is retrofitting the site ends up being more adaptive (snapping to fixed width grids at specific breakpoints) but it’s a good walk through.

Notes from my BD Conf Workshop

Chris Coyier runs a mean workshop, and in this article he takes you through the workshop step by step. ALthough he only mentions the word “responsive” in the last paragraph he bases the work on grids, sets widths through percentages, including border-box and a whole bunch of other responsive goodness.

TOOLS

Responsive Design: Mobile Menu Options

If you’re a drupal user and are getting stuck around your responsive design navigation then Kendall Totten has something for you. She’s used this navigation method on a few projects successfully so the team turned it into a Mobile Menu Togge module in Drupal.

CSS Flexbox Please! 

I’m sure you’ve tried CSS3Please before, well now you’ve got the CSS Flexbox please. This little tool allows you to play around with some of the settings of CSS Flexbox and see the results on the screen. Enjoy!

Wilto/Molten-Leading 

Manually adjusting line-height for optimum readability across a bunch of media queries is kind of a pain. So Wilto made a thing. One sets a minimum width at which the adjustment starts, a maximum element width where it stops, and a minimum and maximum line height to adjust through. This isn’t especially well-tested, but seems to check out in all the big desktop browsers (including IE).

New sites & Inspiration

Microsoft

Pretty awesome. If anyone knows the technical details that went into the site we’d love to cover them off.

Also one of our readers sent through a site they have recently redesigned responsivly, http://buffalosoccerclub.org.  Buffalo Soccer Club is a not-for-profit inner city youth soccer program and now with a design to be proud of.  Nice work guys!

I did say that this weeks inspiration was going to come from me rebuilding this template responsively with the new layout and design, but it will be delayed.  I had finished the cutup (my first email cutup strangely) and as I was putting it into Mailchimp I very quickly realised that Gmail and Outlook don’t support background images.  Why I didn’t know that before I’m not sure, but suffice to say it means I’ve got to go back and fix a few things up first.

If you’ve just launched a site or are getting ready for a launch then send us a link to the site with a bit of information about the choices you made in the build and we’ll feature you in this section.

Wrapping up…

There’s only one thing left to see this week, and that’s a Sausage Dog dominating responsive web design.

Thanks for reading again for another week, I hope you like reading these as much as I love putting them together.

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

One Response to “Responsive Design Weekly #25”

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>