You must either live in the Outer Hebrides or have been asleep for the last year not to have heard about the HTML 5 and CSS3 buzz bouncing around the interwebs: every developer or wannabe marketing exec is trying to get in on this particular piece of the pie. Therefore, we thought we’d give you a little insight into one of our favourite CSS3 modules ‘Media queries’ and how we are using it to make websites more mobile friendly.

Firstly let’s get one thing clear, contrary to popular belief CSS3 is NOT part of HTML5, it’s a completely different spec written and managed by a completely different group of people. But, much like HTML5 it is made up of multiple modules each addressing new functionality to the CSS base spec.

Although only getting a lot of attention recently, the Media queries module has existed since 2001 (yupp 9 years old!) but due to a gradual influx of capable media devices and user agents (iPhone, Android, Safari, Chrome e.t.c) they have only recently become useful.

So what are they, and how can they help me I here you ask?! Media queries are simply logical expressions that enable you to declare style declarations specific to a media device or type. Between the various HTML and CSS specs there are eleven different media types:

’all’, ‘aural’, ‘braille’, ‘embossed’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘speech’ , ‘tty’, ‘tv’

We have seen media types being used for years, for instance using ‘print’ style sheets to change a documents layout specifically for printing. Media queries extend this functionality further allowing us to specify exact aspects or ‘features’ of a device, thus enabling very specific style declarations based upon whether features exist on the target device or user agent. These features are:

Width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan and grid.

Therefore, a media query consists of a media type and zero or more expressions that check for the conditions of particular media features, as shown in the example syntax below.

This specific query would apply to all screen devices with a maximum screen width of 480px, which is in fact one of the queries we are using on this blog to aid the experience on more advanced mobile devices and smart phones such as the iPhone (as 480px), but you can still see these style changes now if you reduce your browser to a width below 480px.

You can now see the amazing potential of media queries in the mobile world, we can define specific styles based on the devices resolution, colour or screen size, and as it is CSS the styles will cascade down. Therefore, you can have a set of styles for all devices, which will cascade down through all of the other queries. This allows you to deliver the same content to every device, which adapts based on the devices capabilities. This makes your website pages much more future proof as we are testing for features on the device or user-agent rather than sniffing for browser versions like we had to do in the past.

We have been getting very excited at UV^d recently surrounding the massive change we are seeing in the mobile world and have been gearing our own as well as our client’s websites to be ready and take full advantage of all the new functionalities to play with. I hope this post has given you a little insight into what you can do with media queries and encourage you to go and give them a try for yourself! I have also included a list of great further reading below.

http://www.slideshare.net/maxdesign/css3-media-queries
http://www.alistapart.com/articles/responsive-web-design/
http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

We’re so close; I can smell it! Our new site is careering dangerously towards completion. One element of the homepage is a frivolous physics environment which I was kindly allowed the time to make in Flash using the Box2DFlash physics engine.

The engine has been ported from Eric Catto’s powerful C++ physics engine (Box2D). It took a little time to adjust to some of the coding conventions that have also found their way from the C++ version but after that initial steep learning curve the engine is fantastic to work with.

I’ve released this today before the site launch so that people can play with it and inevitably find the bugs which I’ve lovingly engineered into it. Feel free to put it through its paces!

http://demos.ultravioletdesign.co.uk/physics/

Our snail paced re-brand has evolved into a rather brisk ramble (we are nearly out of breath) and as you can see we have settled on a new logo. Actually we have almost completed the web layouts but that’s another story (why say it in one post when you can say it in two!).

The basic premise behind the logo / re-brand was that the original Ultraviolet Design brand no longer represented the type of work we do and how we wish to be seen to the wider audience; with the only recognisable industry word in our name emphasising ‘design’, we felt that our other attributes were being unfairly over-powered. For instance, whilst we do web design, the design element is only one function we have to perform in an overall process of many. To put it another way, to emphasise only one skill of the many skills we have seems a little short sighted!

As such, we have re-branded ourselves UV^d and the website will follow shortly. No, it really will! Watch this space.