
A Real Web Design Application - duck
http://jasonsantamaria.com/articles/a-real-web-design-application/
======
dcurtis
Neat ideas.

He mentions "true to browser type rendering" multiple times, which basically
means "shitty type rendering." Browsers, at worst IE and followed closely by
Firefox, are horribly bad at performing proper antialiasing for some reason.
(The only exception to this rule is Safari, which does a decent job.)

I don't think we should bring the ridiculous shortcomings of browsers
backwards into our design/mockup apps. I think we should continue designing
stuff in a way that doesn't force us to conform to the lowest common
denominator. Sure the depictions we might see in design apps are not strictly
"accurate", but I don't have problems watching the graceful degradation of my
designs through the various browsers.

It's the browsers that need improved type/graphics rendering, the not
mockup/design applications that need to bow down to them.

\----

Finally, I don't know if it's actually a good idea to create a web-focused
design app yet. We're still in the very early days of the web, and I don't
think the long term conventions and standards are in place yet. We're in the
flux. The blank, non-assuming canvases in Photoshop and Illustrator are good
for fostering new ideas and pushing forward the state of art on the web.

That those apps weren't designed strictly for the web might end up being a net
positive, especially as we go into the future and define what the web will
look like in the long term.

~~~
blehn
Agree that emulating browser type rendering isn't necessarily good in the long
term, but why not build in support for a variety of different type rendering
engines? Adobe is halfway there with Smooth, Strong, Crisp, etc... they could
simply add options for WebKit, Firefox, IE...

Also, a web-focused app may not be necessary, but I think a digital-focused
app is (well, I guess that would be Fireworks). Photoshop and Illustrator
really are terrible tools for designing digital applications, for the simple
fact that working with pixel-level detail is a pain in the ass (e.g. try
making a 92px by 147px rectangle with no sub-pixel edges in one of those
applications). Fireworks actually comes pretty darn close to what Jason is
asking for, but Adobe seems to neglect its core functionality in favor of
expanding on useless export options and plugins.

~~~
bobbygrace
I would love to see additional type rendering options, but this would have to
account for the OS as well and Adobe tools would have to accept WOFF and EOT
files, which counters FontFont's point of offering web fonts DRM-free.

And I still don't think there will be a tool that makes code better than a
hand, not that such a tool couldn't assist in a great way. TextMate snippets
and CSS preprocessors maybe, but that's not exactly WYSIWYG to HTML.

------
matt1
I'm currently building a web app that, long term, I want to do a lot of the
things the author is looking for. The minimum viable product, which I hope to
launch in a few weeks, will be a high fidelity mockup tool which creates
pixel-perfect designs that are indistinguishable from actual websites. Long
term, I want to implement an export feature that generates quality HTML/CSS
from the design.

If you're interested in helping test it or have any feature requests, shoot me
an email (see profile) or leave a comment below.

~~~
ihodes
I don't see your email in your profile, but mine is is my profile, and I'd
love to test you app; it sounds potentially superb.

~~~
nailer
> mine is is my profile, and I'd love to test you app

Mine too, and me too.

~~~
matt1
Got it -- thanks.

------
oneplusone
I don't know, I spend 5+ hours a day in Photoshop and I just don't see enough
shortcomings to justify trying to build a new app. Photoshop is incredibly
powerful and I don't know if I would give up the flexibility just to make
things I can already do easier.

Of course Photoshop is incredibly expensive so I can see a market for a <$100
app.

~~~
blehn
Photoshop is incredibly powerful, but not for interactive design.

\- type rendering looks nothing like any browser or OS (as described in the
article)

\- subpixel rendering makes drawing shapes and lines with clean edges a chore.

\- direct selection tool is difficult to use and therefore makes the layer
palette the primary means of selecting layers, which becomes tedious with
large files

\- no support for multi-page documents

\- positioning and resizing objects at a pixel-level is difficult

\- slicing and image export system is kludgy

\- no support for symbols

\- objects with rounded corners are a pain

Do you use Photoshop for 5+ hours a day designing web layouts? I'd imagine
you'd have a hard time going back to Photoshop after using an application that
is better suited for interactive design. I actually started using Fireworks a
couple years ago, and while I pretty much hate it, I will never again use
Photoshop to design a website.

~~~
city41
Maybe I'm just ignorant, but why were you designing web layouts in Photoshop?
It never has been the right tool for that job. My goto tool for mock ups and
layouts is Illustrator, which fits the bill far better, and has been around
just as long as Photoshop.

~~~
blehn
_why were you designing web layouts in Photoshop?_

It was a company practice at my first job — didn't have much choice.

I've always found Illustrator to be equally bad for web, though. It's a vector
tool, but the web is still a pixel medium.

For me: Photoshop for manipulating photos, Illustrator for illustration,
Fireworks for web/application layouts (although it can handle some basic photo
editing and illustrating, which makes it even better for layouts).

~~~
city41
The web really isn't a pixel based medium though. CSS has more in common with
vectors than rasters. Creating flowing layouts that work with the user's DPI,
browser's renderer and all that is much easier than trying to force pixel
precision layouts.

~~~
dasil003
As long as we are using primarily PNGs, GIFs and JPEGs for graphical design
elements then the web is a pixel-based medium.

~~~
city41
That's exactly my point though, most sites really aren't. I haven't used a
raster image for a design element in a website in about a decade. The
exception of course being a site's logo if it has one, but the logo rarely
needs pixel precise layout.

~~~
dasil003
I don't know where you're getting your data, but most sites use at least
several dozen images for basic design purposes. You are definitely the
exception to the rule.

------
Tim_M
The author suggests a design app based on web kit and then clarigies in the
comments that he meant any layout engine:

"Why Webkit? Do we really want a design application that is specific to a
single rendering engine?

WebKit is just one option. Gecko could work too. I guess with the advent of
Safari for Windows and Chrome, WebKit just seemed like the go-to. I don’t
actually know that it’s important which browser gets used, just so long as
it’s on a healthy development track and is consistent enough to be
predictable. Whatever the option, it wouldn’t replace testing in the browser,
just merely provide a consistent window to it."

Well <http://en.wikipedia.org/wiki/KompoZer> is exactly that. A web design app
that uses a real web layout engine.

------
smiler
Here's a startup idea right here - I just tried to post this myself.

You've got a spec from Jason Santa Maria - is anyone going to go create? :)

~~~
adamhowell
I've started and stopped on this idea (mine has always been something along
the lines of "Fireworks on the web... but better") several times over the past
couple of years.

But I've always left it on the burner because, as technology stands today,
it'd have to be an installed application. Importing a bitmap and deleting its
background pixels, complicated vector drawings, etc. etc. would be impossible
(or so damned difficult/manpower intensive as to make them near impossible) to
build in today's browsers. And for me to be interested in sinking several
years of my life into it, it'd have to be a webapp.

So, I just end up waiting for someone smarter/ballsier than I to do it. And
waiting...

~~~
yesbabyyes
Me too, pretty much. Although I've not even dared to think about
uploading/editing images.

My vision is something where you can create and use templates for stuff like
header, menu, columns, footer, implement styles for fonts, edit styles such as
gradients, shadows, corners.

Interface should be something like hovering to see which elements are affected
by the current rule, and then picking attributes and changing them.

Basically a WYSIWYM for CSS3.

I am certain something like this will appear this year.

------
barmstrong
Great idea - after fighting photoshop all weekend I'd love to have a tool like
this.

