Webpage Design: Reading
Essential Text Books
The books in this section form a core of texts that cover all the topics addressed during the Webpage Design 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 at least 3 or 4 of them, with Craig Gannell's Essential Guide to CSS and HTML Web Design being top of your list.
What is Web Design? by Nico Macdonald
This is a gem of a book. For once, a book that treats web design as just another field of Design endeavour and talks about it intelligently within the context of the wider world of graphic and communication design. Many books on this topic tend to get bogged down by issues involving current and changing technologies. This book takes a much more objective look at web design and is much more rewarding as a result.
The author describes the book so: "Web design has much in common with other areas of design and this book begins by establishing general design principles and applying them to the web" This book doesn't advocate absolute rules, as rules are specific to particular scenarios. Likewise it advocates a general model for the design process rather than an absolute approach. It doesn't address technical issues such as coding and programming, as these change from month to month and can be better learned online."
For more information, see the companion web site, which contains updates and links. What is Web Design? is available at Amazon.co.uk.
Avery Hill Library copies: 1
The Essential Guide to CSS and HTML Web Design by Craig Grannell
At long last, here is a book that talks about "a modern, modular approach to standards-compliant web design" in a clear, logical and friendly manner. No small feat because contemporary web design practice is complex and a good understanding of a whole range of topics is required in order to master the art.
Craig Grannell approaches the topic by looking at various aspects of web design, with chapters like "Working with Type" and "Page layouts with CSS" rather than the more prosaic approach of many code-based books. The initial chapters of the book give a comprehensive background and primer to HTML and CSS but avoid the mistake of looking at code in the abstract. All through the book, code examples are illustrated with the rendered result so that the reader can make a clear connection between code and image.
This is an excellent book that covers a lot of ground (it even includes some useful javascript techniques) and is probably the best single volume introduction for anyone serious about web design.
The Essential Guide to CSS and HTML Web Design is available at Amazon.co.uk.
Avery Hill Library copies: 4 (1 on study loan)
Visual Design for the Modern Web by Penny McIntire
This is one of only a few books that attempts to make the crossover between graphic design principles and the coding of web pages and in the main it succeeds very well. In fact, it goes beyond visual design and introduces the idea of design for usability with a very good chapter on navigation.
The book is written for web design beginners but it has great aspirations. Rather than simply plodding through a series of themed chapters, the book begins with a couple of excellent chapters that give a firm grounding in the concepts of visual design and its relation to the functioning of the site (interaction design). In chapter 2, "Site Analysis", the author devises a very useful schema that will help beginners understand the entire web design process.
The book includes one of the best chapters on colour, covering, colour theory, a good explanation of hexadecimal values and a suggested approach for the creation of colour schemes. Throughout the book, web design principles are clearly stated and explained.
Visual Design for the Modern Web is available at Amazon.co.uk.
Avery Hill Library copies: 1
The Art & Science of CSS by Cameron Adams, Jina Bolton, David Johnson et. al.
This book takes the coding principles outlined in Craig Gannell's book and combines them with some of the design principles of Penny McIntire's book and demonstrates some sound methods for creating graphically rich web pages using well-formed and semantically correct code. Very often, technical books fail to capture the imagination because the illustrated results are rather lacklustre but the examples in this book excel in both the technical and visual.
The book contains some very useful techniques for dealing with headings, navigation, backgrounds (want to know how to do those rounded corners?), tables and forms. All of a sudden you will realise how lines of HTML code can become beautiful web pages with the careful application of some CSS.
The Art & Science of CSS is available at Amazon.co.uk.
Avery Hill Library copies: 2
Transcending CSS: The Fine Art of Web Design by Andy Clarke
Andy Clarke's "Transcending CSS", sub-titled "the fine art of web design", is a fantastic book. I very much hope that it is the first of a new breed of web design primers – books that consider web design as a synthesis of the artistic and the technical. As Molly Holzschlag says in the forward to this book, "One of the greatest challenges Web designers and developers face is to bridge the communication gap between highly visual and highly linear thinkers. It's only the rare individual who has been able to show a balance between sophisticated, innovative design and progressive, complex technical issues." Clearly, Andy Clarke is just such a person.
The book itself is full of great examples of web design accompanied by code snippets and Clarke's cogent commentary on how they relate and why such an approach is considered good practice. Each example is also there to make a point and to carry the book forward. This is not a "tips'n'tricks" book, it is structured in a logical way and explains and demonstrates a number of important principles (such as the importance of semantic markup) in a clear and confident manner. Neither is this a beginner's book. Clarke assumes a basic understanding of XHTML and CSS and the books aim is to take the web designer to a higher plane.
The book is divided into 4 sections; Discovery;, which introduces Clarke's concept of "transcendent CSS" and includes many of the contemporary ideas about the use of CSS. Process considers an approach to web design that perfectly integrates graphic design with coding and focuses on finding coding solutions to graphic design problems. Part 3, Inspiration is a novelty for a book on web design; with little or no coding, its main focus is on the art and graphic design process and there is a very good section on the use of grids. The final part, Transcendence considers the use of some advanced CSS techniques with a particular emphasis on positioning and the arrangement of images and rounds off with a look at the future and CSS3.
This is a book that no web designer should be without and I fully expect to have to buy a second copy in 12 months time when the pages start falling out through overuse. If I were asked to encapsulate this book in as few words as possible, the best I could come up with would be "moodboards and markup". The best DESIGN book for web designers by a country mile.
Transcending CSS: The Fine Art of Web Design is available from Amazon.co.uk.
Avery Hill Library copies: 1
Web Style Guide by Patrick J. Lynch and Sarah Horton
The Web Style Guide (2nd Ed.) by Patrick J. Lynch and Sarah Horton is a relatively slim volume (just 223 pages) but it packs a lot in. The book is concise and clear and covers all the basic considerations of site and page design. In fact, this is the book you should read first if you are considering building a web site. It covers topics such as site hierarchy, page layout, typography and web graphics to name but a few. The book contains lots of example sites and explanatory diagrams, illustrated in full colour. This is another very important text for the Webpage Design course and it perfectly compliments "Web Design in a Nutshell" by covering the non-technical areas of the course.
Despite the fact that this book is now a few years old, it is not out-of-date because the authors have been careful not to focus on the technologies used for building websites nor the browsers used for displaying them. Rather, they consider the generic design elements of webpage and website design. These basic design principles hold true, irrespective of the technological context. However, there are one or two places where the reader should use caution. For example, on page 112 in the section entitled "Layout tables that make sense", the authors state that "The best solution is to use CSS instead of tables to create columns and to control spacing, but… browser support remains too patchy and inconsistent for stylesheet positioning to be a real option". That statement may have been true when the book was written but today, with better browser support, CSS layout is very much the method of choice.
Despite the health warning, this book is excellent and it's even available free on the web in a HTML version at www.webstyleguide.com. However, should you need a paper copy, you can buy it from Amazon.co.uk.
Avery Hill Library copies: 4
Design Elements: A Graphic Style Manual by Timothy Samara
Timothy Samara's book is a primer that illustrates and discusses all the basic principles of graphic design in a direct and easily digestible format. The book consists of 5 chapters; "Form and Space", "Color Fundamentals", "Choosing and Using Type", "The World of Image" and "Putting it All Together". Each one is lavishly illustrated with excellent examples that clearly illustrate the topic under consideration.
In addition to the 5 chapters, the reader will learn the author's "Twenty Rules for Making Good Design", a very good checklist of what to do and what to avoid. Although a book of this nature cannot contain everything that may be relevant, this book comes close and is the best one-volume introduction to graphic design I have seen.
Design Elements - A Graphic Style Manual is available at Amazon.co.uk.
Avery Hill Library copies: 4
Universal Principles of Design by William Lidwell, Kritina Holden and Jill Butler
Universal Principles of Design, subtitled "100 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design" is essentially a directory of all those design terms and "buzz phrases" that you know you ought to know the meaning of. The authors have chosen 100 design ideas and concepts and devote a double-page spread to each. Concepts such as Ockhams Razor, Fibonacci Sequence, Iteration and Legibility (the basics that all designers must understand) are beautifully described and illustrated with excellent examples to illustrate each point.
This is a general design reference although website examples are used where appropriate. All students of design should read this book and all designers should at least consider it a check list for their own knowledge and understanding.
Universal Principles of Design is available at Amazon.co.uk.
Avery Hill Library copies: 4
Essential Reference Books
You may not need these books in the first instance but as your work develops, you may find that you need something more comprehensive than the references that are often appended to most text books.
The Ultimate HTML Reference by Ian Lloyd
It may seem a bit geeky to have a whole book that just tells you what all the HTML tags are, what they do and what parameters they can use; oh, and how the various flavour of browser render them, but when the chips are down, a book like this can save your life. Well, not your life, obviously but it could save your sanity.
Since buying this book, I have found myself coming back to it again and again - it really is the authority. Not only does it contain references to all the tags you use every day but it also contains references to those tags and parameters you never knew existed. In short, this book helps you increase the width your knowledge of HTML and not just the depth.
The Ultimate HTML Reference is available in an online version and at Amazon.co.uk.
Avery Hill Library copies: 1 on order
The Ultimate CSS Reference by Tommy Olson & Paul O'Brien
This book is possibly even more useful than its HTML partner because the browser support for CSS is much more variable than that for HTML and this book documents which browsers support the various CSS properties and which do not. Again, this can be a real sanity-saver for those occasions when the browser is just not rendering a page the way you intended.
The book is organised by property type but fortunately also includes an alphabetic index, so you always have two chances of finding what you need. There is also an excellent first chapter (What is CSS?) that describes how CSS works, the syntax of CSS rules and how to link CSS with your HTML pages.
The Ultimate CSS Reference is available in an online version and at Amazon.co.uk.
Avery Hill Library copies: 1 on order
Web Design Index by Content.02 compiled by Günter Beer
If you need a little inspiration for the design and layout of your website, this is a great place to start. The book is organised by website type, so there are sections such as "Architecture & Interior Design", "Design & Illustration", "Food & Drink", "Internet", "Photography" etc. The variety of sites is good, ranging from graphic-strong to text based and in all cases, the design is exemplary. Such indexes are often stuffed with Flash-based site designs because they are often the most graphically rich. To its credit, this book also features a high proportion of XHTML/CSS sites and clearly demonstrate how such techniques can be used to create beautiful, sites.
Web Design Index by Content.02 is available from Amazon.co.uk.
Avery Hill Library copies: 1
Also available; Web Design Index by Content.03: 1
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.
Designing with Web Standards by Jeffrey Zeldman
This is a very important book. In Designing with Web Standards, Jeffrey Zeldman describes the way websites were coded in the twentieth century, clearly explains why this is now wrong and demonstrates how twenty-first century websites should be coded. The common perception is that designing websites to web standards is onerous for the designer and transparent to the user - naturally, many designers choose to ignore web standards. Zeldman demonstrates that working with standards, creating semantically correct XHTML in conjunction with structural CSS is, in fact, liberating rather than oppressive.
Some may fear that this book will give them a hard time and that Zeldman (standards guru) will push web standards for the sake of web standards. Nothing could be further from the truth. Zeldman is himself a website designer and as such, he delivers a very pragmatic approach to coding. The examples in the book are mainly based upon XHTML 1.0 Transitional (not Strict). Zeldman even covers the use of tables for page structure, heresy to most hard-line standards coders. The truth is that Zeldman is the best sort of evangelist. One who tells you it's OK not to go by the book if that seems impractical and you won't burn in hell as a consequence.
The book is also very instructive in the way it describes the development of web browsers and helps the reader to make sense of the many peculiarities that some browsers exhibit.
This may all sound rather dull but Zeldman has a very personable approach to technical writing. He is aware of the arcane nature of much of his subject matter and does a very good job of making it accessible and occasionally humorous.
This book has changed the way many web designers think and design. Whether you are a web design beginner or a seasoned professional, this book must be read; it will help you form opinions on web coding and will certainly help you to create better sites.
Designing with Web Standards is available from Amazon.co.uk.
Avery Hill Library copies: 1 (1st Ed.)
HTML, XHTML & CSS (sixth edition) by Elizabeth Castro
Elizabeth Castro's book is an excellent start for (X)HTML beginners. It assumes nothing and there is lots of context (in the form of an excellent introduction to the book and useful chapter introductions) to help you understand how things work even before you start with (X)HTML itself. This 6th edition has been completely rewritten and is printed in full colour. The book continues the transition, begun in the 5th edition, between old-style coding and modern coding. It treats XHTML and CSS as partners in the webpage design process. The only remaining vestige of old-style coding is in Chapter 16 on Tables where tables are considered as a way of structuring a page layout. However, in the introduction to that chapter, the author is very careful to put this into context. The book also encourages readers to consider working to the latest XHTML standards and explains the importance of the DOCTYPE. The logic and reasoning behind the various editorial decisions in this new edition cannot be faulted and the content is first rate.
The working sections of the book are simple and clear and slowly build to give the reader lots of confidence. Lots of good examples showing the (X)HTML code and the browser results help you make the conceptual link between the two. One might imagine that a book of this sort is very quickly out-of-date but the author has taken the very sensible decision to work with the forthcoming IE7 browser as well as the latest versions of FireFox and Safari so that it remains current for as long as possible. A number of chapters from the 5th edition have been dropped. Those on Frames and those on depreciated XHTML tags. This in itself is good news, even better news is that there are new chapters and sections on multimedia, SEO, handheld devices, syndication and podcasting.
This remains a truly excellent book. For more information, see the companion web site, which contains a full table of contents and a short extract. HTML for the World Wide Web is available at Amazon.co.uk.
Avery Hill Library copies: 4
Web Standards Solutions by Dan Cederholm
OK, so you learned about XHTML and you learned about CSS and you even learned about how they can work together. But what about technique and method? What is the best practice for creating navigation bars? Never fear, Dan Cederholm is here to show you how.
In truth, many of the methods described in this book are now standard practice for the seasoned web designer but for the beginner who has just got to grips with XHTML and CSS, this book is invaluable. The book focuses on best practice coding for the most common page elements such as headings, navigation, forms, page layout, styling text and, of course, image replacement. The book is well written and although it deals with some complicated issues, it does so in an easy and engaging way.
Web Standards Solutions is available from Amazon.co.uk.
Avery Hill Library copies: 1
CSS Mastery (Advanced Web Standards Solutions) by Andy Budd
As its title suggests, this book picks up where Dan Cederholm's book (Web Standards Solutions) leaves off. Essentially, Andy Budd gives us more of the same. More methods, more power, and being a more recent publication, more "now". The book covers many of the same topics as Designing with Web Standards but just takes them to the next level. The two books, though, are not interchangeable. Beginners are strongly advised to work with Dan Cederholm's book first and then move on to this one. There is lots of really nice stuff in this book but if I were pressed to pick one section over the others, it would be the two chapters on Styling Links and Creating Nav Bars. They contain some lovely methods with beautiful results.
CSS Mastery (Advanced Web Standards Solutions) is available from Amazon.co.uk.
Avery Hill Library copies: 2
Simply JavaScript by Kevin Yank & Cameron Adams
The best JavaScript book for beginners used to be "JavaScript for the World Wide Web" by Tom Negrino and Dori Smith but it has lost it's way in recent editions and has failed to keep up with JavaScript's recent renaissance. So, the crown for best beginner's book on JavaScript (in my opinion) goes to "Simply JavaScript" by Kevin Yank and Cameron Adams. Published in June 2007, the book is written from the ground up as a modern introduction to JavaScript for those who have never done any scripting before.
The book begins by placing JavaScript in context; so before a line of code is written, the reader is given a tour of the three layers of the web (structure, presentation and behaviour). Chapter 2 gives a very simple and clear introduction to programming with JavaScript covering such basics as syntax and data types etc. Chapter 3 introduces the DOM and puts it at the heart of JavaScript development. Chapter 4 looks at JavaScript events and uses some great examples to illustrate the concepts. Thereafter, chapters focus on specific webpage functions such as animation and the enhancement of forms. Of course, no modern book on JavaScript can be complete without a chapter on Ajax and this book does not disappoint. There's a very good introduction to the topic and some good examples to back-up the ideas.
Despite the fact that this book is aimed at beginners, it is comprehensive and covers all the important topics thoroughly, is written in a mature but easy manner and is well illustrated. More seasoned web designers may prefer Christian Heilmann's "Beginning JavaScript with DOM Scripting and Ajax" but for those just starting out, Simply JavaScript is just the ticket. Best of all, the first 3 chapters are available as a free download from Sitepoint.
Simply JavaScript is available from Amazon.co.uk and Sitepoint.
Avery Hill Library copies: 3
Web Design in a Nutshell (third edition) by Jennifer Niederst Robbins
Web Design in a Nutshell (3rd Ed.) by Jennifer Niederst Robbins gives a very useful overview of all aspects of the Web Design and Content Planning programme. It provides a one volume "bible" of almost everything you need to know in the technical sphere of web design. Not so much a "nutshell" as an 800 page tome but very reassuring to have on your desk as a one-stop reference. This third edition has been completely rewritten for compliance with XHTML 1.0 and CSS 2.1. The book is in six parts:
The Web Environment is a comprehensive explanation of the context within which web design takes place, including discussions on web browsers, web standards, web servers, accessibility and internationalisation.
The Structural Layer: XML and (X)HTML, covers a lot of the same areas as the Elizabeth Castro book except that the information is presented for reference rather than for structured learning. It's always good to have a second opinion and I would not consider one book a replacement for the other. One surprising inclusion is the chapter on Frames but as you might expect, this is dealt with sensibly with a discussion of relevant DOCTYPEs and the various pros and cons.
The Presentation Layer: Cascading Style Sheets occupies almost a quarter of the book and provides as much information on the topic as some of the dedicated titles currently available. Again, the information is structured for reference rather than learning but the content is invaluable.
The Behavioral Layer: JavaScript and the DOM is a relatively short section on JavaScript and DOM (Document Object Model) scripting. This provides a good introduction to the topic and there's even a brief look at AJAX but there are now a flood of new titles covering this area in more detail.
Web Graphics is another relatively short section, covering all the common raster file formats, including animated GIFs and provides just about all the information you need on the topic.
Media is a comprehensive look at the various common media types you might want to add to a webpage, with chapters on audio, video and flash. There is also a chapter on printing from the web which includes details on print style sheets, PDF and Flash printing.
In addition, there are five comprehensive appendices, which provide useful look-up tables for HTML, CSS, characters etc.
The strength of this book is in its depth and it's important to note that the author has not been shy of inviting contributions from others for specific areas outside of her domain. The chapters on accessibility and DOM scripting, for example, are written by experts in their field.
Although the book runs to almost 800 pages, none of them are wasted and the book does exactly what the author intended; it forms a superb one-stop reference. What else would you expect from a book that calls itself "Web Design in a Nutshell"? However, it is very much a reference book rather than a "how-to". So, for example, although HTML is given good coverage, you may be better off with Elizabeth Castro's book if you need a "Quick Start".
This third edition has been a while coming and although the second edition has been out-of-date for a few years now, this edition brings the book squarely back into the "must-have" category for all web designers.
Web Design in a Nutshell is available from Amazon.co.uk.
Avery Hill Library copies: 2
Design Basics Index by Jim Krause
This book is the perfect graphic design primer for those who have never previously had to think about where and how objects should be placed on a page. The book is designed as a quick reference but can easily be read through from start to finish (recommended). It covers all of the basic components of graphic design such as colour, image, typography, and the grid but it also takes a detailed look at various concepts such as hierarchy, flow, grouping and proportion.
This is a comprehensive but compact and accessible book. It is written in a clear and informal style and along the way there are numerous exercises for the reader that help to create a better understanding of the topics being discussed. Needless to say, the book itself is beautifully designed. Everyone should read this book. Design Basics Index is available at Amazon.co.uk.
Avery Hill Library copies: 4
What is Typography? by David Jury
Like "What is Web Design?", this book is another in RotoVision's excellent Essential Design Handbooks series. David Jury is a world renowned typographer and this book is the best single volume introduction to the subject that I have seen. The book covers all the basics in surprising detail and it is clear from the ease with which he does it that the author has the experience of teaching this subject over a number of years.
The book is printed in full colour, using excellent examples to illustrate the points being made in the text and the writing is clear and easy. Although the book covers all the normal typographic conventions, David Jury is obviously a typographic liberal of the "everyone is a typographer now" school. This is a good thing. The author is accepting of the fact that, today, everyone has access to very powerful typographic tools on their computer and the aim of the book is to help the reader control this power and explain the logic behind rules and conventions and the principles of readability and legibility.
The book is divided into 3 sections:
Issues, sets contemporary typography within its historical and cultural context.
Anatomy, breaks down the discipline to look at individual tools, processes and methods.
Portfolios, illustrates the work of a number of designers and design houses.
All-in-all, it's about as complete a picture one could hope for in a single book.
What is Typography? is not specifically written for web designers (although there is a section on hypermedia) but in a sense, it's more important to know what can be achieved through typography and consequently how limiting current web design practice is in this regard rather than to focus on what a designer can do with CSS.
What is Typography? is available from Amazon.co.uk.
Avery Hill Library copies: 2
Most of these books are available at the Avery Hill library: UoG Library availability.