

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

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?<p>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.
======
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.

------
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.

------
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.

~~~
wallflower
> A similar framework for CSS would be great.

Have you taken a look at Compass/Sass?

<http://blog.derekperez.com/tagged/compass-sass-good-to-great>

"Why Stylesheet Abstraction Matters"

[http://chriseppstein.github.com/blog/2009/09/20/why-
styleshe...](http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-
abstraction-matters/)

------
f1gm3nt
Number 1 pain point: clients

That is all...

~~~
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.

------
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.

------
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.

------
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.

------
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.

------
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.

------
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).

------
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?

------
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.

------
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.

------
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.

~~~
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.

------
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.

------
bunchesofdonald
HTML. I really hate writing html. Especially html forms. I've recently run
across HAML, which I think is gorgeous, but unfortunately we're a
python/django house ATM.

~~~
dannytatom
Maybe give this a go? <http://github.com/jessemiller/HamlPy>

------
asnyder
The tool you're describing exists, see
<http://www.medialab.com/sitegrinder3/>.

------
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?

