Have a Design Concept -- How to iterate it into multiple breakpoints for Developers?

Question

I'm a designer at an agency that primarily does "PSD to HTML" web development. I know that some can argue it's not ideal, but within my agency this is how it works because most layouts need to be approved before they are produced. Clients and Executives just don't trust the developers to produce things without signoff.

The usual workflow is:

1. Produce Concept
2. Produce First Layout (usually desktop)
3. Produce Other layouts (usually mobile and tablet).

This leaves the "in-between" of the layouts to the developers, who usually can figure it out, but sometimes ending up looking wonky (like mobile at 320px looking garbage at 600px because 640px is tablet breakpoint).

Flaws aside, most in our agency are comfortable with this approach, but there is a longing for something that can produce closer / more pixel-perfect responsive experiences. I know it won't be 100%, but I'd hope we can get closer.

My question, specifically, is:

How do I, the designer, demonstrate what should happen in between breakpoints for the developers, aside from producing dozens of layouts for all the spaces between breakpoints (small agency and we don't have production staff)?

I'm open to techniques in Photoshop, or the use of other software if it will help, as long as it allows us to produce layouts in advance of development for client approval, and can still produce an intuitive document for developers to code into HTML (like a layered PSD does with type hints, and whatnot).

Thanks!

Answer 1

Honestly, those in-between sizes are more wildcards than anything else. I would design against the "standards" (iPhone 5 and 6/Samsung Galaxy) and anything in the middle is up to possibly adjusting the breakpoint itself (i.e. whether tablet goes down to 600px rather than 640px). If there is an in-between and you really need to have it look a certain way, that would require a new breakpoint. There is no getting around that. Whether it's something to dictate to the developer that the client never sees because it's all done in development, or you produce a layout.

Answer 2

I would recommend having an open conversation with your agency's developers on how they would like to receive guidance (instead of myriad of layouts). From personal example, we recommend following 12 column responsive grid for desktop layouts in Photoshop, with understanding that mobile layouts will be driven by whatever CSS framework is used, in our case it's Bootstrap. So, creatives prepare desktop layout, maybe even a couple of mobile states for a single template, creatives and developers jointly review it to make sure everyone is clear on the rules guiding spacing and content rearranging / resizing for mobile, and to coding it goes. Once initial build is complete, it goes through internal review with agency creatives, who can provide specific feedback on any layout issues they identified.

This works out pretty well for custom website builds, keeping creative hours sane and giving developers sufficient guidance to execute a build.

To keep the process streamlined and minimize the back and forth between designers and developers, we also suggest that creatives run their PSD files through Web Preflight to identify potential coding issues prior to start of development.