get2dom.com
thoughts, code, design & usability

my thoughts

a bit like a blog, but with less opinion.

Visual design: working with colour palettes

Posted to Web dev by Dominic Winsor on 06 Mar 2006
Updated: 06 Mar 2006
Working with colour is a task I find most enjoyable, but hard to quantify. I can tell you when it is right, but arrive there by way of an iterative process. I work best given some existing source material such as a photograph, logo or livery from which a palette can be derived. My technique is not entirely formulaic — I just sample contrasting and complimentary hues from the source material, then build a derived palette of lighter and darker shades. I am pleased that a number of other web professionals do this too, and share their techniques:

Creating colour palettes
"When I am designing a colour scheme for a client site, I am often lead by the colours used in existing logos or publicity materials. But when the client only uses one or two colours, I use a favourite technique for creating complimentary 'tones'."
- Andy Clarke (Malarkey)

An online tool exists for the application of Andy Clarke's technique, the color palette creator works from a given hex colour. (How to get the hex colour? I use CatchColor)

Colour schemes
"A designer’s ‘style’ is made up of a number of different factors, though colour plays a large role. Everyone has their own method of coming up with a good colour scheme, which will inevitably affect the results."
- Dave Shea

Accessible design: alternate text only versions are not enough

Posted to Usability by Dominic Winsor on 20 Feb 2006
Updated: 11 Dec 2006
Why is having a text-only version of your website something of a cop-out, and a dodgy way to meet basic accessibility needs? Here is some helpful advice on designing an accessible website. See my follow-up posting on accessibility testing.


Who is this for?

As web designers and developers we need to accommodate various accessibility needs: well sighted; partially sighted; blind, and issues such as dyslexia. Perhaps not immediately obviously, an accessible site is one which also provides increased search engine visibility. Accessible design is more easily 'understood' by user-agents such as GoogleBot. (Try viewing your site in Lynx, as this is a good approximation of how a search user-agent will see your site.)

The following article on web design for low vision users puts forward the key points as to why doing it properly is better. It is more of the stuff I keep talking about (semantic markup, content order, true separation of style and structure, the application of the CSS box model etc.) but it is the right way to do things.

This quote from the Research section is particularly pertinent:
These users, however, do not want a "different" site: They don't want a "screen-magnifier version" or a "text version" if that means a site that has to be separately maintained from the main version. They believe the sites would not be equivalent. They believe the "special" site would not be kept up-to-date. The issue is how to provide "experience equity" and universal usable access to all low-vision users.
» www.alistapart.com/articles/lowvision/
» www.stopdesign.com/log/2005/06/24/zoom-layout.html


Application of the techniques

A good solution should deliver a visually engaging, well laid out site for the majority of users; provide an alternate High-Contrast stylesheet for partially sighted users (switchable as user preference) and possibly add hidden visual elements which are rendered with a specific audio stylesheet to aid screen reader navigability.
Developing a High Contrast stylesheet is actually quite fun, as you get to tear your design back to the real basics, using huge fonts and bold colours!

Particular attention should be paid to any forms present on the page as the interaction they provide can be a stumbling point for screen readers and zoom layouts. Websemantics have a summary page on making accessible forms, covering everything from the absolute requirements through to nice-to-have's.
» www.websemantics.co.uk/tutorials/accessible_forms/


Dyslexia and font choice
Dyslexic users are often overlooked when considering accessibility features. Careful font choice and writing style can siginificantly increase the audience for your site (there are over 2 million dyslexic people in Britain). Few of us realise that it is not difficult to design to include this audience. The Read Regular site gives an excellent visual introduction to dyslexia, though the main purpose of the site is to introduce the ReadRegular font (which is a beautiful example of typographical design).
» www.readregular.com/english/dyslexia.html
» www.readregular.com/english/background.html.
» www.readregular.com/english/intro.html

The British Dyslexia Association have a useful page of web design tips.
» www.bdadyslexia.org.uk/extra352.html


General typographical advice - design in plain English.

Design is not just careful colour choice and a keen eye for the particular dimensions and position of things on the page. A great design is one which shows good understanding of some basic rules: Type shape and size; Line length and spacing; Text Alignment (columns); Graphic elements; Professional touches. Get these right and you provide a great foundation for the rest of your layout. The page also has ten tips which neatly summarise the above points and a glossary (so now you know where to look when you don't know when to use a hyphen, an en-dash or an em-dash).
» www.plainenglish.co.uk/guides.htm (Scroll to 'Design and Layout', PDF)


Write in plain English

The Plain English Campaign have produced a free, short guide to effective writing. It is well worth a read. It will help you write more clearly!
» www.plainenglish.co.uk/guides.htm (Scroll to How to write in plain English, PDF)

I hope this is all useful. I've been working with, learning and applying the techniques throughout my career as a "technical person who understands design" and have found they make for better websites, happier users and well pleased clients!

Practical examples of good accessible design
The newly redesigned Einfach für Alle (simple for everybody) website is a great example of what is possible. Thanks to Accessify (a useful website for conscientious web developers) for the info.

CSS Design: The three column layout

Posted to Web dev by Dominic Winsor on 09 Feb 2006
Updated: 20 Feb 2006
Finally! Someone's made a good (ingenious) three-column layout with no extraneous markup, and some simple CSS. It meets the standards, makes for excellent accessibility and doesn't mess with your document flow (the content order from a semantic markup point of view).
» www.alistapart.com/articles/holygrail

Update! So close, yet so far!

It is simply tempting fate to call this the holy grail of css positioning. I have now found this layout to work well within a fixed width design, but with a stretchy design (as in the example) my standard issue copy of MSIE 6 at work (revision# coming soon) the left column vanishes completely and reappears in seemingly random positions when the window is resized. And have you seen it in MSIE 7 beta 2? Yep - it's stuffed there too. So i'm still researching this one!

CSS positioning: Collapsing margins

Posted to Web dev by Dominic Winsor on 09 Feb 2006
Many properties are available for CSS designers to exert a fine degree of control over the position and size of an element. They include margin, padding, border, width etc. Whilst most web developers are familiar with the box model and its various issues there is another interesting feature which can sometimes confuse: collapsing margins.

Two consecutive vertical margins will be collapsed into one if there is no padding, border area or clearance that separates them. This is actually what you expect to happen, and is mostly intuitive. The following article explains the situations where it produces unexpected results. (Such as using an <h1> within a <div> as the page heading, and getting an unexpectedly narrow banner as a result.)
» www.complexspiral.com/publications/uncollapsing-margins/

Popups: Interrupting the user experience

Posted to Usability by Dominic Winsor on 13 Dec 2005
Updated: 13 Dec 2005
Scott Granneman of SecurityFocus presents a simple article explaining the problem with popups, alerts, messageboxes etc. We already know there are too many, and that most people ignore them, but what is being done to improve the user experience? Some operating systems and applications are now restricting alerts according to your preference: control freaks see everything, whereas the users who are just trying to get stuff done are only asked to make critical decisions.
» www.theregister.co.uk/2005/12/13/secfocus_popups/

Why web developers are leaving Microsoft for Open-Source

Posted to Web dev by Dominic Winsor on 09 Dec 2005
Updated: 25 Jan 2006
I recently stumbled upon the brilliantly designed and engaging website of Drew McLellan. I found one article in particular which expresses what has been happening for the past year or so: that web developers and the people that pay the bills have realised that .net web deveopment is something of a steep step upwards from classic ASP in time and cost, competing more in the same space as Enterprise Java. Now that classic ASP is no longer an option there is something of an exodus for PHP and all that surrounds it.
» Web Development on a Microsoft Platform

PHP has come on a long way in the last few years, with the release of PHP 5 it is possible to develop robust, well written web applications (and employ agile development methods) in the usual short timeframe. You can read about why here:
» Learn about PHP 5: what's new, migration...

The .NET Developers Guide to Windows Security

Posted to Web dev by Dominic Winsor on 25 Nov 2005
Updated: 25 Nov 2005
Whilst researching an authentication and impersonation for a .net project I discovered this excellent reference on Windows Security for .net developers. The guide is very well written, with an engaging style, clearly described concepts and practical examples.

Not sure where to start? I found these topics an interesting read:
» What is a Countermeasure?
» What is the principle of defense in depth?
» What is CIA? (Confidentiality, Integrity and Availability)
» How to store secrets on a machine (a better way to keep connection strings).
» What is Kerberos? (Read this if you've ever encountered the double-hop issue with Windows (NTLM) Authentication for a web-application not passing the default credentials over to a web service on a different machine.)

The website is a counterpart to a physical edition which can be obtained from the usual sources.
» pluralsight.com/wiki/default.aspx/Keith.GuideBook/HomePage.html

Why designers love rounded corners

Posted to Usability by Dominic Winsor on 24 Nov 2005
Updated: 25 Nov 2005
A summary article on why we love rounded corners. The article states that the reason is beyond the simple aesthetic properties, but has deeper meaning from an interaction design & usability perspective.
» www.basement.org/archives/2005/11/why_do_we_love_rounded_corners.htm

Carbon neutral living

Posted to Ethical Living by Dominic Winsor on 14 Nov 2005
Updated: 14 Nov 2005
It is well known that driving, flying and indeed just running your house produce a lot of carbon dioxide (CO2). This is a greenhouse gas which we are all supposed to be reducing by being more energy conscious. Obviously the most direct effect comes from using/consuming less in the first place - walk to work, fit energy saving bulbs around the home etc. however, it is not always possible or reasonably practical to, say, give up your car.

There is a second option which can offset your impact. It is called Carbon Neutral and basically amounts to you paying for trees to be planted and managed to offset the Carbon from your lifestyle. I think it reasonably priced, so will be using this for my commute and my recent flight to San Francisco.
» www.carbonneutral.com

The main website is comprehensive, and aimed at business users. Visit the shop to find the simple solutions for 'CarbonNeutral Driving', for example:
» www.carbonneutral.com/shop/index.asp

Getting more from your PSP

Posted to Geek stuff by Dominic Winsor on 20 Sep 2005
Updated: 25 Nov 2005
I just bought a Playstation Portable (PSP), and whilst it is an excellent device for viewing various media it is not immediately obvious how to manage file transfer from the PC. This site has a good set of tips on getting the most out of your PSP:
» www.askdavetaylor.com/cat_sony_psp_geek_stuff.html

The PSP supports only a few media formats, so getting video files on to your PSP could be a laborious technical process. Fortunately there is a free utility called PSP Video 9 which will do the work for you.
» www.pspvideo9.com/
« BACK 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 NEXT »
© Copyright Dominic Winsor 2004. Valid HTML and CSS.