Web site development & design

1. Web Site Management

7. Overall & specific resources

Usability .Net - magazine Webdesigner Smashingmagazine http://www.tripwiremagazine.com/Tools/CSS-Tools/css-mega-toolbox.html Web design reference guide - Peachpit Opera Developer platform http://developer.yahoo.com/ http://www.2013.net/blog/index.php?/site/CSSresources Transcending CSS - Andy Clarck The Principles of Beautiful Web Design - Jason Beaird The Design of Sites - D. K. Van Duyne a.o. CSS Mastery - Advanced Web Standards Solutions - Andy Budd - friendsof The Zen of CSS design - Dave Sea and Molly Holzschlag - New Riders Bulletproof Web Design, Dan Cederholm, New Riders Learning Web Design - Jennifer N. Robbins - O'Reilly 250 HTML and Web Design Secrets - Molly Holzschlag - Wiley Publications Site point newsletters Web design newsletter & other - Peachpit

User pleased by design but attracted by content Intuitive navigation Some guidelines http://usability.gov/guidelines/ tips http://code.google.com/intl/en-EN/speed/page-speed/
Netflix Case Study

Magazines
weight - speed Performance nr of clicks

User Centered web design Blogs & sites

Unity - brand Satisfaction Content Accessibility http://www.w3.org/TR/2004/WD-WCAG20-20040730/

Target Public Aims

User interface design for mere mortals - Eric Butow - Addison Wesley

Books

Concept & research

mapping - site mapping Story board - Wireframes Plan folder structure Blog 60 questions

Ezines

Redaction.be be short Getting / creating content Writing for the web Tips be direct use powerful headings use subheadings web paragraphs are different

6. Specific Considerations
CSS compatibility charts Zeroing out html tags 7 Fresh and Simple Ways to Test Cross-Browser Compatibility Mutliple IE Axandras Search Engine Facts robots.txt tips Search Engine Optimization For Dummies - Peter Kent - Wiley Publishing Search Engine Marketing Kit from Sitepoint Validation methods HTML - XHTML Tools to validate html-css-rss http://c2.com/cgi/wiki?JavaScriptCodingStandard Javascript Specific coding standards Other languages http://www.webstandards.org/ Putting the prototype in place Test & feedback Production & Templates Launch / Deployment Design Process / Principles

The Process
New Thinking - Gerry McGovern

keep revising & editing

Browser Compatibility

Consistency Offer feedback Recognizable Meaning & errror messages Free & Flexible navigation

Search engines

Automise / Accelerate for returning visitors Minimalism

Compliant web sites

Tools

MS Project Mind Manager Adding/updating/removing content Iterative Design

http://c2.com/cgi/wiki?CodingStandardList

Print friendly web pages

http://www.sitepoint.com/article/code-html-email-newsletters/

http://www.google.com/analytics Site stats http://www.statcounter.com http://www.extreme-dm.com/tracking/ http://www.addfreestats.com/

HTML emails

Running the site

http://adwords.google.com/ Web Design and Marketing Solutions for Business web sites - Kevin Potts - Friendsof

Marketing and publicity

Continuous testing, evaluation etc. Bugs reporting Backups HTML editors Graphical programs CSS editors Browers setup MOSE approach

5. Typography

Server Setup Audio

Cascading fonts when to serif when to sans-serif http://www.mikeindustries.com/blog/sifr/ how to guide

Web fonts
Others Software

Video php - asp - coldfusion editors Analysis Click Tracks Analyser

sIFR - Scalable Inman Flash Replacement

Text editors letter-spacing text-transform white-space word-spacing text-shadow line-height text-align px - em - % body 62.5% LoVe HAte rule text-size HTML http://addaons.mozilla.org Browser extensions or addons Firebug Web developer toolkit http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/ http://reference.sitepoint.com/html http://reference.sitepoint.com/css Downloads FTP software http://www.webdesignbooth.com/32-useful-portable-apps-for-web-designers-and-developers/ http://desizntech.info/2009/06/40-windows-freeware-and-open-source-software-for-web-designers/

CSS

Resources

approach for linking

CSS

Text in images Simplicity

Encoding Javascript Coding skills

jQuery Dom Scripting - Jeremy Keith - Friendsof http://desizntech.info/2009/05/27-handy-javascript-techniques-for-web-designer/ http://reference.sitepoint.com/javascript Php

Special characters

http://www.1001fonts.com http://www.dafont.com http://www.wantedfonts.com http://openfontlibrary.fontly.org/

Free fonts

Dynamic coding

ASP / .net Coldfusion

Experimenting with fonts

(Self)Training

Databases

SQL

http://www.w3schools.com http://speckyboy.com/2009/07/06/40-free-and-essential-web-design-and-development-books-from-google/ http://www.designvitality.com/blog/2007/09/web-design-inspiration/

Inspiration

Newspapers, magazines, Design srapbook Design and typography in publicity, stuff etc

4. Imagery & Texture

Cheat Sheets gif jpg png 8 png 24 hotlinking resizing in browser ready made clipart cropping & selections don'ts Image formats

http://www.designfeed.me/3593

2. Layout
Images
http://www.csszengarden.com

background images text masks breaking out the box filters borders and edges Samples They're omnipresent Backgrounds 3D Drop shadows Separators Boxes borders Rounded corners Bullets Boxes Photoshop pattern maker Digital camera http://www.sxc.hu http://www.morguefile.com http://www.istockphoto.com http://zentextures.com/ http://www.studio7designs.com/blog/101-design-resource-links/ Shapes Points and Lines experiment with

Separation Content & layout Box model Floated and Positioned Layouts Order of HTML elements Commenting code Hacks, Filters, Bugs

http://www.csszengarden.com Scope media with CSS

http://www.2013.net/blog/index.php?/site/CSSresources

Patterns

Not all browsers see the same design Use all available CSS - even CSS3 http://sixrevisions.com/css/20-useful-resources-for-learning-about-css3/

Lights and shadows

Transcending CSS

Avoid hacks and filters Use semantic naming

Textures

CSS & HTML

Use Javascript and the DOM Importance of meaningfullness in HTML and CSS divitis shorthand Code organisation and commenting http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

Tools
Good coding

http://www.accessify.com/tools-and-wizards/ alt of course abbr - acronym Accessible code title Specific tags accesskeys - tabindex fieldset - legend - label - optiongroup summarize - caption skip links Concept on paper Photoshop mock-ups Grid Theory phi golden rule of 1,62

Resources

Balance Unity Proximity Repetition Colour Contrast Check

3. Color

Design Principles to play with

Contrast Proportion

red orange yellow green blue indigo violet white black Warm Cool Color Associations Screen resolutions Width

Emphasis White Space

Height - above the fold

Psychology of colours

Web page anatomy

Build up

Fixed width designs Liquid width designs Variable Fixed width Elastic layouts Faux Columns

Color Temperature

First Read Regions Home page Hue - Tint

Saturation - Purity Light - Shade Additive model Substrative model Primary, secondary, tertiary colors

Color Value

Logo Header Content Navigation Left - Right - 3 columnar Main & Sub nav Google Site Search

Color Models

Main Layout components

Search Monochromatic Analogous Complementary Split complements Triadic Tetradic Hexadecimal colours Footer

Expansive footer

Color Schemes

Main container Different types of sites hierarchical task based

Colour Palette
Organisation

chronological alphabetical popularity based categories Navigation bar Tabs

Color Schemer http://colorschemedesigner.com/

Tools

Navigational framework

Buttons Bread crumbs Home Objects Text links Internal | External links Image links Page links Maps Error 400 - 500 You are here

Templates Main contents Headlines and titles Basic Patterns Personalized content Secondary content Content driven Language driven Forums Related content Lists Tabular data Forms http://www.sprawsm.com/uni-form/ 1 2 3 Columnar

Working with patterns

Branding materials Subscriptions FAQ Branding & binding Privacy About us Contact information Account management Support / Help Audio Video

Multimedia Search

Text resize Accessibility Code order Image headings Viewing options Separate structure and skin OO CSS Separate container and content http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/

Web site development & design - 23/07/2009