3 ms·

Ask HN: Front End Development

7 points by lachyg 17y ago

To all front end developers, specifically ones that take PSD files and convert them into HTML/CSS templates, how do you think we could speed it up? Do you think we need a special framework? A new slicing tool? Additions to Photoshop? Do you think it can be completely automated? I've been doing it for quite sometime and I'm looking for a way to rapidly speed it up! Any ideas, anyone!?

systemtrigger 17y ago
> Do you think it can be completely automated? I think that will always depend on how complex a page/site we're talking about. If the design is standard and our toolbox (in this IDE) has all the standard "prims" then yes it's maybe automatable. But if what you're trying to build is edgy those primary building blocks might not be in the toolbox. So unless the web reaches some kind of technical limitation our tools will always be behind the creativity of designer-developers. As for which framework to use I think the answer may be to move away from Photoshop toward something like Fireworks. I'm in the same boat as you, I get designs in PSD and have to make pixel-perfect html - and like you I notice the friction points (e.g. text sizing in pts vs. pixels, drop shadows don't copy-paste easily, every copy-paste manuever is a "manual" operation). Photoshop is probably the wrong tool for web design. It's great for photos and for going into creative heaven but Fireworks is Adobe's product for mocking up web sites, and I think it's more practical than Photoshop for web designers. As far as the html/css it generates, I would have to learn to trust it. Today I hand-write all the markup myself but there are a lot of tools that are tempting me, especially when they promise cross-browser compatibility.
- christiancoomer 17y ago
  I agree with the suggestion regarding Fireworks. The designers and developers at my office use Fireworks instead of Photoshop and it seems like a speedier process.
oneplusone 17y ago
The answer in improving seed is not in more frameworks (especially crappy CSS ones), but in improving the actual browser with support for box-shadow, border-radius, and border-image, etc. which takes a significant amount of time to implement. Getting the core CSS and HTML right is such an important part of performance and a vital investment in future development that I cannot even comprehend letting a program auto-generate it for me.
ScottWhigham 17y ago
I think Adobe has the chance to just totally own the whole market if they will just improve the slicing/HTML output of Photoshop. At this stage of the game there aren't likely to be any new players on the graphic design side (not without significant investment). That means that it's either the graphic design software companies improve their output options or someone writes a tool/add-in that improves it.
- kls 17y ago
  I always though a good feature for Photoshop would be a way to select areas of a file and mark them as dynamic content and non image content, that way PS knows what all of the static content "or template" is. Then PS could analyze and auto slice the image and generate the template HTML file that you can then go back and add any non image HTML to. As well it wild be nice to be able to define groups on the template so that PS would slice them out separately for items that may be repeated on the page or that may be used on several pages. My thought was that all this could be accomplished by tagging a layer to be ignored for generating the auto slice.
  - lachyg 17y ago
    Personally, I don't think Photoshop will ever be able to automaticly slice a document into valid, standardized, optimized HTML/CSS. I think a human has to be involved in the process, unless HTML changes completely. In the meantime, tools that can copy the CSS styles of text to the clipboard, and things that can generally decrease time spent developing will be a plus.
nunb 17y ago
http://www.medialab.com/sitegrinder http://www.medialab.com/sitegrinder seems to do exactly that. They have client website links in their gallery, and somewhere they claim that they make creating dynamic sites possible as well.
hellotoby 17y ago
I've found the quickest way to speed up front-end development isn't necessarily with the slicing but more with having a robust library of my own code, and my own custom (pseudo) framework of html & css templates with which I begin every job.

7 points by lachyg 17y ago

systemtrigger 17y ago

> Do you think it can be completely automated? I think that will always depend on how complex a page/site we're talking about. If the design is standard and our toolbox (in this IDE) has all the standard "prims" then yes it's maybe automatable. But if what you're trying to build is edgy those primary building blocks might not be in the toolbox. So unless the web reaches some kind of technical limitation our tools will always be behind the creativity of designer-developers. As for which framework to use I think the answer may be to move away from Photoshop toward something like Fireworks. I'm in the same boat as you, I get designs in PSD and have to make pixel-perfect html - and like you I notice the friction points (e.g. text sizing in pts vs. pixels, drop shadows don't copy-paste easily, every copy-paste manuever is a "manual" operation). Photoshop is probably the wrong tool for web design. It's great for photos and for going into creative heaven but Fireworks is Adobe's product for mocking up web sites, and I think it's more practical than Photoshop for web designers. As far as the html/css it generates, I would have to learn to trust it. Today I hand-write all the markup myself but there are a lot of tools that are tempting me, especially when they promise cross-browser compatibility.

christiancoomer 17y ago
I agree with the suggestion regarding Fireworks. The designers and developers at my office use Fireworks instead of Photoshop and it seems like a speedier process.

oneplusone 17y ago

The answer in improving seed is not in more frameworks (especially crappy CSS ones), but in improving the actual browser with support for box-shadow, border-radius, and border-image, etc. which takes a significant amount of time to implement. Getting the core CSS and HTML right is such an important part of performance and a vital investment in future development that I cannot even comprehend letting a program auto-generate it for me.

ScottWhigham 17y ago

I think Adobe has the chance to just totally own the whole market if they will just improve the slicing/HTML output of Photoshop. At this stage of the game there aren't likely to be any new players on the graphic design side (not without significant investment). That means that it's either the graphic design software companies improve their output options or someone writes a tool/add-in that improves it.

kls 17y ago
I always though a good feature for Photoshop would be a way to select areas of a file and mark them as dynamic content and non image content, that way PS knows what all of the static content "or template" is. Then PS could analyze and auto slice the image and generate the template HTML file that you can then go back and add any non image HTML to. As well it wild be nice to be able to define groups on the template so that PS would slice them out separately for items that may be repeated on the page or that may be used on several pages. My thought was that all this could be accomplished by tagging a layer to be ignored for generating the auto slice.
- lachyg 17y ago
  Personally, I don't think Photoshop will ever be able to automaticly slice a document into valid, standardized, optimized HTML/CSS. I think a human has to be involved in the process, unless HTML changes completely. In the meantime, tools that can copy the CSS styles of text to the clipboard, and things that can generally decrease time spent developing will be a plus.

nunb 17y ago

http://www.medialab.com/sitegrinder http://www.medialab.com/sitegrinder seems to do exactly that. They have client website links in their gallery, and somewhere they claim that they make creating dynamic sites possible as well.

hellotoby 17y ago

I've found the quickest way to speed up front-end development isn't necessarily with the slicing but more with having a robust library of my own code, and my own custom (pseudo) framework of html & css templates with which I begin every job.