Tomorrow's Web Design: Popular Design Software Challenge
Recently, I took up a project. A co-worker of mine created a fully standards-compliant XHTML website from the ground up titled HTML for Beginners, which will be released sometime soon. His code was hand-written and it's elegant and functional. On the homepage of the site, he used a three-column layout with a header and footer, and on the interior pages of the site he used a two-column layout. Here are screenshots (the look of the final site may change, hence no direct HTML links):
My project was to take four programs: CoffeeCup Visual Site Designer, Microsoft Expression Web, Adobe Dreamweaver, and Microsoft Frontpage 2003 and attempt to recreate the two designs above. Here's the catch: I could only use the WYSIWYG (what you see is what you get) features of each program. I could not edit the code directly at all.
Why do this?
I went to this year's South by Southwest Interactive Festival and attended a panel there titled, "Does Tomorrow's World Need Designers?" The entire purpose behind the panel was to get some meta thinking going on. The focus and general idea was that in the (possibly near) future, individuals would have the tools to easily create and "design" unique visuals for all things — Websites, shoes, cars, you name it — without the need of a professional designer. It was even brought up that in a worst-case scenario, even artificial intelligence could get so advanced that it would "learn" design and create things like unique, appealing Websites on the fly.
I'm not so sure about that last part. But the part about the everyday Joe having the tools he needs to design his site without the skills and knowledge of a designer (that is to say, without knowing HTML, CSS, or having the trained eye of someone who has been working with the Web for years and has seen its trends) interested me. So, arming myself with a series of the most popular WYSIWYG editors, I set out to see how close to this reality we have come.
First up: Frontpage 2003
I went into this application knowing full well that this thing is old. Old though it may be, it's still in good circulation and still one of the most-used programs for
butchering the Web with bloated code and table-based layouts building Websites.
Overall, building the design in WYSIWYG-only mode with Frontpage was a clunky pain in the rear. I was forced to draw table layout cells and "style" them with Microsoft Office-style tools, like, "Format Cell..." and "Cell Properties." It was pretty clunky is all I can say, and many times, the cells didn't want to stay where I put them. When you add a new layout cell, all the others try to guess where they're supposed to go in relation, leaving you to manually drag them back to their intended spots, or using the annoying eraser tool (which sometimes erases in the right spots, and sometimes doesn't) to erase borders and cells that the layout added on its own when you added your intended cell.
There were some things I simply couldn't do, like add the background image to the header, without manually coding. So the background had to stay out. In the end though, the product came out looking pretty neat in the designer:
Unfortunately, though, in a Web browser, the design didn't look quite the same:
The interior page design came pretty close, though:
Frontpage 2003 Pros:
- Lots and lots of features
- Decent help system
Frontpage 2003 Cons:
- Way outdated software
- Still prefers to use tables for layout
- Lots of features, but most you will never use
- The sheer number of features thrown at you can be overwhelming
- Not newbie friendly
- Not veteran friendly
- Barely intermediate friendly
- A page can look one way in the design view, but drastically different in production, and because the design view looks fine, how are you supposed to fix it?
And in this corner: Adobe Dreamweaver CS3! (Mac version)
I knew Frontpage would be a nightmare, which is why I decided to work with it first. I didn't really know what to expect with Dreamweaver. I'd heard good things; I'd heard bad things.
I have to say, it was a nice change of pace from Frontpage. Drawing a layout in a similar manner as I did in Frontpage was much easier, because I could actually use divs instead of tables for the layout. The easiest way to do it was to use the AP (absolutely positioned) divs rather than the normal divs, because to get the most out of a non-AP divs I'd have to do some manual coding.
Drawing the layout was a snap. I drew it up in matter of seconds, and it only took a few minutes to tweak it so the positions were nearly pixel-perfect. You can select a div and move it pixel-by-pixel with the arrow keys on your keyboard, so that was nice. I then filled each div with the content I wanted before I styled the divs.
This is where things got a little clunky. There are very few WYSIWYG tools for adding background colors, changing text (except the size and face), adding margins/padding, aligning a background image, etc. I searched for quite a while for ways to style my page without having to type my own CSS, but it was futile. Eventually I broke down and used the "CSS" button, which seemed to be the only way to style these divs to the point that they would be able to mimic the original design I was working on. The CSS button brought up a semi-intuitive dialogue that let me add some styling to the selected object, and when I was done, the style went over to the pane on the right side of the window.
It was in this little pane that I did almost all of my styling, using almost hand-coded CSS. I say "almost" because there are drop-down boxes that let you choose from a list of elements, like "body," "h1," "a," "a:hover," etc. Since I was not actually in the raw HTML file and typing my styles manually, I figured this was something that could "squeak by" as WYSIWYG. Though in reality, someone who didn't know CSS would have a hard time building an attractively modern site this way.
Having said that, I do think Dreamweaver CS3 is a great program in a professional sense. If I was not limited by this project to just the WYSIWYG mode and could actually use the code editor, I can see Dreamweaver being pretty useful to those who like professional applications for this sort of thing. (I still personally prefer a text editor and a local version of Apache/PHP/MySQL). Though, it is a little overly-technical; the wording for some of the options and the methods of styling they use could be more intuitive and streamlined.
In the end, this is what the site looked like in Dreamweaver's design view:
And here's what the end result looks like in a browser:
Notice in the top-level page how Dreamweaver had a bit of trouble converting some of the symbols when text was pasted into it. All in all, though, the end result was pleasing and it came close to the original design. Unfortunately, though, I can't say that Dreamweaver CS3 is a tool to quickly-and-easily build a site if you have little knowledge of CSS.
Dreamweaver CS3 Pros:
- Can do some advanced things with the visual editor if you know the CSS
- Adding basic CSS properties to divs with a CSS button is fast on creation
- Drawing a layout with AP divs is a good quick start
Dreamweaver CS3 Cons:
- Not very newbie friendly
- Minimal styling can be done without knowledge of CSS
- Managing your styles and divs can be a pain once you've already created them
- Many features and tools are in illogical places, forcing you to hunt around for them
- You need to know HTML and CSS if you plan to just jump in and use the program; there are no tools for beginners
Ah, Expression Web. Let's see what you've got.
Microsoft's successor to the very dated Frontpage next took the stage. Here's how it went down.
I was presented with Expression Web's interface and, while there was definitely a lot going on there, it was organized pretty well. Just scanning the interface with my eyes, I almost immediately saw the <div> tag just sitting there on the right side of the window; in a neat little pane. Knowing that I needed five divs for the site, and seeing how much time I had to send tweaking the position and styles in Dreamweaver when I used absolutely-positioned divs, I double-clicked the <div> tag five times. Five divs were dropped into my design window, indicated by a small "div" tab and a dotted outline, one on top of the other in block format.
Inside each div I could type and edit text or add images/tables/lists/whatever, as if each div was its own little Word document, using all the familiar Microsoft Word tools. This made adding the divs and their contents easy. So in just a few minutes, I had five divs on my page in blocks, all filled with all their content in 12-point Times New Roman font. Now came the hard part: styling everything. If this was going to be anything like the other WYSIWYG programs I've used (see above), this would be an exercise in stumbling about aimlessly until I found what I needed.
Thankfully, Expression Web is not those other programs. I noticed a “New Style” link on the right side of Expression Web’s window. I clicked it. A dialogue popped up with a menu on the left side with the most commonly-used CSS modifications. Sections like “Box” for the box model (padding and margins), “Layout” for positioning and floating, “List” (for lists when you want to style them; I didn’t make much use of this but it made it easy to change the bullet type when I needed to, and I could see it being easy to create a floated-list navbar with this), and others like “Background,” “Font,” and so on. This dialogue was pretty intuitive, and as long as you know the basics of CSS, you can stumble around in it as an intermediate user and accomplish what you’re looking for. I was able to use this dialogue to assign backgrounds, margins and padding, floating, and positioning to all my divs, because there’s a neat little checkmark at the top of the dialogue that says “Apply to the selected page object.” So if you select an entire div, it gets the CSS. Select just a single word or li element, and only that gets the style. And I didn't have to hand-code a bit of it.
As I added styles to all my divs, they jumped around the page to fit in their proper places. Things (like the footer) that were set to “clear: both” (via the designer mode) jumped to the bottom of the page and filled the entire width of the window, as intended. Text that should wrap wrapped in all the right places; Expression Web handled it pretty well.
At this point, my page was essentially done. I just needed to make a few tweaks to the page. This is where things started to get a little more difficult. Intuitively, I would be able to select any of my divs or other elements within those divs and right-click it, then edit the CSS in the same dialogue I created it in. Instead, when you try something like this, Expression Web throws you into Split view, showing you the raw HTML/CSS of the page in a top pane and your design view in the bottom pane. This was jarring; I didn’t want to edit the code (that wasn’t the point of my project), I wanted to change the CSS in the designer.
It turns out there’s a “Manage Styles” pane on the right side that has a list of all the styles you’ve created. If you mouseover any element on your page, it tells you what style it is using. You then find that style in the Styles manager, right-click it, and then click Modify Style. I think “Edit Style” would have been better wording, and secondly, finding this feature was jarring. Everything had gone so smoothly up until that point.
In any case, using Modify Style brought up that same dialogue and making tweaks was simple enough. However, I needed to make several tweaks (I wanted to go back to some divs and add a bottom border; I also wanted to go back to a couple of the lists and apply custom bullet images; plus, I wanted to change the link colors in only one div). Making several tweaks was too time-consuming, because for each tweak, I had to mouseover the element I wanted to change, find out what style name Expression Web had given it, and then go into the Styles Manager, right-click the style, and click Modify Style, then click Apply/OK before the tweak was done. When you need to make several tweaks, this is not the most intuitive way.
After making all the necessary tweaks, the page came out almost exactly as I wanted it in the designer.
And the results in a browser were good too.
Expression Web pros:
- If you know a little about HTML/CSS, you can jump right in.
- Easy to get the layout of the page set up with several divs.
- Great styles dialogue to help you style a whole page or just an individual object.
- Just about everything was self-explanatory.
- Easy to scan the program with your eye to find the tool you need.
- Each div you create feels like a mini Word document, with all the familiar text formatting tools.
- Easiest software for someone with a little knowledge of HTML/CSS to just pick up and run with.
- Pages created in this software looked practically perfect in the major browsers I tested them in (IE7, Firefox 2, Safari, Webkit, Opera).
- Of all the programs, Expression Web and Visual Site Designer came the closest to reproducing the subject page exactly. (More on VSD in a bit).
Expression Web cons:
- Making minor tweaks is quick... if you want to make one minor tweak. You have to follow a series of steps to change some of the smallest things, and if you want to change a lot of little things it takes more time than it should.
- The right-click menu is semi-useful in design view, but an "Edit Style" option would do wonders for this program, making it run smooth as silk instead of just "really well."
- Great program; a bit of a steep price. Not good for complete beginners.
Truly WYSIWYG: Visual Site Designer
I've already stated it above: Expression Web and Visual Site Designer came the closest to exactly reproducing the subject page exactly. But how does Visual Site Designer perform?
If I may express the answer in one word: "really well." (Okay, two words.) Upon opening the program, I'm presented with three options: New Website, Open Website, and Use Template. Tempted as I was to browse the templates, this was not my goal. I clicked New Website, and I got a small dialogue asking me for the basics of my design. Title, height, width, background color, and link/visited link colors. After filling out these settings, I clicked OK and the designer view popped up. A blank white screen with tools on the left side and along the top of the window.
It only took a quick moment to familiarize myself with the tools that were there, and it was easy to tell what each tool did at a glance thanks for the colorful icons. Any tools that weren't labeled directly (like the Page, Fill, Effects, Link, and Styles tools) had mouseover tooltips and a handy dialogue explaining what they do when you use them the first few times that you can disable via a "do not display this dialogue next time" checkbox.
There were no divs, no HTML tags, no CSS styles; the entire designer is truly WYSIWYG. Creating the layout of my page was braindead simple: pick the rectangle shape tool, give it a color, draw. I drew the header, sidebars, and footer in a matter of seconds, and was able to adjust their shapes, colors, and sizes in the object window. The object window was a neat little feature; it floats as a separate little window, and it changes to depict the settings of whatever tool you have selected. This way, you never have to look around for your tool settings; they're always in the object window so you always know where to look.
After drawing the layout of the page, it was time to add the text. Clicking the text tool changed the object window to let me change the font family and size, and I could see that there were other options that would let me do things like add drop shadows or even rotate text if I wanted to. Unfortunately, this design did not call for these fun-looking features so I had to dismiss them for now and just type normal, colored text.
When I clicked on my page with the text tool, a red text box popped up with a little handle on top that I could use to drag it, and left/right arrows on either side of the box so I could widen/shrink it. I stretched the box to a decent size and typed in the content, then highlighted the text and formatted it with the correct colors/sizes in the object window. Repeating this process for each section of my page, I was done with the page content in minutes.
Similarly, dropping in images was a breeze. Click the image tool, browse for the image, click OK. Now you can freely drag it anywhere on your page. Again, in the object tool, I saw more features than I required, like adding a glow/shadow or shaping the image (rounded corners, pentagon, circle, etc.), but again my design did not call for this so I had to play with those later.
By the time I had my page laid out the whole thing was 95% done, I had lots of objects on the page. Sidebars, a header, a footer, a background image for the header, a few textboxes, a couple of images... none of these by themselves was any problem at all to create. However, when I needed to go back and change something, I found myself having to watch carefully where I clicked my mouse. There's no way to "lock" objects in place in Visual Site Designer, so when I wanted to select the text in a sidebar, for example, I had to be careful to select the text instead of the sidebar, or else I might end up dragging the sidebar accidentally or worse, changing some of its attributes. This was not a major flaw, because there is a multi-step Undo in case you accidentally do something like this, but the entire operation in Visual Site Designer seemed designed to be fast and smooth, and for the most part, it was; but this little bit of technicality hindered the "carefree smooth design" feeling I got when using the software.
A really big time-saving feature in Visual Site Designer was its "copy page" function. When you click the "Add Page" button to create a second page (which I needed to do for the interior design), I was given the option to copy an existing page. I copied the homepage, and it created an exact replica of the page I had just created. Now, all I had to do was adjust the left sidebar and remove the sidebar on the right, then change the content and I was done with the second page. If I wanted to create more pages, I would definitely be using the copy page function to keep my design intact and keep all pages uniform.
So, in the end, here's what the page looked like in Visual Site Designer:
And in a browser, the designs look pretty close to the original page.
Visual Site Designer pros:
- Really cost-effective. A mere $49.00 USD, compared to $399 (Dreamweaver), $299 (Expression Web) or $129 (Frontpage, through Amazon.com).
- Really easy to use.
- Of all the programs, Visual Site Designer and Expression Web came the closest to reproducing the page exactly.
- Truly WYSIWYG; no need to know HTML or CSS. Extremely beginner friendly.
- Fastest of all the Web editors to complete the job.
- Built-in one-click upload.
- Manages all your files for you.
- All the tools feel unified; they share the same properties window so you always know where to look to change settings.
- Many shapes to choose from, and placeable guides with X Y coordinates make it easy to design a layout.
- Creating new pages for your site while keeping the same layout is easy; just create a new page, and select the "copy page" function to copy an already-existing page and just change the content.
Visual Site Designer cons:
- No code view; you can't edit the HTML directly (however, there is an HTML Tool that will let you use advanced HTML and scripts on your page in an object-based manner).
- Cannot edit pages that already exist. VSD can only create new sites, or edit sites it created.
- Click carefully; you don't want to accidentally move some of your page elements if you have multiple stacked on top of each other. This isn't a major flaw because you can always Undo, but if you're in a hurry you could accidentally select an object you don't want selected.
So, does tomorrow's world need designers?
Heck yes. In a nutshell, I wouldn't recommend Frontpage 2003 to anybody for any purpose, to be perfectly honest. Dreamweaver CS3, though, could be a good application for serious web development for those who already know the technical side of things, and I really think it could be good for web developers in a professional environment, but because of its high "techy-ness," it's definitely not a tool that could let the average Joe create a "Web 2.0" site.
Expression Web and Visual Site Designer, though, are steps in the right direction if providing easy-to-use WYSIWYG tools is the future of Web design. In a reality check, though, in most of these programs, I could not have created anything near the designs I did above if I wasn't already familiar with Web design. If I was to challenge the average Joe with the project above (to exactly copy an already-existing design from scratch), he'd have to sit down and do some research first, and I imagine it's reasonable to think it would take him days to accomplish the task.
The only exception is Visual Site Designer, in which you can basically just draw your page. But even with software this intuitive and quick-to-master, the tools are no replacement for knowledge and skill in the field of design.
Expression Web and Visual Site Designer are both Grade A tools, but professional and even hobbyist Web designers are a long way off from being replaced by such tools, though beginners, intermediates, and veterans can find something to like in both of those programs.
The ominous, impending uprising of maniacal artificial intelligence that designs Websites, on the other hand, may be something to worry about...