5/1/09    WEB PORTFOLIO - STEPHANIE SCHOELZEL    
HOME     Site Design and Web Page Design Challenges and Solutions    

Link Index
Work Hist
Walk Thru
Environment
Challenges
StephStuff

 
 

SITE DESIGN CHALLENGES

The Materials and Engineering Sciences Center Site: This project was the first Laboratories site design project that would serve as a site wide working blueprint for the development of websites for other laboratories. It established the underlying architectural structure, content treatment and the interlocked use of information that was being maintained for business purposes on a daily basis with the dynamic generation of content for web pages. This project was managed by me. I worked closely with a very creative and gifted web programmer, Bill Dissly. The project manger for the Center was Ken Wilson. The following is a list of specifications it needed to meet:

MOST IMPORTANTLY - SITE ARCHITECTURE:

Most of Sandia's Research Labs have no provision for the development or maintenance of their web presence. They preferred to look at the initial development as a one time expense. It was important to create a structure that would serve the Center's needs for the indefinite future, maintaining its functionalities through changes to the corporate server platforms and softwares, the vicissitudes of changes to corporate databases, and the lack of corporate wide cohesiveness in its business solutions.

Both the intranet site and the external site were designed as an interlocking whole, with some content being generated from a "stand alone" body of custom web based dB's. These dB's solved additional business problems by eliminating existing problems with lack of cross platform clients and the inability of the entire staff having access to the dB content for daily use. Through discussion with a wide range of staff and the rest of the SNL/CA site the content structure was devised to serve departmental business use, research staff use, cross-site use and the targeted external website client use. Much of the dB content was also used to generate topical cross linking within the site, thus enriching the content for informational use.

The client wanted to avoid having to add additional staff to maintain the site. Web page content that would need to be updated on a monthly basis, at the very least, formed some of the essential content to both the external and internal site while, in some cases being used in different formats. Keeping in mind my personal mission to insure that data only needs to be entered once anywhere and then used every where, I consulted with the Administrative Assistants to ensure that I designed a structure that would make this possible without adding to anyone's work load.

Updating and adding content within the site must be easy and not labor intensive.
ACCOMPLISHED BY:

  • Modular structure of content
  • Use of frame format to make it easy to deliver different navigation to external and internal site while sharing the same body content files when applicable.
  • Simple navigation vertical and horizontal navigation bar structure
  • Web Maintenance Engine accessible through passwords from intranet. (This link leads to an in-depth presentation that was developed for the client regarding the nature of the Web Maintenance Engine and explains in detail the why and how of the architecture).

PRODUCTION DESIGN STANDARDS:

  • Look and feel unique and high tech with a high energy and timeless in style so that the site will not become stylistically dated. Needs to be appealing across generations and cultures. (The labs cannot afford regular periodical redesign of their sites. The process of creating content to fulfill content plans is turning out to be a 3 to 4 year process for all the labs.)
    ACCOMPLISHED BY:
    • Metallic Plate navigation buttons and metallic "pipe" design provides both visual energy (enhanced by the physical illusion of the "pushed buttons").

  • Must download well on a 28.8 dial-up connection

  • ACCOMPLISHED BY:
    • Careful processing of site style graphics to the smallest possible GIF files.
    • Use of tiny sized background tiles
    • Use of small thumbnails with pop-up enlargements
    • Careful processing of photograph JPGs to ensure high quality look and small file size.

  • Must display well on all platform monitors ranging from 640 x 480 to 1024 x 768 resolution running 16 bit color
    ACCOMPLISHED BY:
    • Using background image tiles with in resizable tables that combine specific cell sizes and relative cell sizes
    • Carefully limiting the number of colors used in the "look and feel" graphics by using optimized GIFs, leaving room for colors in illustrations to ensure colors do not "drop out" in browser displays.
    • Carefully checking display qualities on wide range of systems and browsers.
    • Esthetic rules for laying out body content components based on "relative" spatial relationships, rather than specific spatial distances

  • Must display correctly in all versions of Netscape 4 and MS Internet Explorer 5
    ACCOMPLISHED BY:
    • Using minimum JavaScript
    • Sticking to traditional HTML for formatting

  • Must incorporate the Center Logo Icon and the corporate logo prominently
    ACCOMPLISHED BY:
    • Center Logo in upper left corner of every page
    • Sandia Thunderbird logo button in the top navigation bar linking to the Corporate web site
    • text footers with required corporate links (also meets Section 508 navigation requirements and clearly shows page placement in navigation hierarchy of Center Site and in relation to SNL/CA corporate site)

  • Page content of external site easily also used in intra net site.
    ACCOMPLISHED BY:
    • Use of frames for navigation accommodates calling the same body content from differently formatted navigation pages.

  • Splash page and department pages must place well in Internet search engines.
    ACCOMPLISHED BY:
  • Each department site needs to have a unique look while adhering to the Center look and feel.
    ACCOMPLISHED BY:
    • Each department has its own unique metallic color of the foundation look and feel graphics.
    • Content formatting style conventions are adhered to throughout the site.

Back to Top 


WEB PAGE DESIGN CHALLENGES - (using HTML to solve layout and maintenance challenges created by a graphic artist with minimal experience designing for the web.)

The Combustion Research Facility (CRF) site and the Distributed Information Systems Laboratories (DIS) sites were both exceptionally difficult page design challenges.

The page look and feel was designed by the same technical illustrator using Adobe Illustrator and presented variations on the same challenges. His tendency is to design without a care or thought about:

  • browser windows being resized by the client audience
  • content, and therefore link navigation, may become very large sized and not fit within the single frame of the browser
  • the web page designer having no control over how much content is included on a page
  • the web page designer's lack of control over the length of link names
  • the high cost of labor:
    • in producing rollover image links
    • in arranging navigation images along a specific curved line
    • in remaking navigation to accommodate the change of site content

Our track record together on smaller projects lead him to believe that I would find a solution that would "make it work" without "breaking" the root design concept. I enjoyed the challenges, but cursed the necessity of heroic measures to arrive at a solution.

The CFR site is targeted, per the Client's definition of their target audience, for a user on at least:

  • a 17" monitor with resolution setting of at least 1024 x 768
  • with colors set to at least 16 bit
  • and at least T1 access

I inherited this project from the staff webdesigner who left the department for another position. All the preliminary design conferences were done before I came on the project. Design decisions were made and agreed to with the client without there being a clear picture of technical restrictions dictated by the overall scope of the project. The designer's original assumption was that Fireworks would make it easy to achieve the CFR splash page design through slicing. After both he and the staff web master determined that this was not a viable solution when combined with the curved layout of the rollover navigation and images, I was left to solve the puzzle.

  • The Adobe Illustrator Designs were carefully converted to web quality image files using web colors and file formats that would hold up under browser resizing, cross platform monitors and cross browser viewing. The pastel iridescent nature of the splash page background and the primary page banners was a particular challenge. Page layout is controlled through complex use of tables with fixed and floating width cells. background tiles and images in table cells and liberal use of transparent GIFs.
  • The high graphic content of those pages required reducing the files sizes to the minimum while still maintaining quality rendering by the browser.

  • Alternative navigation link formats for the 3rd level and lower pages, echoed the original design format, were developed using text instead of text images. There was no physical way to fit many long titles required by the Techwriter into the space width allotted for navigation. The rollover image format was far too time costly to update when new content was added or shifted module structure.
    • The vertical red line is a background image in the controlling table cell, allowing for automatic height adjustment as dictated by page content.
    • Sets of rollover dots where made in heights appropriate to 1, 2, & 3 text lines and used as needed.
    • The href and Java rollover call are around the image call and the link text.

EXAMPLES:

 

The DIS site is targeted, per the Client's definition of their target audience, for a user on at least:

  • a 19" monitor with resolution setting of at least 1280 x 960
  • with colors set to at least 16 bit and
  • at least T1 access

In addition to the same problems that I had to solve for the CRF site, I had to:

  • create a structure that could handle the lengthening of the curve on the left side of the page content beyond one browser window frame in depth.
  • Modify the design incorporate the required corporate footer and the required Section 508 text navigation

Careful work on the file quality of the curve graphic allowed the height to be specified as more than it actually is without any noticeable distortions in the display of the image.

EXAMPLES:

The navigation for DIS 3rd level pages provided an additional challenge because:

  • The design calls for the links to be placed in a curve line that appears to parallel the far left graphic curve
  • On this level sub topics pages are regularly added and deleted and navigation links need to be easily changed.
  • It was crucial to eliminate the need for a totally new set rollover images to accommodate the rearrangement of the order of topics in relation to the curve.

I ultimately accomplished a control table system with many narrow columns, using the correct indent increments that placed the navigation "bullet" image parallel to the curve as it moved up a 2 rows and in a column.

EXAMPLES:

The body content came from PowerPoint pages. There was no Techwriter available to adapt these to web content and little or no funding for graphics processing. The solution was to do screen capture of the PowerPoint pages, rearrange the content in Photoshop to better fit the content space of the page and carefully save to JPG files. These were then navigated like a slide show through the pages in addition to the "side navigation links". See the link immediately above for an example.


     Site Design and Web Page Design Challenges and Solutions

 
   
       

© 2009
Stephanie
Schoelzel
 

Links Index | Work Hist
Walk Thru | Work Environment | Challenges
HOME