designerZen

Day 015 : Accessibility

designerzen — Mon, 22 Nov 2010 18:17:43 +0000

So, now that things are mostly live, it is time to make sure that everyone can access the content – from people with visual impairment – to people using Internet Explorer (technologically impaired). The last version of the site brought about many comments with suggestions on everything from semantic markup to colour scheme, and this site, hopefully answers all of these needs in the best ways that I can. As this site is now html5, I thought it high time to expand on the schema of the semantics and to lay out the content in the order that it should be read and shown on page, starting with the content at the top, and ending with the footer below. This may sound like an obvious thing to do, but many sites struggle to balance their graphical layout with correctly laid out, non-superficial html. I constantly see everything from pointless markup inside semantic tags to make image replacement easier, to rearranging the html entirely so that their unique layout works consistently across browsers. In this modern day age of the data driven internet, it is important that not just your browser understands the content. It is ironic as the only place I have ever seen this listed as a main priority during the design of a site is where SEO is concerned, so that Google can spider the information and understand what the site is about. Screen readers and Text Only browsers are extremely commonplace, and as the internet begins to power the content for more devices, it is not unbelievable to think that more people will be using software to speech synthesizers to read your site in the future. Along with mobile devices, limited by their small screens and TV Internet which is slowly creeping into our homes, it is critical to understand that the design must fit around the content and data.

Using the fantastic new range of HTML5 elements, the site now is extremely simple to understand, just from looking at the code. Navigation lives in the NAV node, articles live in ARTICLE nodes and many other easy to understand elements such as HEADER and FOOTER are used to separate the content. Along with these new elements are a series of “roles” that have been assigned to each useful element. This “roles” dictate as to how certain devices interact with the content, and what the content is intended for.

I think I still need to tone down a few of the backgrounds, and possibly darken my base grey (used for the tertiary navigation like tags).

I would love to hear back from anybody viewing the site using something other than a graphical browser such as Firefox or Chrome. If you are having any problems, or have any suggestions, I would love to implement them! Thanks.

MPORA

designerzen — Wed, 17 Nov 2010 18:40:35 +0000

Action Sports Media Browser

The world’s largest online collection of skateboarding, surfing and snowboarding videos – presented in one, small, embeddable media player. Generation 3 of the Factory Media Browser connects to all the sports channels, offers full user analytics and commercials, and offers the user buffer free full screen playback and the chance to share the movies with friends.
As Mpora is one of my favourite and most frequently visited sites, I wanted to make sure that the new media player would be slick, seamless and operated as smooth as possible. Working solo for Factory Media, the largest action sports publisher in the world.

MPORA : Action Sports – Click a video file to watch it

Check out the embedded player below featuring my favourite skater John Rattray in “H’Min Bam”.

Factory Media Browser V3 presents “H’Min Bam”

See it in action on these great sites :

Day 014 : Soft Beta Launch

designerzen — Tue, 02 Nov 2010 12:53:18 +0000

So up until now, we have been sketching out styles and ideas with code, some elements have stayed, others proved pointless. The overall ethos of simplicity and focusing on content has really come together and developing in this open ended fashion has allowed a "core" system to be developed. This system piggybacks the CMS and allows site wide changes with a few simple clicks, everything from layout sizes to typographic rhythm. This allows for a "beta" soft launch – a site where there are still bugs present, but the overall system and interaction with the user is untested. Semantically the site has been re-written and stylistically now supports mobile platforms as well as screen readers. The last big element that needs focus is the flash applet which is currently just displayed as a work in progress.

Ideally I need testers and people who use the site to report any problems or errors that may be popping up. Please leave comments if you come across any strangeness on your system!

Places of possible failure include the AJAX loading system (especially whilst searching and submitting comments) and the layout looking wonky in your browser (probably an IE user).

Day 013 : HTML5

designerzen — Thu, 30 Sep 2010 12:10:18 +0000

So! A lot has happened since starting this project… Flash version 10.1+ was released (on all platforms including mobile), JQuery became the industry standard and Html5 was brought to the limelight by Steve jobs who is touting it as the "future of the internet". Being a technology developer, as well as being an end user, I have my own personal opinions about how things are evolving. Firstly, I would like to introduce you to the new version of the site, written in (x)html5, css3, javascript and Flash, with a sprinkling of php.

One thing I would like to point out is that even with html5, I will be using flash to stream the movies and music on my sites. Many people have questioned my logic about this and I will reply here as I see the situation. Firstly, html5 and JS have been pushed as the ‘solution’ to problems that most users do not even recognise – notably that Flash is a relatively closed format compared to the open standards of html. While I completely agree that this is a major restriction with the Flash format, the actual swf that you see embedded on sites are based on completely open standards and html5 now even has an embed tag designed specifically for compliant embedding of plugins like flash.

So what does this mean for you the end user?

Nothing. Absolutely nothing! Like stated above, your end users do not necessarily care about how you have implemented the technology, only about how the technology integrates with their own experience. Or in poetic terms :

Any sufficiently advanced technology is indistinguishable from magicArthur C. Clarke

My users want a complete and simple solution that just works! So, I hear you ask, why are you still using flash now that html5 is becoming popular? Well, that is a very unusual question, probably influenced by a certain Apple enthusiast. Html5 is a semantic markup language. Html5 itself does not play audio, nor movies, it is only the guide that tell your browser that the page you are viewing contains media types. This is a huge deal in the slow moving world of the internet as it finally allows media types to be accessible to screen readers and the new markup allows pages to be ‘read’ by SEO spiders. All in all, html5 brings a range of features that improves readabilty and interoperability and ironically is a perfect compliment for flash!

Why Flash still?

Politics aside, flash is a lightweight toolkit that has specialised since 1998 in streaming multimedia and interaction. It originally was developed for 46mhz machines and is perfect for the internet and lower powered devices. There seems to be some dispute about the performance of flash and as a result, you will hear many people saying that, "flash is dead" and is to be replaced by html5 which according to these people, uses less memory and demands fewer resources. The reality is very different. I ported my actionscript media player library to javascript (I had to remove much of the functionality such as preloading, cross fading and seamless playback) and after a few simple benchmarks, I discovered that the JS and html5 used more memory, a larger memory cache, was slower on playback and used a greater volume of computer resources. All in all, there are no benefits favouring html5 and JS over flash at this moment in time. Flash has has 10 years of development and has evolved systematically with the internet – it is the single best way of delivering multimedia on the internet today. That comment may make me unpopular in today’s zeitgeist, what with flash being systematically denied on the iPad (even though flash apps are sold in the iStore) but the reality of the situation is far from obviously clear cut. I am still working on my simple JS framework for audio to fallback back on if flash is not available with my close friend Vincent Roman, former developer for Last.fm. If you feel like you have something to say, leave me a comment!

Sound Wheel

designerzen — Sun, 12 Sep 2010 16:22:53 +0000

Synaesthetic Binaural Bassline Generator

Move fun that trying to create colour palettes, here is a sound palette creator. By using colours as the basis for sounds, this tool creates harmonic, and sometimes inharmonic basslines that modulate together to form a powerful binaural beat, and a series of grooving basslines.

A colour wheel is designed so that harmonic colour palettes can be easily found by placing the colours at set spacings around the wheel. The only real difference between sound and light is the speed and shape of the waveform, something that this instrument helps to bring back together. I was thinking of calling this kind of tool a synaesthesizer!

Sound Wheel

Instructions for use :

Double Click to add a new note and form a chord
Click anywhere black to remove a node (or right click)

Use the following keys to :
Z – Increase Intonation Range
X – Decrease Intonation Range
M – Change the next note’s Timbre
N – Change the next Timbre
UP – Move child chords closer to the centre
DOWN – Move child chords away from centre
LEFT – Change Variable Intonation (Microtonality Mode)
RIGHT – Change Variable Intonation (Microtonality Mode)

Open the Sound Wheel in a new window

Places talking about the SoundWheel :

Zombie Barbershop Quartet

designerzen — Sat, 11 Sep 2010 18:30:42 +0000

Sing-a-long Multiplayer Game

Grab some buddies, boot up your laptops and sing the zombie anthem in perfect harmony with your friends (or not!). Classic retro fun gaming using 21st century technology and crowd participation for a spooky karaoke experience. Zombie Barbershop Quartet
This was my team submission for Music Hack Day 2010, written alongside multi talented developer Robin Beitra and evil genius mastermind, Alastair Dant.

Based around the classic games of the 80s, but with a modern twist, Zombie Barbershop Quartet is best played in a room where many people are playing simultaneously, as the musical score is synchronised with a central server, all the zombies sing in tune and in time!

Using the fantastic new microphone sampling facility in Flash 10.1, we wrote some classes that sample and record the microphone input allowing us to do some pretty nifty transformations of the waveforms. Originally we started trying to deduce the frequency you are singing using a Fast Fourier Transformation, which as Flash does not have one in built, made performance quite sluggish. We eventually wrote an Auto Correlator Class that compares periods of waveforms against each other to quickly determine the dominant frequency using very few resources.

Day 012 : Multimedia

designerzen — Mon, 30 Aug 2010 13:10:13 +0000

Finally! Time to have some fun! As someone with an interest in making music and video, this site is going to have to connect together a whole range of different media. As such, It is time to do some visualisations and upload some music to see how the system copes. The site is based upon a media framework I have ben working on for the past few years. Using javascript, html5 and flash, the framework seamlessly plays all music and movies and converts media links and tags to actionable buttons. I have released the framework as part of my new wordpress 3 theme Bandpress. I will be blogging about this soon!

A Hundred Lovers

designerzen — Sun, 14 Mar 2010 23:40:54 +0000

Diesel interactive film catalogue

How do you show off an entire catalogue of clothes whilst dancing in a pop video… An homage to Goddard’s 1964 film Bande à part, and named after the pop song by Josef Xorto, this interactive pop video doubles as this years Diesel clothes catalogue. A fun and engaging film with more than a little charm.Edited with a technique known as match-cut, which allows movements to remain fluid from a character, even whilst they are changing clothes and actors, meaning we could show off the entire Diesel range in a just 3 minutes!

The fun part is that you can roll over the video at any time which pauses it to show information about each garment and each actor. From there you can follow links to buy the clothes on Diesel’s store, or even cyber-stalk the actors.

A hundred lovers

FWA Site of the Day

A Dark Ride

designerzen — Sat, 13 Mar 2010 10:57:31 +0000

Lexus Interactive Film Game

A high octane car chase movie that adapts it’s plot to feature the user as the co-driver! Released as part of a promotional campaign, this engaging video which is tailor made for you, features your photograph, your voice and your interactions, can be saved and shared on Facebook and Twitter.

May 2010′s FWA Site of the month : The Dark Ride is a fun interactive commercial for Lexus Cars developed by the award winning Stink Digital. Working closely with the Lexus Producers and Directors and a team of 5 Flash Developers, the Dark Ride is a promotional campaign for an upcoming car. Using Hollywood actors and directors, Lexus created a series of videos that form paths throughout the story, where each user selects the outcome. Using Flash for its amazing multimedia tools, the user themselves feature in the movie by using photographs taken from the webcam, the user’s mugshot is displayed alongside the driver – even during the interactive perspective parts. Lots of little niceties are featured in the back end for this project, from using face detection algorithms on the web cam to recording user audio to the Red5 database. The most amazing part of the whole project in my mind is the fact that the whole movie of the car is computer rendered – not even a prototype existed for us to film!

Experience the “Dark Ride”

FWA : Site of the Year Readers Choice 2010

Oblique Strategies

designerzen — Tue, 09 Feb 2010 14:40:40 +0000

Inspiration. Quick.

Inspired by Brian Eno and Peter Schmidt’s work to prevent creative blocks… try this widget out when you are facing the wall.

Full of sage like quotes and abstract commands, the Oblique Strategies are a series of cards designed to be pulled out when you need to shake things up creatively.

I have tried to keep these cards as accurate as possible (even down to the 10 point sans-serif font!) to the real thing. The further you click away from the card, the more inertia you spin it with, and the angle of spin is entirely dependent on where you are clicking. It features all the original 4 versions – you can select between them using the controls in the lower left corner – the original version is still available from Eno’s shop. The only thing really missing from this virtual version are the 6 blank cards that came with the original. I will leave that for you create.

Try it out and tell me what you think!
Oblique Strategies : V5

Find out more about the original Oblique Strategies and order your own :