Web Development Guidelines Resources for Creating a Web Site at Johns Hopkins


Web Guidelines Site Map

Planning Your Web Site: Web Design Basics

Definitions

Web page:	any single page
Web site:	group of associated pages

Visitors' expectations

easy to use and find what they're looking for
common look and feel between pages
same background and colors
common navigation elements: home, about, contact, search, etc.
site should be accessible (check the Section 508 button above)

Where to start

who is the audience?
what is the purpose?
what should be included?
consult content experts

Organizing content

short segments (no more than 4 pages)
make it interesting: use bullets, bold for emphasis, tables, etc.
identify main categories, subcategories
identify logical links / navigation

Goals

deliver accurate information
keep information current (include dates on every page)
keep visitor's interest: make them stay, and visit again

Design considerations

simplicity
content drives layout and organization
visual balance and use of white space
screen size and resolution
users' choices: window size, browser options
know what different browsers support
site should be accessible (check the Section 508 button above)

Color

256 non-dithering Browser-safe colors
use only Browser-safe colors for background, text, links
use high contrast colors
bright vs. subdued: use color to support your image & message
Compare the level of professionalism at these sites: MedVet / Oncolink

Graphics (72dpi, RGB)

use relevant graphics only

GIF	JPG
256 colors	>256 colors
logos & line art	photos
transparency	no transparency

Low bandwidth considerations (modem)

use graphics sparingly i.e. only where necessary
provide alternate text, and use width and height tags
advise users of file sizes

Interactivity

Encourage users to contribute to your site
Solicit feedback
Examples (good and bad)

Tools *

Creating and editing pages

Notepad (PC)
SimpleText (Mac)
NoteTab (PC)
Dreamweaver (PC and Mac)
We do not recommend the use of Microsoft Front Page or Microsoft Word for creating and editing web pages because of issues involving integration with other web authoring tools and web server environments.

Imaging tools (for banners, buttons, etc)

Photoshop (PC and Mac)
Fireworks (PC and Mac)
PaintShop Pro (PC only)

Uploading to a server (publishing on the Web using FTP)

WS-FTP (PC)
Fetch (Mac)

* Johns Hopkins University has entered licensing agreements with many software vendors, possibly including some of the products listed above. If you have any software licensing questions, please call 410-516-HELP or email Hopkins Information Technology Services (HITS) at software@jhu.edu. You may also visit the HITS Educational Software Pricing web site (prices apply to University entities only).

References

Before beginning any Johns Hopkins Institutions web project, please contact the appropriate office in your area for assistance with guidelines, standards or existing programs.

If there is any doubt about the methods for collecting, storing, or displaying sensitive information on web sites, the Johns Hopkins legal departments (410-516-8128) should be contacted for a definitive answer about Hopkins' liability and responsibility.