|
Webdesign Guide für die ETHZ
(Entwurf - Version 0.2)
*
Basis vermitteln für «gutes» Design
* Lernen aus Fehlern
*
Angehörige der ETH
* Web-DesignerInnen
*
http://archiv2.weboffice.ethz.ch/tools/
*
Die Form folgt der Funktion (das Design hat sich dem Inhalt unterzuordnen)
* konsistentes Site-Layout
* so einfach wie möglich (auch abhängig von der Zielgruppe)
* überflüssiges vermeiden (Bullets, Gifs, Animationen)
* Browser-unabhängig
* keine Technik-Gimmicks (Plug-ins)
* Flexibilität
* Accessibility
alle Operationen sollen auch via Keyboard steuerbar
sein
Text und Hintergrundfarben müssen gut kontrastieren (ein
Probeausdruck auf einem schwarz-weiss Drucker bringt oft einiges zutage)
* Verschieden schwere/umfassende Suchmöglichkeiten anbieten
* für längere Texte und Dokumente empfiehlt sich ein herunterladbares
File zum offline lesen oder ausdrucken.
* vernünftige Filenamen
* Halte deine Website aktuell
*
Beschränkte Bandbreite und Geschwindigkeit (Zeit kostet Besucher;
15sek)
Wie kann die vorhandene BW am effizientesten genutzt werden?
* Unterschiedliche Browser(-Versionen) (HTML, ActiveX, Javascript,
Extensions)
* Frames
* Graphiken und Farben
* Multimedia-Elemente (Video, Audio, 3D)
* Der/die AutorIn
*
http://www.w3.org/WAI/
* Überschriften als Graphik (sind nicht von Suchmaschinen indizierbar und
können von Sprachsynthesizern nicht gelesen werden)
*
Die Orientierung innerhalb einer Website stellt hohe Anforderungen an die
User
* Oberstes Gebot ist: der/die LeserIn weiss jederzeit, wo sie ist und wie
er/sie weiter navigieren kann
* Daraus folgt: bilde eine klare und konsistente Navigationsstruktur
(«Baumstruktur» etc.)
* Eine Navigationsleiste bietet schnellen Zugriff auf die wesentlichen
Informationen
*
schnell, praktisch, ansprechend
* nicht mehr als 7 Rubriken (mehr verwirrt), Überblick über die
(logische!) Struktur
* inhaltsorientiert vs. organigrammorientiert
* Folgende Infos gehören drauf: wer, wann, feedback, help (eine
Beschreibung der Site, des Layouts und der Navigationselemente erleichtert
deren Benutzung), search
*
innerhalb der Seite
* ausserhalb, als externes Fenster (Problem bei kleinen Bildschirmen)
der
Einsatz ist gut zu überlegen
*
Vertikal: immer uplinks auf die Homepage der Site sowie die übergeordnete
Organisationseinheit
* Horizontal: von Seite 3 zu Seite 4 zu Seite 5 und zurück etc.
*
Wie im DTP ist der Satz entscheidend für die Übersichtlichkeit der
Information. Abstände oder Marker zwischen Überschriften,
Paragraphen, Listen , Bildern etc. LeserInnen finden die sie interessierenden
Information schneller.
*
Ein Inhaltsverzichnis (mit Links versehen) erleichtert das rasche gezielte
Springen zur gewünschten Information
*
Eine Site Map gibt Überblick und ermöglicht den raschen Zugriff auf
Informationen mittels nur einem Mausklick
* Der Unterhalt wird schnell sehr aufwendig, wenn kein geeignetes
Site-Management-Tool eingesetzt wird
*
eine gute Struktur ist besser als eine Suchmaschine, weil dem Menschen
näher (keine falschen Suchabfragen oder unzählige Hits)
*
Linkfarben nicht vertauschen (blau = nicht besucht, violett = besucht)
* Links sind unterstrichen (auch wenn man mit CSS dies unterdrücken
kann)
* sinnvoller Link-Text (Verboten: «Klicken Sie hier»)
* ausführlich beschriebener Link ist besser als kurzer, aber: keine ganzen
Sätze! (kurz und prägnant)
* absolute vs. relative links (vereinfachen das Verschieben von Websites!)
* Aufeinanderfolgende Links optisch trennen
* Attribut ACCESSKEY verwenden
* Störung des Leseflusses durch Links (Links am Rand sind jedoch auch
nicht das gelbe vom Ei, besonders im Unterhalt aufwendiger)
*
eine einheitliches Layout für die ganze Website ist selbstverstaendlich
* unterstützt, kein Selbstzweck, strukturiert, führt
* klare Gliederung in einen Navigations- und einen Infoteil
* Kopfzeile: ETH-Logo, Departements-Logo, ev. Institutsname,
Kapitelüberschrift
* Fusszeile: Verantwortlich, last update, Navigationsleiste
* vertikales Scrollen ok, horizontales absolut verpönt
*
Information ist wichtig
* Kundennähe
*
absolut out. alle wissen, dass das Web immer im Auf- und Umbau ist
* Aktualität
* Pflege des Angebots
*
streng logisch
*
Gute HTML-Seiten beginnen mit einem SGML-Eintrag, der dem Client beschreibt,
welche Version von HTML verwendet wird. Das macht es vor allem HTML-Validatoren
einfacher zu entscheiden, ob die Seite Fehler enthält.
*
* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
*
* Nachdem festgelegt ist, welche HTML-Version verwendet wird, beginnt die
eigentliche HTML-Seite. Am Anfang einer solchen steht immer<HTML>,
welches am Ende immer mit </HTML> abgeschlossen wird. (Viele Clients
verlangen das nicht, aber es gibt solche, bei denen es unbedingt notwendig
ist!)
*
* Jede HTML-Seite enthät eine HEAD- und eine BODY-Sektion.
*
TITLE, Meta-Tags (Dublin)
* Suchmaschinen
* Konsistenz
*
* Syntax
* Übersichtliche Kodierung
* Kommentare
*
physikalisch vs. logisch
* Statt physikalischer Formatangaben sollten logische verwendet werden. Also
nicht <B> sondern <STRONG> und nicht <I> sondern <EM>.
Nicht alle Clients können alle physikalischen Formate anzeigen, aber
logische Formatangaben können sie auf andere abbilden.
*
Reihen und Kolonnen beschriften
* Breitenangaben relativ und nicht fix
* keine Seitengestaltung mit Tables
* Attribute wie HEADERS, SCOPE, ABBR, SUMMARY, AXIS verwenden
*
keine Image Maps als Submit Button; falls Image, mit ALTernativ Text
*
Zugang für Nonframe-Browser sicherstellen
* Attribut TITLE den Frameteilen zuordnen (wichtig für Blinde), LONGDESC
*
Benutzerfreundliche Navigation
* Orientiertung
* drin bleiben
* Externe Seiten einbetten
* dezentrale Entwicklung, Teamwork (Vorlage, Raster)
*
anspruchsvollere Programmierung (Skalierung, Navigation): nur für
Profis!
* Browser, welche keine Frames unterstützen
* langsam, für jeden Frameteil ein eigener HTTP-Request
* Bookmarks (nur aktueller Frame wird gebookmarkt, ohne Frameset)
* <TITLE> wird vom Frameset angeziegt und nicht von der Seite
* Drucken (nur aktiver Frame wird gedruckt)
* Suchmaschinen indizieren auf die Seite ohne Frameset
* evtl. fehlende Identifikation und Navigation Bar (Orientierung, Uplinks)
* TARGETs fehlen meistens und führen zu grauenvoll verschachtelten Seiten
*
jedes graphische Objekt muss Sinn machen und einen Gewinn bringen
keine
bunten Trennbalken und farbigen Bullets
* Background Images
* Graphik-Format (GIF, JPEG, PNG, WI)
GIF: max. 256 Farben aus einer frei
wählbaren Palette
JPEG: 16 Mio. Farben, Kompressionsverluste, gut
für Fotos
* Grösse
* Preview für grosse Graphiken (ab ca. 100 kB)
* Farbpaletten
* interlaced
* Transparenz
* Skalierung
* Alt-Tag, umfangreiche Graphiken speziell beschreiben
* WIDTH und HEIGHT angeben: der Browser kann dann das Layout bereits
während dem Laden der Seite aufbauen
* Icons, Bullets und Co.
* Animated Gif
* Graphiken Referenzieren
* Bilder als Link mit TITLE-Attribut versehen
* keine grossen Navigationsgraphiken
* Graphiken müssen anklickbar sein
*
müssen auch bei abgeschalteten Bildern navigierbar sein
* Client-side Image Maps Keyboard navigierbar machen
*
Multimedia ist eine Gratwanderung: Bandbreite, neueste Browser und Plug-ins
notwendig
* Alternativen für blinde oder gehörlose SurferInnen
* TITLE-Attribut für Sound- und Videofiles
*
weniger als 30 kB für Homepage
* anstelle vieler kleiner (Navigations-)Graphiken eine grössere als Image
Map (weniger http-requests)
* keine Java, ActiveX, Multimedia etc. wenn auch HTML genügen würde -
besser: Javascript
*
die Entwicklung läuft in Richtung HTML 4.0
* im Moment jedoch von den Browsern nur bruchstückhaft unterstützt
*
Texteditor
* HTML-Editor
* WYSIWYG-Editor
* Site-Management-Tools
* Konverter
*
Die Validierung einer Webseite ist ein absolutes Muss!
* It may also be helpful to test a site with a self-voicing browser (such as
PWWebspeak)
*
Tools-Liste des Web Office: http://archiv2.weboffice.ethz.ch/tools/
* Bobby http://www.cast.org/bobby/
* W3C HTML Validation Service http://validator.w3.org/
*
a text-only browser (e.g., Lynx or a Lynx emulator such as Lynx Viewer or
Lynx-me)
* multiple graphic browsers, with:
1. grayscale and different color depths
2. sounds and graphics loaded,
3. graphics not loaded,
4. sounds not loaded,
5. no mouse
*
Konverter in der «Web-Stuff and
Tools»-Datenbank
http://archiv2.weboffice.ethz.ch/tools/
*
Alternativen anbieten, für alles, was Informationen beinhaltet
* Dieselbe Funktion auch ohne Applet/Script anbieten (E-Mail, Telefon, Fax)
* Sich bewegende oder blinkende Elemente müssen vom User eingefroren
werden können
*
http://www.w3.org/Style/
*
http://www.w3.org/XML/
*
http://www.filemaker.com/
*
auch Alternativen updaten (z. B. Frames)
* was wenn mehrere Autoren die Site unterhalten?
|
