We take a modern approach to the technical aspects of web design. This means that we hand-code our websites; we do not advocate the use of WYSIWYG design tools. Our students develop a deep understanding of web design and require little in the way of specific software. We're more interested in the fundamentals of the subject than in knowing which button to press. It may come as a surprise that the ‘modern’ approach to web design is so ‘low tech’ but understanding how to write effective markup and creative stylesheets is key to the creation of excellent websites. You needn't take our word for this, there are many recently published books that advocate this approach, of which, The Essential Guide to CSS and HTML Web Design by Craig Grannell is one of our favourites.
The way we write HTML/XHTML and CSS and the way we form documents is guided by the standards developed and maintained by the W3C (the World Wide Web Consortium). This gives us a firm basis on which to test our work and validate our code. You can test this page now to see how well we're doing.
Semantics is a very important issue in web design. When Sir Tim Berners Lee described the ‘semantic web’, he envisaged an information space that understood what it contained and could effectively respond to user requirements. The practice of creating semantically correct markup helps move the web towards that goal. At its simplest, it means (for example) using the HTML <table> tag to define tabular data only and not as a structural element for page layout (still a common practice). In effect, we use markup tags and style classes to describe the content they contain and to define the information structure of a web page.
All right-thinking organisations take the use of semantic markup very seriously. See the BBC Semantic Mark-up Standard for more information and as an indication of how important this seemingly academic aspect of web design is considered by major website developers.
Separating content from presentation
Originally, HTML was all a web designer needed. It was used to structure content and describe how it should look. These days, things are very different. As detailed above, HTML and XHTML are used to describe the nature of content and the hierarchy of that content (which comes first, which second etc.). They are not used to describe how that content should be presented (how it will look in the browser window). That is exclusively the job of CSS. This separation of tasks, HTML describing the content and CSS describing the presentation is at the root of modern web design and allows designers amazing freedom of expression. To better understand the power of this approach, try using the buttons on the right to ‘redesign this site’. In each case you're looking at the same content but it is being styled differently; a technique known as stylesheet switching. The method used to switch the stylesheets on this site is described in this tutorial.
Websites are of no use if they cannot be used. More importantly, websites are of no use if they cannot be used quickly, easily and intuitively - that's what people expect of a website. As a web designer, you must also understand how to design interfaces and to do that you must understand how people interact with websites. You need to know when to adopt conventions and when to be innovative. Our approach is often referred to as ‘user-centred design’ and this means that websites should be designed for the best user experience and should be tested from the user's point of view.
Usability also includes Information Architecture, the way information in a website is organised and categorised. This helps people find the information they need quickly. Usability is key to the success of any website.
There are many good books on usability but for a good, light-hearted overview, we recommend Don't Make Me Think! by Steve Krug.
All websites should be accessible. In other words, websites should be designed for all members of their target audience, irrespective of how they interact with that website. For example, a website should allow its content to be easily available to those who are blind or with poor vision as well as to sighted users. There are many simple methods a designer can adopt in order to make their websites more accessible.
Accessibility also means writing good copy. Writing for your target audience and (for example) not using technical terms if they are unlikely to be easily understood and ensuring that all acronyms and abbreviations are described in full. See our Accessibility page for more information.
Findability is the art of designing websites that can be found. This includes SEO (Search Engine Optimisation), designing websites in such a way that they can easily be indexed by search engine spiders, optimising content and site structure, and creating user-friendly URLs. It therefore also describes methods for allowing people to find specific bits of information in a website.
‘Findability’ is a relatively new term that describes a range of techniques and technologies; our favourite book on the subject is Building Findable Websites: Web Standards, SEO, and Beyond by Aarron Walter.
The browser wars are over but that doesn't mean web designers can relax (well, not much anyway). There are now more browsers in common usage than ever before and although just about all of them render standards-compliant code reasonably well, there are still differences in the way some browsers display a webpage. Admittedly, most of these differences are small in modern browsers but there are enough older browsers still in use (particularly IE6) to make life difficult. As far as is practical, webpages should look similar in the following browsers: Internet Explorer 6, 7, 8 and 9, Firefox, Safari, Chrome and Opera. That's 8 browsers!
All the principles described above are important but ultimately, people are disproportionately influenced by what they see. Websites must therefore be aesthetically pleasing. A website that is graphically well designed gives people confidence in the information it contains and provides a better user experience.
It is important that web designers understand the power of the visual aspects of design and ensure that their designs are well balanced, giving relevant weight to less tangible principles like accessibility and not to rely on websites that just look good.
A few of our favourite things
As designers, our interests extend well beyond websites. A good designer must become aware of design in the everyday world and critically assess the things they see and the objects they use. It is only by doing this that the broad range of design issues can be identified and understood. Design in the everyday world also offers ideas and influences that can inform a designer's work. So, although this programme is to do with web design, our intention is to help students become more generally design aware. Below are just a few of our favourite designed things:
A type foundry is a company that designs (and often sells) typefaces. You might think that there are already enough typefaces in the world but new typefaces are being designed and old ones refined or updated all the time. The move from print media to electronic media in recent years has set new challenges for type designers. The typeface you are reading at the moment (Georgia) was specifically designed to be readable on a computer screen.
Our favourite type foundry is Terminal Design; they specialise in the design of highly readable typefaces. We particularly like their ClearviewText and Rawlinson 2.0 typefaces. In fact, the large ‘MA’ at the top of this page is formed using the ClearviewText Bold font and the rest of the text in the banner is Rawlinson 2.0 Medium.
One of the least noticeable (to the user) areas of design is the design of utility objects like kitchen knives. In most cases, such design is unnoticeable because providing the item does its job, we rarely consider it. In fact, the only time the design of such things become noticeable is when they don't work properly. In the case of knives, this might be when they are blunted or when the handle feels uncomfortable or the blade too thin (so that it bends). However, there is one additional case when such design is noticeable and that is when the designer has created a superlative example of the object in question.
The Signature kitchen knife, designed by Robert Welch is just such an object. The knife is beautifully functional and aesthetically pleasing. It feels weighty and silky-smooth in the hand and cuts like a dream. When such a knife is used, design becomes obvious and the shortcomings of all other knives (those we have taken for granted) become clear. The ‘hidden’ design of everyday things is revealed to the user.