Responsive Design Weekly #24

Welcome to the Responsive Design Weekly… coming up to a quarter of a century!

I was in the shopping center last Saturday morning going about our weekly shop when my finance mentioned a few things. There were minced pies for sale, the wrapping paper had made the end of the isles and there were Christmas tunes playing over the store sound system.

WTF, it’s September!

It did get me thinking about our holiday in December and I realised that I won’t be as active online as usual and as a result a few responsive goodies will slip through the net.  Well….. who am I do deprive you of your weekly dose of responsive goodness? Instead I’ve been getting in touch with some of what I would like to call “responsive design celebreties” and will be asking them each a few questions around RWD.

Each week I’ll pair them up and share their answers with you all, and hopefully inspire you to build some great stuff over the holidays.  Also if we all pull together and are super nice for Santa we could all wish for a responsive image solution for xmas… how cool would that be!

Alright, enough Christmas in September malarky.

Headlines

Things To Come For Foundation by ZURB

For those of you that are using the Zurb Foundation Framework there are a few more releases just around the corner. The Orbit and Reveal features (image slider and modal window) have been combined and improved into something called Clearing plus they’ve implemented something called Joyride(http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin), a responsive web page tour.

Responsive Design Survey

Mark Boulton is looking to hear from fellow responsive designers. He wants to know if you have had any problems with your responsive projects, and if so what were they and how did you overcome them?

Thanks for taking the time to fill in this little survey. It shouldn’t take too long. I’d like to ask you some questions about how you find responsive design challenging. It could be that you work at a large organisation and the processes are hard; or that it takes too much extra time and you don’t have the budget; or you find testing a nightmare! What ever the problem, I’d like to hear about it.

Mo’ Pixels Mo’ Problems

Dave Rupert signs up with A List Apart to bring us his thoughts and some better understanding to the pixel issues of our ever increasing dpi devices. Dave looks at a few techniques on how to handle different resolutions and densities through icon fonts, svgs and the picture fill method.

Articles

Apple’s .mobi insanity

I heard about some quirky apple behaviour with regards to the .mobi TLD via one of the Shop Talk Show podcasts with Dave Rupert and Chris Coyier. They simply brushed it aside as a likely implementation issue by the implementer. The next week they confirmed there was actually an issue where Apple would apply a default 320px viewport for .mobi TLD’s, while the rest received a 980px view port. This article goes into even more quirks when it comes to different apple devices. Very strange.

Has responsive design killed Photoshop for web designers?

Is it really appropriate for web designers to use tools like Photoshop or Fireworks when designing websites that have to adapt to a variety of screen sizes?

Our Content Management Systems are the Mainframes of the Mobile Era Cloud Four Blog

The difficulty with Content Management Systems, mobile content and responsive designs.

Breaking Dev: How BBC Fell in Love with Responsive Design

Luke Wroblewski provides another brilliant overview of the BD conference session on how the BBC fell in love with Responsive Design.

Don’t confuse design testing with device testing

With all the fuss over device testing it was good to see @malarky chiming in with his thoughts about testing devices for designers. He begs the question, do you need a large device test suite when you’re designing?

Mobile-friendly sites turn visitors into customers

Google provide us with the findings from “what mobile users want”. Obviously it’s a tailored mobile experience which is possible with responsive design.

Breaking Development: Responsive Design Vs Separate Mobile Sites

In his Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition talk at Breaking Development in Dallas, TX Brad Frost evaluated separate mobile site solutions vs. responsive Web design solutions against how they meet mobile user needs. Here’s LukeW’s notes from his talk.

Breaking Dev: Pragmatic Responsive Design

In her Pragmatic Responsive Design presentation at Breaking Development in Nashville TN, Stephanie Rieger walked through a detailed overview of building an adaptive Web experience for hundreds of devices. Here’s LukeW’s notes from the talk.

All About Responsive Design – Ep.80

This is a pod/video cast that has a focus on RWD (for this episode) and features an interview with Dave Rupert (very funny and smart man).

Adobe Edge Reflow

Adobe are releasing their next suite of products and some of the focus is on responsive design. The Reflow tool kind of reminds me of an existing grid tool that allows you to set responsive layouts, however this is a little more hi-fidelity. Since the release of Adobe Shadow I’ve started to admire the Adobe stuff again, but I am still wary that tools like reflow will produce superfluous code which outweigh it’s usefulness.

Two days after I wrote the paragraph above I was testing a website with Adobe Shadow… although now it was Edge Inspect. After reinstalling it across the devices I was disappointed that it wasn’t working on the mobile as well as the tablet.  But it was working on both, but unfortunately the old Free Shadow is now the New Subscription based Inspect.  Fortunately for those with existing subscriptions with the CS6 you’ve got it for free.  For the rest of us it’s $10 a month, which as Tim Kadlec pointed out on twitter it worth the service.  Reluctantly agreed.

“RWD” and “Mobile First” buzzwords explained — Gist

Seems likes there’s been some hot debate and a lot of changes going on over the wikipedia meaning of REsponsive Web Design. Cinsoft has had enough and decided to capture his own thoughts via githubs GIST.

Responsive Web Design Beyond Screen Size

In this article Matt Palmer looks at some other triggers for reponsive designs.  Rather than focussing on the width for breakpoints we could look at time aware JS that changes the page color/contrast based on the time of day, movement/shaking/rotation to increase the size of text and targets for a “mobile/moving” user plus a few more.

Resources, Tools & Tutorials

Bootbox.js—alert, confirm and flexible dialogs for Twitter’s Bootstrap framework

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

RWD Retrofit – Responsive Retrofitting of an Existing Site

Last week I received an email from Matt Stow in response to the retrofit links by sparkbox I had mentioned last week. He has released his own flavour of retrofitting goodness through his company Izilla which looks at targeting retrofitted responsive designs to mobile/tablet users only. Now I had to reread this a few times to get my head around it.  This isn’t something I would say would be a recommended approach to RWD, but it would sure help out a client who still wants their desktop version (yes that’s right, I’ve had THAT client before). Here’s Mat’s super basic explanation to me – It allows you to override the breakpoint set in the markup with a different one for “mobile”, which I use cssua.js to identify.  It also sets up and resets the viewport meta tag so that the desktop site and responsive site are at the correct zoom levels.

ReSRC.it

ReSRC.it is a solution for delivering screen and bandwidth appropriate images to your visitors, whatever their device. They have a cloud based image processing & delivery platform allows for real-time resizing and optimization of images. Kind of like Adaptive Images but without having to come up with the technical solution yourself.

New sites & Inspiration

I know that I said this week I was going to take a closer look at the United Pixelworkers new site so finally I’ve come up with the goods.  There’s some great sites out there and I think UP has done a really good job considering they worked within the constraints of the Shopify boundaries.

Next week the inspiration is going to come from me rebuilding this template responsively with the new layout and design.  WOOT.

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…

If you want your voice heard over Christmas and have something to say to the rest of the responsive world now is your chance.  I’ve sent out a couple of invites to a few choice super intelligent people but I’m sure I only know a few percent of who is out there.  Feel free to suggest people you know, and don’t be embarrassed to put yourself forward.  Get in touch 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

One Response to “Responsive Design Weekly #24”

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>