designerZen » 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.

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 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 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.

Day 005 : Security

designerzen — Wed, 18 Mar 2009 15:07:34 +0000

So my site was down for the last 24 hours - and throug no fault of my own. I logged on to to find my homepage had been replaced with a phishing site and that I no longer had FTP access or SSH! By tracking the data from where it came from, I found that my DNS had been hijacked and that it was pointing my domain to somebody else’s server. Not good news at all. But here we are, 24 hours later. It turns out that the owners of my domain reparked it as a mistake, so no hacking occurred, just a simple data confusion!

So for added security, I have added some extra .htaccess rules and chmodded any weak folders, updated my password to a crazy length, altered a few MySQL parameters and disabled all FTP users except two. I don’t seem to be paranoid enough these days!

Day 004 : Vertical Rythmn and Typography

designerzen — Mon, 16 Mar 2009 10:51:24 +0000

Now that we have a basic layout, with boxes for all the relevent sections, it is time to start laying in content and styling it. The main issues to consider with type are readablity, proportions and the white space between sections. Each of these plays a significant role in how text flows around a page and how information is grouped together.

I have very personal preferences when it comes to typography, and for this site I want to focus on readability, rather than aesthetics. I like big fonts, with big gaps between words and lots of space between lines – making it very easy to read, and incredibly easy to skim read. This is an important quality as many people will stumble onto this site needing to be made instantly familiar with the context. For important words, and to highlight significant sentences there are a number of extra CSS classes to handle fancy formatting.

An important part of any site is how it moves your user’s eyes around the page, and in particular how the vertical spacing between headings, paragraphs and other elements maintains a rhythmn that balances and spaces out all of the information. To develop, demonstrate and code the typography I have created a special test page which contains all the headings, paragraphs and special class codes that need to be styled for the content on this site. In the background you can see the vertical rythmn shown as equally spaced horizontal stripes, or ‘baselines’.

This is the vertical drumbeat for our content. All headings, paragraphs, images and charts have to be able to sit perfectly either on these lines or use margins to offset themselves asymnetrically between (like an offbeat). This beat runs through all sections of the site and never changes.

For designerZen, I am using an 18px baseline. This was derived from playing around with the basic 12pt font (that is used for most of the site content) and changing the leading until a long paragraph was easily readable, and short paragraphs were clear. 18px with a 12px base font means 12 pixels vertically of text, then 6 pixels of space below.

Check out this page for the test.

For all fonts smaller than 18px, it is important to add line-height so that their baseline extend to the full 18px. For fonts larger than 18px, it is important to set it so that the entire hieght of the font plus line-height is a direct multiple of 18px and also the margins above and below them. Take a look at the typography.css for more information.

There are many resources to help you build to a baseline, my favourite debugging tool is syncotype, which overlays a grid of horizontal lines spaced along a baseline that you can specify. Try it out for yourself on the test page!