Here are 216 web colour charts. There are a variety of ways to colour web sites. These hexadecimal codes can be used in both XHTML and CSS. Decimal colour codes can be used in CSS and most graphics tools.

Download the colour charts:

The organisation by value puts these colours in order of light, middle values and darks.

Non Dithering Colours By Value (340KB)

The organisation by hue puts these colours in order by colour.

Non Dithering Colours By Hue (230KB)

On the Web, a walled garden is an environment that controls the user’s access to Web content and services. In effect, the walled garden directs the user’s navigation within particular areas, to allow access to a selection of material, or prevent access to other material.

Recent history suggests that open standards will again better the “walled gardens” of the Web.

In 1994, when the previously obscure computer network, developed by the American Department of Defence, first become known to the general public as the “World Wide Web”, or simply The Web, many people first connected to it via AOL and CompuServe. These subscription-based service providers offered not only access to the Internet, but other services such as email, chatrooms, discussion boards and more. It was access to the Web via the Internet that would lead to the undermining of these services, and the opening up of the Web as a platform for individual and creative expression, revenue generation and social interactivity.

Whilst it took some time for the closed communities to venture out into the wilds of the Web, it brought about the standardisation of the services that made up the early web. For instance, POP and SMTP standardised email and as a result it has become the ubiquitous tool of business. Today, of the early pioneers of the Web, only AOL survives, but as an entirely different entity; a web portal supported by advertising.

History appears to be repeating itself. The biggest online phenomena of the past couple of years, the social-networking websites of Facebook and MySpace, are acting very much like the AOL of the mid-1990s. They are closed systems based upon prioprietory standards. You cannot easily move information from one system or another if you so choose. This ties users into one system, or forces them to create profiles on both. A similar comparison can be drawn with the virtual worlds of Second Life and Entropia Universe.

The Web is better when it’s social.

Part of the reason these websites are popular is because they are closed communities, where users can interact with friends and find new friends with which to interact. This community feel has been tested in recent times, with sites such as Facebook being criticised for using their user’s personal data to target advertising. It is innevitable, however, that these systems are proprietory; it is only once these systems immerge and become popular that standards can be developed and implemented.

Just as the Web’s open standards, embodied in the Netscape browser, displaced the online services providers, so the paradigm of open standards awaits the social networking and virtual worlds. Back in the 1990s it was Netscape, but in the 21st Century it falls to Google to defend the open standards of the Web with the Open Social API. Some say there is a large amount of self interest in this move, since Facebook and MySpace have huge communities, which both networks know a huge amount more about than Google and can hence generate billions of dollars of revenue.

The web is more interesting when you can build applications that easily interact with your friends and colleagues. But with the trend towards more social applications also comes a growing list of site-specific APIs that developers must learn. Open Social is an attempt not only to open up the closed communities and allow developers to interact with the different networks, but allow developers to only learn one API. MySpace has signed up to this initiative and, more reluctantly so has Facebook. A curiosity is AOLs recent aquisition of Bebo, another online community popular in Europe. Is AOL simply jumping on the “band-wagon”? Has it learnt its lessons of the past, or is it using knowledge of its past as a guiding principle? Whatever is the answer, Bebo’s inclusion in Open Social will help it continue its competition with other social networking websites.

The Web Standards Project (WaSP) is to expand its scope of collaboration with Adobe to advance web standards. Having successfully completed its initial goals for assisting Adobe’s Dreamweaver team in supporting Web standards, the Web Standards Project’s Dreamweaver Task Force will be renamed the Adobe Task Force to reflect its widened scope. The Adobe Task Force will collaborate with Adobe on all of the company’s products that output code or content to the Web, and will continue to advocate compliance with Web Standards and accessibility guidelines by those who use Adobe’s products to design and build Web sites and applications.

You can read the full press release on the Web Standards Project website.

Widening the collaboration between standards experts, who are also product experts, and Adobe is an exciting step forward in the maturation of the Web. This will hopefully lead to full standards support in not only Adobe-based products such as Dreamweaver and AIR, but leading browser and web editor suppliers such as Mozilla, Microsoft and Apple.

I’m not a big fan of the BBC’s recent website redesign! While I believe that a few structural and hierarchical elements could have been addressed better, the overall result of this redesign is too “Facebook” and Web 2.0 for my liking; exactly what an online news site does not need. Who are the BBC trying to appeal to? They have gone from being content centric to design and technology centric. This in itself isn’t a bad thing, but I don’t understand the BBCs motivation for doing so.

Richard Titus, the Acting Head of User Experience at the BBC was a key driver of the project.

From a conceptual point of view, the widgetisation adopted by Facebook, iGoogle and netvibes weighed strongly on our initial thinking.

Titus identifies the key features of the new homepage as being:

• Simple, clean and beautiful, the final design, … visually striking yet unpretentious.
• Personalization: you can choose the content that interests you by adding and removing the content boxes via the “Customise Your Homepage” tab.
• Localization: Users can now set their own location, enabling them to access local sites, weather, news, radio and TV schedules without the hassle often associated with user journeys to local content.
• Simplicity: the customization is intuitive and includes an interactive demo and tips to guide users through the process. It is also unobtrusive if the user has no desire to customize their page their experience won’t be compromised.
• Search: The site is much easier to read and scan at a glance. At the top of the page there’s a search function (now reduced from two search boxes to one), and at the bottom a full directory of all BBC sites and a link to the A-Z, allowing users to quickly find what they’re looking for.
• Nostalgia: the new homepage also manages to incorporate eccentricity alongside innovation.

Aesthetically bold and bright.

Aesthetically, the new homepage looks nice. It’s big, bold and bright - a far cry from the old days when BBC sites had text almost too small to read and a fixed-width design optimised for tiny monitors. But at the same time it appears far too clunky! I’d prefer something that would look a little more elegant and understated. Something that doesn’t appeal to The Facebook Generation, who are less likely to read the BBC pages at lunchtime, than update their Facebook, Bebo or Twitter profile during that ‘valuable’ hour. This begs the question, does the BBC know who their core audience is?

Confusing interactions.

The homepage makes great use of AJAX, but at the same time, there are a number of confusing interactions going on. For instance, the ‘Edit’ button next to each area of customisable content seems like the wrong label text. I’m not editing the news, the weather or blogs - I’m selecting which news categories I want to see, where I am and which blogs I want to read. These types of button ought to be contextual rather than generic. Edit is simply too vague.

Also, what’s the idea behind those plus and minus buttons for news? Strange idea. Add or remove articles from the displayed list? Why would you want to remove them from view sequentially? If the idea was to allow the user to asynchronously update a short list of available headlines, then why not move back/forwards in blocks of five? Plus and minus are often used as metaphors for creation/deletion in software, so the usage doesn’t seem right.

Personalisation vs Simplicity … an uneasy relationship

The ability to personalise a website is, in general, a good thing. Google has done it with their iGoogle, Yahoo! with My Yahoo and Microsoft with Windows Live. But I think the balance here is gone too far towards design and borrowing from succesful Web 2.0 sites. The BBC website has always been an impressive destination for (relatively) impartial news and current affairs throughout the world, not a Web Portal. Or is this the point? Does the BBC want to become a destination for all your information needs and compete with Google, Microsoft and Yahoo?

The BBC should consider that 14-25 year old users, what I term The Facebook Generation, will require far greater scope for adding their individuality than is currently available. The social networking generation are page-savvy. They want control of their interface to information, their screen is their window on the world and I don’t think that you have gone far enough in divesting control of the display of that information to the user.

But for those who aren’t part of The Facebook Generation, the people who care about getting to the content fast and with little fuss, is the ability to personalise the homepage worthwhile or even simple? I’m not so sure.

Who needs a clock?

Finally, the clock and date. What an important waste of webpage ‘real estate’, even though in the BBC’s case I understand it was a throwback to the old clock that preceded individual TV programmes. If you’ve got a modern computer capable of displaying the clock with the Flash plugin, then you’ll almost certainly have the date and time visible to you anyway. It’s needlessly superfluous on a website.

Following on from the RNIB’s web accessibility initiatives, web compliance experts Magus Ltd and The British Standards Institute are working together to create a new publically accessible standard (PAS 124) for websites. Web standards govern the effectiveness, function and appearance of a website, and include: brand, legal, accessibility, search engine optimisation (SEO), usability and technical standards.

Websites are increasingly the key communication vehicle for a company, its brand and products. Despite this, research from Magus shows that many of the world’s leading organisations don’t have formal brand and technical standards defined to govern their websites. Even those that do are failing to effectively implement or enforce them, achieving full compliance with less than 20% of their own web standards. The websites of these organisations significantly under-perform or damage the brand as a result.

PAS 124 will help to protect the significant investment organisations are making in their web presence and online brands, by establishing best practice for “defining, implementing and managing organisational web standards”. It will provide a clear framework to help organisations apply standards effectively to significantly improve online performance and protect the integrity of their brands.

More detail can be found on the BSI’s press release.

To paraphrase Plato

Human behaviour flows from three main sources: desire, emotion and knowledge

Desire lines are those well-worn ribbons of dirt that you see cutting across a patch of grass, field or park, often with nearby pavements, particularly those that offer a less direct route, ignored. In winter, desire lines appear spontaneously as trampled down paths in the snow. These paths are never perfectly straight but instead, they meander like a river this way and that, as if to prove that desire itself isn’t uniform or linear and (literally, in this case) straightforward. Desire Lines show that it is human to choose, but it is also human to choose what other people have chosen before. Be it for establishing a pattern, be it for convenience, or be it for not reinventing the wheel. In this way the Desire Lines become well-trodden and pseudo-permanent routes to a particular destination.

Desire Lines are the ultimate unbiased expression of natural human purpose

The term ‘Desire Lines’ originates from the field of urban planning in the early 20th Century.

An optimal way to design pathways in accordance to natural behaviour is not to design them at all

Extending the concept to websites

Broadening the concept of Desire Lines, it is also possible to see other impressions of human desire in websites, many of which can provide a commercial advantage to the particular website in question.

The web phenomenon is simply another way people find entertainment, communicate and interact. Whether the purpose of using the web is for enjoyment or employment, Desire Lines are are a such perfect expression of natural human intention that they become the utlimate design pattern for building successful and intuitive websites. It is easy to envisage users like an army of ants moving in single file towards their goal, not following set paths, but bypassing the planned route directly towards the news article, the video, indeed any product being offered by the website concerned.

Instead of websites providing classic access points via menus and taxonomies, they can employ different access points based upon user preferences and previous browsing history. This is heavily dependent upon capturing user’s details via a cookie or a login system, like at Amazon, but the benefits to the user can be far more rewarding.

So who is doing this?

Understanding the demographics of your users and your site usage is key to Desire Lines. The BBC website is a great example whereby search statics are monitored frequently. They adapt their web user interface and site structure based upon what people are typing into their search box thus making it easier for subsequent users to view the more relevant or interesting stories of the day.

Amazon makes Desire Lines more explicit and beneficial to their users through Listmania, recommendations, Customers Who Bought This Item Also Bought, What Do Customers Ultimately Buy After Viewing Items Like This?, Better Together, Recently Viewed Items, Wish Lists etc. In essence, Amazon does not provide a single standard way of finding an item, but relates each item together through a myriad of historic information from its user community. The user therefore has the option to search for an item, use the catagories, or click on links and begin their own desired user journey, which can be uniquely distinct from other users journeys or a mirror of those journeys.

Current TV takes the concept even further by showing content that is purely based upon what users want, or what they term as viewer-created content. Current slice the schedule into short segments into “pods” — each just a few minutes long. These pods profile interesting people on the rise, intelligence on trends as they spring up around us, and international news from new perspectives. Anyone who wants to contribute can upload a video. Then, everyone in the Current online community helps decide what should be on TV. You can join in at either stage — watch & vote or make video.

Limitations to Desire Lines

A key limitation, or possibly a challenge, to the successful adoption of Desire Lines concerns advertising revenues. For a user it is beneficial to be able to reached the desired destination as quickly and efficiently as possible, but for a website’s advertising revenue it certainly is not. To be simplistic and possibly cynical, many sites don’t want users to have an overly efficient experience as this limits page views and page impressions. The challenge, therefore, is to retain users on the website and provide them more relevant information and targeted advertising.

There are also implications on what is considered more relevant and what is not. The BBC to some extent decides based upon user searches, but this serves also to hide potentially captivating an important stories. One user’s preference isn’t necessarily the next’s, therefore creating an information bias. This may be even more problematic with our over-reliance on Google for finding information. The Google algorithms essentially decide what we find even though we are told that the sites listed are based upon relevance and popularity.

Finally, you can’t pave every desire line. To do so would end in a playing field not covered in lush green grass with a few tracks intersecting the green, but a concrete mess.

The Law of Demeter (LoD) as it is commonly called, is really more precisely the “Law of Demeter for Methods”. It is a design-style rule for object-oriented programs, but can be applied to ‘pseudo object-orientated’ languages such as ColdFusion (with regard to the use of ColdFusion Components). In essence it is the “principle of least knowledge” regarding the object instances used within a method. The idea is to assume as little as possible about the structure and properties of instances and their sub-parts. Therefore, it is okay to request a service of an objects instance, but if I reach into that object to access another sub-object and request a service of that sub-object, I am making an assumption of the deeper structure of the original object. This results in tight coupling, which is a sign of a poorly structured application.

The Law of Demeter says that if I need to request a service of an objects sub-part, I should instead make the request of the object itself and let it propagate this request to all relevant sub-parts, therefore the object is responsible for knowing its internal make-up instead of the method that uses it.

Stated in plain English:

• You can play with yourself
• You can play with your own toys (but you can’t take them apart)
• You can play with toys that were given to you; and
• You can play with toys you’ve made yourself.

Stated more succinctly, the Law of Demeter for Functions says that:

• Your method can call other methods in its class directly
• Your method can call methods on its own fields directly (but not on the fields’ fields)
• When your method takes parameters, your method can call methods on those parameters directly; and
• When your method creates local objects, that method can call method on the local objects.

The basic idea is to avoid invoking methods of a member object that is returned by another method. When you do this, you make structural assumptions about the container object that may be likely to change. The container object may later need to be modified to contain a different number of the contained objects, or it may end up being changed to contain another object which contains the original component object. If the ‘returned’ object isn’t a sub-part of the object whose method was invoked, nor of some other object, then it typically is not a violation of LoD to invoke a method of the returned object (particularly if the object was created by the invoking method).Using the Law of Demeter (LoD) you instead ask the container to invoke a method on its elements and return the result. The details of how the container propagates the message to its elements are encapsulated by the containing object. This results in weak coupling and strong cohesion, the general goal of high readability and maintainability of an application. This is highly desirable when building a ‘modern’ ColdFusion application as it is all too easy getting trapped into the bad-old-days of “spaghetti code”.

A side-effect of this is that if you conform to LoD, while it may quite increase the maintainability and ‘adaptiveness’ of your application, you also end up having to write lots of little wrapper methods to propagate methods calls to its components, which can add development time overhead.

Many people who have worked on websites know that standard HTML and CSS allows the webpage author to assign any font of their choosing to a text element on a page. However, they also know that there is no guarantee that the element will show the desired font, as the browsing user may not have the same font, or set of fonts, installed on their local system. More often than not, only a set of “common” fonts are installed, for example Arial on the PC and Helvetica on the Mac. This has been a significant issue which has been addressed by two methods: the Fahrner Image Replacement (FIR) method and the Scalable Inman Flash Replacement (sIFR) method.

Fahrner Image Replacement (FIR):

Fahrner Image Replacement (FIR), named after Todd Fahrner, one of the original creators, is a Web design technique that uses Cascading Style Sheets (CSS) to replace text on a Web page with an image containing that text. It is intended to keep the page accessible to users of screen readers, text-only web browsers, or other browsers where support for images or style sheets is either disabled or nonexistent, while allowing the image to differ between styles.

How it works:

FIR replaces short passages of text by surrounding the text in two sets of HTML tags. At runtime, CSS is used to hide the HTML element and replace it with a background image containing the exact words as an image.

FIR has come under fierce criticism from the opponents, such as Quirksmode, as it bloats the use of CSS, and Joe Clark for its failure in screen readers. FIR has largely been superceded by the Scalable Inman Flash Replacement method.

More in-depth detail can be found at the following links:

http://www.stopdesign.com/articles/replace_text/
http://www.alistapart.com/articles/fir
http://www.digital-web.com/articles/in_defense_of_fahrner_image_replacement/
http://www.sitepoint.com/article/header-images-css-xhtml
http://www.mezzoblue.com/tests/revised-image-replacement/

Scalable Inman Flash Replacement (sIFR):

Scalable Inman Flash Replacement (sIFR), originally conceived by Shaun Inman, is an open source JavaScript and Shockwave Flash based technology that enables the replacement of text elements on HTML web pages with Flash equivalents.

How it works:

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash. Here is the entire process:

1. A normal (X)HTML page is loaded into the browser.
2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
3. If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.

More in-depth detail can be found at the following links:

http://www.mikeindustries.com/sifr/
http://wiki.novemberborn.net/sifr/
http://www.adobe.com/devnet/dreamweaver/articles/sifr_demo.html
http://www.mezzoblue.com/archives/2004/10/26/sifr/

As we all are well aware, ColdFusion, historically, has been a programming language that has allowed for ‘spaghetti code‘ and poor application design practices. However, with the emergence and maturity of major frameworks, such as Fusebox, Model Glue, Mach-II and ColdSpring, there has been a shift of emphasis from poor coding, to re-usable and extensible development practices. With the maturity of the language comes the search for standard ways of achieving certain tasks. This is where design patterns lend themselves.

In software engineering, a design pattern is a general repeatable solution to a commonly occurring problem in software design. A design pattern is not a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations. Object-oriented design patterns typically show relationships and interactions between classes or objects, without specifying the final application classes or objects that are involved.

Not all software patterns are design patterns. Design patterns deal specifically with problems at the level of software design. Other kinds of patterns, such as architectural patterns, for example Model-View-Controller (MVC), Implicit Invocation and Dependency Injection, describe problems and solutions that have alternative scopes. However, for ease, I generally consider software and architecture patterns under the design pattern scope.

Design patterns can speed up the development process by providing tested, proven development paradigms. Effective software design requires considering issues that may not become visible until later in the implementation. Reusing design patterns helps to prevent subtle issues that can cause major problems, and it also improves code readability for coders and architects who are familiar with the patterns.

Design patterns can be classified in terms of the underlying problem they solve. Examples of problem-based pattern classifications include Creational, Structural and Behavioural Patterns. Creational patterns, such as Singleton, deal with the creation of objects, Structural patterns, such as Facade, deal with the relationships between objects and Behavioural patterns, such as Observer, deal with the communication between objects.

The practical application of design patterns to ColdFusion applications is a new phenomenon and one which requires careful consideration. There is no sense in using a design pattern for the sake of using it, it must first solve the problem you have encountered. Common design patterns that I have used in my day-to-day development have included Singleton, Composite, Model-View-Controller (MVC), Data Access Object (DAO), Gateway, Bean and the Facade Pattern. These I will discuss in later articles.

Further Reading:

Alexander, Christopher; et al (1977). A Pattern Language: Towns, Buildings, Construction. New York: Oxford University Press. ISBN 0-195-01919-9.

Freeman, Elisabeth; Freeman, Eric; Bates, Bert (2004). Head First Design Patterns, paperback, O’Reilly. ISBN 0-596-00712-4.

Gamma, Erich; Richard Helm, Ralph Johnson, and John Vlissides (1995). Design Patterns: Elements of Reusable Object-Oriented Software, hardcover, 395 pages, Addison-Wesley. ISBN 0-201-63361-2.

Shalloway, Alan; Trott, James (2001) Design Patterns Explained: A New Perspective on Object-Oriented Design, paperback, 368 pages, Addison-Wesley. ISBN 0-201-71594-5.

The day of the emasculated Web 1.0 where the client-side was functionally poor, where the user interface was akin to the days of the mainframe computer, is rapidly diminishing and the new era of the Web 2.0 has yielded a new way of thinking. The demand for web applications, particularly in the business arena, is increasing at an exponential rate as the benefits of new technologies and paradigms are comprehended by the CTOs, CIOs and decision makers. Web interfaces have significantly restricted the interactive user experiences possible on the Web, and the ability of those Web applications to present increasingly complex information to the user, to date.

To solve a myriad of today’s problems, modern web applications must be able to solve an equal myriad of requirements.  These requirements provide the principles behind the emerging Rich Internet Applications (RIAs) and include some, if not all, of the following.

1. Run unchanged across multiple platforms
2. Deliver engaging user interfaces with high levels of interactivity
3. Restore processing power and rendering capabilities to the client
4. Execute well across varying connection speeds (broadband rather than the  archaic dial-up)
5. Utilise audio, video, images and textual content in a seamless mannor
6. Support mobile workflow by allowing users to work on- and off-line
7. Allow the client to decide what content should be accessed and when that content should be retrieved (asynchronous execution)
8. Access any number of middle-tier services (e.g. .NET, Java, ColdFusion) and data stores
9. Provide powerful and dynamic user interfaces
10. Use standards such as XML-RPC, SOAP and REST in Web Services-based applications
11. Integrate with legacy applications
12. Allow for incremental addition of functionality to enhance the Web application environments
13. Be accessible to all
14. and, Utilise ubiquitous content

Candidate technologies for these solutions are developing primarily in the form of AJAX, Flex/Flash and XAML. They do not simply address the limitiations of the page based model as seen in Web 1.0, but provide the above capabilities whilst also empowering developers and designers to create new kinds of engaging and innovative applications and user experiences.