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.

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.

The web designer must also ensure that designed sites are optimised for search engine indexing so that they can easily be found and successfully categorised and it is important to understand how websites can gain high page rank status on search engines such as Google. In order to do this, a good understanding of SEO (search engine optimisation) techniques and website analytics is essential. Finally, it is often important that websites are self-funding and web designers must therefore be aware of the various revenue generation models available.

Aims and Outcomes

  • To have an understanding of server-side technologies and how they may be employed to create dynamic websites.
  • Understand the use of databases in managing web content.
  • To develop the skills needed to efficiently build and manage larger websites.
  • To learn how to build findable websites.
  • To learn how to optimise and promote websites.
  • To learn how to generate revenue from a website through advertising.

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.

Full-time & part-time, first year students

2014-15 Session
DateRoomTitle
8th Jan 2015 Self Study
15th Jan 2015 (am/pm)1015/1014PHP for site modularity
22nd Jan 2015 (am/pm)1015/1014PHP and MySQL for dynamic content
29th Jan 2015 (am/pm)1015/1014Website security
5th Feb 2015 (am/pm)1015/1014The .htaccess file and other oddities
12th Feb 2015 (am/pm)1015/1014SEO, SEM and site promotion
19th Feb 2015 (am/pm)1015/1014Revenue generation models

All face-to-face sessions are 3 hours long and take place on Thursday mornings (am); beginning at 10.00am or afternoons (pm); beginning at 2.00pm unless otherwise indicated.

See the programme teaching schedule for an overview of all courses.

Seminar Schedule

5th Feb: Cathryn, Matthew, Wes

12th Feb: Mam Lai, Natalie, Barbara, James

19th Feb: Milad, Dan, Catia, Costas, Phil, Justeen

Project 2 Schedule

26th Feb: Interim Crit

12th Mar: Submission and Presentation

Course Documents

There are currently 13 files in this section

File Listing
  Filename Size (KB) Date Modified
Class 01 - Coursework.pdf 179.5 28th Jan 2014
Class 01 - PHP for Site Modularity.pdf 1,489.3 19th Jan 2014
Class 02 - Coursework.pdf 118.0 28th Jan 2014
Class 02 - MySQL Databases with PHP.pdf 2,559.2 24th Feb 2014
Class 03 - Coursework.pdf 123.1 4th Feb 2014
Class 03a - PHP with URL Parameters.pdf 235.3 28th Jan 2014
Class 03b - Website Security.pdf 1,803.8 28th Jan 2014
Class 04 - Coursework.pdf 154.0 24th Feb 2014
Class 04 - htaccess and other oddities.pdf 2,093.0 6th Feb 2014
Class 05 - Coursework.pdf 88.9 24th Feb 2014
Class 05 - SEO, SEM and Site Promotion.pdf 3,495.4 11th Feb 2014
Class 06 - Coursework.pdf 88.7 24th Feb 2014
Class 06 - Revenue Generation Models.pdf 902.8 19th Feb 2014

Examples

There are currently 9 files in this section

File Listing
  Filename Size (KB) Date Modified
01-php-modular.zip 2.9 20th Jan 2014
02-php-news.zip 18.4 20th Jan 2014
03-php-articles-modular.zip 131.6 27th Jan 2014
03-php-articles.zip 140.4 27th Jan 2014
404.html 0.6 28th Mar 2013
php-part-1.html 4.3 20th Jan 2014
php-part-2.html 4.7 21st Jan 2014
php-part-3.html 3.7 21st Jan 2014
php-part-4.html 4.9 21st Jan 2014

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
  • Seminar: 45%
  • Small Business Website Revisited: 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 select a topic from the list below 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. Seminar topics are:

  • Responsive images
  • Micro-formats
  • CSS columns
  • Web hosting – options and recommendations
  • CSS media queries
  • CSS vendor prefixes – do we need to use them?
  • Image optimisation
  • Icon fonts – how to make your own
  • Flat file content management systems - a review
  • Useful tools for web designers – code editors, FTP clients, online apps…
  • CSS pre-processors
  • How our websites are used – analytics
  • Is mobile more important than desktop? – current trends
  • Flat design: web design fashion or is it here to stay?
  • Web font services – options and recommendations
  • CSS class naming and BEM - contemporary practice

No duplication of topics allowed - each student presentation should be unique.

Speaker Deck

After giving your seminar, please upload your presentations to our group account at Speker Deck using these details.

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 with well considered SEO features. The improved site should also be responsive with a mobile first approach to layout. You may also want to improve the ease of maintenance by applying some modularity with PHP server-side includes. UX features such as custom error pages should be added.

Submission deadline for this project is 12th March 2014 and there will be an interim crit on 26th February 2014.

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.

Class 01 Links ~ PHP for site modularity

PHP Tutorials and Introductions

Dates and Times with PHP

Random Images with PHP

Current Page Navigation with PHP

Modular websites with PHP includes (server side includes)

General PHP resources and articles

Class 02 Links ~ MySQL databases with PHP

General MySQL resources and articles

MySQL tutorials

PHP & MySQL useful stuff

PHP & MySQL security

There are literally hundreds of open source and pay-for web applications that use PHP and MySQL. The lists below merely indicate the most popular and those that you should know about.

Forum Software

Blog Software

CMS (Content Management System) Software

Portal Software

Wiki Software

PHP script libraries

Class 03 Links ~ Website Security

Methods of Attack

Help and Advice

Class 04 Links ~ The .htaccess file and other oddities

.htaccess

Passwords

Rewrite URLs

CHMOD

robots.txt

sitemap.xml

favicon.ico

Class 05 Links ~ SEO, SEM and site promotion

Search Engine Optimisation

Page Rank

Week 06 Links ~ Revenue generation models

Advertising Programmes

Additional Links ~ Analytics and competitor research

Google Tools

Google Alternatives

Server Statistics

Web Statistics (general)

Web Statistics (specific)

Domain Lookup Tools

Key Texts

Essential Text Books

  • Building Findable Websites by Aarron Walter review
  • Designing Web Navigation by James Kalbach review
  • Don't Make Me Think (2nd edition) by Steve Krug review
  • Prioritizing Web Usability by Jakob Nielsen and Hoa Loranger review
  • Web Accessibility: Web Standards and Regulatory Compliance by Michael R. Burks review
  • Get into bed with Google: top ranking search optimisation techniques by Jon Smith review
  • Deliver First Class Web Sites: 101 Essential Checklists by Shirley Kaiser review
  • The Art of SEO: Mastering Search Engine Optimization by Eric Enge, Stephan Spencer, Rand Fishkin, and Jessie C Stricchiola review

Essential Periodicals

  • .NET Magazine (published monthly) review
  • A List Apart (online) review
  • Digital Web Magazine (online) review
  • Smashing Magazine (online) review

Further Reading

  • Information Architecture for the World Wide Web (3rd edition) by Louis Rosenfeld and Peter Moreville review
  • Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell review
  • The Elements of User Experience by Jesse James Garrett review
  • Simple Websites: Organizing content-rich web sites into simple structures by Stefan Mumaw review
  • Weaving the Web: Origins and Future of the World Wide Web by Tim Berners-Lee 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

Building Findable Websites: Web Standards, SEO, and Beyond

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

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

Don't Make Me Think

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

Prioritizing Web Usability

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.

Web Accessibility: Web Standards and Regulatory Compliance

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

Get into bed with Google : top ranking search optimisation techniques

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

Deliver First Class Web Sites: 101 Essential Checklists

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: Mastering Search Engine Optimization

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

.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

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

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

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

Information Architecture for the World Wide Web

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

Designing Interfaces: Patterns for Effective Interaction Design

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

The Elements of User Experience

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

Simple Websites: Organizing content rich web sites into simple structures

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

Weaving the Web: Origins and Future of the World Wide Web

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.

Aptana StudioWrite 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.

Copyright David Watson 2005–2014
XHTML, CSS