|
|
 |
|
JeffCoffin.com |
|
|
Written by Graham Spice
for nuthin'
werked
Site developed by nuthin' werked - Nashville,
TN
This case study is also available at http://www.nuthinwerked.com/caseStudy_jeffcoffin/
Background
Jeff Coffin is a Grammy
Award-winning saxophonist, composer and member of Béla Fleck and the Flecktones.
This is the second version of his site that we have been involved with; each
iteration has been created to support Jeff's latest studio
release.
"Bloom" is the latest album from the Jeff Coffin Mu'tet. Its
packaging revolves around vibrant photos of flowers taken by Jeff. We decided
early on that we wanted to integrate his images into the layout of the
site.
In our initial discovery meetings we all agreed that Jeff needed
more hands-on control over his website. He needed to be able to add pages,
update his gig calendar, photos and media available without any middle men. We
have been doing a lot of work with Mambo which made it it an obvious choice.
Challenge
Since Jeff had taken such great
photos, we really wanted to integrate them in an exciting way. The biggest
challenge that this created was maintaining a focus on the content while
utilizing the colors of the photos. We also needed to keep an eye on
filesize/download time since images were a major part of the design.
Solution
We've created JeffCoffin.com with the
latest stable release of Mambo (4.5.1b). Jeff works exclusively with OSX-based
Macs. The combination of the HTMLArea 3 XTD mambot editor and Firefox browser
seems to work well.
We created two initial mockups for Jeff to choose
from. Both mockups utilized a three-layer approach: the bottom layer was the
flower background image, a repeating middle image mask image, and the top
content layer. Jeff chose a mockup and we moved forward designing 3 more exactly
like it. The differences between the four templates were dictated by the
background image used.
The first template (jeffcoffin_01) takes its
palette from the yellow sunflower image:
The second template (jeffcoffin_02) is
derived from a pink flower picture:
The
third template's background image (jeffcoffin_03) is the cover of Jeff's new
album, "Bloom":
The
fourth template (jeffcoffin_04) takes advantage of the whites and grays of a
reversed photo:
One of these 4 templates is
delivered at random upon each page load. We like this approach better for this
type of site rather than simply assigning a template to a menu item (although
this is a very cool feature of Mambo). The randomization adds an element of
surprise to surfing the site and maintains the identity created by the album's
packaging and title. Each template has exactly the same layout; in fact all the
templates are driven by a single index.php file. The randomized elements are the
chosen template's CSS, background image and RSS syndication images.
This
site uses a fixed-width template design that we wanted to center on top of the
background image. While stretching the background image is possible, that's not
going to do justice to these images. We decided to deliver background images
based on screen resolution. We considered delivering the image based on window
size but this is a variable that easily could change in the same session and we
didn't want to reload the page for any reason. We settled on a cached image
delivery system that delivers one of four cached background images per template.
JavaScript sniffs the screen resolution and prints the correct template's
background image in the body tag:
<SCRIPT
language="JavaScript">
<!--
if(screen.width<=800)
{
document.write('<body style="background-image: url(\'<?php echo
$mosConfig_live_site;?>/templates/<?php echo
$bgdirname;?>/background_800.jpg\'); background-attachment:
fixed;\">');
}
if(screen.width<=1024)
{
document.write('<body style="background-image: url(\'<?php echo
$mosConfig_live_site;?>/templates/<?php echo
$bgdirname;?>/background_1024.jpg\'); background-attachment:
fixed;\">');
}
if(screen.width<=1152)
{
document.write('<body style="background-image: url(\'<?php echo
$mosConfig_live_site;?>/templates/<?php echo
$bgdirname;?>/background_1152.jpg\'); background-attachment:
fixed;\">');
}
if(screen.width<=1280)
{
document.write('<body style="background-image: url(\'<?php echo
$mosConfig_live_site;?>/templates/<?php echo
$bgdirname;?>/background_1280.jpg\'); background-attachment:
fixed;\">');
}
else
{
document.write('<body style=\"background-image: url(\'<?php echo
$mosConfig_live_site;?>/templates/<?php echo
$bgdirname;?>/background_1600.jpg\'); background-attachment:
fixed;\">');
}
//-->
</SCRIPT>
After experimenting with
transparent PNGs for the middle layer mask we settled on a technique that uses a
smaller bit-depth for browsers not capable of all the great things you can do
with the PNG format.
We created some PHP logic to randomize the arrays of
the 3 random elements per template. The layout made it relatively easy to create
because so few pieces actually needed to be randomized. The code is easily
re-usable by providing full paths inside the templates directory. Here is the
PHP code we're using in the HEAD above the BODY tag and the CSS
delivery:
<?php
$templates[] =
"jeffcoffin_01/css/template_css.css";
$templates[] =
"jeffcoffin_02/css/template_css.css";
$templates[] =
"jeffcoffin_03/css/template_css.css";
$templates[] =
"jeffcoffin_04/css/template_css.css";
$headimages[] =
"jeffcoffin_01/images/title.gif";
$headimages[] =
"jeffcoffin_02/images/title.gif";
$headimages[] =
"jeffcoffin_03/images/title.gif";
$headimages[] =
"jeffcoffin_04/images/title.gif";
$bgimages[] =
"jeffcoffin_01/images";
$bgimages[] =
"jeffcoffin_02/images";
$bgimages[] =
"jeffcoffin_03/images";
$bgimages[] =
"jeffcoffin_04/images";
$numheadimages =
count($headimages);
$numheadimages = $numheadimages -
1;
$headnum = rand(0, $numheadimages);
$templatename
= $templates[$headnum];
$headname =
$headimages[$headnum];
$bgdirname =
$bgimages[$headnum];
?>
<link href="<?php echo
$mosConfig_live_site;?>/templates/<?php echo $templatename;?>"
rel="stylesheet" media="screen">
Printing the correct header image
is necessary in the body of the HTML and the code to do so follows:
<a href="<?php echo $mosConfig_live_site;?>"><img
src="<?php echo $mosConfig_live_site;?>/templates/<?php echo
$headname;?>" alt="jeff coffin mu'tet" width="330" height="125"
/></a>
To address Jeff's site feature
needs not covered by the Mambo core, we installed Menalto's Gallery for pictures
and video, MOSMedia Project for additional media uploads, the SimpleBoard forum,
HTMLArea 3 XTD and mosclearft. Jeff's additional requirements will soon be
satisfied with gigCalendar
component (to be be released in mid-March) and is to be followed soon after
by the gigAlert newsletter component. Both will be released to the public, never
fear!
The randomization of the RSS syndication images was a bit more of a
chore. The images are chosen in the admin and are displayed via
modules/mod_rssfeed.php. The RSS feed images are located in
/templates/rss/jeffcoffin_0x. The changes made to mod_rssfeed.php
are:
<?php
/**
* @version $Id: mod_rssfeed.php,v 1.15
2004/09/19 18:16:59 stingrey Exp $
* @package Mambo_4.5
* @copyright (C)
2000 - 2004 Miro International Pty Ltd
* @license http://www.gnu.org/copyleft/gpl.html
GNU/GPL
* Mambo is Free Software
*/
/** ensure this file is being
included by a parent file */
defined( '_VALID_MOS' ) or die( 'Direct Access
to this location is not allowed.' );
global $mosConfig_live_site,
$mosConfig_absolute_path, $cur_template, $headnum;
//override
cur_template
$templates[] =
"/templates/rss/jeffcoffin_01/";
$templates[] =
"/templates/rss/jeffcoffin_02/";
$templates[] =
"/templates/rss/jeffcoffin_03/";
$templates[] =
"/templates/rss/jeffcoffin_04/";
$cur_template =
$templates[$headnum];
//////////
$text =
$params->get( 'text' );
$moduleclass_sfx = $params->get(
'moduleclass_sfx', '' );
$rss091 = $params->get( 'rss091', 1
);
$rss10 = $params->get( 'rss10', 1 );
$rss20
= $params->get( 'rss20', 1 );
$atom = $params->get(
'atom', 1 );
$opml = $params->get( 'opml', 1
);
$rss091_image = $params->get( 'rss091_image', ''
);
$rss10_image = $params->get( 'rss10_image', ''
);
$rss20_image = $params->get( 'rss20_image', ''
);
$atom_image = $params->get( 'atom_image', ''
);
$opml_image = $params->get( 'opml_image', '' );
$t_path
= $mosConfig_live_site .'/templates/'. $cur_template
.'/images/';
$d_path = $mosConfig_live_site
.'/$cur_template';
?>
<div class="syndicate<?php echo
$moduleclass_sfx;?>">
<?php
// rss091 link
if ( $text )
{
?>
<div align="center" class="syndicate_text<?php echo
$moduleclass_sfx;?>">
<?php echo $text;?>
</div>
<?php
}
?>
<?php
// rss091
link
if ( $rss091 ) {
$img = mosAdminMenus::ImageCheck( 'rss091.gif',
$cur_template, $rss091_image, $cur_template, 'RSS 0.91' );
?>
<div align="right">
<a href="<?php echo $mosConfig_live_site
?>/index2.php?option=com_rss&feed=RSS0.91&no_html=1">
<?php echo $img ?>
</a>
</div>
<?php
}
?>
<?php
// rss10 link
if ( $rss10 )
{
$img = mosAdminMenus::ImageCheck( 'rss10.gif', $cur_template,
$rss10_image, $cur_template, 'RSS 1.0' );
?>
<div
align="right">
<a href="<?php echo $mosConfig_live_site
?>/index2.php?option=com_rss&feed=RSS1.0&no_html=1">
<?php echo $img ?>
</a>
</div>
<?php
}
?>
<?php
// rss20 link
if ( $rss20 )
{
$img = mosAdminMenus::ImageCheck( 'rss20.gif', $cur_template,
$rss20_image, $cur_template, 'RSS 2.0' );
?>
<div
align="right">
<a href="<?php echo $mosConfig_live_site
?>/index2.php?option=com_rss&feed=RSS2.0&no_html=1">
<?php echo $img ?>
</a>
</div>
<?php
}
?>
<?php
// atom link
if ( $atom ) {
$img = mosAdminMenus::ImageCheck( 'atom03.gif', $cur_template, $atom_image,
$cur_template, 'ATOM 0.3' );
?>
<div
align="right">
<a href="<?php echo $mosConfig_live_site
?>/index2.php?option=com_rss&feed=ATOM0.3&no_html=1">
<?php echo $img ?>
</a>
</div>
<?php
}
?>
<?php
// opml link
if ( $opml ) {
$img = mosAdminMenus::ImageCheck( 'opml.png', $cur_template, $opml_image,
$cur_template, 'OPML' );
?>
<div align="right">
<a href="<?php echo $mosConfig_live_site
?>/index2.php?option=com_rss&feed=OPML&no_html=1">
<?php echo $img ?>
</a>
</div>
<?php
}
?>
</div>
Benefits
This site really showcases what a
great value Mambo delivers right out of the box. Giving Jeff Coffin the
flexibility to add menu items and content has empowered him in unforeseen ways.
He's adding content whenever he wants to and has been receiving great feedback
about the site since its launch February 1, 2005. The power of Mambo as a CMS is
fabulous and the simplicity of the backend admin is headed in a very intuitive
direction.
The MamboServer forum has also played an active role in our
ability to launch the site. The Mambo community at-large is helpful, active, and
knowledgeable. We have yet to have an important question that wasn't answered
promptly and thoroughly. We try to do the same when time permits and have also
been evangelizing Mambo, PHP and
OS use in our community.
Conclusion
Our first major experience with
Mambo has been a success. The new JeffCoffin.com site continues to please visitors and the
client. nuthin' werked
will continue to build effective websites for our clients and is pleased to have
added Mambo to our tools. Hopefully this case study has given you some ideas for
how to make your site better. |
|
Last Updated ( Wednesday, 09 March 2005 )
|
|
|
|
Bookmark Us |
|
|
Website Stories 
