HN Explorer

Ask HN web designers/devs: What are your pain points?

31 points by chaosprophet ↗ HN
Hi guys, To the web designers/devs at HN: What are your major pain points as web designers/devs? What tool do you absolutely wish existed?

For me, the tool I'd love to have would be a Photoshop-like design tool which would generate HTML + CSS rather than PSD files, and I've been thinking of writing something like that.

46 comments

[ 3.1 ms ] story [ 94.7 ms ] thread
petercooper
I'm stuck on my iPad right now so I can't research so quickly but.. there's a plugin for Photoshop that lets you slice up your document and produces a WordPress theme straight from your mockup. That sort of approach might suit your last point.
eagleal
Fireworks also has built-in functionality for this sort of thing (not wordpres, but HTML). However the produced code it's a mess, and it's unmaintainable.

So for UIs, it's just better coding it manually. One thing that could be possible is Fireworks (since it already has vector support) that uses SVG elements (as yason pointed out). From there it should be simpler to produce quality and maintainable code.

petercooper
I think it's just a problem that people haven't tried to fix properly yet. Output from WYSIWYG environments doesn't /have/ to suck, it's just no-one's put in the effort and research to really nail it.
f1gm3nt
Number 1 pain point: clients

That is all...

[deleted]
(comment deleted)
keltex
I'll add to that. Billing and collecting from clients.
trafficlight
Freshbooks helps me a lot. The automatic 30 and 60 day past due reminders get almost everyone to pay up.
Keyframe
Photoshop-like design tool which would generate HTML + CSS rather than PSD files

Something like this yes. I can whip up a layout and design rather quickly in PS, but assembling that to html+css, even with 960.gs is boring as hell.

Maybe better a tool that outputs really nice HTML+CSS out of PS/PSD. So only slicing would be left as a menial task. For most of the cases this could work fine, and for that small amount where it can't work there's always manual task of creating html+css. I don't trust PS output at all, to a point where I just code html+css directly and output image crops out of PS as I need them.

yason
This isn't going to happen unless you implement your webpages in SVG. (Not a particularly bad idea, considering today's commercial webpages.)

SGML, and therefore HTML, were designed for a completely different purpose, and are based on the decades-old recognition of the need for separation of content and presentation. While HTML contains much more visual elements than most other SGML languages, complete with CSS it's still all optimized for two particular use cases:

- you have content and want to publish it some way, style being a secondary question, or

- you have lots of one kind of content and you conclude that it's worthwhile to hone a nice presentation for that one kind.

Photoshopping websites just isn't supported by the philosophy of document markup languages, even if you can actually make the first 50% happen with the current HTML/CSS/JS.

Keyframe
I don't see why not. For example current workflow is rather similar among designers I saw. You whip out a layout+design. There are designated areas in layout. For example this is where main content goes, this is a navigation area, this is a subnav area and so on. You slice it up, you code html+css for each - this one is stretchy, this one has borders like that from css or from photoshop, background this like that... I'm doing it all now without SVG. In fact I could do it with PS->slice html output, but I don't because fixing html+css output is more work than straight coding from scratch and fetching/cropping images out from PS as I need them.

Thus, system obviously works. Problem is that it is manual, since tool available for it is not reliable.

jeb
Getting the html/php code from my offline development tool into the server in an easy manner. I don't want to develop on the server, but I want to update only those files I changed.

In an easy manner, not with post commit scripts or so.

gnaritas
What's easier than rsync?
jeb
rsync is a command line tool and you need to enter the username and password everytime.
jhickner
This is one of the features I love in Coda. You can work on a local copy of the site and Coda tracks changes automatically, then you just click publish and the files that have been changed are pushed to the server.
ks
An alternative editor is Netbeans that has the same feature, for those who want an open souce cross platform alternative.
[deleted]
(comment deleted)
bunchesofdonald
I use dropbox. The server has it's own account, and I share the folders I want to sync with that account. That way it's all synced automatically.
ig1
There are already several software-as-a-service products that do psd -> HTML/CSS (for example http://www.basekit.com/). I imagine it would be hard to build from scratch a competitor to Photoshop that would have enough functionality to be competitive.
proexploit
As far as just HTML/CSS/PHP/JQuery goes, I would love a tool/setup that automatically creates a staging area on my server (literally duplicates code) so that I can test things live in my production environment before live to the public. Then, when I'm happy, I'd like it to be one-command simple to make my new setup go live. I'd also like to edit live on the server.

I know there's some tools to do this already but I'm talking about all in one package and easy. It may not be for every programming language, but when I've got simple HTML/CSS or Wordpress (a good deal of small business work), I want it easy.

apsurd
Well you are right, there is stuff out there, but its not in one dead easy package.

You kind of are talking about Rails, git, and capistrano.

Surely any version control system can clone code but I know git so I'll talk about how setting up repos is as simple as git clone, and then there's the greatness of http://github.com

Rails because you can use git to clone a starting environment with things like authlogic and then have clear development/testing/production environments.

Then use http://www.capify.org (which is defaulted to rails) to deploy to a staging/production path. With capify you really do literally change ONE command to deploy to a staging area, stop/start your application, and/or do rollbacks.

You can technically deploy any application (PHP) with capistrano but it's kind of a pain (I have done it, and you need to install and understand ruby).

The point is, yes it's a pain in the ass, but you really should just run Linux :p Command line is your friend. Linux, git, github, capistrano, ruby/rails, passenger = pretty decent!

Am I missing anything?

dedward
I think the real lesson in here is that the key is the deployment tools - or rather the fact that you need to spend time setting those up as an integral part of your workflow - it's not something to do "some day later".

This can be as simple as some bash scripts cobbled together - or whatever you automation language of choice is - but it's an aspect of web development that is simply generally ignored completely.

nicholaides
* CSS Sprites are unweildy. I believe there are a few tools out there to make this easier, but nothing seems to make it dead simple.

* Support: when a user has a problem I have to ask them for their browser, OS, etc. There are a few sites that I can send them to, but it would be nice if I could send them to a URL that automatically emailed me their info. Or, it would be nice if I put a js script in the page that recorded that info automatically for signed-in users.

* Design consistency: Sometimes it's hard to know if a change I'm making in the CSS affects other pages or views. It would be nice to be able to get screenshots of every page on my site after I make a change just to be able to double check it all.

* Textmate bundles: There a bunch Textmate bundles that do the same thing. It would be nice if there was a site that 1) kept track of the different bundles from different locations 2) let people vote & comment on them 3) made it even easier to install bundles you see 4) made it easy to keep your bundles up-to-date.

* Support: Often times users make a support ticket and the solution is for them to turn on cookies, or enable SSL or something. Every browser is different, and looking up this info can be a pain. What if you could send your users to automatic-support.com/turn-on-cookies, and the site would detect their browser and show them the correct instructions. This could be a wiki-like site, so other people could update the insructions.

* Avatars/profile pictures: I'm tired of re-implementing user avatars. Gravatar is great, but it's too complicated for most of my users. It would be great if there was a service that let the users upload avatars, maybe make new profile pictures from their webcam, and provided some nice default avatars (like Yahoo does). If all that could happen without people having to leave my site, that would be awesome.

* I've done a few sites where people upload and share documents and stuff. It would be awesome if there was a service that could give me thumbnail views of word docs, excel docs, pdfs, and other formats.

chaosprophet
> CSS Sprites are unweildy. I believe there are a few tools out there to make this easier, but nothing seems to make it dead simple.

Have you tried SpriteMe? It allows you to combine all the images on your page into a single sprite and generates the CSS automatically. If you have tried it (or other similar services), what issues did you face with it?

> Support: when a user has a problem I have to ask them for their browser, OS, etc... it would be nice if I put a js script in the page that recorded that info automatically for signed-in users.

This should be quite trivial to achieve. Just add a hidden field to the login page which records the useragent string.

smokestack
I would love to see some features in PS that focused on web design mocking. Mocking complex lists/other common web app components are generally far more painful to do in PS than they are to style in the browser (though you still want to see those components in the context of the rest of the design before you really get down to business). A special layer type that renders its own HTML/CSS within the document would be insanely useful (or so it would seem).
keefe
>I've been thinking of writing something like that

uhm, sounds ambitious to do well. wysiwyg editors have sucked since the days of frontpage.

edanm
"For me, the tool I'd love to have would be a Photoshop-like design tool which would generate HTML + CSS rather than PSD files, and I've been thinking of writing something like that."

That's one major pain point, yes. After a lot of research (when starting to do web work), I realized that no one uses tools like that because they usually suck. But a tool that actually worked well would be worth a lot to a rapid-prototyping guy like me.

Another pain point: CSS. It's a horrible language (IMO), and even though others have tried to make it better (e.g. "less"), if someone could fix it from the ground up, that would be worth a lot as well. For a simple example of what can be done, see how JQuery solved the browser-incompatibility issue almost completely. A similar framework for CSS would be great.

bl4k
These types of threads are great, because they give developers exposure to existing real world problems that they may not have experienced themselves.

When consulting, one of the 'fun' parts with visiting or speaking to a new client is finding out all the pain points in the business and then solving them (closely followed up with an invoice :)).

Anybody have any links to more threads like this one?

danohuiginn
An easy way for non-technical users to upload very large files from a browser.
mitchellhislop
how large?

Why not just whip something together, if it is outside of what services (i.e. drop.io) can do?

[dead] mitchellhislop
how large?

Why not just whip something together, if it is outside of what services (i.e. drop.io) can do?

gaoshan
"What are your pain points?"

IE6.

kineticac
I agree that IE6 is a huge pain point... but just know that users on IE6 already have a horrible experience with the web, that your crappy and broken pages probably look and work just as well as anything else.
betageek
Lots of people seem to be totally against Flash but there's really no alternative for commercial-grade motion graphics on the web. Having tried to create replicas of some pretty basic work in 'standards' based html/css/javascript (using -webkit proprietary extensions) it's definitely possible but involves 4-10x the effort of flash, mainly due to the lack of tooling. Most of the impressive HTML5 demos are generative/procedural which has a good fit, but trying to hand craft animations and motion in code is painful.

Along with the suggested 'photoshop of css/html' we need the Flash IDE of html/css

taz
As a developer with limited design skills, my number one pain point is front end / UI work. I'm a solo startup founder and I'm currently working on the front end. It's already taken 20% of my total development time and it's not finished. The worst thing is even when it's done it'll be mediocre at best.

I haven't had any luck finding a co-founder and I can't afford to hire anyone to do the work. I'm sure I'm not the only one. I don't know how you could solve a problem like this but it seems to be a recurring theme here on HN and in start-up circles in general.

flapjack
For a photoshop-like web design tool, it would probably be a poor idea to have it output to HTML + CSS, as it would be insanely difficult to get remotely decent HTML + CSS (especially HTML + CSS that responds to interaction well). Even if you managed that, any decent front-end developer would probably rewrite it themselves to get the best interaction, "bulletproof-ness", and optimization possible. What would be far more useful is a design tool that incorporates HTML + CSS by using them for the layout of the image, but doesn't attempt to write them decently. Doing so would make it easy to use CSS to quickly change something like the font, while not trying to write decent front-end code.

In addition, I'd love it if this tool had the following. Even if it only had one of these things, I'd probably buy it.

1. Way to easily deal with text. In photoshop, text is a pain to deal with, especially for things like navigation. If there was a way to easily style the text of a file with css in addition to a gui method, things would be much more pleasurable and efficient.

2. Decent ways to include header, sidebar, and footer elements. Currently, a designer has to duplicate these across multiple files which makes updating even a snippet of text an arduous process involving opening many files.

3. A common browser element palette. Currently the only solution (That I know of), is to get a psd with the elements pre-made and try and fit whatever you get with into a design, which makes things like adding decent amounts of text to buttons rather bothersome.

matt1
Hey flapjack, I'm developing a tool to do this and would love to get your thoughts. If you stumble across this comment, shoot me an email: matthew.h.mazur@gmail.com.

Same goes for anyone else -- the app is still a ways away from prime time, but if you'd like to play a part in the development and testing process, let me know.

jarsj
I am building a tool like this. It's a Photoshop-like design tool that generates a complete PHP application. That's (HTML+CSS+PHP+JS+MySQL). Follow @zopte and I will let you in as soon as its ready.