Redswish

Carefully crafted banter

Growing for Movember

Bigger beards
Image courtesy of www.biggerbetterbeards.org
This month me and the fellows (males) at Flame will be growing moustaches, while trying to refrain from letting loose our uncontrollable natural beards (well, if I could grow one!)

Why are we doing such a crazy thing? Well, for charity of course! Allow me to indulge you…

The men in the office are growing fine moustaches throughout the month of ‘Movember’ (as opposed to November) in support of the Movember Foundation – an Australian based, not for profit, charitable organisation that creates awareness around men’s health issues, with a focus on prostate cancer.

So, why do I bring this to your attention? 3 reasons:

  1. Because it’s cool, and I’m spreading the word about a good cause.
  2. To explain to those who may meet me over the next few weeks why I will look so ridiculous.
  3. Ahh, that’s right – I want your help!

How can you help?

All we ask is for a monetary donation to go towards the foundation. We’ll be looking ridiculous for 4 weeks while you can do a little bit to help a good cause.

How much? Anything, anything at all from 1p to ‘ridiculous figures’. Every little helps and no donation will be considered too small.

Sounds great – cash or cheque?

In this modern day we don’t even need sponsor forms. You can go straight to the Movember site and donate to our team – The Mo Fo’s

Donate!

So, get your wallets out – meanwhile we’ll be keeping our razors away!

For more information on the Movember Foundation visit their site at www.movember.com.

Read the full article and comments »

Designing with data

Prioritising design
The amount of information we come into contact with every minute on the Internet is absolutely staggering. Both consciously and subconsciously we are constantly absorbing tons of data; whether it be in text form, imagery, video, or audio and regardless of whether it’s been actively seeked or encroaches in from the sides.

Everyone knows that people don’t read web pages, they scan them. Therefore prioritising the information that really matters should be the primary goal when designing. However some designers get lost when trying to either squash too much information in or by loosing sight of what’s really important – why the visitor is there, for the sake of adverts or bombarding them with splash information to try and draw them further into the site.

2 important points before I go further:

  • Sometimes it’s not the designers fault. Pushy clients can lead to bad design decisions that are either difficult or impossible to avert.
  • Prioritising information does not mean minimalistic design, but applying a level of usability consideration.

Introducing a concept: Information Design Prioritisation

Of course this already exists in different forms. I’m simply labelling it in a way that corresponds well with this particular topic.

Sometimes the content of a site can dictate it’s own design. Wireframes can be developed easily and sensibly from the initial information provided by the client. However some sites hold so much data that needs to be accessed quickly and painlessly by users. This is where the challenges can arise. Throw in advertising and meta-data and simple designs can easily get crowded.

So, IDP (Information Design Prioritisation). Take the elements that are required on a page then decide what takes priority and score the different elements depending on how essential they really are to the user experience. If you’re redesigning a site and using the same information; use Analytics results to see where users are clicking the most and eye-tracking tests to decipher their routes and the hot spots on the page.

Clients have their own agendas as to what takes priority. Naturally it’s normally whatever leads to the money. Sometimes these are adverts, sometimes it’s the product a site is selling. What’s imperative to realise is that, in terms of the design, it’s not the necessarily about what the client wants but what the user wants.

If a blog offers financial advice, the chances are that the visitor is looking for financial advice. So – what takes priority; the informative blog articles or the Google adwords and big banners advertising IFA’s and cheap consultancy services? My bet is that the user wants to read the articles, the site owner wants to earn a few extra bucks through adwords. Often good design ethic and good business ethic can go hand in hand.

Secondary and tertiary priority information

On a shop search results page, the results are by far the most important elements because this is information that the user has requested personally. ‘Featured products‘ or ‘Latest deals‘ are secondary or even tertiary priority information; they may apply but haven’t been directly requested so should be smaller and less obvious than the search results.

Don’t use it? Lose it.

Sometimes it’s required to be strict. Like having a house cleanup – do you really need that old hamster ball or foot massager? Get rid! Assess the relevance and necessity of the site elements on a design, if they’re not required or will rarely be used – either ditch the entire thing or hide it. This can sometimes be a difficult decision to make, especially with pushy clients – but have the guts to say no, use your creative instinct to work out what needed and what’s just getting in the way.

Condensing the visual presence of data

When the primary priority information is built into the design, the various secondary priority information still needs to be easily accessed, but just not as obvious. In the case of blogs – this is normally where the sidebar(s) come into play. Information can be condensed and immediately concealed using some of the following methods:

  • Select boxes. A list of links, options or answers might be better held within a <select> as opposed to a static list or radio buttons.
  • Drop down menus. Secondary and lower-level menu items can be stored in CSS drop-down menus, where the information is accessed by the user only when it is needed. IDP can also apply here – does certain information really require it’s own page, are 3/4 levels of navigation really necessary?
  • Javascript/Ajax effects. jQuery accordian menus, content scollers, big fancy tooltips, content areas that appear on cue etc are all great methods of hiding information until it’s requested. Don’t forget to consider users and browsers without javascript. These types of elements and effects are also useful for SEO – the content’s still there for the search enginer spiders but is tidied away visually for a cleaner user experience.
  • Pop-ups, such as lightbox, fancybox and all the other many spin offs are great for displaying large pictures, iframes, video etc without taking the user to another page and saving plenty of page real estate that can be used for other information (or maybe just whitespace!).

Applying the theory

At Flame, we were recently involved in the pitch for a new website design for a popular British holiday parks business. We’d designed their exisiting site a few years ago and it was time for an upgrade. Although we didn’t win the pitch, we learnt a few lessons whilst working on the designs and realised the importance of information design prioritisation. We had to design several pages, but for the purpose of this example I will use my homepage design.

The pitch was really a straightforward redesign, but to tidy the layout up and incorporate more user-centric features. The design brief specified that the design style was to remain similar, and perhaps incorporate elements of their other branding and print media. I stuck to the same width and kept the logo and general colour scheme.

Out with the old
Old Parkdean design

In with the new
New Parkdean design

How I used IDP to create a more usable layout

On the old site layout, Google Analytics results told us that the location-specific deals on the right were clicked less than 2% of the time. So first step – ditch them. They took far too much real estate for their value, however I did condense them into a ‘latest deals’ scroller in the left sidebar.

I then moved the main navigation from the left to a horizontal, drop down menu at the top of the page. Being in the red banner seperated it from the rest of the content so it’s immediately recognisable and easy to find wherever you are on the site. The incorporation of drop-down functionality also created easier deep linking.

The new real estate allowed me to bring in the ‘Find a Park’ map. This is big, clean and visual and provides an alternate way for users to find parks. Javascript pop-ups or tooltips can provide more information.

The ‘Book your holiday’ block was one of the most important elements by all accounts. On the existing site it’s crammed into the content area and doesn’t stand out. So I brought it up to the top left and built it into a large blue block that can appear on every page with a bright yellow ‘Book Now!’ call-to-action.

Judgement call: the design brief specified a strong use of imagery. Hence the reason behind such a large banner image. For what it’s worth, I feel the image on my design may have taken up too much space in relation to it’s importance.

I also removed other small clutter elements that were crowding the design, for example the ‘Jump straight to a Park’ select box is catered for by the drop-down main menu.

Alas, the design obviously didn’t tickle the client’s fancy, but I still learnt a lot in the process.

Quick Case Studies

Just a quick look at a few examples of sites offering similar data and amounts of it, but offering it through different layouts, primarily clutter vs clean. These thumbnails may not do justice to the cause, so check out the site’s themselves to see what I mean.

Amazon vs Threadless

Youtube vs Vimeo

Yahoo vs BBC

Just a pompous catchphrase or a genuine usability consideration?

Even though a lot of the aspects of information design prioritisation seem like common sense (which they are), there’s no shaking the fact that they’re often overlooked. Sometimes greed or misguided commercial targets can affect not only the design, but in turn those targets through creating bad user experiences and pushing visitors away.

I hate using MySpace. It’s cluttered and ugly and on the off chance that I do have to visit a MySpace site, I’ll get whatever information I need and get the hell out of there. And this happens all the time every day across the web – we are bombarded with data that we don’t need, that isn’t relevant; and this can hamper our online experiences.

I feel that a crucial skill that any web designer should posess is the clear ability to develop layouts that can manage large amounts of data without breaking and without making the user struggle, or even have to think!

On that note, check out Steve Krug’s Don’t Make Me Think (after you’ve left a comment of course!).

Read the full article and comments »

Improving yourself as a designer

Improving yourself as a designer

I’m never happy with my current skill level, I never quite feel like I’ve reached a particular stage that I’m aiming for. Maybe it’s just me; maybe I’ll never quite be happy with myself. Maybe that’s a good thing… maybe not.

But one things for sure – I’m constantly improving and bettering myself as a designer and much more, which is a good feeling. To be able to look back over the past 6 months and observe what new skills I’ve learnt, bad habits I’ve dropped, speed, accuracy and imagination I’ve gained and generally concede that I have improved in more ways than one is pleasing.

So, I’d like to offer some tips and ideas that may help others help themselves more, hopefully provide some inspiration and educate. And I’d sure like to hear what you think, if you’ve got anything to add please comment.

When learning: Read, Meet, Talk, Listen, Teach

And further verbs. Although it sounds cliche and quite extreme, if you want to get ahead in your game (and this doesn’t particularly relate to web design), you have to eat, sleep and breath design. Make contacts wherever possible, let people know what you do – you never know when it might come around and help you.

Reading

Recommended readingResources for web designers are hardly scarce. Get subscribing to RSS feeds, get a good selection of favourite sites with regular news and tutorials and visit them regularly. I make an effort to spend a good 30-40 minutes (more if I get to the office early) every morning checking my feeds and bookmarking new sites full of inspiration.

Then don’t forget the print world, there are still a fantastic number of great quality web design, development, graphic design, copywriting and project management books popping up all the time. Hit up Amazon and see what tickles your fancy. Then don’t let them gather dust on a shelf – have them open on your desk, read on the train, in bed, wherever… you’ll be surprised how much information you can pull out a book if you take the time to actually absorb it.

Don’t forget magazines and journals, although we’re rather deprived in the UK of any decent regular publications.

A few sites I’d recommend:

And a few books to check out:

They should keep you busy for a while. And that’s before we even consider the various branches off web design itself. So get yourself an RSS reader like Bloglines and get into the routine of checking decent sites regularly and sourcing as much valuable information, resources and tools and inspiration as possible.

Meeting / making contact with people

Making contacts within the industry can only benefit you. It may lead to job opportunities and work but also creates new avenues through which to learn from others.

You can meet new people through all sorts of mediums, such as:

  • Social networking sites like Facebook, Twitter (follow me!) and Digg
  • Contacting other designers through their contact pages on their sites
  • Attending web conferences and meet-ups. In Manchester 2 popular regular meet-ups at the moment are GeekUp and Northern Digitals.
  • Bringing other people in on jobs can teach you a lot – sometimes it’s better than struggling to work out how to do something when you can pay someone to teach you or help out.

I talk – you listen

I know, it sounds ridiculously obvious but get talking. To mates, to people you know in the industry, to colleagues or fellow students. Ask questions, try to help each other out and share intersting new finds with others. Share the wealth!

Teach

TeachDoesn’t agree with the idea of ‘improving yourself‘? On the contrary, teaching is one of the best forms of learning. Whether you’re teaching a friend how to use WordPress, writing an informative blog article (as I am now), lecturing a class or giving advice in a forum; the processes you have to go through to gather the information in the first place, then absorbing the feedback and further questions that develop, creates a perfect environment to learn so much more, almost subconsciously.

Blogging

Blogging helps to improve yourself not just as a designer but in so many various ways. Redswish has forced me to learn new things to create interesting articles, my writing style has improved and my understanding of the ‘blogosphere’ and social web has improved.

What to blog about

It depends on what you wish to achieve from your blog, whether it be commercial or personal gain. If you want to make money from your blog, prepare to work hard writing regularly and building your site to pull in traffic. But if you just want to ‘express yourself’, promote yourself or just want to write and pass on knowledge to others – then do it as when you feel like it. Don’t feel pressured to blog.

Blogging isn’t for everyone. It takes a lot of time, energy, focus and dedication. Sometimes it doesn’t pay off, but it’s always worth giving a shot.

Taking criticism

This doesn’t just refer to blogging but all forms of criticism. However if you go out on a limb and broadcast your views and writing to the world – you can rest assured that some people are compelled to spite you, whether it be justified or not. Prepare for a few off-colour comments.

Criticism isn’t always constructive, but try to imagine why the comments have been made and consider how you can improve on this and try to avoid it happening again. Do not react harshly – angry retorts can drive visitors away and do nothing for your profile. Words can easily be misinterpreted on the web so be careful.

Useful input from commenters

CommentersThe main benefit of comment areas on blogs is the opportunity for readers to contribute and provide their own expertise and insight. Take full advantage of this, promote it and try to generate conversation with your commenters. Doing so will help to increase the chance of more input in future.

Pushing yourself when working

All the above are examples of ways to learn new tricks and skills, expand the imagination and develop a better understanding of the industry. However, improvement can be established constantly while working in your existing environment. A few tips:

  • Working for an agency. Working in an environment with other professionals is a perfect environment for absorbing new tricks and ideas, as well as sharing. Since I started working at Flame Digital 4 months ago I’ve progressed in leaps and bounds and can honestly say I’m loving it!
  • It’s never too late to go back to school. More and more web design and development related courses are popping up – you’re never too old to mooch along and check out the benefits.
  • Find ways to measure progress. Set targets, aim to reach them in 1 month/6 months. This will help to push you to develop, and acts as a measure to observe how much you’ve improved.
  • Money is a motivator. Let’s not lie, we can design for the love of design but if you do it for a living – money is essential. Loosely speaking, the better a designer you are – the more money you’re likely to earn. It’s not always as simple as that but money is certainly a powerful motivator – perhaps the thought of that salary raise will entice you to push that little bit harder.

Explore other avenues of creativity. Design doesn’t have to remain in Photoshop on your monitor. Grab a camera and go for a walk to capture some photography, or grab a sketch pad and relax in the garden and swap the mouse for a pencil! Try to seek creativity and inspiration in different forms.

Focusing on design

I’ll hand you over to a nice article on a new website, Web Design Ledger, written by Adelle Charles, that covers ‘10 easy steps to become a better web designer‘.

The article outlines ideas and techniques that should be considered constantly and should be second nature to designers:

  • Build a toolbox. Create a tidy catalogue/toolbox or resources, scripts, background and stock images, bookmarked sites, tutorial files, plugins, .psds etc. You never know when they might come in handy.
  • Think on paper. Always default back to paper before you start squiggling away with the mouse.
  • Keep up to date with trends. The web is like the catwalks of Milan and Paris – new fashions are revealing themselves all the time. Keep on top of what’s cool, or even get a step ahead and set the trend!
  • Know your audience.
  • Ask other’s opinions.

Read the full article here.

Self-improvement

Self-improvement‘Improving yourself as a designer’ requires a lot more than reading books, toiling through tutorials and blogging around. There are so many contributing factors that make a good designer, and these vary from person to person.

Perhaps it’s a case of building confidence, or even suppressing an ego. You can never have too much inspiration and in such a fast paced industry – there’s never any way you can know everything.

Whether you’re a student doing a part-time course, an experienced industry veteran, an up-and-coming design superstar or a jack-of-all-trades; I hope there’s something in this article that may have proved useful to you.

Never settle for second best, and never assume you’ve covered all the bases – there’s always room for improvement.

Read the full article and comments »

Long time no see, and other bits…

CalendarFor the past few months I’ve been blogging on a regular basis, usually between 1 and 3 times a week, even 4 times if you’re particularly lucky, or if I’ve been particularly bored. However since my previous post at the start of the month, Redswish has been left neglected by me and kept busy by the loyal readers popping back to seek new news, and perhaps a few new readers who’ve managed to source the site through whatever means.

So, nearly 3 weeks since my last article, it’s surely time for something fresh, new and inspiring.

Err, well no. Not really.

With full honestly, I have been immensely busy this past few weeks. Yep, even too busy to blog! ‘Heathen’ I hear you cry. Alas, it’s true. And I assure you’d love to return with an unbelievable article of only the highest quality, but I can’t even stretch to that for you. So to keep you busy for what will hopefully be no more than a few days, I will offer you the following:

Fifty People, One Question

The wonder that is Twitter offered me a little jem today. I can’t remember who it was who recommended this short viral video, but I thank them for it.

Fifty People, One Question is a beautifully crafted 8 minute long short where random people are grabbed on the streets of New Orleans and asked the question ‘What would you wish to happen by the end of today?’ (or something very similar). The idea is so simple it could almost be ridiculed, but the outcome is so fantastically composed, the emotions so perfectly captured and every aspect of the film including the editing, soundtrack and photography so considerately pieced together that the outcome is just superb.

Good eh? But seriously, please don’t just comment here (obviously do comment here, but follow the link through as well!) Check out the Fifty People, One Question website for more information on the video and other people’s responses.

A selfish note

I think it might also be worth noting that I’ve been asked to write for a Web and Graphic design tutorial site based in Manchester, for money. Don’t worry, I’m not selling out and will still be focusing on Redswish, but may throw the odd article out in exchange for payment.

The reason I’ve brought it up is mainly to thank the readers of this site who’ve helped it grow over the past few months and to reach the attention of a wider audience. It is only through this that the effort I’ve put into my writing has began to pay off, but it has also inspired and urged me to write to a constantly better standard.

So, once again, thanks all. I promise I’ll get something out again soon.

Nathan x

Read the full article and comments »

Accessible web design – The How

Toolbox

In the predecessor to this article, ‘Accessible web design – the whats and whys‘, I discussed the advantages of building accessible websites, what accessibility is and why we should be taking it seriously. In this article I’ll be running through some of the primary tasks to consider when building accessible sites.

Images

Images are often the first element considered when we talk about accessibility. Images feature heavily in web design, whether they are used in the construction of the layout or to aid the content – few sites are image-less. However, these images may prove useless to visually impaired or blind users, or anyone using a device or browser that doesn’t render imagery. In these instances, images can become hurdles as opposed to aids.

The alt attribute
The alt attribute provides alternative text to describe your images. It is placed within HTML elements just as any other attribute:

<img alt=”Descriptive text goes here” />

Describing images is important, especially if the image has a purpose (eg. logo, complimenting the copy, image link). If you don’t describe the image, it will make no sense to anyone who can’t see it.

null alt
If a particular image is meaningless, for example if it’s purely for decoration or to space layout elements, use alt=” “. There’s point describing an image that doesn’t have any purpose (ie ‘Spacer image’). This will just hassle users.

Common sense?
When describing your images, give them sensible descriptions which make sense and convey valid meaning. This doesn’t mean lines of text, just something short and sweet that makes sense. If the image links somewhere, describe where it links, for example:

Bad: alt=”logo_small_80x60″

Good: alt=”XYZ homepage”

Where’s my image!
Ah, the other benefit of the alt attribute is for those times when the images just don’t load. One of the great mysteries of life – everything else appears, the image is there on the server (or maybe it isn’t) but it sure as hell hasn’t popped up on the screen. So the alt text kindly steps in to replace it. It may not be sexy but it will provide insight into what should have been in that big white space.

Alt text for background images?
Well, if you’ve built your site semantically using CSS then all background images should be called through the stylesheet, therefore no alt text is necessary. In fact it’s impossible anyway. You can only apply the alt attribute to <img /> elements.

Links and Colour

When creating styles for links on a page, consider that not everyone can see colour. I, as you can tell by this site, am not currently practicing what I preach but will be taking it into account in the future.

If you use colour to denote links or click-able content, reinforce it with other methods such as emboldening or underlining. Otherwise colour-blind users may see no difference between standard copy and click-able links. However you go about doing it, it’s important to highlight links with more than one method.

Also, be careful that your copy and links don’t blend in too much with the background colour. Some people can’t pick out contrasting colours as well as others.

Don’t rely on colour to guide users. Methods such as ‘click on the purple box’ or ‘follow the red line’ may be deemed useless to colourblind users.

Flash!

EEk, there she is. You may or may not be surprised to know that Flash is actually quite accessible on some levels. It meets several Section 508 requirements including:

  • Content magnification and scalability. Flash is predominantly built with vectors objects and so can often be scaled without distortion.
  • Mouse-free navigation and keyboard accessibility. Flash offers tabbed browsing like in HTML but also provides a higher level of keyboard interaction.
  • Visually/audibly engaging. Flash uses interactivity, dynamic visual effects and audio that may appeal better to younger users or people with cognitive disabilities.
  • Custom colour palette support. Flash isn’t restricted to web-safe colours as with CSS, which of course can be taken advantage of to aid colourblind users.

Of course Flash still, being Flash, has it’s disadvantages.

  • Some devices, such as the iPhone, plain don’t support it.
  • Without captioning, Flash may prove completely useless to blind or deaf users.
  • Flash can’t always be read by screen readers.
  • Strobe effects and fast moving objects may prove difficult to understand or see clearly to anyone, not just visually inpaired users.

When it comes to Flash, I’m no expert. For more information on accessible Flash development check out ‘Creating accessible Flash content‘ and Macromedia’s white paper on ‘Best practices for accessible Flash design‘.

Structured Markup and CSS

I’d love to think that eveyrone was building semantic, well structured XHTML and CSS websites today but they’re really not, it’s a great shame. I haven’t got the time here to launch into a full article about semantic markup but I’ll touch on a few points.

Why? Oh yeah. Not all browsers use stylesheets so ensuring your HTML is valid, semantic and well structured will ensure it looks perfectly ledgible when the CSS is on vacation. Using the correct formula of HTML and CSS will also help to ensure that your site doesn’t break in different mainstream visual browsers (although it by no means guarantees this), it will make it easier to implement new content, scripts, imagery and more than anything makes it so easy to change massive details with one or two lines of CSS.

Lose the tables.
Use tables only for tabular data. Websites should be structured with divs, headers, paragraphs, lists and the odd spans and bits here and there.

Use lists for menus.
Whenever you have a menu, a list of links or even just a list – make sure it’s displayed that way. Use <ul> and <ol> to create lists, this will render as nice bullet points when no CSS is available. Chances are it will make your lists a lot easier to style up anyway.

Avoid ‘divitis’
Yep, divs are great. But you really don’t need loads of them. They contain blocks of content and are required for the central areas of your layout. However, most HTML elements can be individually styled and don’t need wrapping in extra layers of divs. This will reduce the file size of both your HTML and CSS and will clear unnecessary code.

No inline styles
Firstly, you don’t need to – get them all tucked away in the stylesheet. They add weight to the file size and aren’t always rendered correctly by different browsers.

Sure, there’s a wealth of information on this subject. If you want to learn how to build websites properly, aside from the plethora of information you could gather from a quick Google search, I would also strongly recommend Jeffrey Zeldman’s ‘Designing with Web Standards‘.

Cross-browser compatibility

Cross-browser compatibility

So you’ve added your alt attributes, checked your links, and you reckon your markups pretty bob on. Your site looks great in Firefox (because that’s the coolest browser, of course). So what about Internet Explorer 6, and 7, which hold an estimated nearly 80% of browser market share?

When considering browsers, the main contenders on the market are:

  • Internet Explorer 6
  • Internet Explorer 7
  • Firefox 2
  • Firefox 3
  • Safari
  • Opera
  • Camino
  • Chrome
  • Soon – Internet Explorer 8

To be honest – the list goes on. Personally, I’d recommend you always check your sites in IE6, IE7, FF2, FF3 and Safari. I know budgets don’t always cover it but they should do, and it may seem like a lot of effort and it can be. But regardless of accessibility, from a general Usability point of view – can you afford to lock these users out?

When tweaking your sites to render well in other browsers, don’t be tempted to use invalid CSS or HTML – this may affect other browsers that don’t render styles in the same way or even at all. I can assure you that all the main visual browsers can be catered for while using valid markup.

Validation

I’ll shamelessy tell you here and now that validation isn’t imperative. The majority of modern browsers can pick up on slight errors and either work out what you’re trying to do or produce an adequte alternative. Your sites do not always have to pass the W3C HTML and CSS validators, or Bobby or another generic ‘Accessibility test engine’ to be accessible. But to be honest, is it so much to ask to write your code correctly?

But don’t think for one minute that just because your HTML is valid and you’ve slapped a pretty little W3C ‘valid xhtml 1.0′ badge at the bottom of your site that it’s accessible. These validators don’t take into full consideration what font size you’re using in the text, the fact that your header colour may be low contrast against the background colour or whether your alt attributes acurately describe their parent image.

Scripts

There are 2 definitive rules to bare in mind when incorporating Javascript into your site.

  1. All scripts must be stored in an external Javascript file. No inline scripts unless absolutely necessary.
  2. All Javascript must be degradable so it doesn’t affect users who don’t have scripts turned on.

When developing in Firefox, I’d seriously reccommend you get hold of the Web Developer Toolbar plugin. This allows you to easily check how your site looks with/without scripts, CSS and has lots of other nifty features.

With Javascript languages such as jQuery and Mootools getting real popular – designers are spicing up their sites with non-intrusive and majoritively accessible Javascript, which is good! But always check that your site works full with all the scripts off or some users may get a nasty surprise.

Typography and Font Size

TypographyThe area surrounding choices of typography, web-safe typography and scalable font sizes can get quite deep. Current browsers will only render fonts that are also present on the users system. So if you go designing and building a site with a great looking downloaded font – chances are only a very, very small fraction of visitors will actually benefit.

Web-safe fonts

Unfortunately, advances in general web font support have been small. We still have our hands tied dealing with the same default fonts as we were years ago. There are 3 main methods of dealing with this:

  • The good way – the CSS ‘font-family’ property.
  • The bad way  – “Download this font here”
  • The cool way – sIFR

CSS: font-family
When specifying your website’s fonts with CSS, you can specify multiple fonts for particular elements in order of preference. Therefore, if the user doesn’t have the first font installed, it will default to the next in the list and so on. This property looks as so:

p { font-family: Calibri, Tahoma, Arial, sans-serif; }

In the instance above, users with Calibri installed will see the paragraph fonts in Calibri. If not, it will default to Tahoma which is a relatively safe bet. Failing that, Arial will be used and in the most basic scenario the generic sans-serif font will be used.

“Download this font”
This is seen very rarely in modern design. But some designers force visitors to actually download the actual font file and install it on their machines so they can view the site in the designers selected font.

Not only is this completely inaccessible and unusable, it’s damn right unethical in some cases illegal.

sIFR (Scalable Inman Flash Replacement)
A popular option for text replacement is sIFR, pronoucned “siffer”. This is a Flash technology that replaces HTML text with a Flash rendered object, pulling in the required font from a .swf file.

This is great because it maximises the range of fonts that can be viewed on sites, breaking the mould of the restictive default fonts. And it’s completely accessible! If users don’t have Flash installed, they have Javascript turned off or their browsers plain don’t support Flash – it degrades to perfectly clean text that can be styled with CSS.

The only real downsides to sIFR are that, for the moment, it can only replace a single line of text so is only really useful for headings. Plus it can sometimes be a hassle to install and configure but if you do it enough times you’ll surely get wizzy at it.

It’s all well and good ensuring that your typography looks nice (as it’s an essential element of design) while still being accessible by all. However accessibility isn’t just about the typeface – you have to consider font size.

Em’s and Px’s

When specifying font sizes in CSS, the only units to consider are px and em:

  • px (pixel) = static unit of measurement, corresponds with monitor resolutions.
  • em = relative unit of measurement that equals the vertical size of an element’s text.

View menuAssigning your font sizes with pixels ensures that they will be that exact size across the board. When visually impaired users wish to increase the font size, modern browsers feature the option to increase it, which will automatically increase or decrease the pixel size of fonts. (You can normally check out this feature somewhere in the ‘View’ menu under ‘Text Size’ or ‘Zoom’.)

The problem with this is that Internet Explorer 6 and certain other browsers don’t change the size of fonts set in pixels. IE7 features a page zoom function which does the job but this still doesn’t excuse sizing fonts with pixels. Instead we have to look at ems, which are relative.

The safest bet
The safest approach to styling your typography so that it displays at the size you want, while still being scalable by different browsers, is to set a default size in the body element. This is normally around 11px or 12px. Then use ems for the rest of the elements in your site.

If you set your default body text size to 10px, this makes it far easier to work out the sizes of other fonts as they will all be round decimal units. So:

  • 12px will equal 1.2em.
  • 35px will equal 3.5em.

You get the idea…

The tabindex attribute

Keyboard navigationThe XHTML tabindex attribute allows your to specify the order in which keyboard users can tab through different elements on the page. By default, users who use the keyboard instead of a mouse to navigate website will tab from link to link in the order they appear in the source markup.

To apply tabindex just add the following HTML:

<a href=”#” tabindex=”2″></a>

and so on through the different elements you wish to prioritise:

<a href=”#” tabindex=”1″>Home</a>
<a href=”#” tabindex=”2″>Search</a>
<a href=”#” tabindex=”3″>Articles</a>
<a href=”#” tabindex=”4″>Return to top</a>

The benefit of using the tabindex means that users without the ability to navigate with a mouse can access the most important areas of your site faster, instead of tabbing endlessly through every link and active element on the page.

Accesskeys

Accesskeys are similar to tabindex. However, instead of specifying an order to travel through, accesskeys dictate a letter or number that represents an element. Different browsers interpret accesskeys differently. Sometimes you can simply press the number or letter while on a page but in most cases you have to either press alt/ctrl and the value to access it.

Apply accesskeys like so:

<a href=”#” title=”Return to the homepage” accesskey=”h”>Home</a>

The problem with accesskeys is that more often-than-not they’re not accurately depicted. So users don’t know what to press. It’s often a case of common sense – usually the first letter of the link title or the number of the item in the list in the case of menus. Sometimes a visual guide is given, yet sometimes they prove compeletely irrelevant.

Just don’t even do it.

FrontpageTo be honest, if you’re still designing websites with the techniques below… why? These were dirty elements that were on their way out when I first started playing with Freewebs and Dreamweaver MX.

  • Image Maps – No. There’s no reason to be using image maps anymore. Opt for Flash or Javascript to really do justice.
  • Table Layouts – No. Le’ts get semantic guys! Lose the tables and get with the structured XHTML and CSS.
  • Spacer GIFs – No. Real simple – CSS > margin-top: 15px; = no pointless, bandwidth hugging, inaccessible spacer images.
  • Frames – Absolutely Not.
  • Applets – Nope, not here.
  • Flashing and blinking elements – Most definitely not. Next time you create that family business site with some cheap WYSIWYG site builder with built in ‘snow effects’ or ‘flashing banners’ – go and knock your head on the wall and see the error of your ways. Do I honestly need to hold your hand to help you realise how inaccessible and darn right ugly these elements are.

On your way to becoming a better designer

Accessibility isn’t something you pick up over night, or indeed simply from a blog article such as this. In fact, it’s not a strictly defined set of rules or protocols that can just be learnt then adhered to and varies with every website you will build.

People such as the W3C, The Web Standards Project and the WAI are working every day to push for new changes and to evolve the mindset and general acknowledgment and acceptance of Accessible web design. It does benefit you as a designer or developer. It may not necessarily mean your designs look any better but will ensure that more people will gain access to your work, and demonstrates good ethics and consideration as a forwards-thinking member of the industry.

Where to next?

I’ll leave you with a few places to check out for far more information. If you wish to add anything please take full advantage of the comments section:

Read the full article and comments »

Are you really this stupid?

You donkey!

Today I received 3 spam contact form results from nathanbeck.co.uk, my portfolio site that ties in with this site (click on contact at the top and you’ll see what I mean).

They were all ‘selling’ the same thing, but just spewed different bullshit each time.

Here’s the best:

Hello,
How would you like getting a logo’s (or) icon’s (or) header (or)template (or) banner designed free of cost for your website. We are giving away these services as a promotional measure for free of cost. In return we need a link at your site for each services at home or internal  page(Except link,resources,directory pages).So to get a new services all you got to do is mail us back with the confirmation of link and the page where the link added for our site. If not interested in any of these offer,and interested to do three-way link exchange,please feel free to mail me back.

Regards,
Rebheka.

I’m a freaking designer, it’s plastered all over my site and about 3 inches to the right of the contact form Rebheka filled in!

Perhaps she used an automated form-filling tool, perhaps Rebheka is actually a poorly paid Indian child slaving away for 13 hours a day posting and reposting the above email to hundreds of ignorantly selected sites. Perhaps I need to use a CAPTCHA, but I always liked the simplicity of my contact form.

We’ve seen it all before

I know, I’m sure you have. I just cannot get over the stupidity. I mean, you’d at least use correct English grammer. That email reads like it’s been processed by a cheap language translator.

I won’t post my response, yeah that’s right I responded! I’m sure you can assume the tone in which it was written. I just can’t believe anyone would possibly fall for such an email, it surely can’t be productive on ‘Rebheka’s’ behalf.

Read the full article and comments »

Accessible web design – The Whats and Whys

AccessibilityWhat is this ‘accessibility’?

Aside from becoming a buzzword that designers love to throw around (“I’m a standards-aware, accessible web designer… therefore am superior to you.”), accessibility is about ensuring your site can be accessed and used well by all types of web users, including disabled or somehow impaired users.

This may not seem like a big deal to all the comfortable ‘typical’ web users reading this article right now. But you can be assured that a hefty portion of surfers on the net may be blind or visually impaired, motor impaired, paralysed or perhaps just using a particular web browser or operating system that doesn’t render websites like you would expect, or wish.

In fact, the net is the alternative that a lot of disabled users would rather turn to then trawling out to the shops to spend money, or to the library to learn. If you were in a wheelchair, would you prefer to make the arduous trip into town or roll over to your computer with a mug of coffee and The Beautiful South playing in your warm, cosy home?

So, don’t lock these users out!

Persuading the client

The client shouldn’t require persuading. Let me stress that. Building accessible websites shouldn’t be an extra cost or an additional feature. In fact, it would be nice if this article didn’t even exist, as if accessibility and standards-based web design was just as it should be, and didn’t require attention. Unfortunately this is not the case. I have friends learning web design in University and college now who have no idea what an ‘alt‘ tag is, have never heard of ‘accesskeys‘ and some (lord help them) don’t even realise there are more browsers than IE6!

Valid markupHowever, understanding web standards and accessibilty isn’t something you should really brag about. It doesn’t necessarily make you a better ‘designer’, it just means that you’re going about building websites the right way.

I often feature links at the bottom of my sites to the w3c xhtml and css validators, so people would know that my sites use valid code. But why brag? It should be expected.

Explaining the acronyms

W3C: World Wide Web Consortium. www.w3.org.

The W3C is an international consortium founded by Tim Berners-Lee (the guy who is labeled as inventing the World Wide Web, there’s some serious gravitas behind that title!) and others. The consortium consists of member organisations, full-time staff and general webheads who work together to develop the net, raise understanding of the correct ways to build sites, create new technologies and work with all kinds of companies and people to help make the web a better place.

WAI: Web Accessibility Initiative. www.w3.org/WAI/.

In their own words, “the Web Accessibility Initiative (WAI) works with organizations around the world to develop strategies, guidelines, and resources to help make the Web accessible to people with disabilities.” The WAI offers 3 levels of access. The relatively easily achieved Priority 1 through to the the master level at Priority 3. The reason that there are 3 levels is because it is understood that you can’t just expect everyone to become accessibility gurus overnight. Like transitional DOCTYPES, this allows continuous development and an evolving understanding of web standards and accessibility.

Section 508. www.section508.gov.

Section 508 is one of the few legal acts concerned with user experience and disability discrimination on the net. Becoming law in 2001, it dictates how sites should cater for various disabled users. Although it only applies to federal agencies and government sponsored activities, 508 sets a precedence that should be acknowledged by all designers.

Also check out:

Ignore the stigma

So far, accessibility sounds as if it’s for the best. But, even after all these years of constantly pushing towards a better understanding and acceptance of standards and accessibility, some people either refuse to accept it or believe it will hinder them as designers. FALSE. I’m not trying to sell it, and I don’t worship it – I just want to rule out any possible negative implications:

  • Building accessible websites doesn’t, and shouldn’t, cost any more.
  • Building accessible websites hardly takes much longer, and if done properly will probably save time in the future.
  • You don’t have to build multiple versions of your site (unless you’re going for a Flash and a HTML version). Your sites should be perfectly adaptable to different types of browsers, screen resolutions and tailored to different users in one fell swoop.
  • Building accessible sites does not restrict you as a designer. Your sites can be as fancy as you want with imagery, typography, scripts, animation, hybrid layouts etc and still be accessible.
  • Accessibility is not just catered to disabled people. It affects all users. It considers people with slightly poor vision or motor skills, people using mobile web browsers, screen readers, text-only browsers, search-engine robots, people who are temporarily disabled and the list goes on. Do you realise what a massive portion of the web-browsing population this covers?

So what are the real benefits?

I’m sure many reading this have just been scanning and may have missed a few bits, plus there’s still plenty I’ve not mentioned. But a blog article can only get so long. So, the benefits of building accessible websites?

  • Increase market share and audience reach. By not locking out a large portion of users, you are of course opening the door for them.
  • Increase search engine listings and discovery. That’s right: ACCESSIBILITY CONTRIBUTES TOWARDS SEO! Seriously, a lot of the techniques employed while building accessible sites really do aid SEO. Cleaner code is easier to parse. Alternative text helps to describe your site and provides additional content. Captions, table summaries, text descriptions, anchor titles and meta-data all provide additional descriptive data bout your site.
  • Improve efficiency by reducing maintenance and sometimes bandwidth.
  • Demonstrate social responsibility.
  • Reduce the risk of any legal implications.

Still not convinced? I’ve hardly exhausted the subject but I don’t wish to bore you further. For more information you can visit the links mentioned above.

That’s all neat, but how do I go about it?

Of course there’s quite a lot of ground to cover on the subject of ‘how-to’. So I’ll be covering this in part 2.

If you wish to discuss the points raised above, think I’ve missed anything (surely I have) or disagree – let the people know in the comments section.

Move on to part 2 – Accessible web design – The how.

Read the full article and comments »

Guest Post – Creating Usable Website Navigation

Ifoh Guest Post

Throwing a shout out to my latest post, however not on Redswish. My first (I think) guest post has been featured on ifoh designs blog.

The article covers, or at least attempts to cover all the bases to consider when designing usable website navigation. It looks at page quantity, hierarchy, design aspects, accessibility, consistency and navigation design on different types of websites.

Quick teaser quote:

Consistency is essential. Nothing is more confusing than traveling to another page on a website, only to loose the navigation, or find that it’s changed format or location. Ensure that your navigation, whatever layout and positioning it may take, remains in the same place on every page of your site – even if the color scheme or rest of the page layout changes.

A simple ‘Return to the main site’ style link will not suffice.

But hey, don’t take my word for it, it’s my article! Check out the full article here:

http://ifohdesigns.com/blog/web-design/creating-usable-website-navigation

Thanks to Matt Rossi for the opportunity. Leave feedback wherever you want!

Read the full article and comments »