Webdesign

Webdesign ist sowohl eine technische-, handwerkliche- als auch eine kreative Sache, für Unbegabte gibt es Content Managing Systeme oder Wikis die das Webdesign übernehmen und den Inhalt mehr in den Vordergrund stellen.

Dazu gehört im engeren Sinne die

1. Struktur (HTML) und das
2. Design (CSS).
3. Inhalt (Texte und Bilder)

siehe auch:

• ajax
• Flash

• Einführung in XHTML, CSS und Webdesign
• W3C Validator (Unicorn)
• browsersize @googlelabs - prozentuale Aufmerksamkeitsverteilung
• Homepage-Baukasten
• HTML & CSS Tutorial
• Web 2.0 Design Kit
• usability.gov - Step-by-Step Usability Guide
• Flash-only vs. AJAX sites
• Testseite zur Zeilenbreite incl. Erklärung zum Maßstab em
• Bookmarklets: Webdesign analysieren
• free designs
• Transparente Hintergründe von PNG-Dateien werden in Internet Explorer nicht angezeigt
• Tipps zum Start von Internetprojekten
• 19 Things NOT To Do When Building a Website
• ie7-js A JavaScript library to make MSIE behave like a standards-compliant browser. + Introduction
• Raphaël—JavaScript Library
• 2 Klicks für mehr Datenschutz

• browsershots.org: Screenshots von Browsern auf unterschiedlichen Systemen
• Cross-Browser-Testing
• Spoon Browser Sandbox
• Browser Compatibility Check for Internet Explorer Versions from 5.5 to 9
• Adobe Browserlab

• Final Builds Site - IE Collection
• Internet Explorer 10 Guide for Developers
• Internet Explorer 9 Compatibility Cookbook
• IE10 Compat Inspector
• Microsoft stellt ältere Versionen des Internet Explorer zum Testen bereit

• Page-speed Firefox-Plugin das Ladezeiten anzeigt
• mod_pagespeed Apache-Modul

Selfhtml HtmlCleaner Top Ten Mistakes in Web Design Welcome to The HTML Hell Page

• SCREEM - a web development environment
• HTML Tags illustrated

• Web 2.0 style buttons

IconSurf.com - Visual Surf Engine Free Community Icons Kick The Donkey's Web Buttons Gnome Icons FavIcon from Pics mood Icons free mini Pixel Icons

Unter Barrierefreiem Internet versteht man die Möglichkeit uneingeschränkt durch körperliche als auch durch technische (mobile Geräte, Textbrowser) Hindernisse das Internet nutzen zu können.

Die Webseiten sollen mit Hilfe von Screenreadern

• Quick Accessibility Testing
• Barrierefreies Surfen (WWW für alle )
• Barrierefreie Internetseiten
• Geschäftsvorteile durch Barrierefreies Webdesign oder „16 Tipps, wie Sie mit Barrierefreiheit mehr Geld verdienen.“
• Test: Ist Ihre Webseite barrierefrei?
• Barrierefreies Webdesign - Einfach für Alle
• Internet ohne Ausgrenzung Teil 1 ... Teil2
• WebXACT Validator
• Linkliste Barrierefreiheit
• Heft "Barrierefreies Webdesign"
• „Nicht unsere Zielgruppe“: Wirtschaftlichkeit von Barrierefreiheit

• Richtlinien des W3(C): WAI I+II+III
• Web ohne Barrieren - gemäß Paragraph 11 des Bundesbehindertengleichstellungsgesetzes
• WCAG 2.0

• Accessibility Tools & Wizards
• Web Accessibility Toolbar für den IE

• Screenreader - Test 2006/2007
• SUSE-Blinux (Screenreader für Linux)
• Orca
• LSR

• The MBROLA Project - Projekt zur Sprachsynthese

• konsequente Trennung von

1. Struktur (XHTML, HTML4, …)
2. Design (CSS): schlankere Webseiten und einheitliches Design
3. Inhalt (Texte und Bilder)
4. und Funktion (PHP, MYSQL)

Allgemein sollte man seine Seiten einmal standardgemäß gestalten in einem Textbrowser oder von einem Mobilgerät abrufen und schauen ob die Seite noch benutzbar ist.

• Benennung von
  1. Feldern
  2. Schaltflächen
  3. Bildern (title+alt-Attribut): nicht zu lang, 1-2 Wörter wäre gut
• Maßnahmen zur Vermeidung von Spammern (z.B. Captchas) sperren natürlich auch Besucher mit Sehbehinderungen aus! Mögliche Lösung: dyn. erzeugte mp3-Datei. siehe Netbank.
• Tabellen logisch und mit summary und Überschriften gestalten, max. 3-4 Spalten
• nicht Links in neuen Fenster öffnen, wenn nicht nötig. Z.B. nur bei externen Links.
• Accesskey auf den Seiten überschreiben oft die Hotkeys von Screenreadernm, also nicht bzw. nur selten vorbelegte Kombinationen (z.B. solche mit Nummern) verwenden
• keine dynamische Inhalte wie Flash oder Laufschriften
• kein Hintergrundsound (Screenreader geben dann nichts aus, bzw. Soundmix)
• keine bzw. nur unbedingt notwendige automatische Aktualisierungen (refresh) der Seite (Grund: Screenreader lesen von oben nach unten, oben ist erstmal die Navigation. Wenn nun schnell aktualisiert wird bekommt man den Inhalt nie zu Gesicht)
• Anker setzen: nicht unbedingt notwendig, hilft aber bei wiederholtem Besuch
• Frames: wenn man sie schon unbedingt benutzen muss (muss man nicht, CSS iframes o.ä. geht besser) dann wenigstens die Frames zusammen halten
• Abkürzungen definieren entweder mit dem abbr-Attribut kennzeichnen oder so:

<acronym title="Content Managing System">CMS</acronym>

• tabindex(e) oder Accesskeys setzen (am besten aber nur Zahlen, da Doppelbelegung bzw. Menüs sonst nicht mehr über Tasten(-kombinationen) erreichbar sind).

• Frames (wenn man sie denn unbedingt noch einsetzten muss) ohne sinnvolle Beschreibung (frame01, frame02, …)
• Bilder ohne Beschreibungs- (alt-) Text (oder Bild1)
• javascript ohne Alternativversion, Javascriptlinks

• „Tag Soup“ (Tags werden nicht zur logischen Gliederung des Inhaltes benutzt
• Layout-Tabellen und verschachtelte Tabellen
• <div>-Container für Überschriften

bei Webseiten mit gewerblichen Charakter (auch private Seiten mit Werbung als Einnahmequelle) muss ein Impressum zu finden sein. Wo das Impressum stehen muss hat jetzt der BGH entschieden.