Kristjan Kannike

Web Design

Designing for the Web is a book on web design by Mark Boulton.

NEW! Dive into HTML5 is a book on the most important parts of HTML5 by Mark Pilgrim.

Magazine A List Apart: articles on web design with stress on standards: (X)HTML, CSS, JavaScript.

The XRAY bookmarklet shows the size, margin, padding and position attributes for any element.

Usability

useit.com: Jakob Nielsen on Usability and Web Design is the home page of the usability guru Jakob Nielsen, featuring his column Alertbox.

U.S. Department of Health and Human Services: Usability offers thorough advice on improving usability and accessibility of web pages.

Writing for the Web: how users read on the Web and how authors should write their Web pages (Jakob Nielsen).

Magic Ink: Information Software and the Graphical Interface is an essay considering software design as a case of classic graphical design.

Colour

Tools

ColorZilla is a colour picker extension to Firefox.

VisCheck simulates colour blind vision.

Color Blender by Eric Meyer and Color Palette Creator by Steve Chipman mixe tints and give their numerical values.

The Color Scheme Designer generates a matching palette for a tint picked on the colour wheel, and helps to check its accessibility to the colour blind.

Munsell Palette is based on human colour perception.

Color me crazy - 10 best online color tools .

HTML

NEW! HTML5 Rocks offers a comprehensive overview of its features and ready reference.

Microcontent: How to Write Headlines, Page Titles, and Subject Lines (Jakob Nielsen).

Use <link> s in your document (W3C QA Tips) to tie it to the previous or next document, or a version in another language.

Listamatic: One List, Many Options offers many templates for designing lists.

Hyperlink <a>

Guidelines for Visualizing Links (Jakob Nielsen).

Change the Color of Visited Links (Jakob Nielsen).

Writing Effective Link Text (evolt.org).

Xhtml Friends Network allows indicating in a hyperlink whether the author of the page linked to is a friend, colleague, etc. The social networks are mapped by Rubhub the search engine.

Home Page Icon or Favicon

Favicon (Wikipedia): formats for favicons, their use and history.

MpP Favicon Gallery: hundreds of favicons with comments.

HTML Standard

HTML 4.01 Specification is the standard of the web page writing language. It is easy to go on from HTML to XHTML that is fully compatible with XML .

Typography

Macro-Typography treats the layout of poetry, footnotes, glosses and deeds on the Web.

Fonts

Georgia & Verdana - typefaces for the screen is an overview with interviews with the creators of these fonts.

Unicode

Alan Wood’s Web Site: Unicode support in browsers, Unicode symbol tables, and advice for writing multilanguage web pages. In addition: the character entity table of HTML 4.0.

In Brett's Absolutely Astounding Interactive Searchable Unicode Chart or Javascript Unicode Charts, Unicode characters can be searched by code or theme.

Layout

W3Schools: CSS Tutorial is a CSS tutorial with systematic examples of most design elements.

/* Position Is Everything */ teaches how to work around bugs in IE and other browsers, write laconic CSS , and offers layout examples.

BrainJar.com: Experiments in Web Programming: a CSS primer and layout examples; DOM; JavaScript. Great examples like the JavaScript powered blackjack with CSS -made cards.

Columns

BluePrint is a simple yet versatile grid-based CSS framework with a sensible typography, CSS reset and a stylesheet for printing. BluePrint Grid CSS Generator puts out CSS code of desired layout.

glish.com: CSS Layout Techniques treats the most used layout solutions (2, 3 columns) and offers layout templates.

Robert Nyman offers yet more variants for 2- or 3-column layouts, including a balanced 3-column layout (with JavaScript).

Techniques & Examples

Eric Meyer has created elegant design examples with pure CSS in his css/edge.

CSS Zen Garden is an excellent example of flexibility and beauty CSS makes possible: one can apply tens of style sheets by different web designers to the same page there.

On the web page Show Everything: Revealing Normally Hidden Elements, HTML tags like <head> and <meta> are made visible with CSS (it does not work with IE).

CSS Standard

Cascading Style Sheets, level 1 is the CSS standard that is fully supported by modern browsers.

Cascading Style Sheets, level 2 is the CSS standard (it includes CSS 1 as a subset) that is well supported by Firefox and Opera, and mostly supported by Internet Explorer.

JavaScript

Core JavaScript Guide is the official manual of JavaScript that is also suitable for learning it.

Core JavaScript Reference is the official reference of JavaScript.

JavaScript Shell is a JavaScript command line (interpreter) that makes experimenting easier.

Document Object Model (DOM)

BrainJar: Introduction to the Document Object Model is an introduction to DOM with examples. The DOM Event Model covers the possibilities to react to user input such as mouse clicks.

The DOM chapter from the book JavaScript: The Definitive Guide by David Flanagan is a thorough overview of DOM API-s (including Range and Traversal) with examples.

The Document Object Model in Mozilla: DOM & JavaScript, DOM reference, examples & links.

Libraries

Prototype is a powerful Javascript library for DOM and Ajax development. script.aculo.us for DOM visual effects and Rico for Ajax are built on it. — Using prototype.js v. 1.4.0 is a good introduction. Prototype dissected is a cheatsheet.

RSS & Atom

The article “What is RSS?” by Mark Pilgrim describes different versions of RSS , offers advice on which one to use, and teaches generating RSS with Python.

O’Reilly Network: Writing RSS 1.0 is a step-by-step primer on writing RSS 1.0.

W3C RSS 1.0 News Feed Creation How-To: an RSS example and a XSL style sheet for generating RSS from HTML marked up with relevant CSS classes.

RDF Site Summary (RSS ) 1.0 is the specification of RSS .

AtomEnabled tells how to add Atom (a format similar to RSS ) channels to pages.

Tools

Feed Validator checks the correctness of RSS and Atom feeds.

Universal Feed Parser parses RSS and Atom into Python.

Tools

W3C QA - The QA Toolbox: check validity of (X)HTML and CSS code, and search for broken links.

Firefox developer extensions, especially ColorZilla (web page eyedropper & color picker) and the Web Developer toolbar make one’s life easier.

Markdown (Perl; Python version) converts a legible and simple text syntax to HTML.

Python library Beautiful Soup can parse flawed HTML “tag soup”.

Sound

How to add sound to a page? Mark Huckvale tells how.

Search Engines

Search Engine Watch gives advice for submitting web pages to search engines and for achieving a high ranking.

Created: 07.11.2004

Changed: 26.01.2013