0

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!

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.

0

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.

  • This works if CSS frameworks are used -- but if we wanted to avoid CSS frameworks do you have something else in mind? – Marco May 23 '16 at 13:41
  • I think it's important to reach an early compromise between creatives and technologists on feasibility of using CSS framework without sacrificing unique design. You can certainly rely on developers to build completely custom CSS from desktop layouts, with an understanding that it will impact time and budget when compared to designing with CSS framework in mind. The best approach is to have at least rough schematics for mobile states, not necessarily finished designs, that will provide guidance to developers in building custom CSS. – Max Tokman May 23 '16 at 17:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.