Education IT
Top Web Page Development Tips

  1. Keep your images small.
  2. Place only one copy of an image on the server and link to it multiple times.
  3. Draw a map of your site on paper and organize carefully.
  4. Keep each complex Web page in a separate folder.
  5. Avoid using special characters in file names.
  6. Create identical folder structures.
  7. Name default pages welcome.html or index.html.
  8. Use a photo editor to resize thumbnail images.
  9. Leave images at original location.
  10. Name images with proper case.
  11. Never give away passwords.
  12. Backup often!
  13. Web pages vs. desktop publishing documents
  14. Don't use flash at close distances with a digital camera

(1) Keep your images small.
There are two items related to image size to keep in mind.  (a) Images on the world wide web should be resized with a graphic image editing program (like Adobe PhotoShop, Corel PhotoPaint, or Microsoft Image Composer) so that image dimensions are no larger than actually needed in the web page where it will be viewed. (b) Use JPEG compression to shrink the file size so that server disk space is conserved and download time is decreased.

(2) Place only one copy of an image on the server and link to it multiple times.
You should attempt to conserve disk space by eliminating duplicate images from your site if possible.

(3) Draw a map of your site on paper and organize carefully.
It is important to maintain a good picture in your mind of the layout of your entire web site.  This will help you to easily integrate new pages into the site and maintain existing links.  The more sketches you make on paper, the easier it will be to conceptualize and implement your web design projects.

(4) Keep each complex Web page in a separate folder.
Keep each complex Web page in a separate folder for the sake of clarity and ease of maintenance.  Over time you will most likely forget which images belong to which Web page if the there are 40 or 50 images and 15 Web pages in a single folder.  If at some point you decide to remove a page from the server, you will be forced to search through all the pages and images to locate the specific items associated with the page.  Also, keep in mind that someone else may be called upon to maintain your pages at a later date.  The more organization that you invest in your site now, the easier it will be and less time it will take to update them later.

Below is an example of poor Web page organization where all Web pages and their associated images are kept in a single folder,
Below is an example of good Web page organization where a single page and its associated images are kept in a single folder,

If you have many pages, each of which have many associated images, etc., place the pages in a series of folders as shown below,

FolderA
URL: http://servername/~myaccount/FolderA/
 FolderB
URL: http://servername/~myaccount/FolderB/
FolderC
URL: http://servername/~myaccount/FolderC/
 FolderD
URL: http://servername/~myaccount/FolderD/
FolderE
URL: http://servername/~myaccount/FolderE/
 FolderF
URL: http://servername/~myaccount/FolderF/

Other Important Web Page Tips:

(5) Avoid using special characters in file names
Avoid using spaces, semi-colons, single or double quotes, question marks, plus signs, and other punctuation marks in file and folder names that will be placed on a web server.  Some web servers and web browsers do not know what to do with special characters or reserve them for special functions like processing web forms.  Generally, the dash and underscore are safe to use.

(6) Create identical folder structures
Create the identical folder structure on your PC that you will be maintaining on the Web server.  Create and edit pages on your PC first, and transfer them to the corresponding folder on the Web server.  This will help you stay organized over long periods of time and through many updates.  The local copy on your PC should be the master copy.

(7) Name default pages welcome.html or index.html
Name the primary Web page in each folder "welcome.html" (or "index.html" on some servers).  This is the name of the file that is automatically displayed when a folder name alone is referenced in a URL.  For example, if the URL http://www.education.purdue.edu/~staff/myfolder/ is specified, the file "welcome.html" the resides in "myfolder" will be displayed.

(8) Use a photo editor to resize thumbnail images
If you want to load many images-- such as photos-- on a single page, use a photo editor to resize images and make small "thumbnails", or tiny versions of images that display on your page.  Use the small thumbnail images to link to larger versions of the images.  Do not use the Web page editor to change the dimensions of images.  Why?  Because when image dimensions are changed by the web page editor, the actual image files themselves are not resized or compressed-- thus the underlying image files are still large even though they may appear small in the page.  Large images reside in large files, and large files download slowly, consume large amounts of memory on the computer downloading the image, and consume large amounts of disk space on the web server.  Note that not everyone who surfs the web has large amounts of memory available and therefore large images may not display properly on some computers.  Even though dynamically resized pictures look small on the screen, behind the scenes they are still large files which must be downloaded by users.  Shrink original files as much as possible before they are downloaded using thumbnails.  Below is an example of a small thumbnail image which is linked to a larger version of the file,

(9) Leave images at original location
When adding images to a Web page, tell the editor to "Leave image at the original location".  Otherwise, if you link to images that are in other folders, the editor will try to make a duplicate copy of the image in the folder you are working in.  Preview your pages before placing them on the Web server and make sure all your images are loading and links are working properly.

(10) Name images with proper case
Many web servers are case sensitive, so be sure that any references to images and html files in links and image tags are in the exact same case as the file name on the disk.  Preview your pages before placing them on the Web server and make sure all your images are loading and links are working properly.

(11) Never give away passwords
Never give away passwords and account information to anyone.  Server passwords are confidential and for internal SOE users only.

(12) Backup often!
Back up your Web pages to a Zip disk often!!!  If/When a Web server or PC crashes, there is no guarantee that your pages can be restored unless you take responsibility to back up your own Web pages.

(13) Web Pages vs. Desktop Publishing Documents
You have worked long hours to create a desktop publishing document with intricate and highly complex formatting.  Now, when you convert it to a web page, everything looks and/or prints wrong!  Line spacing is too big, hand-made tables (made with spaces and tabs) are unrecognizable, columns disappear, text boxes are gone, and bulleted lists are jumbled up.  What happened???  The first mistake many people make is to try to compare desktop publishing to web publishing.  Desktop publishing is highly complex and exact.  The web lacks many formatting features found in basic desktop publishing software like word processors, presentation software, etc.  The two are simply different, and serve different purposes. You may notice that when you save your MS Word document as a web page, a great deal of formatting is lost.  You can "clean up" the document once it is saved in HTML format, but that gets old after the 2nd or 3rd document.  The best solution, if you plan to maintain an extensive collection of documents on the web and do not have time to "clean up" your documents when converting to HTML, is to create your documents for the web in a web editor-- from scratch.  And maintain existing documents in HTML format.  That way, next semester when you are ready to update your syllabus, you will not have to do any "clean up" or re-formatting.  If you need hard copies for in-class handouts, remember that a syllabus can be printed from the web and photo copied.  If you must maintain highly complex documents on your web site, convert them to PDF, Adobe Acrobat portable document format.  This will require every user to download and install the Adobe Acrobat reader software (free software), but at least they will see the same thing that you are seeing on your screen.  Be aware that PDF documents, and any documents with lots of images, pictures, graphs, charts, figures, buttons, and bullets are typically large documents.  And on the Web, large is undesirable since, (a) large documents download slowly (especially over modems), and (b) academic web server disk space may be (is!) limited.  Also, a note about printing:  keep in mind that no two printers are alike.  Some are color, others are black and white; some are laser, some are inkjet, some dot-matrix; some leave large physical gaps at the edge of the page, others do not (design limitations).  So don't count on web pages printing on others' printers exactly as it prints on yours (for better or worse).  There are many brands and versions of web browsers and printers, and no two combinations will produce the same printed result -- and so it will be with everyone on the Internet.

(14) Don't use flash at close distances with a digital camera
Most digital still cameras are very sensitive to light and don't require a flash in normal office or daylight conditions (unless you are getting shadows under the eyes, etc.).  Be careful when using a flash at close distances or the subject will "wash out".

Created by
Education IT
http://www.education.purdue.edu/edit