Hacker News Reader

As someone that writes HTML for a living I couldn't imagine using a WYSIWYG editor. A lot of markup, especially the new semantic HTML5 stuff is pretty subjective. Different organizations/teams have different markup patterns/views on this stuff. A WYSIWYG editor would have to be pretty customizable to fit in different organizations I think.

You can use Firebug/Web Inspector to adjust your layouts in real-time without needing to go back, modify code in your editor, save, and reload the page. There are some new tools (backfire) out that will even let Firebug/Web Inspector automatically update your CSS file so you don't have to go back after tweaking it in browser. Hopefully, browser vendors will one day bake this functionality in to their browsers.

The biggest time sink is not being able to drag and drop it's cross browser support. I can spit out a page from a design pretty quick, but getting it to look consistent across four or five different browsers takes forever.

  > As someone that writes HTML for a living I couldn't imagine using a WYSIWYG editor.

You can't imaging using any existing WYSIWYG editor. I would argue that using Firebug to make changes, see them in real time, and have the code auto-saved is just begging for a good WYSIWYG editor. Image if a WYSIWYG editor could create decent markup and css and provide perfect cross-browser support for all relatively modern browsers. You still couldn't imagine using it?

WYSIWYG has two major disadvantages:

1) It's hard to share components of WYSIWYG design across different projects.

2) It's hard to see what differences are between two versions in source control system. In order to do that you still need look at underlying code.

This still seems to focus too much on what WYSIWYG is now, as opposed to what it could be.

Problem 1 can be solved by designing your WYSIWYG editor UI around modular page components and templates, kind of like desktop software designers like QtCreator.

Problem 2 is a matter of designing a good visual diff tool for the DOM. You could combine the Tilt Firefox addon with other visual difference tools like A/B overlays and highlighting changed attributes (e.g. if the text color or border size is changed on a particular element between two versions being compared, set the text or border color or size of that element to some highly-contrasting or even animated value when the element is hovered in the diff view).

I've been slowly building a high fidelity WYSIWYG web design tool called Lean Designs that might interest you: http://www.leandesigns.com

It's hard to get folks to switch over to a less-than-complete web design tool (and building an unconstrained editor that generates quality HTML is a challenge), but I think it will get there eventually. I'd love to hear your feedback on the current product or advice on how to proceed long term.

Thank you for making this. It's one of those things which I have been tempted to make for a long time.

You might want to look into the editors of Optimizely and VWO. Even though they are A/B testing tools, I've used them just for thinking through quick design changes. From looking at the code they generate, it looked like they are just altering the CSS using jquery (often just assigning absolute positions to elements). So maybe you are already doing something better than that.

Have you looked into working on a small subset of web design? For example, make your editor work really well for Woothemes or sites built on Twitter Bootstrap. It will give you constraints to make at least one kind of popular design format really easy to edit and also possibly an easier way to get users because people recognise those brands.

I don't want to pivot your pivot, but positioning your product primarily for editing existing web pages, rather than creating news ones from scratch might be a good idea.

I'd like to give a big recommendation for this program. I've been watching LeanDesigns from the beginning, and I haven't used it much, not being a serious designer. But when I do need to build a site, I turn to LeanDesigns to make my life much easier.

I don't do everything in it, and the code that comes out isn't quite production ready, but it's damn close.

I signed up for your other site (jmockups) and I already had an account on file so I tried it out. It's pretty cool. Depending on how intuitive and slick this is I could see a big market for this.

A simple page like that should be easier and faster to create from scratch using a WYSIWYG tool...

I'd argue that landing pages are the most important and most complex pages to get right.

Perhaps, but definitely not from a technical perspective. They're often going to be the simplest. A good WYSIWYG tool would make iterating on the design much easier.

WYSIWYG is to web design what paint-by-number is to painting.

I've been waiting for a tool like this ever since I got into Web Design. I just couldn't understand why it didn't exist already - it's such a clearly valuable thing to have.

A lot of designers right now (like ronaldj in another comment) think that it's not practical or unnecessary. They think that the design will come out too rigid or it's too subjective.

But the thing is, as someone who just does a few pages once in a while, I don't care about this - I just want to be able to throw up a button on a page, choose it's place/size/color, and then be able to just say "add rounded corners" with a checkbox, instead of having to research on the web the various ways to do that, and finding out why certain solutions will work, but not in IE6, and why JS solutions will work and have their own problems, etc.

Such a tool will open up a whole new set of people into web design, which is a huge net plus.

By the way, matt1 from HN has built a tool that's working on doing this: www.leandesigns.com. It's not perfect yet, but it's already pretty great and saves me lots of time. Check it out.

I just want to be able to throw up a button on a page, choose it's place/size/color, and then be able to just say "add rounded corners" with a checkbox

We had all that in tools like Powerbuilder, back in the 1990s. AFAIK you still have that if you build your site using Flash (though I've never used Flash to build anything, so I don't know).

The world decided that browser-based apps were better, warts and all. In a way it's a shame that plugin vendors didn't take seriously the concepts of security, performance, and openness, the web could have ended up a very different place.

Likewise, more developers would probably be happy to use WYSIWYG layout tools if they did not generate hideously formatted, immensely verbose and complex markup that is nearly impossible to hand-tweak when needed, or if the tools themselves were not so complex that mastering them was just as much work as mastering HTML/CSS.

I would be interested in a tool that lets me visually build a basic page layout, something like a wireframe, and generates clean markup and CSS that I then easily enhance/fine tune by hand. I'll check out this Lean Designs tool that's been mentioned a few time here...

I think Adobe is working on something like this. Though Dreamweaver leaves much to be desired, I think what their working on is something completely different. Plus, the announcement that they're committed to HTML5 is more or less a hint of this. My guess is that it's something like Adobe Flash Builder, but instead of Flash, it outputs HTML5.

I've tried Adobe Edge and the biggest issue I found was with the amount of HTML output and the human readability/context of elements. There seemed to be a lot of wrapper elements used in succession and named long, generic names with numbers. In my brief trial it looked OK in the browser but due to the excessive HTML, it would be a huge burden to edit in anything other than Adobe Edge if you wanted to go back and change anything. In a text editor, I can create a page using only 20% of the elements Edge did and have the opportunity to name them something relevant (e.g. #author_info rather than #generic-1-3-15).

Are you talking about Adobe Edge? http://labs.adobe.com/technologies/edge/

Folks can design images in WYSIWYG tools like Photoshop because the output standards are much more stable and consistently implemented than HTML + CSS + JS. Every OS, browser, image viewer, etc. will render a JPG, GIF, or PNG almost exactly the same. But give them all the same HTML, CSS, and JS, and you might get very different results--especially if you are trying to make use of the coolest new features. Basically, hand-coding is the price we all pay for an industry that is innovating its technology so quickly.

I am not a Photoshop wiz, but isn't it a lot easier to change a pixel offset by 2 pixels in text than in photoshop?

How about we just not try to offset things in units of pixels on web pages?

I think "two pixels" is meant to describe the magnitude of the change rather than the precise measurement used. 2pt, .2em, 2px, 2mm...

b1ind 4 hours ago | link [dead]

If your only mission is to adjust one asset by 2 pixels, they're similar. If you want to see how those 2 pixels affect the design in its entirety, then photoshop is a much better option.

It looks like this account was auto-killed ~570 days ago, but it's not clear why, as there's no obvious massively downvoted comment or OT submission.

http://pllop.it/ (disclaimer: I'm an adviser) does some of what you are describing (with a lot more to come), but is positioned more as a product than as tool to be integrated.