Hier steht etwas von den technischen Hintergründen im WebDesign von www.PhilEcon.de.
xhtml 1.1 & externe css
Ich halte meine Seiten standardkonform. Und das sogar in der zurzeit strengsten Variante:
XHTML 1.1 (bei dieser Version gibt es nur noch strict und kein transitional mehr).
Wer es überprüfen will: einfach auf die Logos klicken
(diese führen zur externen Online-Validierung bei W3.org, validome.org und CynthiaSays.com).
- 
- 
- 
Fast sämtliche Layout-Anweisungen sind in mehrere externe Style-Sheets (CSS) ausgelagert.
Ausnahmen: einmalige Formatierungen, insbesondere die bunte Seitenüberschrift auf der Einstiegsseite zum webdesign.
Wen es interessiert - hier ist das Haupt-Layout für die Bildschirmanzeige:
Layout.CSS.
Daneben gibt es noch ein Layout für den Ausdruck
(Print.CSS)
und in Vorbereitung befindet sich ein projection-css für Opera-Show (Folien-Präsentation im Browser á la PowerPoint).
Zu jeder Seite gibt es dann noch eine spezielle, sehr kurze css-Datei,
welche die Formatierung für die Seiten-Navigation
für den Button der aktuellen Seite ändert, also hier auf den WebDesign-Seiten den Button "WebDesign"
(On-Design.CSS).
Diese geben mir auch die Möglichkeit die entsprechenden Seiten später mit speziellen Farben oder Layout zu versehen.
Das war für mich die einfachste Möglichkeit, um die grundsätzlichen Navigations-Menüs (oben und rechts)
auf allen Seiten gleich halten zu können, und per Client-seitigen Includes (von Scribe!, analog zu Phase5)
zentral pflegen zu können (also Änderungen auf zig html-Seiten nur einmal vornehmen zu müssen).
Es wird in den HTML-Dateien jeweils das spezielle CSS eingebunden
(On-Design.CSS),
worin jeweils nur eine css-class definiert ist (hier: class="on-design").
WebHosting habe ich bei all-inkl.de der Firma Neue Medien Münnich.
↑
besonderheiten - notwendiges & spielereien
die meisten Effekte kann man nur in einem Browser sehen, der auch CSS unterstützt.
- Kein Java-Skript (nein, auch keine anderen Skripte im Browser - auch wenn es so aussieht).
- Keine Frames (wirklich nicht, auch wenn es in Mozilla und Opera so aussieht).
- Keine Tabellen für das Layout.
- Nur XHTML und CSS.
- Hoher Kontrast und gute Lesbarkeit durch helle Schrift auf dunklem Hintergrund.
- Flexible Font Größe: auf verschiedenen Bildschirmgrößen und Auflösungen gut anzuschauen.
Mit STRG-Taste und Mausrad-drehen lässt sich die Schriftgröße leicht ändern -
oder über Menü-Ansicht-und irgendwas mit Schriftgröße oder Zoom (je nach Browser).
- Die maximale Breite des Textbereichs ist mit max-width (maximale Breite) auf ca. 60 Zeichen (32em) beschränkt und dadurch besser lesbar (besonders auf großen Bildschirmen
in Vollbildansicht). Siehe z. B. Artikel auf Maxdesign.
Das funktioniert leider nicht so einfach im MSIE:
der kennt max-width noch nicht. Die Lösung von Svend Tofte
(mit einigem Inhalt zur optimalen Textbreite) habe ich nicht eingebaut, sind die "Dynamic Properties" von Microsoft doch aktive Inhalte, die IE6+WinXP mit ServicePack 2 sogar erst mal unterdrückt.
- Das Logo ändert die Größe entsprechend der Äderung der Schriftgröße.
Die Logo-Größe ist im CSS relativ in em (und nicht wie üblich absolut in px = Pixeln) definiert
- im HTML-Dokument ist dafür die Größe mit 100% definiert.
Dadurch wird das Logo auf den ganzen im CSS definierten Logo-Bereich ausgedehnt.
Nachteil: In reinen Text-Browsern wird das Logo in den meissten Browsern mit 100% der Bildschirmgröße angezeigt.
Das bedeutet am Anfang jeder Seite ist neben dem Menü ein nicht-relevanter und unschöner Logo-Bereich zu sehen ist.
Lösung: In Text-Browsern auch die Bild-Anzeige ausschalten.
Ebenso wenn mit Opera (Ansicht-Seitendarstellung-Benutzermodus, bzw. auch bei Kleinbildschirm/Shift+F11) oder Firefox (Ansicht-Seitenstil:ohne)
in den Textmodus geschaltet wird: Bilder abstellen!
Für die in PhilEcon integrierte Textversion habe ich deshalb ein rudimentäres CSS eingebaut.
- Der Mauszeiger ändert sein Aussehen: über Textbereichen habe ich Textauswahl eingestellt und
über Abkürzungen und Akronymen (beide punktiert unterstrichen) erscheint ein Help-Cursor (in der Regel mit Fragezeichen).
- Ursprünglich wurde das Datum der letzten Änderung automatisch auf der Seite rechts unten per SSI eingefügt
(Datum der Datei) - das war tatsächlich ein Script, von dem der Browser allerdings nichts mitbekommt. Auf dem Web-Server wird einfach das richtige Datum eingefügt
und als simples HTML am Monitor des Clients angezeigt. Der einzige Unterschied ist die ".html"-Endung der angezeigten Dateien.
Diese Endung lasse ich jetzt erst mal, auch wenn SSI nicht funktioniert (ist nicht in meinem Hosting-Paket enthalten,
hat aber trotzdem ein Jahr lang funktioniert).
- Abkürzungen und Akronyme sind als solche gekennzeichnet und mit title versehen (erscheint als Tooltipp, wenn man mit der Maus eine Weile dort verweilt).
- Die Navigation durch die Haupt-Seiten ist konsequent über die Tastatur möglich (siehe Sitemap).
Die Unter-Seiten (linkes Navigationsmenü) haben keine Access-Keys, da ich nur Ziffern verwenden wollte,
um Konflikte mit anderen Tasten-Kombinationen in Browser oder Betriebssystem zu vermeiden.
- Insgesamt habe ich mich um barrierefreies (v.a. für Menschen mit Sehbehinderung) und gut zugängliches (accessibility) Webdesign gekümmert,
wozu die meisten hier aufgezählten Besonderheiten beitragen.
Feedback erwünscht:
WebWizard@philecon.de
↑
