Resources on producing responsive design wireframes and artwork, for graphics designers

Question

We're developers who partner up with a graphic design studio for our project artworks. Some times they even bring in the clients themselves and we both cooperate to get a development project done.

• They develop the website artwork, develop the sketch ups for the client to decide etc.

• We develop the website(code it and the rest of the technical stuff).

They have recently asked me to recommend them some good resources to read on the subject as they no longer want to design only for desktops. I have told them there are plenty floating around on the Internet, some paid and some not.

Can you recommend some good resources(paid or free) for non-coders (such as graphics designers), to learn about responsive design, how to design assets for responsive design, how to develop sketch ups/wireframes for the customers, how grid works etc?

They basically want to be able to provide sketch-ups to customers for each device, how the grid will break on different devices, how to design their assets/artwork etc. It's a matter of cutting us out of the loop and design on their own the whole project, then deliver the wireframes to us and the artwork and we could easily take it from there.

• Online courses are ideal.
• Short books ?
• Maybe interactive courses like what Codecademy does for programming?
• Anything else you think will help non-coders to get the basics

Answer 1

They basically want to be able to provide sketch-ups to customers for each device

This never works. Never.

Wireframes aren't responsive. They're approximations of what the code may render. That's hard enough when we're talking a single Photoshop file being converted into a HTLM file, but pretty much impossible when we're talking responsiveness.

The biggest hurdles I've encountered:

• If the designers don't know markup, they don't understand document flow. As such, they tend to build responsive wireframes that aren't simply reflowing of content and cause huge JS workarounds and the like to implement.
• Because they are separate files, they don't keep consistent style hierarchy from viewport to viewport. For instance, instead of saying that 'at 320, all fonts are 80% the size of the 1120 breakpoint' they end up having 'some at 70%, some at 90%, etc.' which leads to bloated, indecipherable CSS.
• Maintenance. It's hard to maintain one set of mockups/wireframes based on client feedback. They now have to maintain 3 or 4 and somehow not only keep them in sync with each other, but ideally in sync with the code base you are using.
• Some tools, such as Axure, claim to support responsiveness. And they do in that the wireframe is responsive(ish). But that's a false implementation as there is no correlation to the code Axure makes and the code that has to be built. So you end up with responsive changes in Axure that simply can't be implemented practically in the codebase.

The only way I've seen this work is when wireframes are treated purely as wireframes--meaning they are 'sketches' of the page layout and functionality--not pixel perfect comps.

They can still make a comp--for one particular size--but from that point on, the designers and client should be working off of the markup you're creating and tweaking things in the actual responsive codebase. Not in Photoshop or Axure.

Answer 2

Can you recommend some good resources(paid or free) for non-coders (such as graphics designers), to learn about responsive design, how to design assets for responsive design, how to develop sketch ups/wireframes for the customers, how grid works etc?

There are many excellent sites out there. As designers they could get a Lynda.com subscription, watch the Responsive Design course and after watching that have many interesting design courses to look at as well.

I think that YOU - as developers - can explain a lot of key concepts. Designers understand breakpoints very well. What I find that many designers have a problem with is that HTML/CSS works by placing things in containers and that a container that is within another container cannot be easily separated from other items in that container.

+--------+------------------------+-----+
|        |                        | [A] |
|        |                        |     |
|        |                        | [B] |
|        |                        |     |
|        |                        | [C] |
|        |                        |     |
+--------+------------------------+-----+

In the example above the entire right hand column can move but separating item B from items A and C requires a lot more work.

Answer 3

Hack Design is a site for people who want to learn about design. I'm a designer and I refer to the site regularly, because they're always adding good stuff. Each lesson is a collection of articles and tutorials.

For responsive design, I suggest the following the lesson "Making the content flow: introducing responsive web design".

There's a lot of other good info on responsive design in the lessons section if you dig around.

Another site that explains the principles of layout is [Responsive Layouts, Responsively Wireframed: www.thismanslife.co.uk/projects/lab/responsivewireframes/

A great book on the subject is Responsive Web Design by Ethan Marcotte. You can find it on A Book Apart's website.

Answer 4

What you could do is use something like Edge reflow, which makes responsive design real easy for demonstrating purposes, but the code is just aweful.

Else take a deeper look into Macaw