Embed Size (px)
Citation preview
bonus|magazin
Kurzporträtder Autorin
Geschichte und Zukunft von CSS
Barrierefreies Internet
Software-Übersicht
07/2006
Die Kunst des CSS-Designs
2
Video-Training »Die Kunst des CSS-Designs«
Über die AutorinAuf der Grundlage von zwei gelernten Berufen – Stau-dengärtner (Landschaftsplanerin war das erste Berufsziel) und Industrie-Kaufmann – dem Studium der Wirtschafts-wissenschaften und Weiterbildungen zum Call-Center-Manager sowie Beschäftigung bei einer Webdesign-Agentur steht Cornelia Lange seit mehr als 20 Jahren im direkten Dialog mit dem Kunden. Branchenerfahrungen in Produktions- und Dienstleistungsbetrieben haben 1994 in die Selbständigkeit als Unternehmensberaterin mit dem Schwerpunkt Kundenkommunikation geführt. Die Tätigkeit hat sich im Laufe der Jahre immer stärker vom reinen Telemarketing zum Webdesign und Online-Marketing ausgeweitet.
Heute ist Cornelia Lange ausgewiesene Spezialistin für CSS-Design und die Planung und Umsetzung barrierefreier Angebote. Einsätze als Trainerin, zum Beispiel bei der Intershop AG, oder diverse Veröffentlichungen unterstützen diese Aussage.
www.clkm.de
Wenn Sie mehr über Cornelia Lange erfahren möchten, können Sie sich das im DVD-Video-Teil enthaltene Interview zu beruflichen und privaten Themen ansehen.
3
bonus|magazin
Alle Videos im ÜberblickCSS und Webstandards
EinführungÜbergabe: besenreinStrikte Entwicklung und gute PlanungJetzt kommt Ordnung reinMit CSS layouten: die BasicsMit CSS layouten: alles fließt …Unser erstes Layout wird fertigNoch ein paar ErgänzungenIn wenigen Minuten ändernEine zentrierte Variante
Papier ist geduldig
Qualität statt QuantitätEinführungDie HTML-Basis
Flexibles Basis-Layout als 3-Spalter
FallbeispieleEinführung Tabellen-design versus CSS-DesignCSS Zengarden auf anderem NiveauVon der Idee zum EntwurfBestimmen Sie die Führung – Teil IBestimmen Sie die Führung – Teil IIEin kleines VersteckspielWenn schon Tabelle, dann richtig ...LayoutbesprechungProblem an unerwarteter Stelle
Ein Körper, zwei Gesichter
Tiefer in die PraxisEinführungEin erster VersuchEin erster Versuch – FortsetzungMühsam nährt sich das Eichhörnchen ...Die Inhalte in Form bringen – Teil I
4
Video-Training »Die Kunst des CSS-Designs«
Die Inhalte in Form bringen - Teil IIAbsolut überlegenSpalte gegen InhaltTabelle oder Liste?Finales DesignEs geht noch besser!Zentrales Schriftgrößenkonzept – Teil IZentrales Schriftgrößenkonzept – Teil IIImage-Replacement-TechnikenCSS-Rounded Corner – ohne Grafiken!CSS-Image-Map – Teil ICSS-Image-Map – Teil II
Zusatzinformationen zu WebgestaltungGestaltgesetzeRäumliche NäheGroß-Klein-KontrastLeicht und schwerRhythmus und WiederholungHelligkeitskontrastFarbkontrastStruktur und PermutationRäumliche AnordnungGoldener SchnittFarbgeschichte
5
bonus|magazin
Geschichte und Zukunft von CSSDie Geschichte von CSS reicht weiter zurück, als Sie vielleicht im ersten Moment erwartet haben. Die Entwicklung der nächsten Version, CSS 3, ist schon seit geraumer Zeit in vollem Gang.
Style Sheets (Formatvorlagen) existieren seit den 1970er Jahren, als die Entwicklung von SGML (Standard Generalized Markup Language) begann. Diverse Browser enthiel-ten eine eigene Style-Sprache, mit der man das Erscheinungsbild von Webdokumen-ten anpassen konnte. Da zu dieser Zeit HTML nur wenige Möglichkeiten zur optisch ansprechenden Darstellung von Inhalten bot, richteten sich diese Style Sheets an den Enduser – und zwar insofern, als dort erst der installierte Browser »entschied«, wie die Webdokumente dargestellt wurden.
Die weitere Entwicklung und Verbreitung von HTML führte zu einer größeren Vielfalt von gestalterischen Möglichkeiten, um die Bedürfnisse der Webentwickler zu erfül-len. Somit hatten die Designer nun mehr Möglichkeiten, um das Erscheinungsbild von Webseiten zu kontrollieren – doch dadurch wurde HTML auch wesentlich kom-plexer und schwieriger zu warten.
Die unterschiedliche Implementierung und die Verwendung verschiedener Spra-chen in Webbrowsern machte es unmöglich, das Erscheinungsbild von Webseiten konsistent zu gestalten; die Verbraucher hatten wenig Kontrolle darüber, in welcher Form sich eine Webseite ihnen darstellte.
Es war offensichtlich, dass eine verbesserte Methode zur Darstellung von Webinhal-ten notwendig war. So wurden dem W3C (World Wide Web Consortium; Gremium zur Standardisierung von Techniken, die das World Wide Web betreffen) neun verschiedene Style-Sheet-Sprachen vorgestellt. Aus diesen neun wurden zwei Sprachen ausge-wählt, die die Grundlage für das heutige CSS bilden: Cascading HTML Style Sheets (CHSS) und Stream-based Style Sheet Proposal (SSP).
Håkon Wium Lie, der heutige technische Vorstand bei Opera Software, schlug 1994 Cascading HTML Style Sheets (CHSS) vor. Zeitgleich arbeitete Bert Bos an einem Browser namens Argo, welcher eine eigene Style-Sheet-Sprache (SSP) verwendete.
Håkons Vorschlag wurde während der »Mosaic and the Web« Conference 1994 in Chicago, Illinois präsentiert. 1995 fand erneut eine Präsentation gemeinsam mit Bert Bos statt. Zu eben dieser Zeit wurde das World Wide Web Consortium gegründet. Das W3C war sehr interessiert daran, die Entwicklungen an CSS voranzutreiben. Hå-kon und Bert entschieden sich für eine Zusammenarbeit, und waren fortan die füh-renden technischen Mitarbeiter des HTML editorial review board (ERB). Unterstützt wurden sie bei ihrer Arbeit unter anderem von Thomas Reardon von Microsoft.
6
Video-Training »Die Kunst des CSS-Designs«
Das H in CHSS entfernte man übrigens, als klar wurde, dass CSS auch auf andere Auszeichnungssprachen angewendet werden kann.
Es existierten bereits andere Style-Sprachen wie z.B. DSSSL und FOSI, jedoch allein mit CSS war es möglich, die Darstellung eines Dokuments mit mehreren Formatvor-lagen (style sheets) zu beeinflussen. Eine solche Formatvorlage konnte von einer an-deren erben, also Elemente übernehmen. Daher kommt auch der Ausdruck »Casca-ding«, also fallend bzw. stufenförmig. Diese Kombination mehrerer Formatvorlagen ermöglichte eine Kombination aus stilistischen Vorlieben, die gleichermaßen vom Webdesigner und vom User kontrolliert werden konnten.
CSS Level 1
Ende 1996 war die CSS-Technologie so weit entwickelt, dass man damit an die Öf-fentlichkeit gehen konnte: Die CSS Level 1 Recommendation wurde im Dezember publiziert. Folgende Optionen konnten über CSS Level 1 unter anderem einheitlich definiert und geregelt werden:
• Schrifteigenschaften wie z.B. Schriftart und Schriftschnitt• Farbe von Text, Hintergrund und anderen Elementen• Textattribute wie z.B. Zeilenabstand und Laufweite• Ausrichtung (Alignment) von Text, Bildern, Tabellen und anderen Elementen• Seitenrand (Margin), Rahmen (Border), Padding und Positionierung für die
meisten Elemente• Eindeutige Identifizierung und allgemeine Klassifizierung von Attributgruppen
Bis zur Veröffentlichung der CSS Level 1 Recommendation arbeitete das HTML Edi-torial Review Board (ERB) gleichermaßen an der Weiterentwicklung von HTML, CSS sowie DOM (Document Object Model). Anfang 1997 wurde das ERB in drei Gruppen aufgeteilt: in die HTML Working Group, die DOM Working Group und die CSS Wor-king Group.
CSS Level 2
Die CSS Working Group widmete sich Aufgaben, die in CSS Level 1 noch nicht be-handelt wurden. Dies führte zur Entwicklung von CSS Level 2, welches erstmals im November 1997 vorgestellt, und im Mai 1998 als W3C Recommendation veröffent-licht wurde.
7
bonus|magazin
CSS Level 3
Die Entwicklung von CSS Level 3 begann 1998 und läuft bis zum heutigen Tag. Unter http://www.w3.org/Style/CSS/current-work kann der aktuelle Stand eingesehen werden. Die verschiedenen Dokumente zu CSS 3 besitzen entweder Entwurfssta-tus (Working Draft) oder sind Kandidaten für den Status einer offiziellen W3C-Emp-fehlung (Candidate Recommendation). Einige dieser neuen Funktionen wurden in verschiedenen Browsern bereits auf unterschiedliche Weise implementiert. Bis die endgültigen Recommendations veröffentlicht werden, wird es jedoch noch einige Zeit dauern, bis CSS 3 vollständig in allen Browsern implementiert sein wird, erfah-rungsgemäß noch ein ganzes Stück länger.
Viele der Neuerungen von CSS 3 zielen darauf ab, komplizierte, aber weit verbrei-tete Konstruktionen und Workarounds überflüssig zu machen. Was derzeit per JavaScript oder mit einem Tabellenkonstrukt gelöst wird, soll dann nur noch wenige Zeilen Code benötigen. Beispiele dafür sind etwa abgerundete Ecken bei Rahmen, mehrspaltige Layouts, mehrseitige Druckversionen, erweiterte Möglichkeiten bei der Gestaltung von Hintergründen und Rahmen, Einbindung von Farbprofilen oder flexible Gestaltung von User-Interface-Elementen.
CSS barrierefreiIn das Durcheinander proprietärer Browser und parallel entwickelter »Stan-dards« der Anfangstage des Web platzte der Begriff der Barrierefreiheit. Seitdem sind vor allem öffentliche Einrichtungen, aufgrund der rechtlichen Situation, Vorreiter in dieser Angelegenheit.
Zu Beginn sollte man einfach mal klar und offen definieren, dass es zwei Hauptgrün-de gibt, warum sich Menschen auf die Entwicklung von Webseiten stürzen. Entwe-der sie lieben die technische Herausforderung mit dem Computer als Gegner oder sie gehen mit dem Anspruch toller grafischer Gestaltung an die Sache.
Mit den modernen Applikationen und Standards ist es heute möglich, beide Seiten zu berücksichtigen: also Techniker und Designer in Personalunion. Lange vorbei sind die Zeiten, als Grafiker Entwickler für die Umsetzung des Projekts benötigten – und umgekehrt. Heute kann jeder, der über grafische Fähigkeiten verfügt, ansehnliche Webseiten entwerfen!
Nicht unbedingt eine neue Technik, aber eine neue Anforderung entstand in den letzten Monaten durch Websites, die auf Besucher mit einer Behinderung angepasst sind. Das Zusammenspiel von Barrierefreiheit und Webdesign ist für die Entwickler
8
Video-Training »Die Kunst des CSS-Designs«
eine neue Herausforderung, vor allem bei jenen, die das Design sehr ernst nehmen. Später im Text werden Sie entdecken, warum es wichtig sein kann, dass manche Be-sucher das vorbestimmte Design der Site vollkommen abschalten können – wobei das natürlich noch lange nicht bedeutet, dass man dann das Design für alle anderen Besucher ebenfalls vergessen kann.
Früher war alles einfacher ...
Vielleicht erinnern Sie sich noch an den Beginn der Webentwicklung. Ende der 90er-Jahre war es in Ordnung, mit HTML die Internetseiten zu basteln, solange das Er-gebnis nur in den verbreitetsten Browsern (Netscape & Co.) dargestellt wurde, wie man es wollte. Der Anteil des Designs am Gesamtaufwand war noch sehr gering, der Code wurde mit nur wenigen Elementen aufgepeppt (»font« oder gar »blink«, derar-tige Elemente werden heute als »Präsentationselemente« bezeichnet).
... Hauptsache lesbar
Im Zeitalter von Webstandards wissen wir, wie unzureichend und beschränkt die-se Art und Weise des Webentwickelns war. Die Sites waren überladen, Struktur und Inhalt waren nicht getrennt, der HTML-Code war meist nur an einen Browser ange-passt und mit dessen nächster Version auch schon wieder veraltet! Im Nachhinein – und mit einigem Sarkasmus – bezeichnet man heute diese Art von Quell-Code als »HTML-Suppe«.
Und heute?
Noch sind das gesamte Ausmaß und die Bedeutung der Barrierefreiheit im Internet nicht auf breiter Basis bekannt.
Die Nutzbarkeit von Internetseiten für Menschen mit einer Behinderung (oder wie es im Englischen schöner heißt, mit einem Handicap) war bislang schlecht. Wenn Brow-ser schon Mühe haben, den Code-Müll zu interpretieren und die Webseite richtig darzustellen, kann man sich vorstellen, wie viel mehr Mühe es Screen-Reader kostet, denselben Code in Sprache oder Braillezeichen umzusetzen!
Apropos: Nur wenige Webentwickler wussten überhaupt, was ein Screen-Reader ist, obwohl diese schon 1989 auf den Markt kamen (zu der Zeit ist nämlich OutSpoken für den Macintosh erfunden worden).
Als das gesamte Konzept vom barrierefreien Webdesign etwas weiter bekannt wur-de – 1999 wurden die Web Content Accessibility Guidelines 1.0 (WCAG) veröffent-licht –, kam es teilweise zu einer Überreaktion. Einige Entwickler und eine große Anzahl von Befürwortern der Barrierefreiheit beschlossen, dass stark grafikbetonte Internetseiten schon aufgrund ihrer Grafiken als »unzugänglich« einzustufen seien.
9
bonus|magazin
Als Folge daraus war es zu der Zeit nicht schwer, Berichte zu finden, die Nur-Text-Sei-ten als Alternative empfahlen, um eine Zugänglichkeit zu erreichen.
Bei den zahlreichen Versuchen, das Internet für blinde Menschen barrierefrei zu ge-stalten, wurde übersehen, dass es auch Menschen mit anderen Behinderungen gibt, die das Internet ebenfalls nutzen möchten. Diese Menschen erwarten gutes barrie-refreies Webdesign genauso, wie andere sehende Menschen es auch tun. Letztlich erfuhren schlecht sehende Menschen und Menschen mit anderen Einschränkungen die gleiche Behandlung wie Blinde (der Einfachheit halber?).
Um den Jahrtausendwechsel herum entwickelte sich ein erstes echtes Bewusstsein zum Thema barrierefreies Webdesign: Die Nützlichkeit der WCAG (siehe oben) wur-de erkannt und doch trifft man auch heute noch auf irrtümliche Überinterpretati-onen dieser Regeln.
Heutzutage
Auf die Anfänge der Webentwicklung blickt man heute wie durch einen Schleier. Niemand denkt gerne an diese Zeit und an die beschränkten Arbeitsweisen von da-mals zurück. Zu viele Font-Tags im Code, viel zu viele »Optimiert für Netscape Navi-gator«-Banner auf den Seiten.
Mittlerweile ist bekannt, dass man HTML nicht einfach in eine Textdatei stopft, auch wenn der Seiteninhalt im Lieblings-Browser hinterher – zufällig – korrekt dargestellt wird, sondern dass »valides HTML« existiert, das man auch einsetzen kann.
Heute verwendet man nicht nur valides HTML, sondern auch valides semantisches HTML: HTML-Elemente werden nach ihrer tatsächlichen Bedeutung eingesetzt und nicht mehr danach, was die Elemente in einem Browser anzeigen. So wird sicherge-stellt, dass sich Überschriften, Paragrafen, Bilder, Listenelemente & Co. unterschei-den und dass sie in korrekter Markup-Sprache beschrieben werden.
Dazu gibt es natürlich auch eine Parallelbewegung: So wie manche Menschen die Lieder von Abba oder den Beatles besser finden als die aktuellen Hits, so gibt es auch Webentwickler, die sich Sorgen machen, dass im Club der standardkonformen HTML-Sites neue, gut aussehende Websites seltener werden.
Und dann kommt CSS ...
In den vergangenen Jahren hat die Gruppe der Webentwickler ein paar Dinge ge-lernt: Heute weiß man, dass der »Techniker« namens HTML mit einer sehr tollen und fähigen »Innenausstatterin« verheiratet ist: CSS.
Keine Frage, es ist wichtig, dass der Techniker dafür sorgt, dass das Leben in einem Haus ungefährlich bleibt, und dessen Konstruktion darauf ausrichtet. Aber die Farbe
10
Video-Training »Die Kunst des CSS-Designs«
der Wände und der Möbel sollte man doch besser die Innenausstatterin aussuchen lassen ...
Cascading Stylesheets reduzieren die Bedeutung widerspenstiger Browser. Endlich ist da etwas, das den Browsern unmissverständlich beibringt, wie die HTML-Ele-mente zu zeigen – oder besser: zu präsentieren – sind. Nämlich so, wie es der Gestal-ter ursprünglich wollte!
Endlich hat man diese lang ersehnte Kontrolle! Jetzt, mit der Struktur der Seite als Basis, kann man sich seinen kühnsten gestalterischen Ideen oder Vorgaben zuwen-den. Man kann mit CSS die Struktur, also den Inhalt, von der Präsentation, also dem Design, trennen.
CSS im Dienste der Barrierefreiheit
Sie fragen, was CSS mit gehandicapten Menschen zu tun hat?
Das w3c (»World Wide Web Consortium«, quasi der Anführer der Techniker) hat ein Dokument zum Thema »CSS und Barrierefreiheit« veröffentlicht, nur findet sich in diesem Dokument leider wenig Brauchbares. Auf den ersten Blick sieht man bei-spielsweise gar nicht, dass CSS viel mit Barrierefreiheit zu tun hat, weil es ständig nur um valides HTML geht.
Und doch: Selbst wenn man sich als Webdesigner an vorhandene Standards hält, ist es möglich, Internetseiten zu produzieren, die für manche Menschen mit Behinde-rung schwierig oder sogar unmöglich zu benutzen sind!
Screen-Reader
Für jemanden, der wenig oder sogar überhaupt nichts sieht, ist die Arbeit eines Webdesigners vollkommen unrelevant. Dann nämlich werden Websites nur mit Hil-fe eines Screen-Readers besucht, einer so genannten »Vorlese-Software«, die dem Besucher die Texte auf der Seite entweder vorliest oder zusätzlich auf einer Braille-zeile ausgibt. Logischerweise betrifft das nur Textinhalte, die anderen Elemente der Website sind davon nicht betroffen.
Die Positionen von Webdesigner und blinden Menschen könnten nicht unterschied-licher sein: Während der eine mit viel Hingabe »Kunstwerke« erschafft, kann der an-dere mit diesen grafischen Errungenschaften gar nichts anfangen! Das ist zumindest dann so, wenn man immer noch altmodische HTML-Wüsten produziert. Dann näm-lich werden blinde Menschen, die einen Screen-Reader einsetzen, sehr viel Mühe haben, sich ihren Weg durch die Internetseite zu bahnen.
Überschriften, Links, Listen und ähnliche Strukturen (sogar Tabellen) könnten, falls sie intelligent verarbeitet sind, durchaus von modernen Screen-Readern gelesen
11
bonus|magazin
werden. Wenn man es also richtig angeht, macht es keinen großen Unterschied, dass ein blinder Besucher das Design der Seite gar nicht sehen kann.
Es gibt allerdings eine Anzahl von Ausnahmen, von denen einige ziemlich überra-schend sind.
Navigation
Screen-Reader tasten die Seite linear ab, während der sehende User alle Informa-tionen gleichzeitig aufnimmt. Den Weg durch eine Website zu finden wird also da-durch nicht wirklich einfacher.
Komplexe Seitenlayouts mit mehreren Navigationsbalken und unzähligen Links sind oft schon für Sehende unnötig und lästig – dieser Negativeffekt verstärkt sich für Nutzer von Screen-Readern. Daher: Bessere Usability führt in diesem Fall auch zu einer verbesserten Zugänglichkeit.
Reihenfolge des Codes
Screen-Reader arbeiten sozusagen als Browser-Aufsatz (fast ausnahmslos für den Microsoft Internet Explorer für Windows). Die wichtigsten Screen-Reader sind davon abhängig, wie der Browser CSS interpretiert, allerdings haben sie selbst auch noch eine eigene Interpretation von CSS. Unter bestimmten Umständen könnten Float-Elemente in CSS durch Screen-Reader fehlinterpretiert werden, weil die Reihenfolge im HTML-Code für solche Layouts von Bedeutung ist. Das ist ein guter Grund für die Weiterentwicklung von Screen-Readern. Bis jedoch die nächste Generation von Screen-Readern erhältlich sein wird, muss man sich selbst um das Problem küm-mern.
Alternativen für Bilder
Wenn man CSS einsetzt, um ein Bild durch einen Text zu ersetzen, gibt es leider keine Methode, die garantiert, dass der Alternativtext auch tatsächlich von Screen-Rea-dern vorgelesen wird! Das hängt damit zusammen, wie der Screen-Reader »visibility: hidden« und »display: none« interpretiert. Es bleibt jedem selbst überlassen, heraus-zufinden, auf welche Bilder das zutrifft.
Unter http://meiert.com/de/publications/articles/20050513/ finden Sie eine Auf-listung zahlreicher so genannter Image-Replacement-Techniken, mit all ihren Vor- und Nachteilen.
Ein zukünftiger Reader Media Type (www.w3.org) könnte den gewünschten Fort-schritt bringen. Für manche Bilder ist es ja nicht weiter schlimm, dass sie für Screen-Reader unsichtbar sind, wenn man Bilder jedoch als Gestaltungselement überlegt einsetzt, sollten auch wirklich alle Benutzer davon erfahren.
12
Video-Training »Die Kunst des CSS-Designs«
Problemfall FONT-Tag
Für einige Screen-Reader stellen die FONT-Einträge Probleme dar. So kann es bei-spielsweise passieren, dass von einer Überschrift, bei der jeweils der erste Buchstabe eines Worts größer als die anderen dargestellt wird, bei einem Screen-Reader nicht mehr viel übrig bleibt:
Aus: »The Quick Brown Fox Jumped Over The Fence«
wird dann: »he uick rown ox umped ver he ence«
Aus diesen Gründen sollten Sie sich den Einsatz des FONT-Tags gut überlegen!
Verborgener Text
Textalternativen für Bilder halten ein weiteres Problem bereit: Wenn man »visibility: hidden« oder »display: none« verwendet, um einige Texte unsichtbar zu machen, le-sen manche Screen-Reader trotzdem den Text vor, oder geben ihn als Braillezeichen wieder. Unsichtbarer Text wird zum Beispiel eingesetzt, um die Webseite für Such-maschinen mit Schlagworten zu versehen. Diese eher zweifelhafte Methode kann sich aber unter Umständen als Eigentor erweisen, wie der Autohersteller BMW An-fang 2006 schmerzlich feststellen musste. Damals wurde der Webauftritt von Google vorübergehend aus dem Index gestrichen.
http://www.heise.de/newsticker/meldung/69230
Visuelle Behinderungen
Neben den Sorgen mit den Screen-Readern gibt es weitere Umstände, die das On-line-Leben für Menschen mit visueller Einschränkung schwierig machen.
Farbkombinationen
Hier gibt es mehr oder weniger zwei Gruppen, die man berücksichtigen muss: zum einen Menschen mit angeborener Farbenblindheit, zum anderen Menschen mit be-stimmten Formen der Fehlsichtigkeit, die dadurch auf eine andere Weise Probleme mit der Farberkennung haben als die Gruppe der Farbenblinden.
Dabei geht es nicht um das Fehlen von Farbe: Menschen, die farbenblind sind, sehen Farben. – Das Problem ist eher, dass es eine Reihe von Farben gibt, die farbenblinde Menschen durcheinander bringen. Klassisch ist die Farbkombination Rot und Grün, die Irritation verursacht. Allerdings sorgen auch viele rötliche und grünliche Farbab-stufungen für Verwirrung.
Deutlich weniger Menschen haben Probleme, Blau und Grün auseinander zu hal-ten. Ungefähr vier bis acht Prozent der Bevölkerung in westlichen Ländern (dabei
13
bonus|magazin
handelt es sich meistens um Männer) haben in der einen oder anderen Form eine Abweichung der Farbsichtigkeit.
Webdesigner müssen keinen großen Aufwand betreiben, um diese Probleme in den Griff zu bekommen. Man muss eigentlich nur dafür Sorge tragen, dass die be-kannten kritischen Farbenkombinationen nicht in irreführender Weise verwendet werden. Man kann durchaus Rot und Grün oder Blau und Grün auf derselben Seite einsetzen, nur darf man sie nicht direkt nebeneinander setzen, wenn man vom Be-sucher erwartet, dass er die Farben auseinander halten kann.
Die Ausnahme: Wenn man auf andere Weise für Unterscheidung sorgt, sind zum Bei-spiel rote und grüne Buttons nebeneinander durchaus möglich, wenn der Navigati-onstext alleine schon ausreichend Aufschluss über den Unterschied liefert!
Auf der Website http://www.vischeck.com/vischeck/vischeckImage.php können Websites nach der Angabe der URL quasi »mit den Augen eines Farbenblinden« ge-sehen werden. Sollte das Tool Probleme mit einer Website haben, können Sie alter-nativ auch einen Screenshot hochladen und analysieren lassen. Auf dieser Website erfahren Sie auch, wie sich die unterschiedlichen Formen der Farb-Fehlsichtigkeit bemerkbar machen.
Sehschwäche
Das Alptraum-Szenario für jeden Webdesigner schlechthin: Wenn es um Sehschwä-che geht – also um Menschen, die noch über einen Teil ihres Sehvermögens verfü-gen –, unterscheidet sich der Anspruch dieser Menschen enorm von dem anderer User-Gruppen. Jede Person ist mit ihrer speziellen Form der Sehschwäche anders.
Sehbehinderte Menschen nutzen CSS auf eine Art und Weise, die das ursprüngliche Design zu einer fürchterlichen Parodie seiner selbst macht. Folgende Einstellungen sollten für die Site getroffen werden können:
1. Größe und Laufweite der Schrift
2. Vorder- und Hintergrundfarbe
3. Reihenfolge der Blöcke (oder verzichten Sie auf Layouts mit mehreren Spalten)
4. Navigation (wenn alle Buchstaben enorm groß sind, fällt es schwer herauszufin-den, wo man sich gerade befindet)
Das hier ist eine ganz besondere Herausforderung für Webdesigner, allerdings gibt es auch Lösungen – und in vielen Fällen kann man als Designer immer noch ziemlich viel Einfluss auf das Ergebnis ausüben.
14
Video-Training »Die Kunst des CSS-Designs«
Stylesheet-Switcher
Beim Entwickeln von Websites kann man so viele verschiedene CSS-Versionen ein-setzen, wie man will, um alternative Anzeigemöglichkeiten vorzubereiten – was ge-rade für sehbehinderte Menschen interessante Perspektiven eröffnet.
So könnte man durchaus ein oder mehrere alternative Anzeigemöglichkeiten einbin-den, um zum Beispiel die Hauptnavigation direkt am Anfang einer Webseite zu plat-zieren (z.B. ein »Sie befinden sich hier«-Pfad). Oder man verwendet große Schriften in hellen Farben auf dunklem Hintergrund. Jemand, der eine derartige Darstellung bevorzugt oder braucht, kann dann den entsprechenden Stil auswählen.
Auswahlbutton auf der Seite
Bei Mozilla ist es leicht möglich, das Stylesheet per Menübefehl zu wechseln. Nur be-nutzen die meisten schlecht sehenden Menschen Browser, die das nicht bieten kön-nen! Also muss man selbst dafür sorgen, dass die Besucher ihre Stylesheets leicht(er) wechseln können: zum Beispiel mit Schaltflächen oder Links.
Leider verändern die meisten Entwickler die Schriftgröße nur wenig, und nur selten kann man das ganze Erscheinungsbild der Site verändern. Dafür sind die Schaltflä-chen oft klein und unauffällig, weil der Gestalter diese Elemente nicht zu sehr ins Auge springen lassen möchte.
Zu guter Letzt sind auch die Vorgaben an diese Schaltflächen uneinheitlich, was die Positionierung auf der Webseite betrifft. Dabei sollte man nicht vergessen, dass die Stylesheet-Switcher für Besucher gedacht sind, die ohnehin schon schlecht sehen!
Fazit
Bereiten Sie zusätzliche Stylesheets mit aussagekräftigen Titeln vor: Diese Be-zeichnungen werden im »Use Style«-Optionsmenü von Mozilla angezeigt.
Bieten Sie eine oder mehrere Möglichkeiten, um den Kontrast zu erhöhen (z.B. helle Schrift auf dunklem Grund).
Sorgen Sie für eine mögliche größere Schrift. Allerdings sollte die Zeilenhöhe (line-height) proportional bleiben: Verwenden Sie daher die Einheiten »em«, »ex« oder »%« ...
Achten Sie darauf, alles in einer Spalte anzeigen zu lassen – beginnend mit der Hauptnavigation, gefolgt vom Inhalt. All diese Dinge sollten auf einer Präferenz-seite, die mit Hilfe von Cookies gespeichert werden kann, zusammengefügt werden können.
•
•
•
•
15
bonus|magazin
Software-ÜbersichtIm Folgenden finden Sie eine Liste mit näheren Informationen zu der Software die im Training eingesetzt wurde. Außerdem finden Sie Vorschläge, welche Pro-gramme alternativ dazu eingesetzt werden können.
Top Style Pro 3.12
www.newsgator.com
Die Autorin verwendet in diesem Training Top Style Pro 3.12, um die CSS-Dokumen-te zu editieren. Theoretisch können Sie CSS-Dateien mit einem einfachen Texteditor schreiben, doch auf Dauer werden Sie damit bestimmt nicht glücklich. Spezialisierte Editoren erleichtern dem Entwickler mit Datei- und Projektverwaltungsfunktionen, Code-Hints und Syntax-Highlighting das Leben. Eine vereinfachte Version von Top Style Pro namens Top Style Lite kann von der Herstellerwebsite kostenlos herun-tergeladen werden.
Neben zahlreichen Editoren und Programmierwerkzeugen, die teilweise frei ver-fügbar sind, können auch Macromedia Dreamweaver 8 bzw. Adobe GoLive CS2als Alternative für die Arbeit mit CSS betrachtet werden. Die beiden Programme stellen Werkzeuge für Design und Programmierung bereit, wobei Dreamweaver im Vergleich zu GoLive als eher codeorientiert gilt. Nach jüngsten Meldungen sollen beide Programme trotz des Zusammenschlusses der Herstellerfirmen eine Zukunft besitzen.
Macromedia Fireworks 8
www.adobe.com/de/products/fireworks
Macromedia Fireworks ist der ideale Assistent für die gestalterischen Tätigkeiten eines Webdesigners, um Grafiken aller Art für das Web zu optimieren und zu exportie-ren. Alternativ dazu kann auch das Gespann Adobe Photoshop und Adobe ImageReady zum Einsatz kommen.
Interessant aufgrund der geringeren Kosten sind auch die Photoshop-Konkurrenten The Gimp (www.gimp.org) und Paint Shop Pro (www.corel.de). Da beide Programme nicht an den Verbreitungsgrad von Photoshop herankommen, ist es natürlich auch schwieriger, auskunftsbereite Kollegen, oder Video-Trainings zu finden, falls Fragen auftauchen.
16
Video-Training »Die Kunst des CSS-Designs«
Um böse Überraschungen auszuschließen, sollte jeder Webentwickler seine Entwick-lungen in unterschiedlichen Browsern testen. Hier erhalten Sie einen unvollständi-gen Überblick über die gängigsten Browser und wo man diese herunterladen kann. Verlässliche Angaben über die Verbreitung der Browser sind nur schwer möglich, da die Verbreitung in unterschiedlichen Zielgruppen sehr stark schwanken kann. Fest steht, dass der Internet Explorer noch immer der am weitesten verbreitete Browser ist. Die Angaben bewegen sich zwischen 60 und 75%. Dahinter folgt Firefox, wobei die Angaben hier sehr stark schwanken (10 bis 20%). Safari und Opera bewegen sich im schwer messbaren Bereich von wenigen Prozent, wobei der Anteil der Safari-Sur-fer ziemlich genau dem Anteil an Mac-Surfern entspricht. Unter den Websurfern sind sie, genau wie Linux-User, die hauptsächlich Konqueror einsetzen, eine Minderheit, außer es handelt sich um eine Special-Interest-Website. In einer Statistik von Selfht-ml führt beispielsweise Firefox mit 52% vor dem Internet Explorer mit 32%. Danach folgen Opera mit 6% und Safari mit fast 5%. Kuriosum am Rande: Zwei der 53.403 Besucher betrachteten das Selfhtml-Blog auf ihrer PlayStation Portable. Quelle: http://aktuell.de.selfhtml.org/weblog/browserstatistik
Eine vollständige Liste aller Webbrowser, inklusive z.B. Textbrowser, fi nden Sie hier: http://de.wikipedia.org/wiki/Liste_von_Webbrowsern
Microsoft Internet Explorerhttp://www.microsoft.com/germany/windows/ieIE 7 steht derzeit als Beta 2 zum Download bereit. Viele der beworbenen neuen Funktionen werden Firefox- oder Opera-Anwendern sehr bekannt vorkommen! Zyniker könnten behaupten, dass Microsoft zugibt, der IE sei frü-her verwirrend und unsicher gewesen.
Firefoxhttp://www.mozilla.com/Die Nummer 1 unter den Browser-Alternativen wird von den Anhängern auf einen Thron gehoben. Die Funkti-onen lassen sich mit Opera & Co. vergleichen. Interessant sind die zahlreichen Add-ons, wie beispielsweise die Developer Toolbar.
17
bonus|magazin
Operahttp://www.opera.com/Der Browser aus Norwegen ist unter den »normalen« Websurfern zwar nicht so weit verbreitet wie Firefox, wird aber oft als innovativer bezeichnet. Er fi ndet auf den verschiedensten Plattformen Verwendung, wie beispiels-weise Nintendo-Spielkonsolen oder TV-Set-Top-Boxen.
Caminohttp://www.caminobrowser.orgDer Browser für Mac OS basiert, wie Firefox, auf der Render Engine Gecko. Die Render Engine ist eine Kern-komponente des Browsers und dafür verantwortlich, aus HTML, JavaScript, CSS, Bildern usw. eine visuelle Darstel-lung der besuchten Website zusammenzusetzen.
Safarihttp://www.apple.com/de/macosx/features/safariSafari ist fi xer Bestandteil von Mac OS seit der Version 10.3 und hat nach dem Ende des IE für Mac so gut wie 100% Marktanteil unter den Mac-Anwendern. Safari gilt als einer der fortschrittlichsten Browser am Markt.
Konquerorhttp://www.konqueror.org/Konqueror ist nicht nur ein Webbrowser, sondern fun-giert auch als Dateimanager und Dateibetrachter für so gut wie alle UNIX-artigen Betriebssysteme, beispielswei-se Linux.
Die Autorin verweist im Training auf die Developer Toolbar für Firefox, die Sie unter https://addons.mozilla.org/fi refox/60 herunterladen können . Die Installation ist sehr einfach. Das Add-on spendiert Firefox die hier abgebildete zusätzliche Werk-zeugleiste. Damit kann die gerade geöff nete Seite auf verschiedenste Art analysiert werden. Es können Stylesheets, JavaScript oder Cookies ganz einfach deaktiviert werden, Alt-Texte oder Bildeigenschaften lassen sich anzeigen und vieles mehr.
19
bonus|magazin
Die Idee Video-TrainingOft fehlt dem Lernenden die Zeit, sich notwendiges Wissen mühsam aus Büchern oder in teuren Schulungen anzueignen.
Dieses Video-Training geht einen neuen Weg und präsentiert Ihnen Ihr persönliches Training direkt zuhause am Rechner: Sie selbst bestimmen das Lerntempo und ent-scheiden, welche Funktionalitäten von CSS Sie kennen lernen möchten. Sie können das Video-Training Lektion für Lektion durcharbeiten oder gezielt jene Kapitel an-springen, die Sie bei der Erstellung Ihrer Projekte am meisten interessieren. Falls die Handhabung des Video-Trainings nicht klar ersichtlich ist oder Sie Verbesserungs-vorschläge, Wünsche oder Kritik haben, so sind wir für Rückmeldungen unter der Adresse [email protected] stets dankbar!
Wir nehmen Ihre Meinung ernst – der beste Beweis dafür sind die zahlreichen Neue-rungen, die auf Anregung von Kunden entstanden sind: Zu jeder Lektion gibt es eine ausdruckbare Zusammenfassung, Ihr Wissen können Sie mit einer Lernziel-kontrolle in Form eines Multiple-Choice-Tests am Ende jedes Kapitels prüfen. Nun bleibt noch, Ihnen viel Spaß und Lernerfolg mit diesem Video-Training zu wünschen!
Ihr video2brain-Team
Fernseher oder Computer – Sie entscheiden!Dieses Video-Training besteht aus einem DVD-Video- und einem DVD-ROM-Teil. Im DVD-Video-Teil finden Sie speziell für die Darstellung am Fernseher aufbereitete Lek-tionen. Wenn Sie möchten, können Sie einen Teil des Seminars also gemütlich auf der Wohnzimmercouch absolvieren. Ein DVD-Player und ein TV-Gerät sind alles, was Sie dafür benötigen. Noch mehr Videos stehen allerdings im DVD-ROM-Teil bereit. Hier profitieren Sie von zahlreichen Zusatzfunktionen und einer sehr klaren und in-tuitiven Benutzerführung.
Um den DVD-ROM-Teil dieses Video-Trainings abzuspielen, legen Sie die DVD ganz einfach in das DVD-Laufwerk Ihres Computers ein. Unter Windows star-tet die DVD dann in den meisten Fällen automatisch. Sollte dies nicht der Fall sein, können Sie das Training durch einen Doppelklick auf die Datei start.exestarten. Wenn Sie an einem Apple arbeiten, öffnen Sie die HTML-Datei start.html in Ihrem Standard-Webbrowser.
20
Video-Training »Die Kunst des CSS-Designs«
Achtung: Unter Mac OS X kann es vorkommen, dass beim Einlegen der DVD auto-matisch der DVD-Software-Player gestartet wird. Da diese Videos für die Darstellung am Fernseher optimiert sind, erscheinen sie am Computerbildschirm unscharf. Um in den Genuss der vollen DVD-ROM-Funktionen zu gelangen, beenden Sie in diesem Fall den Software-DVD-Player und starten Sie das Training wie oben beschrieben.
Optimales ArbeitenDieses Video-Training besteht aus aufeinander aufbauenden Workshops. Dadurch ist es möglich, ein durchgehendes Seminar zu »besuchen«, indem alle Workshops nacheinander, von oben nach unten, aufgerufen werden. So erhalten Sie eine fun-dierte Ausbildung. Wenn Sie mehrere aufeinander folgende Lektionen am Stück an-sehen möchten, bietet sich die Funktion »Alle Videos abspielen« bzw. »Kapitelvideos abspielen« besonders an.
Zur Wiederholung von bereits gesehenen Inhalten kann einfach und direkt auf den entsprechenden Teil des Seminars zugegriffen werden. Dadurch können Sie zu je-dem Zeitpunkt die Informationen bekommen, die Sie gerade benötigen. Wenn Sie auf den Hilfe-Button klicken, starten Sie einen Hilfe-Film mit einer detaillierten Be-dienungsanleitung.
So finden Sie den richtigen FilmBewegen Sie die Maus über einen Menüeintrag, so öffnet sich ein Informationsfeld, das die behandelten Themen und Inhalte genauer vorstellt und die Gesamtdauer anzeigt. Ein Klick auf den Menüeintrag öffnet das Untermenü bzw. den Film. Im
21
bonus|magazin
Kapitelüberblick, also auf der obersten Ebene der Struktur, fi nden Sie links in der Menüzeile den Eintrag »Übersicht«. Über diese Schaltfl äche gelangen Sie zu einer Liste sämtlicher Lektionen, die auf der DVD enthalten sind. Ein Klick auf einen Eintrag öff net das entsprechende Video. Für Ihre persönliche Übersicht können Sie diese Liste auch ausdrucken.
Navigation im FilmInnerhalb des Films können Sie über die Bedienleiste direkt unter dem Videobereich navigieren. Um schnell in einem Film zu navigieren, verwenden Sie die Vor- und Rücklauf-Taste 1 . Durch Klicken dieser Tasten springen Sie im Film vor bzw. zurück. Mit der Play/Pause-Taste 2 kann das Video angehalten und fortgesetzt werden. Über die Taste »Video schließen« 3 wird der Abspielvorgang abgebrochen und Sie kehren wieder zu dem Menü zurück, aus dem Sie den Film aufgerufen haben. Zudem kann der Film über die Abspielleiste mit der grünen Abspielmarke 4 gesteuert wer-den. Interessant sind auch die beiden Tasten rechts unter der Leiste 5 : Per Klick kön-nen Sie direkt zum nächsten/vorherigen Film des Untermenüs springen – besonders praktisch, wenn Sie das Training systematisch durcharbeiten. Um die Lautstärke der Filme individuell einzustellen, verwenden Sie den integrierten Lautstärkeregler 6 .Über die Lesezeichen-Taste 7 rufen Sie einen Dialog auf, mit dem Sie individuelle Markierungen in der Abspielleiste setzen. Über die Tasten links und rechts davon können Sie zum vorherigen/nächsten Lesezeichen springen. Ein Klick direkt auf das Video bzw. auf die Taste »Übersicht einblenden« 8 blendet eine Multifunktionsleis-te für Film-Schnellwahl und Lesezeichen-Verwaltung ein. Individuell definierte Lese-zeichen erscheinen als weiße Markierungen in der Abspielleiste 9 . Sobald Sie die Maus in die Nähe der Markierung bewegen, wird der Titel des Lesezeichens ange-zeigt. Ein Klick auf die Markierung lässt den Film an die gespeicherte Position sprin-gen.
Tipp: Mit gedrückter rechter Maustaste können Sie die Applikation an eine beliebige Stelle am Bildschirm ziehen – besonders praktisch bei Dual-Monitor-Arbeitsplätzen. Ein Klick auf das Quadrat rechts oben zentriert das Fenster wieder.
1 2
3
4
55
6 7 8
9
effi zienteNavigation
Hilfefi lm zur Bedienung
druckbare Übersicht mit Direktlink zu
den VideosSeminarmodus
– alle Videos abspielen
Details zu Kapiteln und Lektionen – immer im Blick
Audio-einleitung
So behalten Sie immer die Orientierung
intuitive Abspielsteuerung
mit einem Klick zu den Rohmaterialien
druckbare, durchsuchbare
Zusammen-fassung zu
jedem Kapitel
Multifunktions-leiste für Film-Schnellwahl und Lesezeichen-verwaltung
interaktive Drag&Drop-Zeitleiste
Information zu DVDs, Büchern und Online-Angeboten
fl üssigeDarstellung –
alle Detailsim Blick
individuelle Lautstärke-
regelung
• beste Tonqualität• für Mac, PC, TV und Webbrowser• mit Rohmaterial und Projektdateien• Bonusmagazin
direkt zum nächsten/vorherigen Video
