Redesigning Midnite

Over the years, I have had the great pleasure of working with the Midnite Youth Theatre Company on a number of their Perth based productions. Naturally, I decided they _had_ to have a website! It started out in a Plone/Zope setup - it was a nightmare - documentation on theming was thin on the ground and getting people to maintain it was even harder as the backend UI wasn't that friendly for those not as technically savvy as the authors of the system. The site died for a while - motivation was low after the initial failure - then about a year and a half later, we found a home in the Wordpress blogging platform. It was easy enough to tweak for more of a CMS feel, the backend UI made sense - things were on the up. Thankfully, there's not a "but" at the end of that sentence! The site's had 9 or 10 redesigns since (we went through a phase of having a new theme each time a production was being performed - a management nightmare!) and visits to the site are slowly, but surely, on the increase. We're slowly outgrowing Wordpress though - it's primary purpose is to be a blogging platform, not a full blown content management system that can incorporate a database of all Midnite's productions (with venue details, 8 different tiers of pricing to display etc), sell tickets (one day, one day....) etc, so it was time to move on. What we're going to end up with (the bugs are still being ironed out) once the new site is live will be something more flexible and hopefully something that better caters for the needs of Midnite. I couldn't help writing this post however to talk about the HTML and CSS we're using to build the thing - HTML5 and CSS3 are getting a workout on this project and it excites me (but, as you'll hear, also brought me to tears at points) ![Midnite Youth Theatre Company's new site](/images/redesigning-midnite/midnitepreview.png "Midnite Youth Theatre Company's new site") The thing I like most about working on the Midnite site pro-bono is that I get a lot of creative liberties - as I mentioned, this design iteration makes use of the new HTML5 and CSS3 specifications that are in development at the moment. Let's step through some of the new parts of the spec I'm using on the site with the HTML and CSS to match: ## Rounded corners ## <img src="/images/redesigning-midnite/roundedcnr.png" alt="Rounded corner example from the new MYTC website" /> The CSS used to generate this looks a little like this: @@@ css -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; @@@ Yeah, the browser specific declarations are a little annoying, but hey, not having to do it with javascript or thousands of CSS lines dedicated to images for each corner has got to be a bonus! ## @font-face (or Font Embedding) ## <img src="/images/redesigning-midnite/font.png" alt="Font embeding on the new Midnite Youth Theatre Company website" /> Guess what - it even works in IE 6 - sure, you have to use a strange format that only Microsoft care about, but it works! @@@ css @font-face { font-family: 'LeagueGothicRegular'; src: url('../fonts/League_Gothic.eot'); src: local('League Gothic Regular'), local('LeagueGothic'), url('../fonts/League_Gothic.otf') format('opentype'), url('../fonts/League_Gothic.svg#LeagueGothic') format('svg'); } @@@ You have to use the .eot format for IE6 and have it on it's own line so it can be picked up and used, but there's a handy tool for generating all the right font files and the CSS markup to match that can be found over at <a href="http://www.fontsquirrel.com/fontface/generator">Font Squirrel</a>. Using the font you've just declared isn't hard either: @@@ css font-family: "LeagueGothicRegular", Gill Sans, Verdana, sans-serif; @@@ ## Sprites ## Image sprites aren't new news by any stretch of the imagination - there's talk they will make an appearance in the final <a href="http://www.w3.org/TR/css3-images">CSS3 spec</a>, at the moment however, there's just a placeholder with a lot of discussion about whether sprites belong in the spec and if so, what the syntax should be. The new Midnite site makes use of them in their current state though, as depicted below: <img src="/images/redesigning-midnite/hover.png" alt="An example of CSS sprites from the Midnite website" /> Once again, here's the CSS: @@@ css .season { // Unimportant bits left out background-image: url("../images/season2010.png"); background-position: 0 0; height: 176px; width: 450px; } @@@ And for the hover effect: @@@ css .season:hover { background-position: 0 -176px; } @@@ Now, I mentioned earlier that there were tears - you've already had the rant about EOT files for @font-face declarations, but there's one for CSS sprites as well! IE6 and below don't support the :hover selector on elements other that anchor <code><a></code> tags, which makes my CSS above somewhat useless in a browser that is only starting now to lose its stranglehold on the market. Easy fix though - (1) <a href="http://www.kavoir.com/wp-content/uploads/2009/01/csshover3.htc">get this file</a>; (2) put the following CSS in your pipe and make IE6 smoke it: @@@ css body { behavior:url("/styles/csshover3.htc"); } @@@ Hat-tip: make sure that path is absolute (i.e. falls off the root '/') as the URL is relative to the page, not the CSS file location. Once you have that tiny hack in place, your sprites work in IE6+, FF and Webkit. ## RGBA ## We're using RGBA for our navigation link hovers (so you can see the stars faintly behind even when you hover) <img src="/images/redesigning-midnite/rgba.png" alt="RGBa example" /> RGBA is the new kid on the block for declaring colours with their alpha, or transparency set. I'd talk about it here, but Drew McLellan explains it far better over at <a href="http://24ways.org/2009/working-with-rgba-colour">his 2009 24 ways article</a>. ## HTML5 ## So I've really only spoken about the CSS stuff we're doing to this point and frankly, the HTML5 stuff is more structure than eye candy, but the new <code><header></code>, <code><nav></code>, <code><section></code>, <code><aside></code> and <code><footer></code> tags are getting a workout and I enjoy the semantics of the markup - it feels cleaner to me than having div's all over the place with ID's like #header and #footer. I'd encourage you to read such good websites as <a href="http://diveintohtml5.org">Dive into HTML5</a> and <a href="http://html5doctor.com/">HTML5 Doctor</a> for more on getting started using HTML5 today - <a href="http://smashingmagazine.com">Smashing Magazine</a> also have a couple of good articles, as do <a href="http://24ways.org">24 ways</a>

2009-12-29T13:54:16Z

3 Over the years, I have had the great pleasure of working with the Midnite Youth Theatre Company on a number of their Perth based productions. Naturally, I decided they had to have a website!It started out in a Plone/Zope setup - it was a nightmare - documentation on theming was thin on the ground and getting people to maintain it was even harder as the backend UI wasn't that friendly for those not as technically savvy as the authors of the system.The site died for a while - motivation was low after the initial failure - then about a year and a half later, we found a home in the Wordpress blogging platform. It was easy enough to tweak for more of a CMS feel, the backend UI made sense - things were on the up.Thankfully, there's not a "but" at the end of that sentence! The site's had 9 or 10 redesigns since (we went through a phase of having a new theme each time a production was being performed - a management nightmare!) and visits to the site are slowly, but surely, on the increase.We're slowly outgrowing Wordpress though - it's primary purpose is to be a blogging platform, not a full blown content management system that can incorporate a database of all Midnite's productions (with venue details, 8 different tiers of pricing to display etc), sell tickets (one day, one day....) etc, so it was time to move on.What we're going to end up with (the bugs are still being ironed out) once the new site is live will be something more flexible and hopefully something that better caters for the needs of Midnite.I couldn't help writing this post however to talk about the HTML and CSS we're using to build the thing - HTML5 and CSS3 are getting a workout on this project and it excites me (but, as you'll hear, also brought me to tears at points)<img src="/images/redesigning-midnite/midnitepreview.png" title="Midnite Youth Theatre Company's new site" alt="Midnite Youth Theatre Company's new site">The thing I like most about working on the Midnite site pro-bono is that I get a lot of creative liberties - as I mentioned, this design iteration makes use of the new HTML5 and CSS3 specifications that are in development at the moment.Let's step through some of the new parts of the spec I'm using on the site with the HTML and CSS to match:<h2>Rounded corners</h2><img src="/images/redesigning-midnite/roundedcnr.png" alt="Rounded corner example from the new MYTC website">The CSS used to generate this looks a little like this:<div class="highlight css code highlight"><pre>-webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; </pre></div>Yeah, the browser specific declarations are a little annoying, but hey, not having to do it with javascript or thousands of CSS lines dedicated to images for each corner has got to be a bonus!<h2>@font-face (or Font Embedding)</h2><img src="/images/redesigning-midnite/font.png" alt="Font embeding on the new Midnite Youth Theatre Company website">Guess what - it even works in IE 6 - sure, you have to use a strange format that only Microsoft care about, but it works!<div class="highlight css code highlight"><pre>@font-face { font-family: 'LeagueGothicRegular'; src: url('../fonts/League_Gothic.eot'); src: local('League Gothic Regular'), local('LeagueGothic'), url('../fonts/League_Gothic.otf') format('opentype'), url('../fonts/League_Gothic.svg#LeagueGothic') format('svg'); } </pre></div>You have to use the .eot format for IE6 and have it on it's own line so it can be picked up and used, but there's a handy tool for generating all the right font files and the CSS markup to match that can be found over at <a href="http://www.fontsquirrel.com/fontface/generator">Font Squirrel</a>.Using the font you've just declared isn't hard either:<div class="highlight css code highlight"><pre>font-family: "LeagueGothicRegular", Gill Sans, Verdana, sans-serif; </pre></div><h2>Sprites</h2>Image sprites aren't new news by any stretch of the imagination - there's talk they will make an appearance in the final <a href="http://www.w3.org/TR/css3-images">CSS3 spec</a>, at the moment however, there's just a placeholder with a lot of discussion about whether sprites belong in the spec and if so, what the syntax should be.The new Midnite site makes use of them in their current state though, as depicted below:<img src="/images/redesigning-midnite/hover.png" alt="An example of CSS sprites from the Midnite website">Once again, here's the CSS:<div class="highlight css code highlight"><pre>.season { // Unimportant bits left out background-image: url("../images/season2010.png"); background-position: 0 0; height: 176px; width: 450px; } </pre></div>And for the hover effect:<div class="highlight css code highlight"><pre>.season:hover { background-position: 0 -176px; } </pre></div>Now, I mentioned earlier that there were tears - you've already had the rant about EOT files for @font-face declarations, but there's one for CSS sprites as well!IE6 and below don't support the :hover selector on elements other that anchor <code><a></code> tags, which makes my CSS above somewhat useless in a browser that is only starting now to lose its stranglehold on the market.Easy fix though - (1) <a href="http://www.kavoir.com/wp-content/uploads/2009/01/csshover3.htc">get this file</a>; (2) put the following CSS in your pipe and make IE6 smoke it: <div class="highlight css code highlight"><pre>body { behavior:url("/styles/csshover3.htc"); } </pre></div>Hat-tip: make sure that path is absolute (i.e. falls off the root '/') as the URL is relative to the page, not the CSS file location.Once you have that tiny hack in place, your sprites work in IE6+, FF and Webkit.<h2>RGBA</h2>We're using RGBA for our navigation link hovers (so you can see the stars faintly behind even when you hover)<img src="/images/redesigning-midnite/rgba.png" alt="RGBa example">RGBA is the new kid on the block for declaring colours with their alpha, or transparency set. I'd talk about it here, but Drew McLellan explains it far better over at <a href="http://24ways.org/2009/working-with-rgba-colour">his 2009 24 ways article</a>.<h2>HTML5</h2>So I've really only spoken about the CSS stuff we're doing to this point and frankly, the HTML5 stuff is more structure than eye candy, but the new <code><header></code>, <code><nav></code>, <code><section></code>, <code><aside></code> and <code><footer></code> tags are getting a workout and I enjoy the semantics of the markup - it feels cleaner to me than having div's all over the place with ID's like #header and #footer.I'd encourage you to read such good websites as <a href="http://diveintohtml5.org">Dive into HTML5</a> and <a href="http://html5doctor.com/">HTML5 Doctor</a> for more on getting started using HTML5 today - <a href="http://smashingmagazine.com">Smashing Magazine</a> also have a couple of good articles, as do <a href="http://24ways.org">24 ways</a> redesigning-midnite Redesigning Midnite

2009-12-29T13:57:36Z