designerZen » News

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.

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!

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!

Day 011 : Flash!

designerzen — Mon, 01 Feb 2010 16:54:20 +0000

As I generally earn my keep these days playing with Flash, I thought it only fair to dedicate a large portion of the site to a flash applet that in some way integrates with the design of the site. Well, after thinking long and hard about what exactly the flash applet should do, I have condensed it’s job down to three essential functions. Firstly, to play music and movies – this is a multimedia site after all – secondly, to suck in RSS feeds and display them visually one at a time, and thirdly to integrate with the html and AJAX so that it can display relevant animations depending on where you are on the site.
The challenge is to make a visually interesting, well designed and seamless site, where pressing mp3s or flv links in the html allows them to play in the flash, as well as showing load animations for the bored user. As Flash animation is popular, there is going to have to be some animation (however subtle).

So far there is a dancing robot who has a TV for a belly, a shifty looking ninja and a pig with a jetpack. I’m just playing for now

Day 010 : Typographic Baselines

designerzen — Wed, 29 Jul 2009 18:09:39 +0000

After coding multiple sites this week and evangelising about fixed baselines last week, I have found myself constantly having to do irritating fiddly maths or copy-pasting previously worked out styles. The problem with this is two fold – firstly, many of my new projects are based on a 22 pixel baseline (rendering much of my old code obsolete) and secondly, headlines vary in sizes on every site dependent on the visual aesthetics of the content. This site uses large – well spaced headlines which I had to programatically typeset myself using line-height and margins to maintain a strict vertical rhythm. The maths is not complicated, in fact it is very simple, but if for each site I have to create six headline styles and define the correct kerning which takes time. This has led me to create this Dynamic Typography CSS Generator for typography.I have released the script for all to use. You can read more about it and the many usages for it here.

Day 009 : Content!

designerzen — Mon, 27 Jul 2009 17:13:08 +0000

Having been focused on the layout and aesthetic of the site, I realised that a huge volume of content is still unavailable, offline, or has expired! So to ensure it isn’t a case of style over substance I have been hard at work trying to find active links, projects and scans of work that I have been involved with. If at any point we have worked together and you are sad that the work is not on here – drop us a line and I will try to accommodate it! I have found a whole plethora of products that I will have to add to the site, although I am still unsure about the inclusion of my patented sick bag! It’s cool and that, what with the handles and all, but it’s still a sick bag…

Day 008 : Site Wide Navigation

designerzen — Fri, 15 May 2009 17:37:44 +0000

As this site holds a large amount of data, some more relevant to the casual browser than others, it is very important to offer a straight-forward and simple primary menu system to navigate between the important data sections. It is tradition at this point to draw a spider diagram to show the entry point of the user and how they look for information from one section to the next. In this semantic age however, where most of this website is derived from tags, it is the grouping of similar data that the user must swim through that determines how useful the site is. As the majority of content is portfolio work, this has to be prominent and easy to reach, but not overwhelming with it’s content. To help focus the user I have decided on a few visual styles that I am applying cross site to pin extra significance to links.

Firstly, I have a primary navigation system that is constantly highly visible – even on first glance – this is important as these are the main category links that have to be obvious as to their function. These sections are Portfolio, Articles, News, Contact and About : More information can be reached by first visiting these links.

Secondly, there is a sub-navigation system to reach popular content, new content and recently changed content, located well away from the primary navigation bar. Once on the site for a few seconds, having scrolled the content, this relevant related system of links takes you to places that you may find interesting as a result of similarity to what you have read. This is also used to filter the portfolio page down to relevant sub-categories.

Thirdly is the tertiary quick links section – hidden in the background and in post footers. By using highly muted colours the links fade into the background but light brightly if mouse overed. In this way, the navigation does not distract the user away from content, but does offer a very useful shorthand for broswing fast.

3 types of navigation in one site – but only one is truly prominent. Hopefully this will simplify the complexity of navigating directly to where you want to be

Day 007 : Technical Evolution

designerzen — Mon, 23 Mar 2009 11:49:55 +0000

Unlike my previous site, I want this new theme to work dynamically, with only relevant information changing, rather than having to refresh the entire site on each click. I want this for a number of reasons, least of all to make a smoother interface for a simple site, but also so that the entire site can become aware of changes in realtime. The large empty space above the navigation bar is for a large scaling flash applet that I am currently coding, and this will communicate with the javascript code in the html to act reactively to each page selection.

In this way, the entire site remains pretty similar, with only a few changes that happen on link clicking. To accomplish this, I am using the incredible jQuery Javascript library to make asynchronous calls to load pages into sections, and also to display and control the flash applet with a series of animation and data commands.

The most challenging aspects of designing for such sites lie in how using Javascript removes a lot of the controls that we take for granted – a good example here would be that using Javascript to load in a new page breaks the BACK button in your browser. Which, for most users, is completely unacceptable. Other problems such as incorrect permalinks for bookmarking and placing history items in your list are difficult to remedy, although with cunning use of hidden forms and some Javascript parsing functions for extrapolating Urls and creating permalinks, it is possible.

The site now handles itself cross-browser and deals with all of these issues, as well as scrolling to anchored links and handling bookmarks.

If you find that this site is causing you problems, or that it is not working as I described, please leave a comment along with your machine details and browser specifications. Thanks!

Tested on : Firefox 2+ / IE 6+ / Safari 2+ / Opera 7+ / Konqueror 2+ / Chrome
Machines : Windows XP / Windows 2000 / Windows Vista / Mac OSX Leopard / Linux Kubuntu / Linux Fedora

Know Issues : Konqueror disables the flash applets ability to comminicate with Javascript (See error message in flash) – this is completely outside of my control and seems to depend on how your system is configured. This won’t prevent you from enjoying the site, just won’t let you see alot of the animations!

Day 006 : Content Royal Family

designerzen — Thu, 19 Mar 2009 16:17:13 +0000

If content is king, then content layout must be the royal family. Which bits of information are important and how do they relate together? As the site already has lots of content, it is now time to decide how much of this info to show at once, and how best to navigate between it.

Certain sections are much more important than others with this site, and depending on why you are here, you will have different interests and want to see specific relevent and pertinent data to your needs. On the whole, most people are here to look at my portfolio and the things that I do – and so communicating this is my most important responsibiliy. As the portfolio itself has so many varied categories, it would be best to show on the front page only the most interesting and largest sections – such as web and graphics – so that people have a quick access point to what they want.To get to the heart of how I want to promote the content, it is important to understand what people want to look at – and how that affects their next move around the site.

Certain sections are obviously essential – such as Contact and About – these communicate rudimentary information that has to be available site wide. For contact we have the choice of showing a contact page, or even just contact details in the footer. Same with About -it would be best to show some about information all the time – prefereably with a link to more information, best served with it’s own page.