The robots will destroy us all!

After Andy pointed out the rather spiffy looking site Styleboost I did what any conscientious web developer does and viewed the source. Even though the site generally separates content and style, it got me to wondering whether the code had been produced using a layout program, such as Dreamweaver, or just someone who has no clue about semantics at all.

Given that I haven't opened a webpage layout program in about two years (eschewing them in favour of the far more advanced TextPad), I have no idea about the state of Standards design in them. But drawing from my intimate acquaintance with Dreamweaver 4, I can see how it would be so very easy to just churn out 133 divs, give them unique IDs and style them like it was 1999.

Just over a year ago, Standards was all about getting the graphic designers on board. This, theysaid, was what was needed in order to show that Web Standards weren't the ugly, boxy cousin to tables. I think we've now shown that Standards can cut it with the best, so now we just wait for it to seep further into the mainstream. Inevitably, that mainstream is going to be WYSIWYG tools and, inevitably, those tools will be used by people who really don't care about semantics. Question is, can Standards survive in the easy-to-use market, or will it remain mostly the domain of code monkeys, or friends of code monkeys?

The Internet is all about freedom of communication, and the ease with which HTML could be produced – in Notepad and in Frontpage – was one of the driving forces behind its popularity. Would Standards-based design tools raise the requirements for access? Given the power of Standards, would most naive users still continue to absolutely position some meaningless <div>s?

Standards might already be living it large amongst the easy-to-use – like I said, I'm not up with WYSIWYG hipness – but I definitely think that if Standards are going to become the dominant mode of development on the Web then they have to be a no-brainer. But hell, I'm OK either way, could just mean that producing good code will pay more.

Previous Entry

Next Entry

Comments

1/39

I'm guessing that the presence of javascript functions named MM_... indicates that this might be what the latest version of Dreamweaver churns out.

Which begs the question - how would one create a semantically correct page in a WYSIWYG editor anyway? What we need is a WYSIWYM editor - What You See Is What You Mean - which then gets styled afterwards. Isn't this really the process we follow when marking up a page? It is for me anyway.

2/39

Rui Lopes commented on 29 March 2005 @ 23:33

IHMO the problem arises with the ability of all WYSIWYG editors to mix structure, content and layout (either HTML, word processing documents, etc.).

My humble approach would be the creation of two different applications. The first, something like latex editors, where one can create semantically-correct documents (especially regarding document structure and navigation). The other, to simple stylize the previous created document (towards designer crowd).

A further approach would separate structure and content (geared towards CMS stuff).

Each application UI should reflect deep usability concerns, towards the target users (not what we have today).

Just my 2 cents.

3/39

Renato Targa commented on 30 March 2005 @ 03:55

Isn't it the Style Master promise? I didn't try it --I'm also a code monkey without enough time--, but it sounds good to me.

4/39

Dreamweaver isn't a WYSIWYG editor. It even says so in the documentation. It has three views: code view, design view, and split view. The "design" view is meant to approximate how a page would look in a browser. It's not, however, WYSIWYG...nor is it meant to be.

Also, I don't know of any real designers who "design" in design view. (Granted, I'm limited by the relatively small number of designers I know, and the subset of those that use Dreamweaver.) Most, like me, use code veiw, but sometimes pop over to design view to see how something looks without previewing it in a browser.

That said, Dreamweaver has never...ever...generated any code in any of my pages. None. I don't use some of the built-in code snippets (for things like javascript rollovers and such), which is where most of the MM_ code comes from. It's also never re-written any of my code. Ever. What I type is what I get. Always.

Dreamweaver respects my XHTML and CSS compliant code. Better yet, it makes it very easy for me to code it, giving me such things as tag completion, popup lists of available tag attributes, and very powerful site management functions (check-in/check-out, site indexing so that if I change a filename or other link, it'll update any pages that point to it, etc.)

As for standards, DWMX has some nice validation options built in, as well as the complete O'Reilly reference series as builit in help. Other niceties include the accessibility options that, when turned on, prompt for things like alt tags, table summaries and headers, etc.

The way I look at DW is that it's an advanced text editor with powerful site management capabilities, and advanced coding capabilities including web services, ColdFusion, PHP, JSP, etc.

Please don't lump a product like DW into the same class as the garbage that is FrontPage, NetObjects, etc. They're fundamentally different.

7/39

Unfortunately, being "old school" I loathe WYSIWYG editors (which is what I consider Dreamweaver to be, sorry Tony) - I find it far more efficient to code by hand because I'm always double checking... However, I remember the days when dreamweaver and frontpage were widely used by shoddy "designers", so it's a personal bias.

-Ryan

8/39

Frankly, Dreamweaver is not really user-friendly enough to be a WYSIWYG editor, although I think that was its original intention. But unlike other editors (I've used NetObjects), DW gives you complete charge of the code.

DW still does have something called "Layout Mode," but it isn't even mentioned when you open up the program. In fact, I've never seen it!

9/39

mattymcg: I suppose there are plenty of those designers out there. Like I said, my results are skewed by the small sample size (and probably becuase most of my designer friends are/were coders as well.)

Ryan: I do code by hand...with DW. Like I said, it's really a very advanced text editor. If you have a need for site management (templating a non database driven site, for example) you should give it a try. There's a 30 day free trial. What they did with MX was take HomeSite (remember that?) and integrate it into DW. So, you've got the hand coding capabilities of HomeSite coupled with the site management features of DW. No WYSIWGY to be found. As for FrontPage, any so-called "designer" using FrontPage should have their card revoked and banned from the club...but that's *my* personal bias ;-)

10/39

I have to admit that I only gave the code a cursory look. However I doubt that it was created in WYSIWYG mode. It looks more like it was put together by somebody with divitus or classitus.

On a side note I've got no qualms admitting that I use Drreamweaver MX as my primary XHTML/CSS coding tool. Colour formatting, code hinting, intergrated ftp and file management etc

11/39

Rui Lopes commented on 31 March 2005 @ 19:54

Why in the hell should a *designer* have to code CSS? Give him well structured HTML content, give him a 100% WYSIWYG application, so he can focus on the design, not in CSS trickery to get his job done.

Doesn't that make sense? It does to me...

It's like saying to an architect to create his projects using AutoCad's terminal/command box. It's possible to do it, sure, but awkward.

12/39

Ideally, "designer" should focus on the design. Period. The design should then be handed off to (insert label here: coder, developer, etc.) to turn the design into a useable and compliant web (stie|page|template|etc.). The "design" should absolutely be implemented using CSS and XHTML. 100% WYSIWYG applications procude invalid, bloated, and horribly inaccessible junk code. If you don't ever care about a) alienating a growing number of potential site visitors, b) ever (easily) implementing newer technologies down the road, c) easily repurposing your data down the road, etc., then by all means, go ahead and put up junk.

Your architect analogy isn't quite right. See, an architect creates a design in AutoCad, but someone else builds the building based on that design. With the web, many times the designer (architect) is also the builder. There's no good analogy in the construction world for what a 100% WYSIWYG tool is to the web world. There is an analogy for what the finished products would be, though. Would you rather see your design implemented by professionals, so that everything in the building "behind the scenses" works as planned? For example: the wiring is all up to code, studs are where they should be, etc. Or, what if it looked ok from the outside, but behind the walls everything was a mess. When you try to go in and do a remodel, you find the wiring is non-standard, the studs aren't where they should be, etc.

There's really no such thing as CSS "trickery". The web has evolved. CSS/XHTML allows for the *proper* separation of content and design. 100% WYSIWYG tools do not produce the proper end result, with properly separated content and design.

13/39

For my point of view, no self-respecting web designer these days can afford to keep himself ignorant about the importance and understanding of CSS and XHTML (okay, some do, but we know what happens to those later). The web is not about "pretty pictures" or "print on screen" - it's always been about communication, first and foremost. Design is something like the icing on the cake, really.

Must be my old school experiences that built me character. Back ten years ago, if you wanted to design for the web you had to get your hands dirty on code or else. That's the way it was then for me and the way it still is for me now. And I like it, because I love the feeling of being in total control of what I'm doing and, most importantly, have through knowledge of what I am actually doing. And I don't know much programmers in high-end teams with tolerance for "web designers" who can't tell a div from an anchor...

14/39

If you coded table-based sites without a WYSIWYG editor, face it -- you're weird. There's no way you can keep your head wrapped around quadruple-nested <td>s and still know where you are.

I'm assuming here that tables are still the dominant paradigm in website design across the whole Internet. So although plenty of you people say "any real web designer wouldn't use those tools", I just can't see the whole industry (whether it be hardcore standardistas, ad agencies, software developers, graphic designers, etc., etc.) becoming handcoders.

I don't even know whether that would be efficient.

15/39

Rui Lopes commented on 1 April 2005 @ 19:56

Tony and Beto:

I understand your points. They're valid. I'm a "hardcore standardista" (like Cameron stated). My point stands on better/right focus on the support tools for web developers and web designers.

You can touch up photos with MS paint. But it's a hell lot easier with Photohop. You can refactor a 1M code lines project with Find/Replace tools. Don't you think drag'n'drop + refactoring tools on Eclipse eases the task? Heck, you can also code everything in assembly (or bytecode, or even in binary) - but would you do it? I know I wouldn't.

Give the rights tools for the right tasks to the right people. Software has to adapt to people, not the opposite.

Design should be the focus of designers. Not coding. Not hacking with text files (html, css, etc). As a small example, just check one of Cameron's links about design issues of CSS Zen Garden' stylesheets. Designers focus so heavily on "compliance" that they forget the USER. Give a better tool to a designer, and he will quickly hack layouts for the content, so he can test them on users. Design means "usable art". Usable.

16/39

The "design issues" of CSS Zen Garden are a moot point. It (the garden) was never intended to be USER focused. It was (and is) an experiment/showcase for showing what CSS can do. It was a ONE PAGE experiment, with some admittedly bizarre structure to give the designers some flexibility. If you read the first part of Dave and Molly's new book (The Zen of CSS Design), they talk about how the basic garden template would be different if able to start again.

Anyway, I think the main thrust of my point is being missed: I agree that designers should focus on designing. It should either a) end there, and have someone else turn the design into a template (or static page design), or b) they should take the time to learn the nuts and bolts (xhtml/css) so they can do it themselves. Ideally, designers shouldn't ever have to touch (or learn) xhtml/css, as someone else will be handling that part. It's when you try to wear both hats that it becomes important to learn the nuts and bolts. Using a 100% WYSIWYG editor is, in my opinion, a copout for any "real" designer. The design is only half the product, when talking about the web as the finished product. Usability should be a prime focus, and should go hand in hand with compliance.

I also agree it would be great to have better tools. Problem is, no such beast exists. There isn't a WYSIWYG tool I've ever seen that gets it right. Not yet, anyway. So, for me anyway, I have a toolkit of premade wire templates written in XHTML/CSS. I can mock up a design very quickly, and make changes in a snap. It's no slower or more cumbersome than using a WYSIWYG, in all honesty.

Cameron - I think the preponderance of old (table based, font ridden) designs come from two factors: 1) legacy code for large sites that would be very time consuming to change (another great selling point for doing new sites the correct way: easy to change the entire site with CSS), and 2) 99.9% of large scale Content Management Systems (CMS's) spit out junk, or at least come standard with crappy templates, which the implementers don't re-write. For a large scale database driven site, using a CMS, you're talking about a small handfull of templates that drive the entire site. Learning to code those templates correctly shouldn't be so difficult. Really. Using templates is *very* efficient. Sure, you wouldn't want to hand code thousands of static pages, but even if you were such a massochist, using XHTML/CSS would still make the job MUCH easier, particularly when you want to make a sitewide change. Can you imagine if your client/boss decided that "Georgia" is the new "Verdana", and wants all 2000 pages changed, NOW...oh, and the header fonts should be blue, not black, and....Good luck with those depracated font tags. With CSS, I would make 2 quick changes, re-publish the site, and I'm back playing with the PSP.

17/39

I have to say that the thought had occured to me. I hand code my sites, I have done for years, partly because I started that way, partly because I like the control.

A lot of non-developers prefer WYSIWYG editors, and I can understand why, but producing pages to web standards using those tools is very difficult (even developing tools to produce web standards compliant code must be hard). Most people just want to make a web page, they don't care about what's underneath.

So, until the software developers produce software that will make standards compliant websites as easily and as seemlessly as the current batch, I think we standards will remain in the realm of the professional.

Ho do you force these software makers to go the standards route? Make your browsers show only compliant code (but this ain't going to happen).

18/39

I haven't tried it yet, but the newly released Adobe GoLive (GoLive CS2) supposedly uses CSS as its default method of page creation...a first for so-called WYSIWYG poducts. If it works as well as one reviewer notes, then perhaps we're getting closer to what Lee was asking for: software that will make standards compliant websites easily and as seemlessly.

Here's the first review I found: http://tinyurl.com/3zmqa

19/39

Squeek commented on 6 April 2005 @ 10:26

Yep, I agree about TextPad ( http://www.textpad.com ). It's the best 27US$ (back a few yers ago) that I've ever spent. Sure, I'm a geek, and proud of it, but there isn't anything I haven't been able to do with TextPad. With the clip library you can even have it insert html elements for you, with all of the necessary attributes, quotes, and values, keeping you from forgetting to put ALT text on images, etc.

Who needs to pay the high prices of Adobe or Microsoft authoring tools when you can spend much less money for TextPad and know EXACTLY what's in your document? Not I.

20/39

Rafi B. commented on 11 April 2005 @ 05:53

Can somebody explain why this code is so horrible? (http://www.styleboost.com/)

I code with Microsofts' excellent Visual Interdev 6, and I would never touch a WYSIWYG editor. There are WYSIWYG editors that might become a valid choice for people who have no time or will to learn to code. And notice I said 'might'.

I see there's alot of DIVs. The IMGs are misplaced. And overall it seems very bulky, but, for my benefit, help me be a better standard developer, and explain me please what's wrong here. :)

21/39

Tony, I didn't see much specific in that review that indicates CS2 is a huge advance over DW2004 in terms of CSS. CSS is default in DW, as well - the only thing is that it doesn't automatically create an external style sheet (unfortunately). I'm curious to see what the impending version will do though, since it's in beta, as well.

36/39

Damn I was going to ask the same question. I've spent ages builidng my site and wanted to make an enter or welcome page with just a blank background with just a flash animation of a logo that would link to the homepage but can't get rid of the header or change the bg color without the rest of the site getting affected. Quite a big oversight if you ask me, I'm surprised Weebly haven't got an option for it!

37/39

Hello, I need to ask you something. Is this site a worrdpess site? My business is thinking of moving our web page from Blogger to worrdpess, do you think this is possible? In addition did you set up this unique template yourself some how? Bless you for the help!

38/39

i guess weebly cganhed since you uploaded this but if i have a html code of a picture how do i put that picture into the background if im using the Custom Theme thing.i have no idea about html and css codes btw

39/39

i use dreamweaver cs5 to build my wtibsee then when i upload it to weebly, it doesnt show the picutres, like my navigator buttons, header etc can u help me bout that? im not a webdesigner , just doint my best

Leave your own comment

Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

Popular Entries

My Book: Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

About this site

The Man in Blue is the alter ego of Cameron Adams, a Web Technologist in MelbourneSydney, Australia. (That means he does graphic design, HTML/CSS, JavaScript, writing, server-side jiggery pokery, and anything else that takes his fancy that day.)

Cameron has been designing graphical/informational/software things on and off the Web since 1997. You can see more of Cameron's design work on his portfolio, and if you're interested his services are available for hire.