Personal Website: Design Documentation

Goals

  • Describe and give examples of my professional knowledge, experience and skills
  • Demonstrate and develop my skills in web design, programming and writing
  • Educate people about computers, Africa, languages, education
  • Motivate people to support information technology, education and development in Africa
  • Share my knowledge, experiences, opinions, photos

Target Audience

  • Potential Employers
  • Educators
  • Students
  • Travelers
  • Family
  • Friends
  • Myself

Format Design Goals and Specifications

Category Goals Specifications
Navigation
  • Quick access to all pages and files
  • Multiple paths to a file (hierarchical/web hybrid)
  • Easy to update, maintain, restructure, add content
  • Titles and footers on every page
  • Easy to get back home or to contents pages
  • Accessible to browsers without displaying images
  • Works for most popular screen resolutions
  • Easy access to frequently used information
  • Navigation elements take up little screen space
  • Details of linked pages
  • No independently scrolling frames
  • No pull-down menus
  • Works on any hosting service or disk
  • Distinguish navigation and content
  • Link to home in upper left corner of every page
  • Top-level navigation using iframe height=70 at top of every page
  • Second-level navigation using iframe width=120 on left margin of every group of pages
  • Home page contains links to most popular features
    (resume, activities, random photo and document, this document)
  • Navigation iframes can contain links to both indexes and content pages
  • All links to index pages (including Home) should be indicated using boldface
  • All images should use alt attributes
  • JavaScript generated headers (titles) and footers, but minimize JavaScript
  • All links in navigation frames use title attributes (Windows tool tips)
  • Use CSS, DHTML and JavaScript to highlight iframe link that matches current page
  • Use JavaScript to hide or show navigational iframes?
  • Use a black border around the content
Appearance
  • Consistent look and feel on every page
  • Clean, bright, precise, serious, enjoyable
  • Look and feel combines Africa and technology
  • Easy to read text
  • Thumbnails small but identifiable
  • Stylesheets and relatively clean, standard, browser-independent XHTML
  • Page body uses black text on white background
  • Navigation frames use black text on gray background
  • Link colors blue and purple (default)
  • Borderless table of colored stripes appears in upper left corner
  • Headings H1-H4 use bold, wide, sans serif font (e.g. Century Gothic)
  • Body text uses sans serif font (e.g. Verdana)
  • Use embedded thumbnails to illustrate individual pages
  • Images/thumbnails should be 640x480/128x96 or less
  • Home page includes a random photo with link to more
Files and Folders
  • Combine hierarchical and web structure
  • Broad rather than deep
  • Clear, consistent, expandable file and folder naming
  • Fit all files on a free web hosting service (<20 MB)
  • Keep individual and total file sizes small
  • Pages download fast
  • Clearly indicate download file sizes and contents
  • Keep only the best content
  • All file and folder names in all lowercase, underscores not spaces
  • Index pages named index.htm; inline frames named iframe.htm
  • Store all photos in one folder; thumbnails in thumbs folder
  • Create a document database with search and sort features

Tools

  • Web page and site editors (Microsoft FrontPage, Macromedia Dreamweaver, HomeSite, WordPad)
  • Scanner, digital camera and image editors (PaintShop Pro, PhotoSuite, PhotoImpact, Intel Create and Share, Paint)
  • Office applications (Microsoft Word, Excel, PowerPoint, Access, Publisher, OpenOffice)
  • Browsers (Internet Explorer, Netscape, Mozilla, Opera)
  • Other (WinZip, CuteFTP, DOS batch files, JavaScript, Java, CSS)

Development Tasks

  • * Analyze existing site and other available resources
    • Check content, format and tools used on academic and programmer web sites
    • Check hosting features of popular free web hosting services
    • Check which pages on current site get the most hits
  • * Reduce content to essentials; small is beautiful
    • * Remove outdated content
  • * Simplify existing navigation scheme
    • x Convert existing HTML files to use new headers and footers
    • x Replace existing framesets with iframes; rename existing index pages
    • * Update and check all links
  • x Create photo gallery
    • x Select the best 150 images
    • x Create descriptions data using a spreadsheet saved as .csv file
    • x Create Java data processor
    • x Create JavaScript photo browser
    • x Create thumbnails and add to photo gallery
    • x Add thumbnail pictures to index and content pages
  • Create a similar document database using .csv file, Java and JavaScript
    • document fields: folder name, file name, file type, file size, date created, category, title, abstract
  • x Reproduce existing site on hard disk, then make updates
  • x Remove all files on existing Internet site, then upload entire new site

* = partly done, x = done