Richard Gnall

Web Design Projects

Richard Gnall 

This website uses two different interface designs - one for desktops and one for the iPad.

A web browser running on a mouse-based desktop is able to properly interpret JavaScript code written for both onMouseOver and onClick events, while a browser running on a mouse-less iPad will usually produce unexpected results. If a webpage element has both onMouseOver and onClick events associated with it, an iPad will require two taps to trigger the onClick event - the first tap is captured by the onMouseOver code and the second tap is captured by the onClick code. Therefore an interface which is designed with both hover and click events for a mouse-based desktop needs to be redesigned with just click events for a touch device.

To update my website for viewing on an iPad, I could have removed the mouse over effects while only making minor changes to the look of the interface. Instead, I decided to completely overhaul the homepage to create an interface which better accomodates the "finger touch" aspect of the iPad.

The first image below is from the desktop version of this website and shows a flyout menu which appears in response to the mouse hovering over the Games link. The second image is from the iPad version which shows two easily tappable icons which appear in response to a single tap on the Games link.

On the internal pages of this website, the fly out menu navigation bar was also designed to react to a single tap event on the iPad.

Since finger tapping is less accurate than mouse clicking, there is greater separation between links in the iPad interface than in the desktop interface.


Desktop

iPad
Locus Medicus 
Locus Medicus - Version 1
Locus Medicus - Version 2 - Alternate Menu System   (IE only, needs to be updated for Firefox)

This is an old project dating from around the year 2000.

Locus Medicus is a technical writing company specializing in creating documents for a wide range of topics within the pharmaceutical industry. The goal of this website was to enable a visitor to quickly scan through various groupings of a large number of manuscript titles and summaries without having to wait for remote server delays when switching between various subject categories.

A three level fly-out menu system is used to select and display subsets of the manuscript titles. Clicking on one of the more than 160 titles will display the title's corresponding summary information.

Document summaries will eventually contain links to full manuscripts to be displayed in a pop-up window. Access to the manuscripts will be password protected.

Features:

  1. Clicking "All Projects" in the left menu will display a list of all 161 titles
  2. Clicking the LM logo while pressing the CTRL key will also display a list of all 161 titles
  3. Clicking Main will bring you back to the main screen
  4. Clicking the LM logo will also bring you back to the main screen
  5. Therapeutic Classes has an additional submenu for the top seven menu items
  6. Resizing the height of the window will automatically cause the height of the scrollable title listing to self-adjust

This website was developed at a time when most of the country was still using dialup. Since all of the information for this site is contained in a single html file which is downloaded only once, steps were taken to ensure that the file size was as small as possible. Instead of writing out all of the html code for each of the short titles buttons and summary panels, data for the short titles and summary content is contained in a compact two dimensional array. Once the file has been downloaded, JavaScript code loops through each item in the array and then generates the surrounding HTML structure for each short-title button and summary panel. Using JavaScript to generate the HTML after the page has been downloaded, instead of downloading a file which was written out in full, reduces the file size to less than 1/3 of it's original size. This results in a significant saving in download time over a 56K modem.

The raised, highlighted, and depressed button effects are created by JavaScript manipulation of CSS styles, and not by image swapping. Downloading button images would have added to the overall download time.

This web page has an Easter Egg - clicking on the LM caduceus logo while holding down the CTRL key will display all of the Locus Medicus short titles. This is the same effect as clicking on "All Projects" at the bottom of the left column.

Sample Manuscript Access:

  1. Click on "All Projects" at the bottom of the menu
  2. Click on the top short-title button: "Vanlev (Omipatrilat) Document Review"
  3. Click "View Manuscript" in the summary area (blue text)
  4. When prompted for a password, enter "lm" or "LM"
  5. Click OK
  6. A window containing a sample manuscript will pop up
  7. Close the sample manuscript window and click "View Manuscript" again. The web page remembers that you have already entered the correct password, and does not ask for it again.

Terri Thomas 
Terri Thomas, Soprano


Work started on this website in 2001 (and ended around 2005), when speckled backgrounds were still popular. The design follows the general format used by opera singers for online resumes that was standard at the time. The size of each webpage was kept to a short enough length to accommodate easy printing.

Since some hiring groups (especially impoverished arts organizations) were using older PCs with out-dated browsers, special attention was paid to maintaining backward compatibility with Netscape 4, which still had an ~ 10% market share in 2001. Custom CSS formatting files were prepared for each of the four main browsers: Internet Explorer, Netscape, Mozilla, and Opera.

Selective jpeg compression was applied to Ms. Thomas's photos to facilitate fast download times, with each webpage taking an average time of four seconds to load over a 56K modem. Selective jpeg compression is a technique which allows one to apply varying amounts of compression to different regions of an image.

Reviews

Extraordinarily clean, thanks very much. It's so easy to run into trouble with color on sites -- more people should take your route.
– Michael B. Stevens, Painter, Photographer & Web Designer

Good job. The site looks quite appropriate for its intended audience. I like the hover effects on the navigation menu.
– Jim Hollomon, Web Developer - ET Productions

I liked the site a lot -- very clean, gave the information without a lot of unnecessary bells and whistles. The layout was pretty straightforward -- again, very clean.
– Carol Ott, Graphic Artist & Web Content Developer