Website Planning
Introduction
Course code : DESI1184
Course co-ordinator : David Watson
Course weighting : 20 credits
This course builds on the skills developed during the Webpage Design course and covers the design and implementation of medium to large scale websites. It is concerned with some server-side technologies, such as PHP scripting and MySQL databases in addition to the more advanced development of client-side technologies. The focus of this course is on the creation of websites with “user-centred” design techniques and on improving efficiency in the building and management of larger sites.
As with the Website Design course, this course is about the technical and aesthetic aspects of web design in equal measure. The course develops a professional approach to web design and the creation of websites to a high standard. The web designer is essentially a designer of user interfaces and it is crucial that design aspects such as User Experience (UX) and Accessibility are well understood in order to create successful websites.
The web designer must also be able to build and deploy sites that are easy to manage. This may be achieved by adopting a modular approach to design and by employing PHP and by creating sites with dynamic content using databases. For such sites, security is also a major consideration and this course covers the basics.
Aims and Outcomes
- To learn how build findable websites.
- To learn how optimise and promote websites.
- To learn how to generate revenue from a website through advertising.
- To understand how to build sites that are useable and accessible.
- To develop the skills needed to efficiently build and manage larger websites.
Format
The course runs during Term 2 and consists of four main elements - workshops, online dialogue, coursework and projects.
The workshops are mainly discussions based on that week's topic and are based in Tower Lab C (see the course diary for details). Coursework will be reviewed each week. From time-to-time, project "crits" will be arranged and seminars given.
Workshops
The workshops will focus on "webpage design" in the widest sense of the words. We will cover both technical and aesthetic aspects during the workshops and lively dialogue is encouraged. The various topics are given on the timetable although this is only meant to be indicative and may change to suit specific requirements. Detailed tutorials etc. may be given at the workshop sessions or made available on-line. It must be stressed that complete coverage of the topics under consideration cannot be dealt with during the workshops and you will need to allocate time to follow up each workshop with further study.
Online Dialogue
Online teaching and support is available from a number of resources. Firstly, you may contact the course tutor by email. However, for general comment and discussion, students should engage with the course tutor, other tutors and other students on the programme at the online forum. This is a public forum, specifically set up for this programme but it also has a number of private areas where course and programme specific topics can be discussed. It is well used and a popular method of communication among the other students. Your questions will be answered either by the course tutor or by other members of the forum. Use of the forum is an integral part of the learning process and you are expected to become active members. The forum already contains a large amount of information and is a valuable resource tool as well as an excellent "forum" for debate.
Course Schedule
The course schedule gives an overview of the timetable, weekly topics and submission dates for this course. There may be occasional changes, so check back frequently.
| Date | Room | Title |
|---|---|---|
| 6th February 2013 | Lab A | PHP for site modularity |
| 13th February 2013 | Lab A | PHP and MySQL for dynamic content |
| 20th February 2013 | Lab A | Website security |
| 27th February 2013 | Lab A | The .htaccess file and other oddities |
| 6th March 2013 | Lab A | SEO, SEM and site promotion |
| 13th March 2013 | Lab A | Revenue generation models |
| 20th March 2013 | Lab A | Content management |
| Easter break (3 weeks) | ||
| 17th April 2013 | Lab A | Content management |
| 24th April 2013 | Lab A | Content management |
| 1st May 2013 | Lab A | Content management |
| 8th May 2013 | Web Thesis Project - crit on final design and implementation | |
All face-to-face sessions are 3 hours long and take place on Wednesday beginning at 10.00am and at 2.00pm. Sessions will be taught in Tower Block Lab A unless otherwise indicated.
See the programme teaching schedule for an overview of all courses.
Course Documents
There are currently 14 files in this section
| Filename | Size (KB) | Date Modified | |
|---|---|---|---|
| Class 1 - PHP for site modularity.pdf | 1,576.6 | 28th Mar 2013 | |
| Class 1 - PHP for site modularity.ppsx | 325.5 | 28th Mar 2013 | |
| Class 2 - MySQL Databases with PHP.pdf | 2,037.3 | 28th Mar 2013 | |
| Class 2 - MySQL Databases with PHP.ppsx | 1,080.4 | 28th Mar 2013 | |
| Class 3a - PHP with URL Parameters.pdf | 192.6 | 28th Mar 2013 | |
| Class 3a - PHP with URL Parameters.ppsx | 181.5 | 28th Mar 2013 | |
| Class 3b - Website Security.pdf | 1,036.4 | 28th Mar 2013 | |
| Class 3b - Website Security.ppsx | 1,051.4 | 28th Mar 2013 | |
| Class 4 - htaccess and other oddities.pdf | 1,399.9 | 28th Mar 2013 | |
| Class 4 - htaccess and other oddities.ppsx | 2,165.3 | 28th Mar 2013 | |
| Class 5 - SEO, SEM and Site Promotion.pdf | 2,740.4 | 28th Mar 2013 | |
| Class 5 - SEO, SEM and Site Promotion.ppsx | 3,358.9 | 28th Mar 2013 | |
| Class 6 - Revenue Generation Models.pdf | 766.8 | 28th Mar 2013 | |
| Class 6 - Revenue Generation Models.ppsx | 791.1 | 28th Mar 2013 |
Examples
There are currently 5 files in this section
| Filename | Size (KB) | Date Modified | |
|---|---|---|---|
| 404.html | 0.6 | 28th Mar 2013 | |
| php-articles-modular.zip | 130.9 | 28th Mar 2013 | |
| php-articles.zip | 140.1 | 28th Mar 2013 | |
| php-news.zip | 18.2 | 28th Mar 2013 | |
| php-static.zip | 6.4 | 28th Mar 2013 |
Assessed Elements
This course includes 3 assessed elements; coursework, project work and a seminar OR design and implementation of a live project. Details of these elements are given below. Each of the elements has a slightly different weighting and this is indicative of the degree of difficulty and/or the amount of work required. The weighting is as follows:
- Coursework: not assessed
- Small Business Website Revisited OR Live Project Design Proposal: 45%
- Seminar OR Live Project Implementation: 45%
- Online activity: 10%
Coursework
Each week you may be given one or more tasks and some recommended reading to be completed for the following week. Some tasks will build on work completed the previous week so it's important not to fall behind.
Seminar
You will be allocated a topic on which you will give a 15 minute seminar to the other students in your group. Each presentation must be given using either PowerPoint or a web browser based medium. In addition, each presentation must be accompanied by a blog entry covering all of the salient points of the presentation and including relevant links. Make sure you give yourself plenty of time to practice your presentation. The assessment for your seminar will be based upon the quality of the presentation, the content and the accompanying blog article. You will be allocated a suitable topic by the course tutor.
Small Business Website Revisited
This is an opportunity to demonstrate how far you have improved and how your understanding of web design has developed since completing the first project. This project requires that you critically analyse the website you created during the Webpage Design course and redesign/reengineer the site using all your new skills and knowledge. In addition to good visual design and coding, the new site should also demonstrate good findability, usability and accessibility. You may also want to improve the ease of maintenance by applying some modularity with PHP.
Live Project
The live project is divided into 3 elements, an initial design stage where all students submit a visual design and a functional plan for the site, an implementation stage where students work in teams and a design development report.
This year's live project is the DistanceLearning.uk.com site.
The aim of this website is to promote distance learning programmes that are delivered by the School of Architecture, Design and Construction. It also aims to give prospective students all the information they need when making the choice to study a distance learning programme.
Most distance learning students are based in Africa and the Far East, their access to the site is frequently via mobile phones. The new site design must therefore take this into consideration.
You will meet with the project client on 6th March.
Interim crit for team projects 17th April.
Client presentation on 1st May.
Project Materials
There are currently 0 files in this section
| Filename | Size (KB) | Date Modified |
|---|
Online Resources
There are literally hundreds of good web design sites on the web but a few are outstanding with excellent content added on a regular basis. I recommend that you read both A LIST Apart and Smashing Magazine regularly.
- Website Architecture - The programme website
- Website Architecture Forum - The programme forum
- Opera Web Standards Curriculum - complete set of tutorials for learning web design
- A LIST Apart - Essential reading for people who make websites
- Smashing Magazine - Excellent web design magazine with daily articles
- Web Style Guide - Compulsory reading
Week 1 Links ~ The .htaccess file and other oddities
.htaccess
- .htaccess made easy - Excellent book by Jeff Starr
- .htaccess files for the rest of us - Net Tuts+
- Tutorial: .htaccess files - Apache
- Comprehensive guide to .htaccess - JavaScript Kit.com
- .htaccess (hypertext access) - Wikipedia
- .htaccess tips and tricks - Corz.org
- .htaccess cheat sheet - the jackol's den
- Lots of useful .htaccess tools - Htaccess Tools
Passwords
- .htaccess Password Generator - Dynamic Drive
Rewrite URLs
- Redirecting www to non-www Using .htaccess - Gabriel Harper's Blog
- URL Canonicalization: The Missing Manual - SEO Book
- URL Rewriting for Beginners - addedbytes
CHMOD
robots.txt
- The Web Robots Pages - Robotstxt.org
- Robots exclusion standard - Wikipedia
- Introduction to "robots.txt" - JavaScript Kit.com
sitemap.xml
- What Are Sitemaps? - Sitemaps.org
- Sitemaps - Wikipedia
- Create your XML Sitemap - XML Sitemap
favicon.ico
- How to Add a Favicon to your Site - W3C
- Favicon - Wikipedia
- FavIcon Generator - Dynamic Drive
- How To Create A Favicon In Photoshop - PhotoshopSupport.com
- Online Favicon Editor - DeGraeve.com
- Free Favicon Editor - IcoFX
- IconWorkshop - Axialis
Week 2 Links ~ Website Security
Methods of Attack
- Keylogger - Wikipedia
- SQL Injection - Wikipedia
- Cross-Site Scripting (XSS) - Wikipedia
- Denial-of-Service (DoS) - Wikipedia
Help and Advice
- About Malware and Hacked Sites - Google Webmaster Tools
- FAQ: Malware and Hacked Sites - Google Webmaster Central
- Best Practices Against Hacking - Google Webmaster Central
- Stop Badware - StopBadware.org
Week 2 Links ~ Information architecture and navigation (bonus content)
Information Architecture
- Information Architecture - Wikipedia
- Boxes and Arrows - Excellent webzine about Information Architecture
- Information Architecture as an Extension of Web Design - Digital Web Magazine
- Ambient Findability: Findability Hacks - A Lisp Apart
- Topics: Information Architecture - Digital Web Magazine
Website Navigation
- Good Web Site Navigation - Reaching The Information Instantly - Mardiros Internet Marketing
- Website Navigation - HTMLSource
- Website navigation (a description) - London Borough of Richmond upon Thames
- More Than Just a Footer - Digital Web Magazine
- Where Am I? - A Lisp Apart
- Trying to Navigate Website Navigation - Six Revisions
Tabbed Navigation Design
- Sliding Doors of CSS - A Lisp Apart
- Sliding Doors of CSS, Part II - A Lisp Apart
- Centered Tabs with CSS - 24 Ways
Week 3 Links ~ HTML5 - Are we there yet?
- HTML5 Semantics - Smashing Magazine
- HTML5 Boilerplate - Frontend developers's base HTML/CSS/JS template
- Coding An HTML 5 Layout From Scratch - Smashing Magazine
- Structural Tags in HTML5 - Ordered List
- How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6 - net tuts+
Week 4 Links ~ Responsive Design
- Why We Shouldn't Make Separate Mobile Websites - Smashing Magazine
- Build a responsive site in a week (Part 1 of 5) - .net
- Responsive Web Design Techniques, Tools and Design Strategies - Smashing Magazine
- 50 fantastic tools for responsive web design - .net
- The state of responsive images - .net
- 15 fabulous responsive sites for your inspiration - .net
Week 5 Links ~ User Experience (UX)
Usability
- Smashing Magazine - 10 Principles of Effective Web Design
- Usability.gov - USA Government site promoting web usability
- Research-Based Web Design & Usability Guidelines - Free ebook
- useit.com - Jakob Nielsen's Website
- Usability articles - Digital Web Magazine
- User Interface Design articles - A Lisp Apart
- Usability Resources - Comprehensive list of usebility resources from WebsiteTips.com
- Web Site Usability Checklist - Webmaster Tips
- Web usability: The basics - Checklist by Webcredible
- Web Usability Quiz - Human Factors International
Usability Testing
- Practical Usability Testing - Digital Web Magazine
- 8 Guidelines forUsability Testing - Webcredible
- Usability Testing - Wikipedia
Week 6 Links ~ Accessibility
Accessibility Articles
- Accessibility Articles - Digital Web Magazine
- Accessibility Articles - A Lisp Apart
- Web accessibility articles & resources - Webcredible
- Web accessibility - Wikipedia
- Design and build accessible websites - RNIB
- Designing More Usable Web Sites - Trace Center
- Writing an Accessibility Statement - Humanising Technology
W3C Accessibility Guidelines
- Web Accessibility Initiative (WAI) - W3C
- Web Content Accessibility Guidelines 2.0 - W3C
- How to Meet WCAG 2.0 - W3C
Accessibility Testers
- WAVE Web Accessibility Evaluation Tool - Useful tool for creating a simple overlay of your page
- TAW - Very good evaluation tool with detailed feedback (Spanish with English translation)
- Total Validator - Excellent all-in-one validation service
- EvalAccess 2.0 - Web Service tool for evaluating web accessibility
- Cynthia Says - Accesibility test by HiSoftware
- AccessKeys - Colour contrast tester
- Note: Bobby is now owned by IBM and is not publicly available.
National Accessibility Guidelines & Regulations
- Wab Cluster - The EU Web Accessibility Benchmarking Cluster
- Web Guidelines - UK Govenment Accessibility Guidelines (under review)
- Delivering Inclusive Websites - A guide for the public sector - UK Government Cabinet Office
- Guide to good practice in commissioning accessible websites - BSi (PAS 78:2006) (PDF)
- Section 508 - US Accessibility Information
- Federal Ordinance on Barrier-Free Information Technology - Accessibility guidelines in Germany
Accessibility Statements and Help
- Web Access Centre - RNIB
- web publishing guide - University of Bath
- My Web My Way - BBC Website Accessibility
- Technical guidelines - University of Cambridge
Screen Readers
- JAWS Product Page - Freedom Scientific
- NonVisual Desktop Access (NVDA) - Open Source
- Screen Reader User Survey - WebAIM
- Accessibility Technology for Everyone - Microsoft
Access Keys
- UK Government Access Key Scheme - Directgov
- Access Key - Wikipedia
- Accesskey Standards - Clagnut
Additional Links ~ SEO and site promotion
Search Engine Optimisation
- Learn SEO - Excellent video describing the most important SEO principles by SEOmoz
- The Beginner's Guide to SEO - Excellent guide for beginners by SEOmoz
- Search Engine Optimization - Wikipedia
- SEO Chat - Lots of useful tools
- SEO Chat Forums - Lively discussion forum
- Search Engine Optimisation Articles - WebCredible
- Search Engine Optimization Tips - Microsoft Small Business Center
- Website Optimization Tips - DirectTraffic.org
- Webmaster Central Blog - Google
- SEO your web page for Google (Video) - Wordtracker
Page Rank
- Page Rank - Wikipedia
- Google's PageRank Explained - Web Workshop
- MyPagerank.net - PageRank tools and calculator
Additional Links ~ Analytics and competitor research
Google Tools
- Google Analytics - Free site-based statistics
- Google Webmaster Tools - Essential interface between Google and your website
- Google Insights for Search - Currently in beta but exceedingly good stuff
- How to use Google Analytics - beginners guide - Good, informative tutorial
- Google Analytics Help - Official support site
Google Alternatives
- Yahoo! Web Analytics - An alternative
- Clicky Web Analytics - A (simple) alternative
Server Statistics
- AWStats - Open source server-based statistics
- Webalizer - Open source server-based statistics
- Piwik - Open source alternative to Google Analytics
Web Statistics (general)
- Alexa Web Search - Website traffic analysis
- Quantcast - Visitor statistics and demographics
- Compete - Some free statistics with a commercial "pro" option
- Woopra - Live commercial analytics with a free trial option
- Seevolution - Visual analytics with heatmap overlay currently in beta and free
- WOT (Web Of Trust) - How trustworthy is that site?
- Website Grader - Website analyser and SEO scoring tool
- Informe.com - Website information tool
Web Statistics (specific)
- Gravity Insights - Real-time statistics for forums
- Wordpress.com Statistics - Visitor statistics for Wordpress
Domain Lookup Tools
- Domain Tools - whois lookup and domain information
- Nominet - The domain registry for all UK domains
Additional Links ~ Revenue generation through advertising
Advertising Programmes
Key Texts
Essential Text Books
- Building Findable Websites by review
- Designing Web Navigation by review
- Don't Make Me Think (2nd edition) by review
- Prioritizing Web Usability by review
- Web Accessibility: Web Standards and Regulatory Compliance by review
- Get into bed with Google: top ranking search optimisation techniques by review
- Deliver First Class Web Sites: 101 Essential Checklists by review
- The Art of SEO: Mastering Search Engine Optimization by review
Essential Periodicals
Further Reading
- Information Architecture for the World Wide Web (3rd edition) by review
- Designing Interfaces: Patterns for Effective Interaction Design by review
- The Elements of User Experience by review
- Simple Websites: Organizing content-rich web sites into simple structures by review
- Weaving the Web: Origins and Future of the World Wide Web by review
Essential Text Books
The books in this section form a core of texts that cover all the topics addressed during the Website Planning course. During the course, you will be asked to do weekly reading and in most cases, it will be from these books. Many of them are available from the library but you should probably aim to own a copy of 3 or 4 of them, with Aarron Walter's Building Findable Websites being top of your list.
Building Findable Websites: Web Standards, SEO, and Beyond
by Aarron Walter
I've been waiting for someone to write this book for some time. Essentially, Building Findable Websites is a good practice guide for people who actually build websites and who want them found. It describes how web pages should be built in order to make them visible on the web and covers topics such as the correct use of markup, how to name your files and folders, custom 404s, site search and how to create original and attractive content.
Most of these ideas are not new but this is the first book to bring them all together in a logical form and to express them in a coherent manner. This book is a "must have" for all serious web designers. My only criticism of the book is that it is too short. The book ends with an excellent chapter called "Putting Findability Into Practice", which is an action plan that readers can use for their own website. However, there is more to the book than is written between its covers. A companion website includes 5 "bonus" chapters as PDFs that really should be a part of the book - the one on traffic analysis is particularly useful. Still, taken as a whole, this is an excellent body of work - thank you Aarron Walter.
Building Findable Websites: Web Standards, SEO, and Beyond is available at Amazon.co.uk.
Avery Hill Library copies: 3 ~ view catalogue entry
Designing Web Navigation: Optimizing the User Experience by James Kalbach
In days gone by, web navigation may have merited a chapter in a book on web design, but here is an entire volume dedicated to the topic and it tells you all you need to know. The book is thorough and considers navigation in the context of information architecture, interface design, usability, business priorities, vocabulary and accessibility (to name but a few) and begins with an overview of navigation and a discussion of navigation types. The book is well illustrated throughout in full colour and succeeds in its aim of being the most comprehensive book on the subject.
Designing Web Navigation: Optimizing the User Experience is available at Amazon.co.uk.
Avery Hill Library copies: 3 ~ view catalogue entry
Don't Make Me Think (2nd edition) by Steve Krug
This book, subtitled "A common sense approach to web usability" is just that. It makes a point of stating the obvious and the not so obvious in order to give a complete picture of website usability. The book is printed in full colour and is thoughtfully illustrated - in fact, it's an object lesson in usability. Clear writing and wry humour make Krug's book a joy to read and he manages to get over some quite complicated ideas without you even noticing. There are also lots of excellent examples from real sites because as Krug points out "…you'll find that the sites I use as examples tend to be excellent sites with minor flaws. I think you can learn more from looking at good sites than bad ones." Well said.
If you follow all the excellent advice in this book, your websites will be a joy to use and your visitors will be able to find the information they are looking for, quickly and easily, with no blind alleys, no ambiguity and no frustration.
Don't Make Me Think is available from Amazon.co.uk.
Avery Hill Library copies: 4 ~ view catalogue entry
Prioritizing Web Usability by Jakob Nielsen and Hoa Loranger
More than six years after the original "Designing Wed Usability", comes an entirely new book from web usability guru Jakob Nielsen with its trademark no-nonsense cover design. This time however, his views are less hard line and he seems to accept that there is a balance to be struck between the aesthetic aspects of web design and absolute usability. This is a good thing. This may, in part, be the influence of his co-author who, I suspect is more pragmatic in her approach. Between them, they have written an excellent book and one that is bound to become as well read as Nielsen's original 2000 book.
There is a great deal of depth to the topics discussed and a great deal of authority in the way in which they are presented. Essentially, the book is the result of hundreds of hours of usability testing on a wide range of websites (although it does have a bias towards commercial and e-commerce sites). It is based on real-world testing and real-world research and as such it is an extraordinarily valuable work. One does wonder why Neilsen Norman Group would want to pass all this on but it is clear that their clients are large corporate businesses and they will most likely continue to do business with the group. So we, the ordinary working web designers get to benefit from this material at a very reasonable price.
Prioritizing Web Usability is printed in full colour with many excellent examples and is well structured and clearly written (well, what would you expect from experts in usability). Topics covered in the book include; the web user experience, searching, navigation, typography, writing for the web etc. There is very little to criticise here and they appear to have thought about everything relevant to the subject and more. Although he book covers many of the same topics as Steve Krug's but it takes a much more analytical approach and between them, the two books give a good balance.
Prioritizing Web Usability is available from Amazon.co.uk.
Avery Hill Library copies: 3 ~ view catalogue entry
Web Accessibility: Web Standards and Regulatory Compliance
by Jim Thatcher et. al.
The clear goal of this book is to be the authority on web accessibility and it scores well by all measures. In all, there are contributions from 11 authors; all experts in their own field and this gives the book considerable weight, both intellectually and physically (it's 648 pages long). It goes without saying that this book is comprehensive and it's certainly not a book you should aim to read cover-to-cover but the individual chapters are easily digestible and generally well written.
The book is intended to be geographically generic but obviously, regulations vary from one country to another. Fortunately, chapter 17 gives a run-down of regulations in a number of countries, including the United Kingdom and the European Union; both of which are important to us.
Web Accessibility: Web Standards and Regulatory Compliance is available from Amazon.co.uk.
Avery Hill Library copies: 3 ~ view catalogue entry
Get into bed with Google : top ranking search optimisation techniques
by Jon Smith
This is a small and humorously written book and yet it contains some excellent information and advice.
As we all know, the web is ruled by Google and it decides which websites are found and which are not. So it makes sense to know how it thinks and to design websites accordingly. The book also describes how to improve your PageRank, the importance (or not) of meta tags, why you should be listed in DMOZ, and a whole lot of other vital bits of information. There are other books on this topic but this one wins because it is clear and concise.
Get into bed with Google: top ranking search optimisation techniques is available from Amazon.co.uk.
Avery Hill Library copies: 4 ~ view catalogue entry
Deliver First Class Web Sites: 101 Essential Checklists by Shirley Kaiser
This book isn't designed to be read cover-to-cover, it is a guide, in the form of a series of checklists covering a range of topics from coding through navigation, usability, information architecture, web site optimisation, accessibility (and others) to site launch - it's a pre-flight check. However, the coverage in each section is good and it should also be used as a guide to website development from the planning stage. The early chapters are particularly good and set out how a design brief should be put together. Topics such as "Establishing your Target Audience" and "Identifying your Initial Goals" are crucial to the success (or failure) of any web project and yet it is rarely mentioned in most text books.
Deliver First Class Web Sites: 101 Essential Checklists is available at Amazon.co.uk.
Avery Hill Library copies: 3 ~ view catalogue entry
The Art of SEO: Mastering Search Engine Optimization by Eric Enge, Stephan Spencer, Rand Fishkin, and Jessie C Stricchiola
The Art of SEO is comprehensive. It's not a short amusing guidebook to the As and Bs of SEO, it's a thorough explanation of the A to Z of SEO. The world of SEO is complex and confusing with many conflicting views but this book takes us calmly through the whole thing, giving excellent and well considered advice along the way. From the preface:
"We were inspired to create it (the book) because we have not previously seen a comprehensive work on the topic of SEO, and we believe that it is very much needed in our industry."
Quite right, and this book is set to become the standard text on the subject. In almost 600 pages and 13 chapters, it covers all the bases and the fact that it's written by 4 authors means you're getting the best advice from 4 experts. Some will want to read this book, cover-to-cover, others will dip into it and use it as a reference - the book lends itself to either method. If you only buy one book on SEO, this should be the one.
The Art of SEO: Mastering Search Engine Optimization is available at Amazon.co.uk.
Avery Hill Library copies: 3 ~ view catalogue entry
Essential Periodicals
The Web is ever-changing. New ideas in webpage design come and go and you need to keep up-to-date. Sadly, most web design text books are out-of-date after 2 or 3 years and the best way to stay in touch with emerging ideas is to subscribe to regularly published magazines. The three below are probably the best around but there is also a body of work published every day in blogs and it's well worth searching out the best of them.
.NET Magazine (published monthly)
.NET magazine has been around for a while but over the past few years it has matured into a magazine aimed at professional web designers and serious amateurs. The monthly articles are always relevant, well researched and full of useful information. The magazine has benefited from the work of an advisory panel of net worthies, including Andy Budd and Andy Clarke.
Each month also includes a number of technical articles on various topics relevant to the course by some excellent technical writers, including Craig Grannell. It is the best paper-based web design magazine and I recommend you take out a subscription.
A List Apart (online)
A List Apart "for people who make websites" is an e-zine that published new articles monthly. All content is free and there is now an extensive archive of articles on a range of relevant topics.
The articles are informative and well written and are often by well-known web luminaries like Dave Shea and Jeffrey Zeldman. This is all good stuff and free, so just read it and/or subscribe to the RSS feed.
Digital Web Magazine (online)
Digital Web Magazine publishes new articles at the rate of one or two a week, most weeks. The articles are of the same high quality as those at ALA and are also written by well-known authors. If anything, the range of topics here is wider than on ALA but they are always relevant. You can sign up for a weekly newsletter that will alert you to the publication of new articles or you can subscribe to the RSS feed.
Smashing Magazine (online)
Smashing Magazine is a fantastic resource. Articles are published daily and its focus is graphic design for the web. That's not to say there aren't plenty of technical articles on CSS, usability and interface design - there are, but it's a great place to go for inspiration and design ideas. The site also has a tutorials section, covering many graphic techniques and applications like Photoshop.
Further reading
The books below all fill in gaps, overlap and expand upon the "Essential Text Books" listed above. You do not need to own them but they may be used as good alternatives or simply to explore a bit more of the subject.
Information Architecture for the World Wide Web (3rd edition)
by Louis Rosenfeld and Peter Moreville
If you need to know about Information Architecture, this book has just about everything. The book assumes no prior knowledge of this area and begins with a definition of Information Architecture. Actually, there are 4 of them, take your pick. The second definition seems to be the most widely applicable; "The structural design of an information space to facilitate task completion and intuitive access to content".
Although the book gives you the hard detail, it is also very readable. It's written in a very easy style and the authors are always careful to point out that theirs isn't the only view on this subject. The book is, in fact, a comprehensive and well balanced primer and reference to this relatively new area of study. This second edition of the book is almost completely rewritten and there is very little flab on any of its 460 pages. This book is the essential guide to creating well-structured websites.
Information Architecture for the World Wide Web is available from Amazon.co.uk.
Avery Hill Library copies: 1
Designing Interfaces: Patterns for Effective Interaction Design
by Jenifer Tidwell
This book is about interface or interaction design generally, but inevitably, many of the examples used are from the web. It begins by describing how people interact with interfaces like computer applications and web pages and then goes on to describe how best to arrange content and design navigation in order to accommodate peoples preferences and prejudices. It is a well-written book, printed in full-colour and using some very good examples that clearly illustrate the points being made.
Designing Interfaces: Patterns for Effective Interaction Design is available from Amazon.co.uk.
Avery Hill Library copies: 2
The Elements of User Experience by Jesse James Garrett
This is a relatively slim volume (at just under 200 pages) that delivers a single message but that message is very important. This book is based upon the concept of “user centred design” and sets out to define a website as a “user experience”. It does a masterful job of collating and analysing all of the parameters that a web designers and others must consider when building a site and designing a user interface. The book expands upon Garrett's own theory model, which divides the user experience into five layers or “planes”, namely Surface, Skeleton, Structure, Scope and Strategy. Each plane is dealt with in detail and the book touches upon many areas such as page layout, information architecture and the use of contrast and uniformity to name but a few.
The Elements of User Experience propounds an excellent method for web design and is available from Amazon.co.uk.
Avery Hill Library copies: 1
Simple Websites: Organizing content rich web sites into simple structures
by Stefan Mumaw
This is a gem of a book. Stefan Mumaw has taken 24 websites and in each case, describes how they were designed. The book is illustrated not only with images of the finished websites but also with the original designers sketches, describing how site structures and page layouts came to be.
The chosen websites all have something in common - they are simple; that is to say, they all look simple. Each one has a very clean and clear interface but in many cases, the content is rich and complex. Here is the crux of the book. How do good web designers turn complex content into simple, easy to use websites that look great? Read the book.
In addition to helping you get inside the head of the designer, this book is a great source for design inspiration. In most cases, the chosen example sites are beautifully laid out, make great use of colour, typography and image, and use intuitive navigation.
Simple Websites: Organizing content rich web sites into simple structures is currently out of print but second-hand copies are available from Amazon.co.uk
Avery Hill Library copies: 1
Weaving the Web: Origins and Future of the World Wide Web
by Tim Berners-Lee
The first thing to say about this book is that it is essential reading for every student on the Website Architecture programme. The second thing to say is that it is not the most readable of books. The content, however, more than justifies the effort.
Essentially, the book gives a first-hand account of the development of the web. The first half (or so) focuses on the work done while Tim Berners-Lee was at CERN and developments shortly after that, including the setting up of the W3C. This is essentially an interesting history lesson and it constantly amazed me how recent were the events he describes. The latter part of the book covers Berners-Lee's thoughts on the current state of the web (this book was published in 2000 and is already showing its age) and his hopes for the future. A lot of this latter part is very interesting and looks at the impact of the web on society and politics; it also postulates what he refers to as the "semantic web". If he is right, the future of the web could be amazing.
Weaving the Web is available from Amazon.co.uk.
Avery Hill Library copies: 1
A Web Design Toolkit
Although most web designers will prefer to work with applications like Dreamweaver and Photoshop for maximum flexibility and functionality, it isn't really necessary. A perfectly adequate toolkit can be had for free. The applications listed below are all you need to create brilliant web pages.
- Notepad++ - Excellent open source code editor with syntax highlighting.
- FileZilla Client - Probably the best free/open source FTP client.
- Paint.NET - Amazing free image and photo editor, similar interface to Photoshop.
- Firefox - The open source and standards compliant browser.
- Web Developer Toolbar for Firefox - Indispensable set of browser utilities for web designers.
- Firebug for Firefox - Edit CSS live in a browser window; ideal for those pixel-perfect moments.
- Code Burner for Firefox - Excellent HTML and CSS reference guide from SitePoint.
Write your XHTML and CSS code in Notepad++, create and edit your images in Paint.NET, preview the results in Firefox and then upload to your web server using FileZilla.
If you prefer working in an integrated development environment, take a look at Aptana Studio. In a nutshell, it's Dreamweaver without the WYSIWYG editor and because it's open source, there is a free version.
