top | item 13190824

Google Web Designer (2013)

437 points| chenster | 9 years ago |google.com | reply

150 comments

order
[+] themodelplumber|9 years ago|reply
I just checked out the included templates. At least the first 20-30 are all ad templates, one of which is a full-screen mobile interstitial! That's the same element that just got an SEO finger wag from the Google Webmaster Central Blog[0].

_Just_ as the list of templates started getting interesting with some Youtube slider-thing integration, it came to an end. So yeah, this seems to be aimed at folks who need to build ads quickly and don't want to have to be HTML5 pros.

With that said, there's a "my templates" feature so maybe you can use it to maintain your Star Trek fan website, or business portfolio website, too. I'd just hesitate to recommend that in general, as my experience with GUI HTML5 builders has been that they aren't the best IDEs or text editors and I really quickly start to need one in order to be efficient.

[0] https://webmasters.googleblog.com/2016/08/helping-users-easi...

[+] vcool07|9 years ago|reply
Could any expert shed any information on why we lack a professional front-end WYSIWYG kind of editor for the web ? I remember tools like dreamweaver/frontpage existed a long time ago, but don't hear about them anymore. Is it something that's too hard to make or is it just that the market doesn't exist ?
[+] tribby|9 years ago|reply
> Could any expert shed any information on why we lack a professional front-end WYSIWYG kind of editor for the web ?

we don't. webflow[0] is the best I've seen. there's an OSS clone called grapejs[1], but it's still very alpha. one reason we don't see greater adoption is that WYSIWYG editors for the web occupy a sort of middle ground between template-based hosts like squarespace, weebly, etc, and opinionated low-barrier-to-entry frameworks like bootstrap. I think there's some market, especially for prototyping, one-off marketing pages, and people who don't already have a preferred design workflow, but I don't think WYSIWYG will return in a large way until these editors begin doing "real" front-end lifting -- i.e., "drag and drop this react/vue/whatever component within a grid, without having to know what react/vue/whatever is." the appeal of dreamweaver, frontpage, and all of those editors in the 90s was that not everyone and their mother was a coder, but everyone and their mother did want to be on the internet, and there were none of the aforementioned saas or framework solutions to rely on. in 2016, there's no lack of coders and tooling, so if you don't want to write your own code, you may as well just spend the $10 for a shop overseas to turn your static layout into a responsive webpage overnight.

0. https://webflow.com/

1. http://grapesjs.com/

[+] c-smile|9 years ago|reply
Last 10 years I am in the business of making WYSIWYG editors of various kinds. Yet I am an author of BlockNote.net HTML WYSIWYG editor (it is pretty old but works up until W7).

HTML/CSS WYSIWYG editing from mathematician point of view:

Second main task of a browser is: by having given HTML/CSS to produce set of pixels on window's surface.

On other side WYSIWYG editor is aimed to solve opposite task: from desired set of pixels (those ones you want to get) to restore/produce acceptable HTML/CSS combination.

The problem is that the task can be accomplished only with pure HTML. As soon as you add CSS to the equation acceptable WYSIWYG becomes barely possible: the same set of pixels (rendering on the screen) can be achieved in many different ways. Layout can use floats, absolute positioning, flexes and grids recently, etc.

Direct task (rendering) is perfectly formalize-able and solvable (HTML5 and CSS specs) - we have at least three independent implementations of these formalizations.

But opposite task (HTML/CSS structure synthesis from given image) has no determined solution.

And so different WYSIWYG systems use different approximations.

Like Microsoft Word, it produces HTML/CSS documents that are pretty close to what you just saw in it, but that HTML/CSS is barely readable and reusable as HTML/CSS. Others produce readable HTML but rendering is far from what you want to see.

Therefore "ideal" WYSIWYG editing of HTML/CSS is not achieavable in principle. You need to give up something - either WYSIWYG quality per se or feature set. Like you can have WYSIWYG editing but for editable text alike islands: content area of your blog site for example.

[+] caryhartline|9 years ago|reply
They do exist in different forms. If you're on the level that's just above making a Facebook page then you might go with Squarespace or Wix which have WYSIWYG editors. Surprisingly, Dreamweaver is still a product that is updated(?) and used by many.

When it comes to the high-end, there are Mac apps such as Hype and Sparkle which are used especially for developers who want to create animated websites.

It's also the case that creating a webpage isn't the most important thing anymore. Many businesses only exist on Etsy and Facebook. The time when knowing what html is and knowing how Dreamweaver works meant you could make a living off of anyone who wanted to be "on the Internet" is kinda over.

[+] devoply|9 years ago|reply
My thinking is that they were replaced by dynamic sites based on PHP like WordPress, which initially people were doing template conversions for but eventually they switched to using themes... then we have had a bit of a redux with static site generators, but those are all hobbyist efforts. Dreamweaver still exists, it's just that no one makes those sorts of sites on Dreamweaver any more. There is no market for it.

All the developers that might do static frontends code by hand or use a library like Bootstrap or a theme like a WordPress theme. So there is not really much room for a tool like Dreamweaver in the landscape of web design. It's all about modifying existing things to make them fit the problem.

[+] flukus|9 years ago|reply
The biggest reason is that WYSIWYG doesn't really work on the web. What you see on your screen isn't what someone else will see because their monitor is a different size or they are on a mobile device.

WYSIWYG requires a fixed layout size, which was common back when dreamweaver/frontpage were around.

[+] udkl|9 years ago|reply
There is https://pinegrow.com/ & to some extent Adobe Muse .... but I agree with the sentiment of there not being more options of WYSIWYG editors to choose from.
[+] intrasight|9 years ago|reply
The underlying JS and HTML5 frameworks change too quickly for that to work. Companies that tried have presumably lost their shirts. But I'd say that's a good thing in that now web development is a "fill the area under the demand curve" type of undertaking. You can spend between $10^1 and $10^7 on a web site.
[+] moonlighter|9 years ago|reply
Macaw is such a tool, runs on Mac and Windows. It's a free download at http://macaw.co (the product isn't updated anymore though; the devs have moved on).
[+] pbhjpbhj|9 years ago|reply
With responsive design - that adapts to your viewer, their bandwidth, their device (and orientation), their add-ons (eg uBlock/ABP) - WYSIWYG rather starts to lose meaning. I'd warrant it's easier to design in the abstract than moving elements and watching 5, 20, 100, ... different views to see what your page visitor might see.

Now add in progressive enhancement.

We're not dealing with the largely fixed desktop viewport anymore.

That I suspect is why WYSIWYG hasn't taken off, Dreamweaver did quite well, but then the web ran away to multi-platform as the default.

[+] jasim|9 years ago|reply
Webflow is the best all-in-one tool out there.

There is also Sketch, which is a vector design tool that shines at designing user interfaces. And unlike Photoshop, it is extremely friendly to the web - if you can do something in Sketch, that can be done in CSS.

We're building a tool that converts these designs into code (HTML, CSS, SASS, React, ERB etc). That gives a sort of WYSIWYG workflow for pro users. You can have an expert designer do your design, and then have a developer run with it by generating quality code from them.

[+] Animats|9 years ago|reply
One of the few remaining alternatives to Dreamweaver is Blue Griffon.[1] It's open source (mostly), but the manual is proprietary. I just downloaded it and tried it. It's a basic HTML editor, not, like Dreamweaver, a site manager. It's heavily oriented towards preparing content for screen readers for the blind, with ARIA features prominent.

[1] http://www.bluegriffon.org

[+] maxmcd|9 years ago|reply
In my limited experience the market asking for and building sites on dreamweaver has completely shifted to squarespace, wix, etc.
[+] j45|9 years ago|reply
In the past creating rich experiences was in things like Flash. With it's premature flogging, the side effect was there was little to actually and reliably replace the rich experiences it was able to create 2007-08. That's one reason seeing tooling like this, and Adobe Edge is something to look forward to.
[+] deboboy|9 years ago|reply
Adobe is going after this space with Muse: http://muse.adobe.com

We've used WebFlow for a couple of years; it doesn't suck and you can actually build an early stage [pre-rev] business with it before committing to a full stack team/budget.

[+] proyb2|9 years ago|reply
Namo Webeditor was popular along with many tools, only backend services need lot of effort to maintain. Thee is one professional web design editor who patented it.
[+] Kiro|9 years ago|reply
The generated HTML/CSS is not semantic and impossible to maintain outside the editor.
[+] boxcardavin|9 years ago|reply
I'd also love an informed answer about this.
[+] elif|9 years ago|reply
You are commenting on one..
[+] frozenport|9 years ago|reply
WordPress met those people's requirements
[+] politician|9 years ago|reply
It looks like they are positioning this as an efficient way to create ad units, not entire websites. Maybe it should be called Google Ad Designer?
[+] johnhenry|9 years ago|reply
Just wanted to point out that this has been out for quite some time with little updates. If you click "Download Web Designer Beta", in the top-right corner, you'll see a note saying that the page hasn't been modified since April, 2014. Nonetheless, it could be a cool product -- if only Google decides to move forward with it.
[+] waterflame|9 years ago|reply
I've been using this tool since a year now to quickly build HTML5 banners for DoubleClick. 1- the software was way too buggy than it is now, yet, it still is, and updates aren't that frequent. 2- all objects are positioned absolute, even though you can choose to create a responsive banner. 3- for me, it's perfect for ads, and handles animations pretty well (it uses CSS animations) 4- you can always access the generated code and modify it once you understand how it works. 5- I would never use it to create anything other than ads. 6- the UI sucks, especially when the biggest part of the process is adding assets, modifying their properties or settings their CSS, and you constantly have to resize the accordion drawers.
[+] tonyhb|9 years ago|reply
This has been out for around 5 years. I remember installing this at an ad agency I worked at when HTML5 ads were barely a thing.

At this point they probably have a small team working on it for sake of their ad division but people here shouldn't into this too much.

[+] ourcat|9 years ago|reply
Having lived through the birth (and death) of HotDog / Dreamweaver / Frontpage etc. my biggest concern here is "HTML soup".

My next biggest concern is that these tools don't really teach people much about how the web works and also that marketer-types tend to over-use these tools with their new-found 'skills' and build over-bloated sites.

HTML is easy.

[+] ff10|9 years ago|reply
TIL that Dreamweaver is still being marketed.
[+] sandGorgon|9 years ago|reply
+1000 Cross platform including Linux. I hope this tool gets traction and goes beyond html5 to mobile design as well.
[+] keyle|9 years ago|reply
Interesting product. There is a huge demand for it and I'm not sure what Adobe ended up doing and if it works well. Interesting these products that come so late to the party, to fix the gap left by Flash (it had timeline animations etc. like so) for html5.
[+] t3ra|9 years ago|reply
So its not targeted towards making "pages" more towards just making HTML5 banners. I guess just trying to replace flash banners with HTML5 ones

The templates are all for banners and the tools for making say a "div" are not there.

[+] mochidusk|9 years ago|reply
I'm currently building a browser-based WYSIWYG to make book covers. I've tried SVG and Canvas but it's terrible for implementing multi-line text. Trying to add kerning, tracking was almost impossible.

Not sure if anyone's heard of Readymag[0], but I'm really impressed with their editor - and it has excellent typography tools and UI.

Anyway, what I've noticed is that now many people are abandoning their own websites & blogs in favor of a centralized service such as Medium, Instagram, etc.. I remember a few years ago there were alot of fashion bloggers and now they're all on Instagram, updating daily. People have lost interest in designing, building, maintaining their own sites because it's too much work for the average person. Not to mention traffic going to the individual sites are neglible compared to social media. When posting a photo on your own site gets 10 visitors, but that same photo garners hundreds of likes on somebody else's platform, then you're going to be spending time on that platform.

[0] http://readymag.com

[+] stevebmark|9 years ago|reply
Adobe Edge has already tried the HTML5 tooling route http://www.adobe.com/products/edge-animate.html. I don't think they got much traction and essentially abandoned it. Curious if this offers anything different.
[+] j45|9 years ago|reply
I wonder why Edge didn't uptake. Possibly licensing costs, or maybe the timing of it was a little earlier than where we are starting to build more immersive experiences with HTML5/JS and are starting to desire the use of tooling to making it easier.
[+] rl3|9 years ago|reply
This appears to have more (or at least different) features than Edge, though I can't help but feel it's basically tracing the same path.
[+] nnd|9 years ago|reply
On a related note: anyone knows a good guide to catch up with the recent frontend design/development trends?
[+] SnowingXIV|9 years ago|reply
I wish things like this existed but not for front end, but for handling databases. I want to be able to send values from my static sites into a database and then from there be able to perform hooks and actions from said database. This all being done securely. I need form handling and tracking.
[+] namaemuta|9 years ago|reply
For a moment I thought that google had designed a software for app designs like Sketch or Adobe XD. None of them works for Linux so I was pretty excited until I realised what it was really :(
[+] avecfromage|9 years ago|reply
Looks interesting! From the website, it is difficult to say how this software is different to existing solutions like for example rocketcake. I guess it is more useful for creating HTML ads?

Also, what if google decides to shut this down suddenly someday? Will it be easy to switch a project to a different software then?

[+] vivekd|9 years ago|reply
Where is the need for this product? People who know about computers will probably just use the very easy to learn HTML and CSS code and people who don't know computers will likely use wix or wordpress or some similar alternative. I wonder where this product will fit?
[+] vonklaus|9 years ago|reply
> Where is the need for this product?

An intuitive easy to use WYSIWYG editor is a highly sought afterand demanded product category. Squarespace costs money and is actually (for me) a pretty bad user exp.

Google probably can deliver on this because they are SEO. Even good editors were not semantic. I havent tried this product, but if it is halfway decent it will find market share. If it is perfect it could replace wordpress.

I am pretty competent as a developer and I would use (based on my understanding from the link) this product rather than battle css or compile sass. Plus I can edit the code.

On top of top teir engineering, google has control of SEO & pagerank so maybe they can win where orhers hadnt. No brainer for them.

[+] camus2|9 years ago|reply
It looks like an HTML ad creator, not a "website designer".
[+] hmoghnie|9 years ago|reply
I wonder when will they shut it down.