Comments on Dreamweaver Primer

David Esrati — Fri, 26 Jan 2007 14:53:06 GMT

None of your click to view examples work on a mac with Firefox.
Also Dan’s link is 404 as well.
I was wondering about using div’s instead of tables as I read the whole thing- it might be good to either update this- or – put a note at the top.

Thanks- it was still informative.

Julie Stanford — Tue, 28 Aug 2007 00:24:51 GMT

Xavier Fan and I have been having an offline discussion about his comment which leads me to this post.

I want to point out that the technique that Xavier mentions results in a scrollable multi select box without checkboxes next to each item. To multi select the user must ctrl+click which is hard for some on the web. The reason for integrating the gif of the scrollbar with the table of checkboxes is to show a forms widget that avoids the ctrl+click interacton. Another problem with ctrl+click is that if you come back and click again, then you lose all of your selections. For forms that the users edits over and over, this could be very bad.

When we used it in a complex budgeting application where people needed to multi select from a list of about 100 items and often change their selections, this widget was eventually implemented in DHTML by our talented dev team. However, the fake scrollable protoype in our wireframe was user-tested to make sure that users were happy with it before the engineering team implemented it.

But, the reason that I included it in this Primer is to get your brain cells going about creative ways to integrate gifs with your forms elements and other elements of a wireframe to quickly approximate functionality. It’s not necessary to go out and spend hours buidling a widget you may or may not use and may not know how to build w/o help. Just do some clever hand waving and you’re set.

Xavier Fan — Fri, 26 Jan 2007 14:50:54 GMT

For the multiple select box, wouldn’t it be easier to just create an actual one, rather than use a table, checkboxes and a scroll.gif image?

As follows in DreamWeaver:
1) from the Forms palette, “Insert List/Menu”
2) Add “List Values”, either from the Properties, or by right clicking on the list
3) In the properties, change Type from “Menu” to “List”. This enables the “Height” and “Allow Multiple” attributes.
4) Change “Height” as desired. If the number of “List Values” is less than Height, than a scrollbar will automatically appear.
5) Check “Allow Multiple”, which does the obvious.

...and that’s it. This has the benefit of being able to easily add as many List Values as you want without doing layout changes (as well as being more “real”).

Dan, thanks for the XHTML version. We do code in XHTML, but we haven’t been able to use CSS for positioning (and ditch tables for layout entirely) for large, public-facing sites yet. Maybe when Netscape 4.x finally dies. =)

Julie, great primer…I wish more IAs would use DreamWeaver!

Julie Stanford — Fri, 26 Jan 2007 14:50:54 GMT

Thanks for the revision Dan. Since we are super quick and dirty, we tell our clients that they can only view the wireframes on IE on a PC. Since I live in an all PC world here in enterprise web app design land and never do actual implementation, I am very bad about noting Mac related issues that probably effect many other designers. Thanks!

Dan Rubin — Tue, 28 Aug 2007 00:24:50 GMT

A revised, valid XHTML/CSS version can be found here: http://www.webgraph.com/css/wireframe/

One of the benefits of this revision is that the page now displays properly (IE5/Mac had some display problems with the pop-up menu, and some of the CSS properties were invalid because an underscore was used in the property name: that can cause problems with some browsers parsing the CSS), plus the main table is now accessible. I will soon revise it further to remove all tables used for layout, leaving only the data table. CSS will be used for positioning, as it should be. This will be much better for designers who plan to code in XHTML/CSS without using tables for layout, as you will be able to judge the basic CSS capabilities of your clients’ browsers at the wireframe stage (or test on non-desktop browsers, or screen-readers, depending on your clientele)

An additional benefit is lighter code which will render just that much more quickly (old: 10k, new: 8k), and I optimized the scroll.gif from 27k to <1k>

Great concept though, one that I will certainly get our IA’s to start using!