Going Mobile with CSS3 Media Queries

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/

This post was written by Patrick on September 2, 2010 at 10:34 am

SMART Table ReacTickles Table Touch

Last month we announced the completion of an application developed for the SMART Table aimed at encouraging computer use for children with autistic spectrum differences and learning disabilities.

Since then it has been brought to my attention that a rather good review of the product has been published which resulted in a score of 23 out of 25. The review also contains some quite nice videos of the product in action so I thought it worthwhile posting them (below).

This post was written by Kirsten on August 9, 2010 at 1:49 pm

Utilising the TweetMeme API

We’ve been integrating some social media into one of the sites we work on ModernSelling and specifically working with the TweetMeme API which allows users to view the number of Tweets an article / page has received and retweet said article. From the horse’s mouth:

The TweetMeme retweet button is for website and blog publishers who want to encourage their audience to tweet their content on Twitter. The button shows a live count of the number of times your webpage or blog post has been tweeted.

There are a few points worth mentioning about this integration because it is not always as straightforward as you might think and perhaps some of this information will be of use.

Firstly, TweetMeme is quite strict so for anti-spam purposes uses a combination of the Tweet which we send to the API and a custom meta tag containing a match of the tweet:

<meta name="tweetmeme-title" content="The Message of the tweet " />

Additionally, the content / message of the tweet has to be a direct subset of the HTML title tag. For instance, for the example above, “The Message of the tweet” needs to be included in <title>. It doesn’t have to be the only thing in the title tag but it does have to be present.

So if like us you are generating these things on the fly (the site in question is driven by a content management system we built) you may have to make adjustments to your system to accommodate the TweetMeme functionality and also discuss compromises with your client; for instance, in our case, the title tag now includes the original title (which was specifically written for SEO purposes) with the article headline (which we want to be the body of the tweet) appended to the end. There is no way around this; the tweet message cannot contain something that is not contained in the HTML title tag so you need to live with it or not use the TweetMeme API.

Secondly, TweetMeme uses a cache which means that if someone already tweeted your page/s before you implemented the TweetMeme functionality the tweet will already be cached against the url. In these instances, if you wish a retweet to use the a new message as opposed to the old, incorrect message (your old title tag if it was incorrect) you need to clear the TweetMeme cache on a page-by-page basis or, rather than doing a manual update for a large number of URL’s you can automate the process and use the TweetMeme ping api (http://api.tweetmeme.com/ping?url=). Just append the URL that you want to update at the end of it and loop through the list of pages on your site.

Finally, part of the site we implemented this feature on is subscription only so bare in mind that any password protected url is not going to allow the TweetMeme API to make a call back to the page to verify it – TweetMeme will not work in these circumstances.

Happy TweetMeme’ing!

This post was written by Kirsten on June 22, 2010 at 4:42 pm

Flixel 2.0 – Flash game development

We have finished an enjoyable project for SPAR International, which involved creating an athletics game based around the button bashing classic, Daley Thomson’s Decathlon. When creating the graphics and style for this game we wanted to utilise the nostalgic bitmap effect which you see quite often in Flash games and in the graphic style of Pixel Art. From a development perspective this was very convenient because I have been looking for an excuse to try the Actionscript 3 game framework, Flixel, which I have seen lorded around the Internet as perfect for this purpose.

It has it’s own global render cycle which simplifies the process of adding bitmap graphics to the stage and creates a predictable fps independent game loop. Forum posts on the Flixel site state that this rendering process is more efficient than Flash player alone due to the fact that is purely geared toward low resolution bitmapped graphics. There where many elements which increased the speed of development such as the inclusion of the FlxObjects which are already set-up with simple motion facilities such as acceleration and velocity on both x and y axis which allow for the simulation of horizontal character movement and also vertical forces (i.e. gravity).

There are many other noteworthy features of the Flixel framework such as Sprites for Animation and the global/static FlxG control class which have been very well designed to make game development in Flash easier. I will, however, not go into detail about these because a concise post about Flixel from the Inside RIA blog has covered these. For those (developers mainly, I suspect) interested in understanding the affordances of using this framework over creating a game from scratch, reading this and also exploring the host of games and tutorials on the Flixel site will be worthwhile. Canabalt is a particular favourite game due to the intense screen shaking and accompanying music.

The game we created is called Beat Barni and is online now. Due to time constraints we created a pentathlon (5 events) rather than a decathlon, so feel free to challenge Barni to any of the following events; 100m, 400m Hurdles, Javelin, Pole-vault and Long Jump.

This post was written by Gareth on June 2, 2010 at 10:00 am

Cake of the Month – April 2010 – Mr. Kipling

With the recent shock revelation that Mrs Kipling does actually exist and was once an actress in Corontation St we thought we should make sure that the exceedingly good cakes were as good as we remembered.

Safe to say that the despite the implications of some sort of power shift within the Mr Kipling marketing machine, the cakes are still high quality. Just take a look at Patrick’s face. He’s loving that Bakewell.

This post was written by Gareth on April 30, 2010 at 5:11 pm

Action Message Format (AMF)

We have recently built a Flash Game – Traitors – for the Top Gear website:

The game, sponsored by Nissan, requires the user to speed through 3 levels controlling their speed by repeatedly pressing X-Y buttons as fast as they can and using their booster. For the purpose of data submission and receiving data while interacting with the webserver we decided to use AMFPHP which is open-source implementation of the Action Message Format (AMF) and allows binary serialisation of Action Script (AS2 and AS3) native types and objects to be sent directly to server side services. Phew…

The crux of this is the ease of implementing data transfers to and from the webserver (less code on both client application and on the webserver) and the efficiency of the resultant transfer (the data being transferred is binary format which is also compressed further in AMF3 so the amount of data being transferred is smaller). This is brilliant for rapid development (which we do a lot of) and performance of the finished article.

For instance, on the webserver you don’t have to loop through a database recordset, compose some XML and return that XML to Flash which would then load and parse the XML: you can essentially return the recordset directly from php to Flash and the query is automatically converted to the corresponding ActionScript type. There are several processes being skipped and the data being transferred is far smaller (being compressed binary as opposed to XML).

This post was written by Kirsten on April 13, 2010 at 1:55 pm

DECODE: Digital Design Sensations

http://www.vam.ac.uk/microsites/decode/

We decided to have a company outing to Decode @ V&A last Friday and trotted off to West London (yes, we do venture out of East London) to see what we could see.

The blurb states:

“Decode: Digital Design Sensations showcases the latest developments in digital and interactive design, from small, screen-based, graphics to large-scale interactive installations.”

And

“Decode is a collaboration between the V&A and onedotzero, a contemporary arts organisation operating internationally with a remit to promote innovation across all forms of moving image and interactive arts.”

From a visitors’ perspective the exhibition was interesting enough; quite a lot of interactive art installations which capture, record and insert the audiences contribution (for example a video ‘wall’). And others works which use interesting data sources (such as stock market data) to as the source of algorithmic animations. In some ways though there was nothing we hadn’t seen before in terms of technology and this is where we became a little critical of the exhibition: for all the slickness of the works, it felt to a few of us that something was missing – what was the meaning of things? For instance, a lot of the work in the exhibition played on the fact that people seemingly love to have their 5 minutes of fame and hence fall over themselves to be filmed, pictured, captured in some way and displayed for others to look at. But what is the intended meaning of the art? Is there any actual cultural or personal message hidden in them? It didn’t look to me like there was and as such the exhibition fell short of what art can offer people (excite by all means but also get the audience thinking). I didn’t see any obvious cultural references, or personal messages existential or otherwise. As an example, there was an algorithmic animation which was generated from ‘stock market data’ according to the blurb. All well and good but no further explanation was given, it looked nice but think of the possibilities involved in this subject of telling a story, making a comment about capitalism / money and the state of the economy and what effect this has on society (obviously poignant now). It’s a shame it didn’t explore these meaningful avenues or if it did that the blurb about the work didn’t even mention it (they often sided on a practical explanation of how it was achieved / built).

As such, some of the exhibition felt a little more like the interactive section within the science museum as opposed to any great art exhibition – great fun and visually stimulating but lacking an underlying meaning (of course the science museum obviously has an educational remit it fulfils). I wonder what people in 100 years will think when they look back at this period of digital art? I suppose they may come to the conclusion that the early 21st century signified the beginning of a new art movement but at the same time, as art goes, was a little naïve; getting carried away with new technology at the expense of what art is actually all about.

I might be looking at this too critically and I guess there is nothing wrong with showing off techniques and new found skills, after all the great artists of the renaissance and beyond have often done just that but I would like to see an industry I am involved in attempting to merge the technology with the fundamental reasons why art is so important to everyone – to get us thinking about things (anything!).

This post was written by Kirsten on February 18, 2010 at 1:17 pm

More Accessible User Interfaces with ARIA

On Tuesday I had the pleasure of attending Todd Kloots Yahoo! Dev talk on “More Accessible User Interfaces with ARIA”, apart from the added bonus of being located in the new Skills Matter conference and events centre. Todd made a very good presentation and a solid introduction to ARIA for those not aware of it. Rather than boring the audience with long spouts of text from the W3C ARIA spec he instead chose a more hands on approach showing everyday examples of ARIA on widgets he had developed with Yahoo and the YUI, whilst at each point stopping to show alternative options of implementation and which were the best practices and why he thought they were.

For those of you who are un-aware ARIA (or ‘Accessible Rich Internet Applications’) is a way further conveying a specific elements role within a webpage or application through the use of enhanced semantics. This allows for screen readers and assistive technologies to more accurately define to the user how to interact with a websites controls, in turn creating a richer user experience. It is especially useful to define the use of more advanced user interface controls (that are becoming increasingly more popular ) made using javascript and ajax, that have states that constantly change.

For the more interested developers out there, ARIA is applied to your applications by placing extra attributes within your elements tags, most commonly using the role=”” attribute.  One of the most important aspects of ARIA is the ability to apply multiple attributes to an element (as you would do with ID’s ort Classes). This is because each element can have multiple properties:

• It’s Role: role=”menu”
• It’s State: aria-disabled=”true”
• It’s Properties: aria-haspopup=”true”

A simpler way of describing this may be to show you an example of the markup one would use of a simple two panel tabbed interface.

<ul role="tablist">
       <li role="presentation"><a href="" role="tab">Tab 1</a></li>
       <li role="presentation"><a href="" role="tab">Tab 2</a></li>
<ul>

<div role="tabpanel">
       <p>Content</p>
</div>

<div role="tabpanel">
       <p>Content</p>
</div>

Although this is clear when visually displayed like that, the only true way of showing ARIA in use is to see (and more importantly hear) it working within a supported browser or screen reader. Though, as with all new or unfinished W3C specs, browser support and implementation varies across all vendors, with JAWS and Window-Eyes supporting the most amount of roles and states attributes. This leads us to the question of ‘is it worth all the hassle’, my own personal answer: YES, being a big support of progressive enhancement, as long as it is aiding in a better user experience for your some of your users then it is worth the small amount of extra time to implement it.

Overall, Todd’s talk was very insightful and good to see how Yahoo! are going about creating much richer user experiences for people with specific needs, and even more so educating others about the best practices which can hopefully lead to a more accessible web!

I will certainly be trying to force and implement the use of ARIA in future projects here at UVd, so keep your eye out for more info and posts around the subject in the near future. Though in the mean time I have included some further reading to feed your ARIA thirst, and start trying out ARIA yourself. But as Todd said himself:

Reading the documentation only gets you so far.

So try actually testing your new aria goodness with a screen reader, two of the links below are to help your setup a screen reader testing environment on your machine.

Enjoy!

Further reading:
WAI-ARIA Best Practices

YUI Configuring screen readers

How to use NVDA and Firefox to test your web pages for accessibility

This post was written by Patrick on November 20, 2009 at 2:52 pm

Cake of the Month: Moon Cake

Halloween special – Mooncake! And what a cake; brought back as a present from Hong Kong this cake holds a dirty little secret. Inside, AKA Scotch egg style is a duck egg yolk. You might think this is normal, ‘cakes are made with egg’ I hear you say. But this one actually has a solid egg in the middle and so deserves another picture (below). Suffice to say that it didn’t go down particularly well in the office. In fact, I was the only one who tried a second bite and certainly the only person to partake in the egg. According to Wikipedia Mooncakes are “rich, heavy, and dense compared with most Western cakes and pastries.” You can say that again.

Still, in the spirit of Halloween, these cakes are for the Zhongqiu Festival for lunar worship and moon watching. So fill your boots!

This post was written by Kirsten on October 28, 2009 at 6:19 pm

GOOD Infographics

GOOD produces a website, videos, live events, and a print magazine. They seem to successfully mix an ethical ethos with good design throughout their projects.

I came across the results of a competition they have recently finished for the best infographic which would “highlight executive compensation (as in, how much CEOs etc. are paid) in an interesting way.”

It’s nice to see creative visualizations of mass data and these are very good examples of this.

This post was written by Gareth on October 1, 2009 at 1:52 pm