Redswish - carefully crafted banter

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

Resources 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:

• Smashing Magazine
• CSS Drive
• A List Apart
• Web Designer Wall
• Design Float
• DesignM.ag

And a few books to check out:

• The Principles of Beautiful Web Design (Jason Beaird)
• Designing with Web Standards (Jeffrey Zeldman)
• Web Design Index by Content
• Bulletproof Web Design (Dan Cederholm)
• Web Standards Solutions (Dan Cederholm)

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

Doesn’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

The 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

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

• See full article »

Long time no see, and other bits…

For 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

• See full article »

Accessible web design – The How

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_80×60″

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

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

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

Assigning 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

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

To 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:

• The Guild of Accessible Web Designers
• W3C
• WAI
• Section 508
• The Web Standards Project
• A List Apart
• Web Content Accessibility Guidlines 1.0

• See full article »

Are you really this stupid?

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.

• See full article »

Accessible web design – The Whats and Whys

What 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!

However, 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:

• The Guild of Accessible Web Designers
• The Web Standards Project
• A List Apart

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.

• See full article »

Guest Post – Creating Usable Website Navigation

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!

• See full article »

New Holiday Extras Viral!

Flame have just launched a new video viral campaign to promote our client Holiday Extras‘ airport parking service.

Check it out, it’s in the big purple box:

http://www.holidayextras.co.uk/airport-parking.html

Ben, our copywriting guru (I’m beginning to dislike that phrase), created a top script that caught their attention and made it through to the final cut with hardly any edits. Justin McArdle was brought in to steer the reigns and working with Flame Digital and actor Paul Kaye; produced the 90 second viral.

Let me know what you think. You can either comment here or find out more on the Flame blog article.

• See full article »

The power of Wordpress Custom Fields

I can’t believe I’ve been playing with Wordpress for so long and never explored the Custom Fields feature. A website I’ve been working recently has required me to push the boundaries of Wordpress, or more appropriately my understanding and knowledge of it. In doing so I’ve bravely slipped deeper into the Advanced Options and lived to tell the tale – the tale of the Custom Fields…

The fundamental functionality of Custom Fields provides you with the ability to expand your posts and their content. They allow you to include extra information and features in your posts that the WYSIWYG editor doesn’t provide itself.

How it works.

When in your Write/Manage posts page, mooch down past Tags and Categories to the Advanced Options – ooh! Down here in these murky depths you’ll encounter the Custom Fields box. In here you’ll see 2 empty textareas labelled key and value.

The key is the name for your custom variable, and the value is, well, it’s value! When you create a custom field, you are creating new meta-data. You then insert a simple line of php into your Wordpress template where you want this extra data to appear in the theme and voila! You’re done.

So, the easiest way to show you is with a short example.

Adding Subtitles to your post

I feel subtitles serve more as a presentational feature than anything. And sure, you could always just insert a h2/h3 at the top of your post to act as a subtitle. But sometimes that doesn’t cut it, especially if your subtitle needs to stand out from the post content more than an standard inline header.

Step 1 – Theme files:

In your Wordpress theme, you need to enter a line of code to pull in your custom field. Make sure this is within the post loop, the most obvious place is of course directly under your post title. Here you go:

The only bit you may wish to change is the keyword within the parentheses. In this case ‘Subtitle‘. This ties in with the key you create in the post editor, so make sure they’re the same. And only use it again if you wish to display the subtitle somewhere else, for any other custom fields you’ll have to change this.

It would make sense to place this code within header tags:

That’s it for the code!

Step 2 – Post page:

When you’re writing or editing a post, go down to the Custom Fields area in the Advanced Options. Create a key which correspondes to your keyword you set in the code. The value will be the actual Subtitle content. So for example: Key – Subtitle Value – An inside look at Google’s new browser… Add your custom field and save your post.

Step 3 – Check it out:

Check out how it displays on the page. Then utilise the power of CSS to get it looking bob on!

Having more fun

Let’s face it, subtitles aren’t that interesting. But there’s a lot more you can do, a lot of which I’ve still yet to discover. Post Thumbnails

Add the following code to your theme:

" alt="" />

This will include an image, pulling it in from a specific folder. So if you upload all your thumbnail images to the directory /wp-content/post-images/ and then in your post editor set the key as ‘Image-Thumb’ and the value as your image name (eg. picture.png), this will pull in your thumbnail picture and place it in your post. You can control the appearance of the image with CSS.

To actually upload your images to the specified folder, you can use good old FTP or a plugin I’m particularly fond of, because it keeps you in the WP admin area without having to use any external programs: Filosofo Old-Style Upload.

Of course this doesn’t necessarily have to be a thumbnail, it can be a full size image, adding plenty of colour and interest to your blog articles.

For a more advanced alternative to this method, check out Justin Tadlock’s method.

Meta-Data

Some of the examples given on the Wordpress Codex page on Custom Fields are the simplest, and the best. What if you fancy adding information relating to your current mood or the weather at the time of writing your post? Try:

Current Mood:

Key: Mood
Value: Happy
Code:

Current Mood: 

Displays: Current Mood: Happy

Listening To:

Key: Listening-to
Value: Fly me to the moon – Frank Sinatra
Code:

Listening to: 

Displays: Listening to: Fly me to the moon – Frank Sinatra

Other ways to display meta-data

To pull in all the meta-data for a post in one fell swoop, go for:

Which will display all the meta-data in an unordered list and add’s classes that can be styled with CSS.

If you want to pull meta-data from a specific post, you can specify which post by the post ID, which data by it’s key and whether to display the data as a single item or pull in an array:

• $post_id is the ID of the post you want to select data from
• $key is the name of the meta-value you want
• $single can be either true of false. If true it will pull in a single string of meta-data, if false it will pull in an array of the custom fields.

Go Play…

Like most things, Custom Fields open doors which you have to walk through and explore. In essence they’re very simple but if used correctly can be pretty powerful, another extension of the basic functionality of Wordress. So go forth and experiment!

For more information on Custom Fields and all things Wordpress – visit the WP Codex.

• See full article »

Increasing and maintaining blog traffic

Content is King

Without a doubt the most essential method of both bringing in and retaining high levels of traffic is through constant generation of high quality, unique content. Regardless of whatever search techniques are used to generate visitors to your site, if they’re not greeted by useful information and interesting articles they will leave and most probably not return.

It’s all too easy to take a step back and go to another site in a few mouse clicks, so it’s essential that you provide a service or a level of quality that keeps visitors at your site, and ensures their return. Blogs are one of the most dedicated methods of bringing in traffic, but the real aim is to retain visitors, obtain repeat custom, subscribers, recommendations, inbound links and build up a community where your site’s visitors are engaged and compelled to provide their own input.

Blog posts are unlike other forms of written literature. Web users scan pages, so it’s important that the useful points are easy to find. Keep paragraphs short, use bullet points and lists,  blockquotes, close-captioning and  other visual techniques to keep your copy interesting. Large blocks of boring copy will not get read.

Don’t forget to utilise the power of keywords within your posts. Consider what people will be searching for, what are the central points of an article and what words and phrases will stand out against other similar sites. Use visual keys to identify keywords. But don’t overdo it. Don’t sacrifice the quality of your copy for the sake keyword spamming.

Getting people to your site

• Promote articles through 3rd party sites. In the case of a sports blog this could be other sports blogs and websites, sports news aggregators, general news sites, directories, showcase sites etc.
• Ensure that the blog URL is on all print and stationary and in the signature of emails. It’s a basic, obvious point but essential nonetheless.
• Use comment sections on other blogs, forums and sites to promote your blog. DO NOT SPAM. Reply genuinely, but include your website URL in your signature. Most blog comment areas will also use your display name as a link to your site as well.
• Guest authoring. This works 2 ways. Writing guest posts for other blogs can sometimes be more effective then a post on your own blog. This is especially useful when trying to get your blog onto it’s feet and raise it’s profile. Similarly, other writers creating content for your site helps to maintain post frequency when ideas and news are in short supply, and serves to offer variety to the tone of your blog.
• Promote your site and blog through traditional SEO methods such as Google and MSN webmastering. Ensure that your site’s code is clean and easily searchable and acknowledge basic SEO standards such as including ‘title’ and ‘alt’ information.
• Use obvious post titles. Do not keyword spam your post titles but ensure that they accurately describe the article and will be easily searchable. Also make sure the post titles are displayed in the page title on each unique post page.
• Advertising and affiliates. Buy inbound links or swap reciprocal links with other high-ranking websites.
• Observe other high-traffic blogs in your niche. What methods are they applying to continue to attract and maintain this level of visitors? Take ideas and inspiration from similar blogs and websites.
• Use ping services like Pingomatic and Wordpress plugins to notify other sites when you’ve created new posts.

Keeping people interested

• RSS and ATOM feeds, newsletter subscriptions, even SMS updates. Make it easy for visitors to subscribe to your site. Getting visitors to give your email address while signing up to your newsletter will help to build up a database of potential clients.
• Email campaigns. Build up databases of email addresses through subscribers to your blog newsletter, existing clients, purchase lists of email addresses, use email addresses from commenters on your blog etc. Then send out regular email newsletters with the latest articles and company news. Encourage people to subscribe, advertise competitions or products.
• Ensure that your site is usable. Regardless of whether your blog contains high quality content or not – if it’s difficult to read or find – it will be useless. Clean, usable and aesthetically pleasing sites will hold your visitors for longer and help to promote their return.
• Serial Content. Creating series’ of posts, daily/weekly/monthly features, strings of similar-style content, lists, interviews and unique ideas keep visitors coming back for more.
• Update regularly. Your subscribers and regular visitors will constantly be thirsty for new news and articles. If you can’t provide this – they will go elsewhere. However it’s also essential not to overpost as this can overwhelm your readers and scare them away. The ideal number of posts to make per day or week is entirely dependent on the niche and topic of a blog, the size of it’s readership, the length and value of the posts and the manpower behind the blog. Researching and discovering the ideal post publishing frequency takes time and constant monitoring.
• Post Publishing Consistency. Regular visitors will grow to expect and anticipate the frequency of your articles. It’s essential that once you’ve decided on an ideal publishing frequency that you stick to it.
• Blogs are social. Utilise the power of social networking to build your community and promote interaction. Use polls, allow users to submit their own ideas and news, pictures, even audio and video. Allow users to create accounts and profiles.
• Provide services and products that the competition doesn’t. Blogs aren’t just about content and posts. Use your interface to promote other products, provide free downloads, audio or video content, games and offer live feedback and real-time chat solutions.
• Consider mobile devices. With an increase of smart phones and in particular the iPhone – more users are accessing websites through their phones. Don’t block this percentage of your traffic – ensure your blog is usable on mobile devices.
• iPhone apps. If your blog is updated often or contains useful news that needs to be accessed on the fly – look at building an iPhone app that pull in your latest posts and site content. Sites like last.fm, ign.com, twitter.com and facebook are already taking advantage of this.
• Gimmicks. Free prize draws, competitions, monthly or weekly features both attract new traffic and entice current visitors to interact more.

To summarise

Your blog will succeed if it’s providing useful information to people. Good blogs generate traffic because they provide continuous new content all the time, they retain that traffic because visitors enjoy coming back for more and it’s given to them.

All blogs work differently; they attract different types and levels of visitors and are designed for different purposes, whether that be to make money, advertise products, raise profiles or just rant or express an opinion. However the principles behind all successful blogs are generally the same:

• Provide high quality, unique content.
• Ensure your site is easy to use and navigate.
• Employ traditional SEO techniques as well.
• Look after your readers – your current community is just, if not more important than new visitors.
• Research and analyse your market, ensure that your blog tailors to this market in every aspect: tone of voice, appearance, topic, usability and in SEO criteria.

• See full article »

Google set to launch browser called Chrome

Well it was bound to happen at some point, but this was quite unexpected. A comic accidentally released yesterday tells the story of Chrome’s development and Google’s approach to creating the new Internet browser. It’s not a bad read really.

The Chrome beta is proposed to launch today, although I’m struggling to find it anywhere. Google have kept things pretty hush hush on this project, although have formally announced the launch of Chrome on their official blog.

Chrome is designed to be clean, well-tailored towards the user experience, fast and get this – it’s open source! The new browser, if successful, will help to aid Google’s development of online apps and technologies, as well providing a fresh perspective on how we use the internet.

Good news or bad news?

It all sounds tremendously exciting. But how will this effect us as web designers and developers? Will it supply further cross-browser compatibility issues to contend with, break the browser usage market down further or will it crush rival browsers and monopolise the market? Who knows… it’s Google, anything could happen!

Google generally provide tools that help us. I spend a good hour a day utilising Google’s vast toolkit in various ways. Developing a browser is huge step – they’re entering a delicate market with stiff competition. It will be intersting to see what Google will offer to entice users over to Chrome.

*Update*

Google will be holding a press conference at 18.00 UTC which will hopefully mark the release of Chrome.

• See full article »