Underneath Our New Website


21st March 2011

Here at Wired Media, we’ve been busy the last couple of weeks working on our new website, and are really pleased with the fresh new look. But there are more exciting things here than just the new look, especially if you are a techy! We thought we’d run you through a few of them.

HTML5

We decided it was time to embrace HTML5 for a full site build – and where better to do this than our own site! This new site uses many of the new HTML5 tags and features and takes advantage of HTML5 boilerplate and the modernizr javascript library to keep us backwards compatible with older browsers. This has been a surprisingly straightforward process and we’ve been pleased with the cleaner, more semantic HTML markup we’ve been able to use thanks to the new tags like header, footer, nav and article. We are looking forwards to seeing how the use of the new tags impacts our search engine ranking and starting to recommend and advise clients on the use of HTML 5 features in their projects.

Web Fonts

We’ve made use of several fonts from the fontslive.com library – we have dabbled with web fonts before, but this is the first time we’ve applied them throughout a site. Use of typography and a wider range of fonts is becoming common place on the web thanks to improving browser support and services such as typekit, fontdeck and fontslive (who help with licensing and browser compatability) – a trend we expect to continue, with typography becoming a key part of design for the web, just as it is in print.

On this site, we feel that the use of alternate type faces really complements the design and helps it stand out from the crowd.

CSS3

We’ve made a few subtle uses of some of the new CSS3 features – namely transitions, rounded corners and drop shadows. We’ve been careful to put these in places where they enhance the basic functionality, rather than being essential to it – a concept known as progressive enhancement. This means that those of you with newer browsers will notice these effects (can you spot them?), but their absence is a big deal if you don’t.

In some cases, we’ve also used javascript (with jQuery) to re-create missing CSS3 effects in older browsers as well, with the help of the easy feature detection provided by modernizr to know when this is required.

LESSCSS

A bit more techy this one, lesscss is one of a couple of solutions that allow developers to manage CSS files (cascading stylesheets, they control the look and feel of the text of your website) a bit more effectively by providing features such as code re-use, variables, inheritance and mixins. We are pleased with the outcome and feel that it’s easier and faster than using CSS alone – but are looking forwards to trying and comparing it with it’s main rival, SASS on another project soon!

WordPress 3.1

Most of the site uses our Wired CMS content management system, but this blog uses the latest and greatest version of wordpress – 3.1 (we regularly integrate Word Press with and use it alongside WiredCMS), which offers more features and flexibility than ever before – much of which we haven’t needed for the Wired Media site but are keen to use on future projects.