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:
- Careful use of meta tags and hidden text in page.
Try searching on Yahoo for:
- 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
|