Resources

Web Design Tutorial > Overview | Resources | Design | Pages | Sites | Praxis

Books

These books have been very helpful to me. They range from hard-core technical books to fluffy (but useful) design books. All of them have their place. The biggest mistake that newbies make is to equate knowledge of a tool with the ability to design. Graphic design is both an art and a discipline, and the fundamental principles are the same, whether you are designing a Web page, creating a print magazine ad, or designing a user interface for a program or Web site. A good understanding of those principles will enable you to create qualitatively better sites!

HTML, XHTML, & CSS, Sixth Edition • Elizabeth Castro • Classic reference book on HTML, CSS, the DOM, and Javascript.
Creating a Web Page with HTML • Elizabeth Castro • Project-oriented tutorial.
250 HTML and Web Design Secrets • Molly Holzschlag • While not an introductory text, this book will make anybody better by applying many of the principles and tips in here.
Bulletproof Web Design • Dan Cederholm • Subtitled “Improving flexibility and protecting against worst-case scenarios with XHTML and CSS.”
Web Standards Solutions: The Markup and Style Handbook • Dan Cederholm • Very standards-oriented approach to using CSS.
CSS Mastery: Advanced Web Standards Solutions • Andy Budd • This is one of the best books I’ve read about advanced use of CSS. Budd is an excellent writer, and the material is top-notch. This not a beginning guide to CSS!
Blog Design Solutions • Andy Budd, Simon Collison, Chris Davis, Michael Heilemann, John Oxton, David Powers, Richard Rutter, Phil Sherry • This book specifically talks about building blogs, in general and in particular for WordPress, Movable Type, Expression Engine, and Text Pattern. It also shows you how to write your own blogging system. This book requires knowledge of PHP and MySQL, on top of HTML and CSS. If you want to be hacking blogs, though, this is an excellent start.
Eric Meyer on CSS • Eric Meyer • Subtitled “Mastering the Language of Web Design”, this example-based book will improve your ability to use CSS effectively. Eric is an excellent writer with a superb grasp of the material.
Don’t Make Me Think • Steve Krug • This is more about design principles than anything. The basic idea is that you design your sites so that the target audience knows and expects what to do without having to explain or flail around.
XML for the World Wide Web • Elizabeth Castro • A good introduction to XML.
Designing CSS Web Pages • Christopher Schmitt • An excellent introduction to using Cascading Style Sheets (CSS) to design Web pages.
The Zen of CSS Design • Dave Shea and Molly Holzschlag • In-depth examination of some of the superb examples from the CSS Zen Garden.
The Art & Science of Web Design • Jeffrey Veen • Thorough and well-written.
Web Redesign 2.0: Workflow That Works • Kelly Goto and Emily Cotler • An excellent design book, aimed at site redesign — but also useful for the first time. Very few books actually teach good processes, and this is one of the few.
Site-Seeing: A Visual Approach to Web Usability • Luke Wroblewski • A superb design book.
Design Whys: Designing Web Sites That Sell • Shayne Bowman and Chris Willis • Well-illustrated and well-written guide to building sites for other people.
The Design of Sites • Douglas Van Duyne, James Landay, and Jason Hong • Subtitled “Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience”, this is a highly technical approach to Web design, based on the idea of “patterns” in programming. This is not for the weak of stomach!
Designing Web Usability • Jakob Nielsen • This is an excellent computer science reference book about usability in Web design. Nielsen is one of the top experts in usability.
CSS, DHTML & AJAX, Fourth Edition • Jason Teague • Example-based book about using Javascript and the DOM.
Dynamic HTML, The Definitive Reference • Danny Goodman • This has all the nuts and bolts of Javascript and the DOM for programmers.
jQuery in Action • Bear Bibeault & Yehuda Katz • This is a great introduction to using jQuery, including its Ajax capabilities.
Foundations of AJAX • Ryan Asleson and Nathaniel Schutta • An advanced book on AJAX for programmers.
PHP for the World Wide Web • Larry Ullman • Excellent first book for learning PHP, with some coverage of MySQL.
The Elements of Typographic Style • Robert Bringhurst • A definitive text about typography, which is one of the great frustrations of the Web because of the lack of cross-platform font support. You’ll understand it better, and your designs will be better for having assimilated this book. That being said, it is dense and extremely detailed.
Layout Index • Jim Krause • Hundreds of sample layouts—a great way to “write that first sentence” of your design.
Graphic Design Cookbook • Leonard Koren and R. Wippo Meckler • Another excellent source with hundreds of layout examples of all kinds.
PANTONE Guide to Communicating with Color • Leatrice Eiseman • Filled with color palettes for print applications, grouped by themes. Lots of good information about color perception, and color combinations that can easily be adapted to the Web.
The Visual Display of Quantitative Information • Edward Tufte • This is the first of a series of books by Tufte. A superb writer, Tufte writes about how to display information in all forms. His choice of examples is superb—these books are a pleasure to flip through, even if you learn nothing! Tufte also coined the term chart junk for all of the unnecessary elements that get larded onto designs.

Web Sites

Top Sites for Web Developers

SEO

Terms and Jargon

AJAX: Asynchronous Javascript and XML (AJAX) is a term coined by Jesse Garrett at Adaptive Path. AJAX is a style of interaction that is the hallmark of the emerging “Web 2.0” applications. This technique allows portions of a Web page to be updated without refreshing the entire page, a significant advance in the development of Web-based applications. An asynchronous request for information is sent to the Web server through Javascript, and a separate Javascript function processes the response when it is returned by the server.
Asynchronous: When an asynchronous request for information is sent to the Web server, the response is not expected to return immediately. The requesting program sends the request to the server, and then continues on its business. When the server creates the response, it sends a message back to the browser with the answer, and the browser responds to the server as quickly as it can to get the data and display it (or whatever).
Browser: Web Browsers are the primary mechanism by which users can browse the World Wide Web. There are a number of different Web browsers on every imaginable platform, and they all vary slightly in how they interpret HTML and CSS, as well as Javascript. These differences, while usually minor, can be extremely difficult to reconcile or even understand.
Content Management System: A Content Management System (CMS) uses templates to generate the pages of a dynamic site. A CMS is oriented at handling large amounts of data, often multimedia data. Two of the most popular Content Management Systems are Drupal and Joomla.
CSS: Cascading Style Sheets (CSS) are the mechanism by which modern Web pages are formatted. Page components are formatted as overlapping and embedded boxes (the “Box Model”), where CSS allows you to specify the appearance, behavior, and position of all page elements. Styling can be applied at a number of levels, and the properties cascade down in order of precedence to individual elements in a page.
DHTML: Dynamic HTML (DHTML) is the combination of Javascript and CSS with the DOM (Document Object Model) to create more dynamic Web pages. DHTML effects include image rollovers, popup menus, simple animations, and other common effects.
DOM: The Document Object Model (DOM) is the means by which a Web browser operates on Web pages and their components. Basically, the DOM is an in-memory database of all elements on an HTML page. DOM objects correspond to all of the browser, window, and HTML page elements, and each of these elements can be manipulated using Javascript in the client browser. DOM elements are organized in a hierarchical (tree) structure, which allows you to take advantage of relationships between things (for example, being able to say "apply this font style and color to every paragraph inside this DIV").
Dynamic vs Static Web Pages: Another useful distinction between pages is whether they are static or dynamic. Static pages are HTML files that do not change when served up from a user’s request; all requests receive a copy of the same “pure” HTML file on the server. Dynamic pages are ultimately HTML files when returned to a user, but some or all of that HTML is created on the fly by some back-end program that receives customer input. For example, such a program might read records from a database to create a table of your credit card transactions. The information from the database would be formatted as “pure” HTML, and then returned to the user as a standard HTML page. A handy way to tell whether a page is static or dynamic is to look at the URL. If the extension is .html, .htm, .shtml, .shtm, then the file is a static Web page. If the extension is pretty much anything else (such as .php, .asp, .jsp), then some program on the Web server is either creating or modifying the page before returning it to the user via the Web server. The home page of a site may not always show a full URL, since you can use www.domain-name.com without specifying any further file or path name.
FTP: File Transfer Protocol (FTP) is a protocol used to transfer large blocks of data between servers on a network. Web development tools like GoLive and Dreamweaver use FTP (transparently, for the most part) to transfer files between your local hard drive and your ISP’s Web server. You will also find a command line interface to FTP in all operating systems. While convenient, most FTP programs do not offer the synchronize feature common to Web development systems, whereby the system automatically determines which files need to be updated.
HTML: HyperText Markup Language is the basic markup language that describes Web pages, and allows for the integration of other services within a Web page. HTML is distinguished by pairs of tags, which are embedded in angle brackets. HTML files are plain text files, and can be opened and modified in any text editor. Because of the structured HTML, however, these pages can also be displayed with formatting in Web tools like GoLive and Dreamweaver.
HTTP: Hypertext Transfer Protocol (HTTP) is the protocol by which HTML files and other media are passed between Web browsers and Web servers.
Hypertext: The basic idea behind Hypertext is creating relationships between elements, regardless of their type or location. Although most pre-Web hypertext systems used bidirectional links, the Web was built with unidirectional links to simplify the infrastructure (e.g., you can link to something without the system knowing on the other end, which greatly simplifies the implementation).
Internet: Definition from Wikipedia: the Internet is a worldwide, publicly accessible network of interconnected computer networks that transmit data by packet switching using the standard Internet Protocol (IP). It is a "network of networks" that consists of millions of smaller domestic, academic, business, and government networks, which together carry various information and services, such as electronic mail, online chat, file transfer, and the interlinked Web pages and other documents of the World Wide Web.
Java: Java is an object-oriented, general-purpose programming language that is understood by most Web browsers. These browsers run a Java virtual machine that allows a Web page to load a small program (or “applet”) to provide some particular functionality in the browser. Because Java code is pre-processed into a binary form, it executes much faster than (interpreted) Javascript code.
Javascript: Javascript is the primary language by which a Web designer can manipulate the Web browser when a page is viewed. Javascript is used to implement many dynamic effects, such as image rollovers, validation in forms, and popup menus. In the last couple of years, a number of excellent libraries of Javascript code (jQuery, Prototype, Dojo, etc) have greatly enhanced our abilities to build dynamic, highly-interactive Web sites.
PHP: PHP: Hypertext Processor is a widely-used, public domain system used in conjunction with Web (HTTP) servers. Using PHP, programmers embed PHP commands in HTML pages. These HTML pages can contain any mix of HTML commands and PHP commands, since the PHP processor will turn the PHP commands into the resulting HTML. The Web server first hands these pages off to the PHP program, which then processes the PHP commands embedded in the file, and returns pure HTML to the Web server. PHP is often used in conjunction with MySQL, a public domain relational database system, to create dynamic pages. The WordPress blogging system uses PHP to create pages dynamically.
Web 2.0: This euphemism, coined by O’Reilly Media, describes a new wave of Web applications that are vastly more interactive than “traditional” Web applications, such as social networking sites. AJAX is the poster boy technique for Web 2.0, but there’s a lot going on there under the hype.
Web Server: A Web server is a program that responds to requests using the HTTP Protocol, usually on port 80. These responses are in the form of HTML pages and associated media. Some of these pages are static (the exact same page is returned every time when requested), whereas many of these HTML pages are created on request by a service running on the Web server. Web servers typically integrate other services, allowing Web designers to use these services to create dynamic pages. For example, Web servers use the PHP pre-processor to integrate data from MySQL databases.
WWW: The World Wide Web is a virtual network overlaid on top of the Internet, using a protocol called HTTP to transfer information between Web servers and Web browsers. By adding a visual aspect to Internet traffic, the Web became the most pervasive communications medium in the modern world within a few years. WWW Servers are identified by unique domain names, known to the servers around the Internet, which route traffic between Web servers and their clients.; The Internet and the World Wide Web (WWW) are not synonymous. The Internet is a collection of interconnected computer networks, linked by copper wires, fiber-optic cables, wireless connections, etc.; in contrast, the Web is a virtual collection of interconnected documents and other resources, linked by hyperlinks and URLs. The World Wide Web is merely a service accessible via the Internet, along with many other services including e-mail and FTP (file transfer).
WYSIWYG: WYSIWYG is an acronym for “What You See Is What You Get”, and is typically applied to graphical user interfaces that shield the user from the underlying structure. The Design view of Dreamweaver and Codetch is a WYSIWYG editor.
XHTML: XHTML is the most rigorous form of HTML, using an XML schema as the basis for implementing an HTML parser. Using the XHTML doctype subjects your code to the most rigorous interpretation, but it also allows you to use the most up-to-date versions of HTML and CSS.
XML: eXtensible Markup Language (XML) is a markup language that allows you to create a schema that describes the data in your application. Many tools can manipulate XML these days, because it provides a common framework for describing the data entities in your own application, thereby allowing tools to interact with that data by knowing the schema.

Web Design Tutorial > Overview | Resources | Design | Pages | Sites | Praxis

Resources

Books

Web Sites

Top Sites for Web Developers

SEO

Design Ideas

Color Pickers

Fonts

HTML

CSS

CSS Layout

Browsers

Javascript & Ajax

Interactive HTML/CSS

Tools & Resources

Technical for Developers

References

Cheatsheets

Fun and Useful

Terms and Jargon