How do designers write responsive visual guidelines for their programmers?

[ninek]

Hi! I am totally new here and NOT a programmer. I am designing the new responsive layout for our company homepage using Photoshop.

I can`t figure out how to write down the visual guidelines / proportions for our programmer without defining the layout in pixels?

I know Responsive Design is all about programming in percentage and em, and I had this in mind while designing for all kinds of scenarios and screens.

Still, I was designing in Photoshop, which gives me pixel sizes. How do I write down design guidelines in percentage and em?

Basically I’ve been told that 960 px width/13 px fontsize= 73,8 em. I can`t really claim that I understand any of it (have I mentioned that I am not a programmer? ;) (But I do have basic understanding of CSS ;).

2 questions:

1) Could anyone send me a link to a responsive visual design manual – I am talking about a handout that explains and defines the visual guidelines to your programmer and client, not a “how to do the css coding…” (that`s all I find when googeling)

2) Is Photoshop not the best choice to design responsive websites? (Is there any program that will let you do fluid design using percentage or em instead of pixel?)

Thanks for helping!**

[JohnMotylJr]

Well, i am not a designer like you, but if you were to give me 2/3/4 different mockups (mobile, tablet, desktop, etc) then i could make a seriously good guestimate as to what you are wanting to accomplish as far as maintaining certain widths for responsiveness. Now-a-days there is NO true starting standard. People design for mobile and work up, others start big and go down, because let’s face it, EVERYTHING can access the web these days.

Sorry i cannot provide links because i have never really gone down the designer only path. I would suggest that if you have a pretty competent developer, than that person should be able to rock out some solid documentation as far as testing for certain widths and how he/she went about testing sizes etc..

Good luck!

[Dennis]

Take a look at [this](http://dribbble.com/shots/216803-Style-Sheet?list=searches&tag=guidelines “Style sheet by Benn Raistrick”)

This might be an option for you to consider. Instead of handing out multiple designs for each intended viewport, give them a solid foundation of how the different elements are supposed to work with eachother along with a description of the hierarchy.

This might not be what’s best for you in this case, but I do believe this is a good alternative.

Obviously one of the best ways is to continously have a chat with the developers so that you are both on the same page.

[JohnMotylJr]

Obviously one of the best ways is to continuously have a chat with the developers so that you are both on the same page.

Very important..

[ninek]

Thanks a lot for both comments! The link you provided will help me clear my head! I’ll make sure to post our visual guidelines for others to find, once they are developed. I am continously having a chat with the developer, but we are both kind of new to responsive design and this is a huge site we are developing. It’s fun yet overwhelming. But fun!

[Author]

Posts