Ask HN: What do developers do with web mockups?
I have a guess. They extract the assets and use it as a guide, but pretty much make the html/css from scratch. Am I correct in my assumption?
1) Preferably, all I have to do is say "That looks nice, let me know if you need the application to generate any dynamic elements." A good web designer will be able to apply their design skills to the site. They'll work with me, and I'll make sure that the system is generating whatever content they need to style. It's the best way of ensuring that the end result matches the designer's vision.
If that's not an option,
2) Ask the designer to provide all of the individual images that they used to create the mockup, along with relevant CSS and HTML. Some designers can't apply their design ideas to dynamic websites yet, but can create a static page of their design. We take that as a guide, break it apart, and then put it back together bit by bit in such a way that it works with the dynamic system. This is, of course, less efficient.
And if that's not an option,
3) Curse and waste time slicing apart the mockup to try to extract the same images that the designer pasted together to create the mockup. Then do all the work of converting the mockup to a web design and applying the design ourselves. This is least efficient and has the greatest chance of being not quite what the designer intended due to the increased likelihood of miscommunication, having programmers doing design work, and because the designer often knew nothing about the underlying system that they were designing for (otherwise we'd probably be in one of the previous cases).
Also, as mentioned by hnruss, we discover the implied functionality, find out the requirements, and build code to support it. Then we add in all the missing pieces that typically get left out of mockups, such as error messages, or content that only shows for users with certain roles or in certain conditions. (Ever wondered why error and confirmation messages are often poorly designed?)
There's an extension called CSS Hat[1] which aims to give you matching CSS for photoshop layer styles, though I've found the result is rarely the same same. Getting assets out of photoshop is also a horrible process, thankfully enigma64[2] and slicy[3] help with that.
Oh and if someone was to send me a Sketch[4] file instead of a PSD I'd charge 50% less, it's so much nicer to work with. Hasn't happened yet, though :/
Then I look carefully for each "asset" I require, normally images unique to the page, things I can't easily create with CSS, etc.
After this I grab my lovely grid and start to plan out where each element will fit, crafting the HTML as I go along. I could use some kind of generator but it will never be as good as hand made HTML, it is always clunky and overly complicated.