Best Practices in Web Publishing

1. Best Practices in Web Publishing Margaret Wong Web Technologies Consultant meponine@mit.edu http://web.mit.edu/ist/web/reference/quickstart/best-practices/

2. Basic Components of Web Publishing • Content creation • Content organization • Content presentation • Content administration • Content distribution

3. 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 withoutspecial plugins or programs • Web pages: HTML, XHTML • Images: JPG / JPEG, GIF, PNG* * older browsers, such as Netscape 4, do not interpret PNG’s correctly.

4. 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

5. Images on the Web • JPG / JPEG • Photographs • Graphics with gradients / transitioning colors • Graphics with mixed photographic image and line art

6. GIF • Line art • Simple Transparency (fully transparent or fully opaque) • Graphical text • Animated icons

7. 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)

8. 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

9. 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/

10. 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

11. 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/

12. 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

14. 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 é, ç, æ, ñ

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. Multiple content editors • Check-in & Check-out

24. Macromedia Contribute 3 • Pilot project in progress • Saves edit drafts • approval before publishing live • In Depth session 2:45-4:15

25. Content Distribution • Putting your content on the Web • File transfers via Dreamweaver MX 2004 • Setup Instructions – http://itinfo.mit.edu/article?id=6762

26. Remote Site • Files on the web server • Local Site • Your computer desktop • Testing Server • Prototype (also on the web server)

27. 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

28. Remote site • Note: might need to reconnect / re-login • Keep folder structures identical • Double check in various browsers

29. 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

30. 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/