Best Practices in Web Publishing

Margaret Wong

Web Technologies Consultant

meponine@mit.edu

http://web.mit.edu/ist/web/reference/quickstart/best-practices/

Basic Components of Web Publishing

• Content creation

• Content organization

• Content presentation

• Content administration

• Content distribution

Content Creation

• Directly insert content in HTML

• Insert content “Word style” via WYSWIG

• Copy and paste from RTF documents

• Common formats displayable in modern web browsers without special plugins or programs

– Web pages: HTML, XHTML

– Images: JPG / JPEG, GIF, PNG*

* older browsers, such as Netscape 4, do not interpret PNG’s correctly.

• Common formats that require additional plugins or programs installed

– Video / Audio: Quicktime (.mov), RealAudio / RealVideo / RealPlayer (.ram / .rm), AVI, Flash / Shockwave (.swf), MPEG video (.mpeg), MPEG audio (.mp3)

– PDF, Word, PowerPoint, Excel

Images on the Web

• JPG / JPEG

– Photographs

– Graphics with gradients / transitioning colors

– Graphics with mixed photographic image and line art

• GIF

– Line art

– Simple Transparency (fully transparent or fully opaque)

– Graphical text

– Animated icons

• PNG

– Variable Transparency (same toucan image with drop

shadow on different backgrounds)

– No animated icons (use MNG instead)

– Gamma correction (more uniform display across

platforms and screens)

Image Compression & Resizing

• Compress images to reduce web site loading time

• Use an image editing software to resize images and compress for web usage (Adobe Photoshop, Adobe Image Ready, Macromedia Fireworks, etc).

• Adobe Photoshop / Image Ready has a “save for web” function that is optimized for web graphics

• Do NOT resize images with HTML

– Browsers will load the full image

– Image will appear skewed or pixelated

MIT Free Web Publishing Environment

• Web server – web.mit.edu

– Unix-based system (Athena)

– AFS permissions / rules apply

– Organizations, courses, and personal web spaces have a 1 GB limit

• http://web.mit.edu/organization/

• http://web.mit.edu/coursenumber/

• http://web.mit.edu/username/www/

Dynamic Functions

• Sites that use a database that returns live data

• Scripts that dynamically return search results

• web.mit.edu provides limited dynamic functions

• CGIemail (send e-mail through a form)

• Custom 404 pages

• Restrict access via certificates authentication

• XBitHack

• mod_alias functionality

• Additional dynamic services integrated with web sites on web.mit.edu

– Custom Events Calendar

• http://web.mit.edu/ist/services/calendaring/events-custom.html

– Custom Google Search

• http://web.mit.edu/ist/google/(go to the Google session from 2:45-4:15 for more info)

• See Web Publishing References for more info

– http://web.mit.edu/ist/web/reference/

Content Organization / File Management

• The “landing page” of a category should be the index.htm or

index.html page (see next slide)

• Avoid putting all files in one directory unless you have less than

20 items total, including pages, images, stylesheets, and other

linked documents

• Create folders for content that can be grouped together, either

by topic, by date (such as news archives), or by type (such as

images, scripts)

• For larger sites, materials related to a specific section should be

placed in sub-folders within the larger category folder

File and Folder Naming Convention

• Unix-based systems are case sensitive

– Research ≠ research ≠ RESEARCH

– Use all lowercase to be safe

– Include the file extension, such as .doc and .jpg

• Special characters get special treatment

– Do not use spaces in file or folder names

– Do not use periods, slashes, quotes, commas, semicolons, colons, symbols such as ~, @, $, &, +, ’ and accented letters, such as é, ç, æ, ñ

• Name files base on page content’s subject matter that can be identified without opening the file (except index.htm/.html)

• Keep names brief

• If more than one word is necessary, use dashes or underscores in places of spaces

Dashes vs. Underscores

• Dashes are more visible when the URL is underlined (by default they are)

– http://web.mit.edu/the-file-name.html

• Underscores look more like spaces, so the name is more readable, but could get lost when the URL is underlined (look at your printout)

– http://web.mit.edu/the_file_name.html

Content Presentation

• Content Publishing via Dreamweaver MX 2004

– IS&T offers a free quickstart on Dreamweaver.

– Using Cascading Style Sheets (CSS) quickstart.

– Computer Training at MIT

• http://web.mit.edu/ist/topics/training/

– Quickstart Schedule

• http://web.mit.edu/ist/topics/training/training-QS.pdf

Some Basic Conventions

• Links in running text should be underlined (default) or a different color from the regular text

• Provide sufficient color contrast between linked text and non-linked text

• Use the same color for linked text throughout your content

• Do NOT use underlines on non-linked text

• Do NOT use the link color for non-linked text

• Use header tags (<h1>, <h2>, <h3>, etc) in your content to help search engines identify what is important on your page

• Use headers in semantic order, such that <h1> isn’t followed by an <h3> without an <h2> in between. Some assistive technologies (i.e. screen readers) can create an outline of the headers. Out of order headings will create a broken outline

• If graphics are used for text, make sure the alt attribute of the image has corresponding text information

• If graphics do not contribute meaningful information, use an empty or null value in the alt attribute. For example, transparent GIF images used to hold spaces (spacers or struts) should use alt=“”

• Do NOT use alt=“ ” or alt=“<empty>”

• Do NOT use <blink> tags or infinitely looping images or materials that are eye candy rather than content

• Use list items (<ul><li> or <ol><li>) instead of paragraphs with a bullet character (<p>&bull;)

• Use meaningful titles (<title>subject of your page, maybe include group name or acronym</title>)

• Use meta keywords and descriptions to help search engines find your site

– http://mit.edu/ist/web/reference/create/metatags.html

• Do NOT use frames, users cannot properly bookmark your pages

Content Administration

• Locking down sections of your pages

– Dreamweaver Templates(this will be a quickstart some day)

• Reference – http://itinfo.mit.edu/article?id=6750

– Library Items

• Multiple content editors

– Check-in & Check-out

• Macromedia Contribute 3

– Pilot project in

progress

– Saves edit drafts

– approval before

publishing live

– In Depth session

2:45-4:15

Content Distribution

• Putting your content on the Web

– File transfers via Dreamweaver MX 2004

– Setup Instructions – http://itinfo.mit.edu/article?id=6762

• Remote Site

– Files on the web server

• Local Site

– Your computer desktop

• Testing Server

– Prototype (also on the web server)

• Testing Server

– Use your own web space /afs/athena.mit.edu/user/m/e/meponine/dontindex/siterootfolder/

– Preview in a few different web browserssite may appear differently in different web browsers

• Remote site

– Note: might need to reconnect / re-login

– Keep folder structures identical

– Double check in various browsers

Other File Transfer Methods

• Macintosh

– Fetch

– Terminal / Command line

• Windows

– FileZilla

– SecureFX

• See Secure File Transfer at MIThttp://web.mit.edu/ist/topics/filetransfer/index.html

Questions & Comments

Margaret Wong

Web Technologies Consultant

meponine@mit.edu

Presentation files will be at

http://web.mit.edu/ist/web/reference/quickstart/best-practices/

Visit the Web Publishing Reference web site

http://web.mit.edu/ist/web/reference/