

Ask HN: Front End Development - lachyg

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?<p>Do you think we need a special framework? A new slicing tool? Additions to Photoshop? Do you think it can be completely automated?<p>I've been doing it for quite sometime and I'm looking for a way to rapidly speed it up! Any ideas, anyone!?
======
systemtrigger
> 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
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
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
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
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
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
<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
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.

