Nettpilotene gets a makeover
Thursday 14 January 2010 - Filed under Web design + Wordpress
Back when Lars (who by the way will have a portfolio up soon) and I did the identity design and the store front for Nettpilotene last summer, we didn’t do the website. They went with a simple Typo3 based solution, but have been wanting an update for quite some time. I have had the rough layouts for a redesign ready for a while, but I haven’t had time to build it until now.
The new website is visually based on the same wave/ribbon used for the store front (and the business cards, though I don’t have product shots), and it has been an opportunity to experiment a bit.
WordPress, K2 and Blueprint
This is the finished site I’ve done with a CSS framework; I’ve experimented with them a few times, but never got around to actually building something with it. I prefer working with Blueprint (which now supports some basic HTML5), but 960 Grid System, Elastic and Bluetrip can do the job just as good.
It is based on a 24 column grid, in which I mostly divide into four columns (4×6), except for the three (8×3) in the footer. I like the subdivision of each main column into smaller sections, because the push and pull classes in Blueprint lets me reposition elements column by column.
I have also tried to keep a common horizontal baseline across every column. This requires a specific height for every non-text element, which can easily get messy, but is worth it: everything comes out so much cleaner.
The website is powered by WordPress 2.9, and I used the legendary K2 for the basis of the theme. I decided to use K2 because of the blog section, which I’ll mention in a second.
So far, we are missing some illustrations in the header, but they are on their way. Everything validates as XHTML1.0 Strict, except for the Google Maps text link on the Contact page, which is causing some errors.
@font-face and CSS3 attributes
As well as using Blueprint, there’s another CSS first for me: the typography in the header is using the CSS @font-face rule, which is currently supported by Safari since 3.1, Firefox 3.5, and, without having tested, Opera. (There’s a good write-up on the @font-face rule at hacks.mozilla.org.)
I have also used the border radius feature in CSS3 (-moz-border-radius: xx; and webkit-border-radius: xx;), which is supported by both Mozilla and Webkit browsers.
The blog
On top of what is already online, there is a powerful blog still set to private, while it’s being fueled up. It is designed to be a multi-author blog, and has some neat features, including comments previews after the excerpts, and a clean layout with focus on readability, where the fairly generous header collapses. I’ve also kept the advanced navigation from the K2 theme, with the neat fixed position archive navigator. It will be a few weeks still before the blog is up and running.
An early screenshot of the collapsed header in the blog section
Anyway, like I mentioned, this has been an opportunity to experiment, and I still have some work to do on the website—any comments are highly appreciated. Meanwhile, have a look at www.nettpilotene.no (Norwegian)
2010-01-14 » Asgeir