Cicada

Cicada (link com­ing shortly) is our first site of 2010, com­mis­sioned by a friend of mine for his new busi­ness. The brief was to provide a simple and clean web­site in order to allow pro­spect­ive cli­ents to con­tact him and to con­form to all cur­rent European stand­ards for busi­nesses. It should also be com­pli­ant with IE6+, Fire­fox, Chrome, and Opera.

The web­site truly does seem simple at first look, but there’s a lot going on behind the scenes in terms of JavaS­cript and design choices. The big one being cufon, used to serve Hel­vetica Neue — in Light and Ultra Light vari­ants — to the view­ers. Using cufon is as easy as upload­ing the typefaces to their provided gen­er­ator (make sure that the licens­ing allows for them to be embed­ded, you should also lock the file to your domain) and then link­ing the gen­er­ated JavaS­cript file in the head of your HTML:

<script type="text/javascript" src="../js/cufon-yui.js"></script>
<script type="text/javascript" src="../js/HelveticaNeue_300-HelveticaNeue_400.font.js"></script>
<script type="text/javascript">
	Cufon.replace('h1, h2, h3, p');
</script>

Here I’ve chosen to have cufon replace all h1, h2, h3, and p ele­ments. It’s not recom­men­ded to use cufon to replace body text like I’ve done here unless it’s less than 1,000 char­ac­ters.

Next up is a little bit of jQuery to switch states between the main page and the con­tact page (seen below) — when the viewer clicks on the “get in touch” link — by hid­ing and unhid­ing two <div>‘s.

$(function(){
$('#email_us').click(function(){
	$('#about').toggle();
	$('#contact').toggle();
});
});

Note that this all degrades neatly if the viewer doesn’t have JavaS­cript enabled. First by simply choos­ing Hel­vetica or Arial from the view­ers machine if it can’t serve them the cufon ver­sion of Hel­vetica Neue, and secondly by show­ing them an email address they can use instead of the con­tact form with <noscript><a href="mailto:us@cicada.eu">us@cicada.eu</a></noscript>.

Also to note is that all text and images are solid white (#FFF) with vary­ing degrees of opa­city to give them some trans­par­ency over the blue gradi­ent back­ground. To get this work­ing in all browsers (and their ancest­ors) required quite a few lines of CSS (the order is very important):

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter:alpha(opacity=80);
-khtml-opacity:.80;
-moz-opacity:.80;
opacity:.80;

Another thing to note with the trans­par­ency is that Inter­net Explorer (ver­sions 6 and 7) handle trans­par­ent PNG’s ter­ribly. So I’ve had to use a Microsoft designed catch-all to serve IE a non-transparent PNG instead:

<!--[if !IE]><!-->
	<img src="../images/white_logo.png" />
<!--<![endif]-->
<!--[if IE]>
	<img src="../images/logo_ie.png" />
<![endif]-->

This cov­ers the major­ity of the little pieces of code I’ve used in devel­op­ing this web­site. I’ll update this post with a link to the site when it goes live later this month.