User Manual - Chapter 5 - Design Tips
Return to table of Contents

5. Design Tips
  5.1 Graphics
  5.2 Page Layout
  5.3 Using Text

5.1 Graphics

Formats
There are two primary graphics formats used for display online - the .GIF (pronounced either jif or gif) and the .JPEG or .JPG (pronounced Jay-Peg).

GIF
 The GIF format, or Graphics Interchange Format (extension ".gif"), may be used for any type of image, but it is most useful for graphics with minimal colors or non-photograph images. It may only contain a maximum of 256 colors, but it does allow for transparency. Examples of use: a "Contact Us" button, clip art or a logo.

JPEG
 The JPEG format, or Joint Photographic Experts Group (extension ".jpg" or '.jpeg'), may be used for any type of image, but it is most useful for photograph images with numerous colors that flow together. It is considered "full color." Examples of use: photographs of staff members or buildings, images from a digital camera or a scanner.

JPEG Quality
 The JPEG is a "lossy" image format (it loses image data), and so a level of quality must be selected when each image is originally saved. The quality range is from 0 (Low) to 12 (High). While images in the 10-12 range are crisp and clean and more clearly reflect the original image, their file sizes are much greater than those in the 6-7 range. A balance between quality and file size should be struck.

Image Resolution
All images used online, whether GIF or JPEG, should have a resolution of 72dpi or 72ppi, or 72 dots (pixels) per inch. This can be roughly translated to be a 4-5 (Medium) quality range.  Note:  This adjustment to image resolution should be made before the image is uploaded to the Webmedley Media Library.

Resizing Images
Images can be resized either in an image editing application or in the template page itself, though resizing using an application is preferable than the online method because there is more control over the final size and its clarity. Decreasing an image's overall size typically works quite well, but increasing it generally causes it to become fragmented and/or fuzzy. For best results - if an original, large image is available, resize it in an image editing application, save it, then add it to the Web page.  For a general guideline, images should be no larger than 200x300 pixels (approx 1.5 inches by 2 inches) in order for them to be most manageable on the Web page.  If an image needs to be cropped, this should be done in an application before the image is uploaded to Webmedley's Media Library.

[Back to Top]

5.2 Page Layout

Using Templates
Because this is a template-driven system, much of the page layout has been provided, but the body content is open to any type of design. The following are a few design tips for clean page layout.

Using Media on the Page
Paragraphs or areas of a page that contain graphics (or other media) are common on the Web. There are usually 2 steps involved in adding media using the WebMedley system - (1) selecting and inserting and (2) altering properties.

Choosing and Inserting Media
 To select media to add to the page, first place your cursor on the screen in the paragraph where the graphic (or other media) will be placed. Click the Insert Media icon in the toolbar. The WebMedley Media Manager pop-up screen will appear. Use the Library Selection pull-down menu to select the appropriate library.  Then click the tab at the top that best signifies the medium to insert (i.e., image, document, Flash, or video). Select the photo (for example) and click the Insert button. The photo will be seen on the page where the cursor was last placed.

Altering Media Properties
 When the graphic (or other medium) has been placed on the page, is it likely that its placement will need to be changed. First click on the newly-inserted graphic. Then click on the Properties icon in the toolbar. The Properties popup screen will appear.

The Properties Popup Window
 The Properties popup screen has three attributes to assist in affecting the image (or other medium).

The first contains information about the alternate text (called "alt text"). The alternate text is what appears over an image when a mouse is placed over it - it looks like a label for the image. It is not required, but it is sometimes useful.

The second area concerns alignment (used most commonly for text wrapping) and border size. If the image should sit at the top left of a paragraph, select "left" from the dropdown menu and the text will wrap around the image. If the image should have a thin border, enter a "1" or a "2" in the Border Thickness field. The higher the number, the larger the border. If the image should have no border, leave the field blank or enter 0.

The third area is where the image dimensions are manually changed (they are defined in units of pixels).  Note: To keep the proportions intact, be sure to put a checkmark in "Keep Aspect Ratio".

Images with Captions
 If a particular caption should accompany an image, the most effective way to create it is to insert a table by clicking the Insert Table icon in the toolbar.

When the popup window appears, control over the attributes of the table will be made available. In the case of adding an image with a caption, create a table with "1" column, "2" rows, and "1" border (though this can be changed to "0" later using the Properties icon in the toolbar) so that the table can be seen. Click OK, and the table will appear in the content area.

Next, place the cursor in the top cell and insert an image in the same manner you would anywhere else on a page. Images can be resized in the cell by clicking on the image and using the bounding box to make it larger or smaller. Holding down the Shift key will keep the aspect ratio constrained.

Finally, place the cursor in the bottom cell and begin typing. When the caption is complete, you may then use the cursor to highlight the text, then click on the Font icon in the toolbar to change its size, color, etc.

[Back to Top]

5.3 Using Text

Text Size
Most text on the pages should remain the same size as the standard text on your site. Too many variations will cause the page to appear cluttered. Each template page already contains standard text, so it will be easy to maintain consistency across your Web site.