The record label’s site looked slick, but had Flash usability issues and content based on what the rrecord labels believed important, not what the fans wanted. On the other hand, fan sites like The Dent (www.thedent.com) contained obsessively detailed and relevant content, and provided a stunning experience. But while the content more than satisfied fans’ thirst for Tori Amos-related information, its design lacked the quality demanded by the management team. Here In My Head (www.hereinmyhead.com), another fan site, succeeded in the area of design and contained up-to-date content.

After completing his research, Fierlinger believed he could build a site that complemented fan sites and the label site while offering higher design standards and unique content. Although he wouldn’t control or maintain the content, he believed he could encourage the application of good content practices by building the site with the right content management system (CMS), including a blog that listed events, and providing RSS feeds.

Furthermore, he gave the team suggestions and ideas for content, even some that didn’t make it past the concept stages. One idea proposed that band members, Tori, fans, and other artists record their impressions and stories on audio and video resembling DVD commentaries. Another involved creating e-cards with interactive music that played audio and animation, like little digital vignettes. Neither idea made the cut because of the time and effort involved, and because providing the fundamentals had a higher priority.

The project took five months, from July through November 2004. Fierlinger used the following basic Web design process:

Applying Web standards best practices also played an important part in the project, says Fierlinger, because Web standards provided better usability and accessibility, helped with search engine optimization, encouraged smart and flexible engineering as well as visual design flexibility, and afforded him the opportunity to stretch his design skills. At the time of the project, many designers hadn’t adopted Web standards.

Not surprisingly, as in so many Web projects, creating content for the site was a slow and difficult process. Fierlinger, knowing that this process is usually underestimated, started requesting content early on in the project. The client submitted CDs with photos and short audio clips with interviews; the client wanted the full record catalog, tour history, press clippings, and links to Tori Amos’ charity as content along with an online store. Based on this information, Fierlinger drafted a high-level information architecture that defined the main parts of the site:

Fierlinger put together the initial wireframes linking the frames to create a clickable prototype, as shown in FIGURE 6.2. Instead of pen and paper, he used Flash for the wireframes and screenflows, because the application simplifies the process of sketching ideas and wiring them together to see how things flow and to find the gaps.

Figure 6.2. The clickable prototype.

Based on this architecture, Fierlinger created the full-blown wireframes shown in FIGURE 6.3, and discussed them with the client over the phone. He documented changes through several iterations. The wireframes included everything the client wanted to do and the time and cost estimates for the project using a spreadsheet outlining milestones, tasks, costs, and timeframes. The designer started by designing the wireframes with a grand vision and then stripped it based on the client’s feedback.

Figure 6.3. The full-blown wireframe.

As expected, the client wanted a lower time and cost estimate. So the designer returned to the designing board and redacted the sitemap with red slashes to offer two additional approaches, as FIGURE 6.4 shows. The client received a choice of a full-blown version, a scaled-back version, and a basic version. The client chose the scaled-back version.

Figure 6.4. The redacted plans.

After making that decision, the designer switched from holding phone discussions to conversing with the client via videocasts, which helped him explain and clarify ideas as they developed.

After agreeing with the wireframes and sitemap, Fierlinger reviewed thousands of Web site screenshots that he had collected over the years for inspiration and reference. He flagged those that had elements he thought would work for the project. Using those elements and adding typography and photos of Tori Amos, he mixed the assets. He shared his favorites with the clients so they could pick the aspects and elements of the designs they liked. These set the tone for the design direction shown in FIGURES 6.5 and 6.6.

Figure 6.5. The first of two prototypes for the site’s look and feel.

Figure 6.6. This second prototype provided another option for the design direction decision.

The client loved both collages, especially the typography shown in FIGURE 6.7 and the texture and scrapbook feel from FIGURE 6.8. Based on that feedback, Fierlinger combined the elements of the wireframes to create detailed comps, as shown in FIGURES 6.9, 6.10, and 6.11. The design process continued iteratively, with Fierlinger posting the latest designs on the staging site for the client’s review and updating the designs based on client input.

Figure 6.7. Client preferred the typography shown in this prototype.

Figure 6.8. Client chose the scrapbook look and feel from this prototype.

Figure 6.9. First comp based on the client’s input.

Figure 6.10. Detailed comp of the Music section.

Figure 6.11. Initial detailed comp of the Galleries section.

During the design phase, the designer searched for a CMS for the site. While he could’ve built the whole site from scratch in Dreamweaver, he opted not to go in that direction, as this approach would make it difficult for the client to update the content. He investigated blog engines and open-source CMS solutions. He considered Movable Type, but shied away due to concerns about the application’s complexity and its limited PHP support.

The PHP-based ExpressionEngine had potential, with its design flexibility and powerful features. He decided to use it, though first he had to learn how to use it himself. Conceptually, ExpressionEngine worked like other blog engines, but in practice it more closely resembled a big CMS system or Dreamweaver due to its use of object-oriented templates and subtemplates. The object-oriented and modular application used a different approach for site modeling and content creation. Adopting ExpressionEngine required changing the way of thinking about and building a Web site that runs on a CMS.

FIGURE 6.12 shows ExpressionEngine’s control panel, which gives only a small taste of the application’s power. It lets designers hack things in interesting ways, and blend in custom PHP code as needed. In a typical project, Fierlinger generally avoided adding much customized PHP. However, for this project, the gallery structure needed heavy-duty PHP. The nature of the content required a gallery format, so the designer needed to figure out the best way to design and build the gallery.

Figure 6.12. Expression-Engine did the grunt work in managing the site behind the scenes.

It would’ve been simple to build the gallery as a basic blog sequence in which users accessed entries sequentially with a preview and links to the next and previous entries. However, the designer wanted to offer more by setting up the gallery to appear as a set of pages containing a manageable number of thumbnail previews. He had customized a CMS for a photography site, so he adopted that same approach, which gave him the ability to generate an entire site design and layout as a gallery structure. FIGURE 6.13 shows the front page of the Galleries section.

Figure 6.13. The home page of the photo gallery contains thumbnails of several separate albums, each of which contains collections of photos.

The most challenging part of designing the gallery was getting the thumbnail subsets to paginate, or automatically break up by pages. The gallery displayed up to nine thumbnails per page. If the gallery has more than nine images, then the CMS he designed created a new page for the next set of nine thumbnails. He applied the concept, not the code, from his photography site CMS, and built the gallery in ExpressionEngine with customized PHP. The gallery turned out well (see FIGURES 6.14 and 6.15) because of the mind-bending amount of work he invested in building it.

Figure 6.14. The Fade To Red Era gallery.

Figure 6.15. Second page of the Fade to Red Era gallery.

With the CMS decided, the project moved forward using the following build process:

In working on the design approach, Fierlinger wanted to ensure the layouts were scalable. This scalability would allow the site to accommodate content, large and small, so the content could grow along with the site. To build a flexible structure for scalable layout, he used grid patterns with CSS, which play well together, since CSS provides the freedom to work with an underlying grid pattern without the restrictions that come with hard, formal, and obvious boundaries.

The flexible and scalable structure led Fierlinger to use backgrounds to loosen up the grid, to extend and overlap the edges, and to create a highly textured scrapbook feel. Though he designed the site with content scalability in mind, nothing will scale elegantly in situations where the copy, being either too short or too long for a given space, doesn’t synchronize with the design.

Since ExpressionEngine relied on PHP, the site loaded CSS using PHP with @import to separate the code from style. This allowed the site to import section-specific styles for each area of the site. In spite of these advantages, the site contained many <div> tags, leading to a case of “Divitis,” a common Web site ailment. The main role of <div> is to group the page into sections, such as the navigation, header, footer, and body. For EverythingTori.com, no other solution accomplished what the site needed. Though having many <div> elements and classes adds as much weight to a page as tables do, CSS still has advantages over tables. For instance, those using screen readers experience fewer problems with CSS than with tables. After all, it was 2004—a time when CSS wasn’t widely adopted by designers and supporting browsers.

The site’s subtle background images led to unforeseen issues cropping up in the design. For example, the home page’s “Musings & News” height is shorter than the background image, so the design crops it to the height of the block. Fortunately, it works naturally for the site with its use of textures and randomness to give it a scrapbook look and feel.

But the designer worried more about making the background images seamless while overlapping or tiled vertically or horizontally. Beyond that, it was better for the design to look random.

In dealing with browser issues, Fierlinger relied on “build, test, build, test, repeat” until the design behaved the way it should. He aimed to ensure the site worked with Internet Explorer 5.5 and FireFox 1.5 (remember, this was 2004). When he couldn’t find a solution for a situation, he resorted to the magic bullet: the underscore hack. The underscore hack isn’t valid CSS, but it did the trick:

hr {
   height:3px;
   _height:4px;
}

The three-pixel positioning looked right in every browser except Internet Explorer; four pixels worked better for IE. The underscore acts like a comment, and most browsers ignore anything with an underscore in the CSS. Internet Explorer is an exception, however, so it dutifully obeys the style following the underscore. (To make it work, the underscored attribute must come after the original attribute so IE obeys the “last command” it receives.)

While some purist designers believe that using the hack is a sin, Fierlinger believed the hack was, at least, more elegant than other hacks. So what if the site didn’t validate? The site would survive, and serve its purpose.

Another interesting aspect of the site comes in the sharing of the same HTML structure while giving each section a distinctive look through the different background textures. The texture frames the page and the custom imagery to define each section. Each section also features different search field and button styles. The underlying HTML all comes from the same template, demonstrating the beauty and ease of using CSS to separate structure and presentation. FIGURE 6.16 shows an overview.

Figure 6.16. High-level overview of the different sections along with their <divs>.

Most sites feature a <div> to frame the header, usually something like #header. In the case of the Tori site, using a header <div> would have restricted the background textures to a limited space. To get the textures to extend and flow into the overall page, Fierlinger used #body to define the background imagery. Notice that the page includes a drop shadow, adding dimension and depth and enhancing its tactile feel. He added a #page-shadow <div> with a margin-left of 780px to extend the shadow to the full page width, to accommodate varying browser widths. Thus, starting from the minimum page width of 780px, the background image extends to the right infinitely with the use of repeat-x. In some cases, Fierlinger added a background image in the #page <div> to frame the page content. The following CSS contains sitewide styles as well as styles specific to sections:

#page-shadow {
  top:0;
  height:200px;
  margin-left:850px;
  }
#memento {
  position:absolute;
  top:0px;
  left:320px;
  }
#tori {
  position:absolute;
  top:77px;
  left:17px;
  }
#main-nav {
  position:absolute;
  top:136px;
  width:760px;
  margin-left:20px;
  height:50px;
  border:0px solid green;
  }
#main-nav a {
  display:block;
  height:30px;
  margin-right:20px;
  text-decoration:none;
  float:left;
}
#nav-home {
  width:46px;
  background: url("../img/nav/home.gif") no-repeat 0 -30px;
  }
#main-nav a:hover#nav-home {
  background-position: 0 0;
}
#nav-musings {
  width:126px;
  background: url("../img/nav/musings.gif") no-repeat 0 -30px;
  }
#main-nav a:hover#nav-musings {
  background-position: 0 0;
}
#nav-music {
  width:48px;
  background: url("../img/nav/music.gif") no-repeat 0 -30px;
  }
#main-nav a:hover#nav-music {
  background-position: 0 0;
}
#nav-tours {
  width:48px;
  background: url("../img/nav/tours.gif") no-repeat 0 -30px;
  }
#main-nav a:hover#nav-tours {
  background-position: 0 0;
}
#nav-galleries {
  width:65px;
  background: url("../img/nav/galleries.gif") no-repeat 0 -30px;
  }
#main-nav a:hover#nav-galleries {
  background-position: 0 0;
}
#nav-press {
  width:46px;
  background: url("../img/nav/press.gif") no-repeat 0 -30px;
  }
#main-nav a:hover#nav-press {
  background-position: 0 0;
}
#search {
  position:absolute;
  top:140px;
  left:577px;
  border:0px solid yellow;
}
#search-box {
  width:124px;
  font-size:.9em;
  border:none;
  padding:6px 8px 6px 4px;
  border:0px solid black;
  float:left;
  }
#search-button {
  border:0px;
  width:66px;
  height:25px;
}
#search p {
  border:0px solid white;
  text-align:right;
  color:#999;
  font-style:italic;
  padding:0;
  margin:0;
  }
#search a:hover {
  color:#666;
  }

The following code comes from the Tours section’s CSS to show how its header differs from other sections:

body {
   background: #F3F7F7 url(../img/tours/bkgd.jpg) no-repeat;
}
#page-shadow {
   margin-left:850px;
   background:url(../img/tours/page-shadow.gif) repeat-x 0 0;
}

#mic-chord {
   position:absolute;
   top:0px;
   left:320px;
}

#nav-tours {
   width:48px;
   padding-bottom:20px;
   background: url(../img/tours/tours-current.gif) no-repeat 0 0;
   }
#main-nav a:hover#nav-tours {
   background-position: 0 0;
}
#search-box {
   background:url(../img/tours/search-box.gif) no-repeat 0 0;
   _background-attachment:fixed; /* underscore hack for IE
positioning */
   _width:120px; /* underscore hack for IE positioning */
}

#search-button {
   _height:28px; /* underscore hack for IE positioning */
   background:url(../img/tours/search-button.gif) no-repeat 0 0;
}
#tours {
   display:block;
   float:left;
   width:181px;
   height:51px;
   }
#intro {
   width:46em;
   float:left;
   padding-left:10px;
   padding-bottom:30px;
   }

.featured {
   display:inline;
   float:left;
   width:170px;
   padding-right:20px;
   margin-bottom:20px;
   }
.featured img {
   width:170px;
   height:108px;
}
.featured a img {
   padding: 0 2px 2px 0;
   margin-bottom:5px;
   background:url(../img/drop-shadow.gif) no-repeat 100% 100%;
   }
.featured a:hover {
   text-decoration:none;
}

.featured a:hover .title {
   text-decoration:underline;
}
.featured .title {
   font: 1.25em "Arial Black";
   }
.featured h3 {
   font-size:.9em;
   font-style:italic;
   font-weight:normal;
   padding:0;
   margin:0;
}
.duct-tape {
   position:absolute;
   padding-left:70px;
   margin-top:-8px;
   z-index:2;
   }
img.duct-tape {
   width:40px;
   height:15px;
   border:none;
   }

Here’s the HTML for the headers on the home page:

<title>Everything Tori | Home</title>

<style type="text/css">
@import url("http://everythingtori.com/go?css=core/general-css");
@import url("http://everythingtori.com/go?css=home/home-css");
</style>
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
   window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>

<div id="page-shadow">&nbsp;</div>
<img src="img/home/tori.gif" alt="Tori Amos" id="tori" />
<img src="img/home/memento.gif" id="memento" alt="" />

<div id="sitewide-store-link"><a href="http://www.thetoristore.com/"
target="_blank" title="Link opens in a new window.">visit the Tori
Store</a></div>
<div id="sitewide-mail-link"><a href="Javascript:MM_openBrWindow('/
mailing.html','mailing','width=400,height=450')" title="Link opens in a
new window">Join the Tori mailing list</a></div>
<div id="main-nav">
   <a href="http://everythingtori.com/go/home/" id="nav-home"
   class="hide-text">Home</a>
   <a href="http://everythingtori.com/go/musings/" id="nav-musings"
   class="hide-text">Musings &amp; News</a>
   <a href="http://everythingtori.com/go/music/" id="nav-music"
   class="hide-text">Music</a>
   <a href="http://everythingtori.com/go/tours/" id="nav-tours"
   class="hide-text">Tours</a>
   <a href="http://everythingtori.com/go/galleries/" id="nav-
   galleries" class="hide-text">Galleries</a>
   <a href="http://everythingtori.com/go/press/" id="nav-press"
   class="hide-text">Press</a>
</div>
<div id="search">
<form method="get" action="http://www.google.com/search">
     <input type="text" name="q" maxlength="255" value=""
     id="search-box" />
     <input type="image" src="img/x.gif" value="submit" alt="Search
     (using Google)" title="search using Google" id="search-button"
     />
<p>search using Google</p>
     <input type="hidden" name="domains" value="everythingtori.com"
     />
     <input type="hidden" name="sitesearch" value="everythingtori.
     com" />
</form>
</div>

Compare the home page HTML to the Tours section’s header HTML:

<title>Everything Tori | Tours</title>

<style type="text/css">
@import url("http://everythingtori.com/go?css=core/general-css");
@import url("http://everythingtori.com/go?css=tours/tours-css");
</style>
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
   window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>

<div id="page-shadow">&nbsp;</div>
<img src="img/tours/tori.gif" alt="Tori Amos" id="tori" />
<img src="img/tours/memento.gif"   id="memento" alt="" />

<div id="sitewide-store-link"><a href="http://www.thetoristore.com/"
target="_blank" title="Link opens in a new window.">visit the Tori
Store</a></div>
<div id="sitewide-mail-link"><a href="Javascript:MM_openBrWindow('/
mailing.html','mailing','width=400,height=450')" title="Link opens in a
new window">Join the Tori mailing list</a></div>
<div id="main-nav">
   <a href="http://everythingtori.com/go/home/" id="nav-home"
   class="hide-text">Home</a>
   <a href="http://everythingtori.com/go/musings/" id="nav-musings"
   class="hide-text">Musings &amp; News</a>
   <a href="http://everythingtori.com/go/music/" id="nav-music"
   class="hide-text">Music</a>
   <a href="http://everythingtori.com/go/tours/" id="nav-tours"
   class="hide-text">Tours</a>
   <a href="http://everythingtori.com/go/galleries/"
   id="nav-galleries" class="hide-text">Galleries</a>
   <a href="http://everythingtori.com/go/press/" id="nav-press"
   class="hide-text">Press</a>
</div>
<div id="search">
<form method="get" action="http://www.google.com/search">
     <input type="text" name="q" maxlength="255" value=""
     id="search-box" />
     <input type="image" src="img/x.gif" value="submit" alt="Search
     (using Google)" title="search using Google" id="search-button"
     />
<p>search using Google</p>
     <input type="hidden" name="domains" value="everythingtori.com"
     />
     <input type="hidden" name="sitesearch" value="everythingtori.
     com" />
</form>
</div>

Adding #memento gave each section a defining symbolic image, which seamlessly integrated the background texture and the page shadow. Other standard header elements include the #tori logo, the #main-nav, and #search. The search input field #search-box and the #search-button use background graphics to blend smoothly with the overall page texture. To achieve that effect, the search button used a fully transparent x.gif so that it can use the same HTML template sitewide, and then the CSS defined the custom background image for the button and the input field.