A simple page like that should be easier and faster to create from scratch using a WYSIWYG tool, and then publish to a web platform that support it.... than copying the source and then editing it in a text editor.
I know in the past such WYSIWYG tools were too rigid and thus we have a generation of designers that work in text.... but it just seems so archaic to me.
Like building images with text, rather than using photoshop.
I write code on the backend, that lives on servers, I don't write HTML for a living, so maybe I'm missing some necessary requirement that forces people to work in text editors.... but a straightforward page like that should be much faster to create by dragging a button element onto it, even a generic one and picking the image, and then putting text boxes in there and setting their style, etc, should take maybe 2 minutes if the assets are already created. Not being able to do so seems like such a time sync.
I remember once not too long ago tweaking a landing page, by going back and changing absolute pixel offsets 2-3 pixels at a time in text. I've done this with iOS code as well. Change the text, compile, run, how does it look? ok, need to go farther, back into the editor, bump it up 2 more pixels. etc.
FWIW, if anyone knows of visual tools from startups or open source that are trying to solve this problem, I'd be keen to hear about them. (I'm building a web platform, and rather than create my own design tool would rather support existing ones with my platform.)
The closest I'm aware of is Cappucino which supports using Apple's Interface Builder to layout UI for Webapps, and then export the IB files to the Cappucino format. Sproutcore had Greenhouse which looked even better, but seems to have been abandoned.
A better tool would mean easier AB testing, maybe even ABC testing... faster development and more iterative design. I see no reason that such a tool couldn't be made, or would have to necessarily impose restrictions that limited its functionality... and I think that boosting web designer productivity would be hugely valuable. On the other hand, I can't imagine why nobody has tackled this.
PS-- on the mac there's Flux, which sorta does this, but it doesn't integrate with a common web framework like rails, etc. I mean, you can, but it seems more suited to static pages. http://theescapers.com/flux/
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.
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.
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).
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.
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 don't do everything in it, and the code that comes out isn't quite production ready, but it's damn close.
I'd argue that landing pages are the most important and most complex pages to get right.
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.
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...
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.