[Web4lib] controlling bad design

Thu Aug 6 08:47:07 EDT 2009

Below is an example doc that I have been sending out as regular communications to my web editors. I basically make a note when an issue comes up and then, every couple of months or so, I send a "tips" memo to all the editors. The individuals usually note that I have edited their content; but they are not singled out by name in the Tips so it saves ruffled feelings somewhat. When I have a new editor I send them an summary of previous memos which serves as my website policy document. As you will see I try to keep it friendly and enthusuastic and I try to explain reasons (briefly) so I won't be thought picky or arbitrary.

Some sections are specific to Dreamweaver, so you may need to skip that according to your situation. Needless to say, this doc loses some of its power as .txt. If anybody else can use this, email me directly and I'll forward an attachment.

Another way I control design is to have templates using (external .css) available for everyone to start out with.

Melanie Amy Hogue, Librarian I
Chattanooga-Hamilton County Bicentennial Library

_________________________________________________________________________________________________________________

Memo
To: Website Team
>From Melanie Hogue
Subj: Welcome and Reissue
Date: 6/26/08

Welcome new collaborators!

I hope you are already having some fun learning to use DW. There are still a couple workstations that are down. Let me AND Barry know if you need help to get and keep yours in working order.

The following pile of stuff is a collection of all the information I have passed out to you  at one time or another. New folks, this will answer some of the questions that come up with hands-on experience. When the website is a small part of your mountain of duties, it's easy to forget all these meticulous policies; but they help me tremendously to keep a grip on my own workload.

Thanks for your time and attention!

Melanie

The following content is edited from:
Memo
To:      Dreamweaver users
From:  Melanie Amy
Subj:   Getting Started
Date:   11/19/2003

Specific Instructions and Tips for Trouble-Free Collaboration

Some miscellaneous items specific to Dreamweaver (DW):

1.	Website files created in DW default to the name filename.htm. Unfortunately, but for other good reasons, our site has been set up using filename.html. When you name your files, please add ".html" to change this default. This will prevent a ton of confusion and broken links when your pages are added to the site.

There is a way to fix this if you don't want to try to remember ".html". The default can be changed so that the files will automatically be named according to our convention. If you want to do this, ask me for specific instructions.

2.	DW also defaults to an inconvenient protective policy that may change some of the characters in Internet addresses if you copy and paste them from other places outside DW. To turn this off click Edit> Preferences, then select Code Rewriting, then uncheck the "Encode Special Characters in URLs Using %". Then click "Okay.

3.	While using DW, do not save HTML files to directory locations outside the site set up in the program. If you need to import or export files, do it in your OS (Windows). The only exception to this is when you import an image. DW will warn you that you are using an asset that is outside the site and ask if you want to save a copy to the site. You will want to select "Yes" and put it in an appropriate directory, such as your branch or department folder, near the page, or a separate image directory.

Here are some simple but often overlooked instructions about file management, DW, and HTML, the formatting computer language that DW uses to produce your pages.

1.	Don't put spaces in any directory or file names. This is important. People do this; but it causes a lot of problems because servers can't interpret spaces. Likewise, do not use <, >, +, =, /, \, or ? in file and directory names. Servers use these symbols for other instructions.

Example: This file structure, images/green.gif, says that a file named green.gif is inside the images directory.  It is not okay to name a file green/3.gif because the server will look for a directory named green and a file named 3.gif. 

2.	After building several pages with images together in your department's directory, you will notice that the number of files can get unmanageable.  If you plan ahead and keep certain files, like images, in their own subdirectory, you can see what goes where a little better. If you reorganize things after the fact, make sure you do it inside DW (drag 'n' drop), so the program can give you an opportunity to change your links to these files throughout the site.

3.	Try to use short descriptive filenames that will fit on one line in the narrow list in the DW window. Don't rename existing files on the website. If there is a reason to do this, discuss it with Melanie and we'll see what's best.

	short.html or short_phrase.html  
	NOT 
	 longphrasedescribingthefile.html or long_phrase_describing_the_file.html

A convention that I often use is called "camel-back". When you run words together you can capitalize the first letter of the 2nd and subsequent words to make the phrase clearer to see. Another way to shorten descriptive file names is to leave out vowels. An example would be:

hmltnCntySchls.html

4.	When you point to files to make links, DW uses relative file structures. This means that the server will be given instructions about the location of a file relative to the file where the reference occurs. Imagine directories, subdirectories, and files nested together like small boxes inside of larger ones, inside of one big one (the root directory).

An example of this would be the relative file structure, ../images/green.gif. This means, in relation to the page (file) where it will be displayed, green.gif is in a directory named images which is one directory level up (../) toward the root directory. If it were two levels up and not in a subdirectory it would be ../../green.gif. The protocol (http://), server (www.), domain name (lib.chattanooga), and extension (.gov) are not present.

When you want to add a link to a page outside our site, you must use full URLs (preceded by the http://).  

http://www.cnn.com     NOT     www.cnn.com or cnn.com

5.	Remember that web sites are a web of pages. They refer to one another by location; so, when you change filenames, images or place markers, the code in files that refer to them will need to be changed also. Whenever DW detects a potential problem with this; you will get an alert message with instructions. Read them carefully. You may not always need to act on them; but you can avoid or anticipate problems if you always read them. 

A few points regarding images:

1.	When using images, try to find those that adapt well to the screen environment. Sketches often don't look good, especially when you resize them. Use Paint to adjust your images to the approximate size that they will be viewed. Forcing the size in DW often reduces the quality and really large images take up too much space on the server. 

2.	If you find yourself making decisions about the "file format" for images, there is a guideline that works pretty well. It is JPG for photos, GIF for clip art.  If you run across a BMP or PNG that you want to use, convert it using Paint to one of the others for use on the web. 

3.	Please be careful when collecting images. Many are copyrighted and some authors/artists may expressly forbid use.

Here is the procedure that we will use as we begin to work together:

You and your supervisor can decide how often you want to update your content.  It might sometimes be once a week or only once every other month depending on your activities.

Your ideas should be discussed with your department head and will be passed along to Barry and David; so if your idea involves any major changes you can always run it by us before you invest time in designing a page.

When you want to change or add pages, have them ready by Wednesday the week before you would like them to go up. Call or email Melanie and Barry and list what files are new or changed (include images). Use a format like the relative file structure for this; so someone who isn't following your work can find all the files that need to go up. The info will be proofed and passed to David for final approval and uploading on Monday.

If you run into design problems, contact Melanie early for help. She may be able to see your pages on the server and tweak things a bit.

Opening a New File Using Our Template

1.	Click File> New>.
2.	Click the "Templates" tab.
3.	Select the site (libWeb).
4.	Select the template. You will probably be using "generic-1"(works for a file that is inside a first level directory(-1). If you are maintaining a more complex set of files you may have subdirectories, in which case you could need "generic-2" Call me if you have trouble figuring out which one to use.
5.	Click "Create"

You will only be able to place content in the spot containing the words "Editable Region", which will grow as you place more material inside. Make sure you delete
the words "Editable Region"! Be careful not to cause your content to be wider than the original template. This sometimes happens if you use huge images or wide tables and will cause the page to run off the right side of the screen. You will also be able to name the page, both in the WYSIWYG view and with the "Modify" menu.

Note:
Notice that you can switch back and forth from the testing site and your local site. Pay attention to which one you are working with. You should be using the local site for your normal edits. If anything gets onto the testing server that you didn't mean to upload; let Melanie know and it can easily be deleted.

Check Out/In and Get/Put

When you are going to be working on an existing file, check it out; so no one will try to edit the file while you are working on it. . Don't leave things checked out for extended periods, as we may need to run updates on the entire site.

1.	Do this by selecting the file and clicking the "?" above the files list . If you open a file before you have checked it out, DW will automatically check it out at the same time. (This is a default setting that can be changed.) This brings the most recently edited copy from the server.
2.	You will be asked if you want dependent files. Click yes, just in case DW needs to alter one of them.

You can open the file, edit and save locally (your own hard drive, not the server). It is important to remember, if you are working on several files at a time, that previewing a file in the browser will show you what the file will look like on the server, not your hard drive. This means that if all the new components for the file have not been uploaded yet, some images or links may not work. To fix this, use Put, as explained below, to manually place them on the testing server before you preview.  When you are done with the files on the server, you check them in. They will then be available for others to edit.

1.	Do this by selecting the file and clicking the "lock" symbol above the files list.
2.	You will be asked if you want to send dependent files.  Click yes, just in case DW has altered one of them.

To use Get and Put, use the same procedure to Check Out/In files except click ? for Get (from server) and ? for Put (to server), instead of ? and "lock".

There are several instances when you will want to Get and Put files on the server. These functions can copy files to and from the server without checking out files. 

1.	As mentioned earlier, when you are testing an edited file and you have images or new files to preview, use Put to place them on the server.
2.	When you have messed up a local copy of a file and you want to start over, use Get to overwrite your edits locally. Don't Check In a file that is messed up!
3.	If it seems easier to remember, you can treat Get and Put as separate steps that you always use. For example, Check Out the file, Get the file, Open, Edit, Test, Put the file, Check In the file.

There will be times that you will get a message warning you that you are Getting or Checking Out a file that is newer/different than the local copy. This is normal since Melanie may have done updates to the template since you last worked on the file. Choose "Yes" unless you JUST Put or Checked In the file and are making a second change. DW doesn't immediately update its record of recent edits so you could get this message in error in this one case.

Caution:
Please don't use the testing server as a place to store works in progress. Use your local (hard drive) files as you edit and be selective about what you "Put" to the server. It is difficult for others using the test site to understand what is going to be part of the live site and what isn't.
Note: You will occasionally break this rule when the website committee wants to see something in progress. You can email the URL of the testing server around for others to look at or it can be viewed with the projector in a meeting. The URL of the website on the testing server is http://67.32.45.200/libWeb/ and after our EPB conversion will be http://172.0.100.254/libWeb/ 

Melanie will notify you when the files are going to be updated in the site. This will mean that the files you have on the testing server could become part of the live site. Please keep it organized!

Additional Reading

 If you have questions that are not adequately answered about website design, or if you want to explore current web design concepts on your own, have a look here:

http://usability.gov/pdfs/guidelines.html 

If you are interested in understanding the HTML code, a good free tutorial can be found at:
http://www.w3schools.com/html/default.asp .

The following content is edited from:
Memo
To:      Dreamweaver Users
From:  Melanie Hogue
Subj:   Tips for website work
Date:   2/7/2005

Keep in mind that web work is an entirely different animal from newspapers, posters, flyers, or any other kind of material that you may already have experience with. Comfort for the eyes, keeping a reader's attention in a sea of hyperlinks, and the densely packed amounts of information that must be organized in a relatively focused space, make this medium unique. For example, text written for a poster will be inappropriate for the web and vice versa. A poster can be a series of headlines while a similar format on a computer screen will seem too large and brief.

Technical Support for DW/Web Design Reference Materials

Lonnie and Adam regret that they are not DW users and know very little about designing web pages. They will fix the problem if it is related to the server connection; but they can only guess and hope when it comes to using DW. Please see me with any user issues you may have. I have set aside some books that should help with our technical and artistic problems and conventions. They are located to the left of my office space in BST. You can borrow them (yes, check them out, too!) if you make a note on the clipboard provided. I've tried to include a few titles each about basic HTML, style sheets, other website design concepts and considerations, as well as several about using DW.

Fonts

Font sizes on the front page exclusively and elsewhere when space is at a premium is "12px" or "2". If you don't specify a size on a non-template page, it will default  to "3". It is considered bad form to change sizes back and forth from one article to the next. Since several of us may work on the same page at different times, the overall impression of our pages will be like this paragraph, if we don't have a plan. If you really need to use the larger size, do it on the whole page.

Capital Letters

Use capital letters with discretion. It is considered rather poor taste to use block capitals on a computer screen. It is always tastefully done for labels, letterheads and such and almost never for headlines or section divisions. If this seems a bit picky, please review the many other library and news websites out there to corroborate my position on this.

Example: Imagine the difference between a man speaking intelligently about his services in a TV commercial and the used car commercials where the 

SALESMAN YELLS AT CUSTOMERS FROM THE PARKING LOT

Compare the feeling from the former headline and the one below. Emphasis for headlines looks classier if it is done with size, centering and color.

Salesman Yells at Customers
 From the Parking Lot

Check-in/Check-out files

DW's check-out system takes some forethought to understand. Please review the welcome notes and get help if you are having trouble responding to DW's messages. An entire newly edited file can be lost if you accidentally Put an older version of a file from your own hard drive.

File names

Just a reminder - no spaces in files names!

"Going down the street.jpg" is not acceptable. Do not allow Windows to name any files for you. This Windows action exists as a way to prevent loss of documents by inexperienced users. Other people's file names or using the first few words of text as a name aren't appropriate for users working at our technical level. Servers do not deal with spaces in file names. We suspect that recent DW messes have been caused by - you got it - spaces in file names. Check the former welcome notes for more on naming files.

The following content is edited from:
Memo
To:       Andria Davis, Heather Jeffries, Carol Green, Lee Hope, Greg DeFriese,
             Andrea Spraggins, Jim Reece, Sidney Blalock, Barry Bradford
From:   Melanie Hogue
Subj:     Update on website collaboration
Date:     March 20, 2006

Problem Solving

Now that the website is getting older; some of you may have very old local copies of most of the website pages that you don't regularly edit. This problem came up recently and I'm covering it with everyone so it doesn't cause problems in the future. DW doesn't automatically overwrite your local files when a page changes due to another person's edits, IF the file has been disassociated* from the corresponding file on the testing server. If you aren't careful, you can accidentally overwrite the current page with an old copy from your local hard drive. 

To avoid this, follow these conventions:

1. Work from the LOCAL set of files when you check things out and edit. This way you can tell immediately if your copy is too old to use. There will be no lock symbol next to it, indicating that there is no longer a corresponding file* on the testing server, even though there is one by that same file name on the remote site.

 *This disassociation can happen for a variety of reasons, due to necessary file handling, such as a major reorganization of the site, or replacement of a particular file (such as if the code was messed up bad enough to make replacement cost effective).

Once you know that your local file is too old to use, you can select the file and click the "Get" arrow to bring a fresh copy from the testing server.

2. Periodically "Synchronize" your local files. This is done by:
a. Clicking the "Site" menu over the site files list. 
b. Select "Synchronize."
c. Choose either selected files or entire site. Choose "Get newer files from remote." Click "Preview."
d. Review the files that are going to be overwritten in your local copy of the site to make sure they are not files you are currently working on. Uncheck some of them if necessary. Select "OK." This will also retrieve new files that are not present in your local site.

It is still okay to view the Remote site. It is especially useful when you know of an addition to the site that you can't see locally because you haven't downloaded it. Just "Get" the files before you edit them and check them out from the "Local View".

Housekeeping

>From time to time we reload the entire site (for redesign), which is a good time to housekeep. If you have stored anything on the testing server that should not actually be present on the live server (hopefully this is the exception, not the rule), you should remove it when you housekeep.

1.	Look over the files you work on by going to your local directory in Windows (not DW). This will be different for each of you depending on how your site was set up. Call me if you don't know how to find them. Any folders/files that are important to your own work should be copied to a separate area in case something is lost in the process.

2.	Delete everything from the directory containing your local copy of the website.

3.	Go to the Remote View in DW and select the root directory at the very top of the list. Click the "Get" arrow. DW may ask for confirmation and then a fresh copy of the site will download.

4.	If you lost any important files during this process, you may use Windows to put them back into their proper directories from your backup copies. If you do this make sure to check all their links and images by testing in a browser to be sure they function. You may have to edit these backup pages to conform to the organization of the fresh site. 

________________________________________________________________________

Thanks everyone! I hope this is useful. If it doesn't make much sense now, just read it and then keep it handy. You will probably refer to it later. Let me know if you have any questions.

-----Original Message-----
From: web4lib-bounces at webjunction.org
[mailto:web4lib-bounces at webjunction.org]On Behalf Of Mary Beth Faccioli
Sent: Tuesday, August 04, 2009 5:55 PM
To: web4lib at webjunction.org
Subject: [Web4lib] controlling bad design

Seems I'm coming around again to issues faced years back.  I'll be digging out old material on this and recompiling, but I also am wondering about any current takes.

I'm finding that the minimalist presentation approach that encourages the use of images and visual approaches (some call it Presentation Zen) is creating another wave of terrible stuff being added to web pages and presentations, and I need to address this at my current organization.

If you have various people in your organization who are doing their own content creation on the web using some kind of content management approach, or people newly empowered to create presentations for online delivery and other purposes, and you have some kind of 1) policy statement or 2) best design practices in place regarding the use of animations, clip art etc. - would you be willing to share those with me through links or other means (attachment in an email sent to me perhaps)?  Also, any good links to very straightforward resources that have basic design principles and things to avoid would be appreciated.  I look at a number of blogs on presentation but I'm wondering if anyone on the list can recommend any gems that are pithy and clear.

Thanks in advance -

Mary Beth Faccioli, MLIS
Instructional Design & Technology Consultant
Colorado State Library

_______________________________________________
Web4lib mailing list
Web4lib at webjunction.org
http://lists.webjunction.org/web4lib/