A few of my posts from the Flame blog archives from last year. Possibly worth a gander:

Books or online tutorials

A discussion on the benefits of books or online learning, the clue’s in the title!

There has been mild debate in the office recently over whether we prefer online tutorials or the traditional printed word. This has been sparked by a recent subscription to Lynda.com, an online resource of video tutorials.

It seems that Lynda hasn’t been used as much as hoped or expected. But alas, this is not because we’re all too lazy to learn, on the contrary we’ve all been too busy to participate in 8 hour tutorials on designing fonts, modeling gorillas in 3DS Max or building a spaceship using only PHP and a dashing of AJAX (yeh I have no idea how you’d do that either)…

Read more…

Does anybody care what you have to say?

A muse about the value of blogging today and just how important is your voice?

Blogging has evolved, transformed and broadened massively over the years. I wouldn’t like to say ’since it was invented’ because, well it was never ‘invented’, it has just ‘become’, biologically… like a living entity. Anyway, enough semantics.

The origins of blogging have long since been lost in the mists of time, it is maintained that only scholars know the true reasoning behind the now extremely popular web activity and in some cases – business. I personally have only been blogging since January this year, and am constantly learning new tricks, styles and trends…

Read more…

Navigating large blogs

Some advice for designers on how to make large blogs more usable and easy-to-navigate.

With the exception of news-exclusive blogs, pretty much the entirety of blogs on the net feature topical or thematic content that can be useful and informative not only at the time it’s written, but for many months or even years down the line.

So when a blog grows and expands, it’s easy for older posts to get lost and unseen. Sure they’re still there, archived or categorized, but once your post count starts to rise above the lofty heights of 100 posts… chances are your old work, regardless of how well-written or useful, is going to attract less traffic from either external or internal sources.

The importance of internal blog navigation cannot be underestimated. It may seem obvious but a lack of categorization, clear navigation and tidy layout can have massive negative implications on a site’s usability, and therefore readership.

Read more…

The little things that matter

Considering how essential to the overall design even the smallest elements are, and how they should never be overlooked.

Sometimes it seems all too easy to simply throw up a contact form or a standard menu layout because at the end of the day – everyone knows how these things work, as long as they do their job, they don’t require much attention.

Oh how wrong that is. A recent string of articles from Smashing Magazine regarding Web Form Design Patterns emphasises the importance of the smallest design aspects, such as the placement of labels next to input boxes, wording, use of colour, shape, size and position and much more.

Read more…

This is the first article in a 3-part series that looks at how we design and build websites from the base up, focusing on the raw data and content that needs to be accessible to everyone before considering design and progressive enhancements. In part 1 I’ll be discussing the content-out approach, why it’s important to order content sensibly with markup and how to do it so. Part 2 and 3 will look at semantic markup, microformats and how to write future-proof XHTML before finally discussing progressive enhancement and how it can be utilised to help ensure an enjoyable, appropriate user experience for all.

Content before design?

When I say ‘content before design’ I’m not saying start playing in TextMate or Dreamweaver before picking up a pencil and paper and building ideas and visuals with Photoshop. There are plenty of different methods people use and recommend to approach project development. Some designers find it easier or faster to use XHTML Prototyping or Agile development, however I would never consider writing a character of HTML before I had a solid design and a confident vision of the final product.

Content before design means that the structure of your markup is written in a way that logically makes sense if reading it without styles or any form of dynamic behaviour.

This may seem an obvious thing to do, but the fact is that most websites built today, regardless of whether they are valid, built with divs and have nice alt attributes on every image, are still structured in accordance to their design. A lot of the time this may not make a huge difference if the website design features elements in a sensible order, but often is the case that in the markup – headers will all over the place, menu lists and blockquotes may be thrown in the weirdest places, because that’s where they appear in the styled layout.

Stripping Redswish

What better an example to use to demonstrate my point than this very site. Of course you should practice what you preach but in my defence I built this layout before I learnt these techniques and methodologies.

When you view Redswish with no styles, as may be the case with screen readers or all manner of devices, you are presented with the following:

First we are presented with the search box, then a secondary navigation, the logo image, the subscribe image then the first post on the page. To view the site yourself with styles disabled, in Firefox go to View>Page Style>No Style. If you’re in Internet Explorer I offer you my sympathy.

If you carry on down, you’ll discover that the primary blog menu is almost at the bottom of the page. Well, what use is that to someone wishing to navigate your site? The reason the unstyled Redswish site is in such an illogical, unusable order is because I built the content and the presentation alongside each other. Thus, my XHTML markup is structured in the order in which visual elements appear on the page, as opposed to a sensible order of content.

The content-out approach

When building a website, you should work from the inside out. Focus on the stripped-down, bare-bones content displayed in headers, paragraphs, lists etc before building containing and structural elements around this content to style. CSS is incredibly powerful and manipulative and can almost always be used to position and style elements anywhere on the page, regardless of their position within the markup. The most popular and functional example of just how far CSS can be exploited to transform the same XHTML can be found at CSS Zen Garden.

However, don’t let this restrict you. There will still always be instances where an extra div or span may have to be used, or perhaps one element placed before another in order for them to be composed well into the design. CSS isn’t perfect, but by building from the content out you should be able to use as few divs and containing elements as possible, whilst still achieving the same end result.

Get in line

The diagram below shows the order in which different blocks of content are displayed in the current Redswish site when styles are disabled. The right diagram demonstrates a more sensible approach to the order of this content:

Some may disagree with this, and I probably would as well. But difficulty arises because there are often presentational factors and different information design priorities that overrule the order of the basic content.

For example, on the current site – the sidebar features categories, archives, a subscribe block,feeds and blog meta data. From a usabilty standpoint – categories and archives take a priority over the other elements because they’re necessary for site navigation and are primary page elements. However, for the sake of the design, they can’t be separated too much from the secondary elements (eg. feeds and blog meta-data) otherwise it would be nearly impossible to keep them together visually with CSS.

Sometimes the best bet is to find a happy medium, where you can still easily control your site’s visual layout with CSS whilst non-visual browsers, screen readers and such will still provide the user with a logical, easily navigable content structure.

Optimising content order

Writing your markup in a sensible order is not rocket science. WCAG guidlines dictate that “when content is organised logically it will be rendered in a meaningful order…” – this is regardless of stylesheets.

So, ensure that headers take precedence, that navigation is in the correct order and that the order of information is ordered based on logical order and priority. An example of restructuring some basic elements so they make sense, regardless of stylesheets and visual presentation:

Don’t replace tables with divs!

Building sites with a content-out approach should allow you to style your pages more organically. By creating structural blocks first, before including the raw content, you can sometimes default back to what is virtually a tabular layout. Div’s simply become table cells and try as you might, your HTML will still represent the presentational layout, not the optimal content order.

In the next part of this series I will look at semantic markup, HTML naming conventions and microformats, how these techniques can be employed to help create more sensible, meaningful content structure, and how this can benefit your user’s experiences.

UPDATE – Check out part 2 here >

Here’s one of those ‘less talk, more listen’ posts. You don’t get many from me! I want to know a bit about your websites and your approach and attitude towards their purpose. Is your site(s) designed to make money, inform and educate, publicise a product/service/person or is the purpose unclear – perhaps it’s just for fun. For each case, how do you achieve your goals?

Design and Usability

How does your site design contribute to the end goal? With regards to user experience, what do you feel takes priority – enabling visitors to get to where they need to be as quickly as possible, or to provide an enjoyable experience. Or both? And how do you go about achieving this?

How much do you feel design contributes towards the overall user experience? Would you prefer a site that is easy to navigate and view, with well written copy and clear structure but features a minimal or unattractive design? Or would you rather a beautiful looking site with fancy dynamic functionality and gimmicks, but ‘makes you think’ a more? What about a balance of the two. How do you feel you can work to create a website that is fantastically well structured and presented, whilst revealing some tasty eye-candy?

Measuring success

How do you measure your site’s success? What do you determine to be ‘success‘? Site traffic? Perhaps a deeper look at your site’s analytis; what do you feel takes precedence? Length of visit, repeat visits, countires visited from, pure volume of traffic? How do these statistics vary depending on your site’s purpose? Perhaps you feel the best measure of your site’s success is more organic than statistical – the comments you receive, RSS or email subscribers, contact form feedback or a combination of the lot.

What do you feel is more important; your visitors experience or the site stats and revenue made?

I want your opinions

Please take the time out to comment below. This post isn’t about me or Redswish, I want to know what other people think. Get your site URL in there to get some coverage. I’ll be summing up everyone’s responses in an article in a few weeks.