Das Web ist immer noch nicht aus Papier Technikwürze 35

Technikwürze fünfunddreißig. Schön, dass ihr wieder eingeschaltet habt. Hier ist euer Design und Webstandards Podcast.

Nach den News von Nadja gibt es den zweiten Teil aus dem Buch von Peter Müller Little Boxes Webseiten gestalten mit CSS Grundlagen.

Schlagzeilen.

Schweizer Zertifikat für barrierefreie Webseiten. Seit dem 16. August gibt es in der Schweiz ein Zertifizierungsverfahren für barrierefreie Webseiten. Das Label "Geprüfte barrierefreie Website" wurde von der Schweizer Stiftung Zugang für alle ins Leben gerufen und soll einen verbindlichen Maßstab für Barrierefreiheit im Schweizer Web darstellen.

Das kostenpflichtige Testverfahren wird von Menschen mit Behinderungen durchgeführt, orientiert sich an den Zugänglichkeitsstufen der WCAG eins null und schlägt mit eintausendsechshundertfünfzig bis viertausendfünfhundertfünfzig Schweizer Franken zu Buche. Mehr Informationen gibt es auf der Website www.labelforall.ch.

SEO Tipps. Achtzehn Tipps zur Suchmaschinenoptimierung gibt Martin Labuschin auf seinem Weblog Labuschin.com. Die Checkliste enthält aber auch Hinweise für eine Optimierung hinsichtlich der Benutzer. Denn eine einfache Strukturierung des Menüs und gut gewählte Seitentitel erleichtern auch den Besuchern die Navigation auf einer Website.

Bildschirmauflösungen und Nutzerverhalten. Jakob Nielsen gibt Tipps für das richtige Layout einer Website und rät seinen Lesern, die Bildschirmauflösung nicht außer Acht zu lassen. Rund sechzig Prozent aller Computer verwenden eine Auflösung von eintausendvierundzwanzig mal siebenhundertachtundsechzig Pixeln. Größere Auflösungen werden aber immer häufiger.

Daher sollte eine Website über ein liquides Layout verfügen, das auf die Größe tausendvierundzwanzig mal siebenhundertachtundsechzig optimiert ist und sich problemlos der Bildschirmauflösung anpasst.

Eine Hamburger Studie über das Nutzerverhalten im Web nimmt Websiteoptimization.com genauer unter die Lupe. Harald Weinreich, Hartmut Obendorf und andere Forscher der Universität Hamburg haben herausgefunden, dass sich das Nutzerverhalten in den letzten Jahren geändert hat. User navigieren schnell und verbleiben nur kurz auf Webseiten. Links sind weiterhin das Mittel, um eine Website aufzurufen. Klicks folgen dem Auge und konzentrieren sich dabei auf den oberen linken Bereich einer Website.

Dabei scrollen weniger als ein Viertel nach unten. Verglichen mit älteren Studien nutzten die Probanden der Studie seltener den Zurückknopf, öffneten aber häufiger neue Fenster und schickten öfter Anfragen über Formulare ab. Das Web hat sich von reinen Informationsangeboten zu interaktiven Webanwendungen verändert und die Navigation spiegelt dies wieder.

Und auch Weinreich und Obendorf raten Webdesignern, Bildschirmauflösungen, Dokumentgrößen und Eye-Tracking-Studien beim Entwurf einer Website zu berücksichtigen.

Mehr über Tagging. Sven Lennartz gibt auf Doctorweb.de Tipps für die Verschlagwortung von Beiträgen. Mehr über Tagging als Möglichkeit zur Kategorisierung findet man bei Oliver Schwarz, Eva, einem PDF über Folksonomy von Thomas Link und einer englischsprachigen Anleitung für die Verwendung von Delicious für Mac-Nutzer.

Das Web ist nicht aus Papier. Warum nicht? Das klärt Peter Müller in seinem Buch Little Boxes Webseiten Gestaltung mit CSS. Hier der zweite Teil der Vorlesung.

XHTML und CSS.

Mediengerechte Webseiten jenseits von Papier.

Kennen Sie Shrek, den sympathischen Oger, der in Begleitung eines geschwätzigen Esels wider Willen auszog, um eine Prinzessin zu retten und diese später selber zu heiraten? Oger sind grün, klobig und gelten eigentlich nicht unbedingt als Sympathieträger. In einer Szene erklärte Shrek seinem Begleiter das Wesen eines Oger ungefähr so: Shrek: "Ein Oger ist wie eine Zwiebel." Esel: "Du meinst, sie stinken?" Shrek: "Nein, Schichten. Zwiebeln haben Schichten. Oger haben Schichten." Webseiten auch.

Das Web ist nicht Print, aber es ist auch nicht nur Bildschirm. Das Web ist das erste Medium mit dem Prinzip Single Input, Multipli Output. Der Inhalt wird einmal gespeichert und in verschiedenen Formaten wieder ausgegeben. Auf dem Bildschirm gedruckt auf Papier in einer PDF-Datei, akustisch von einem Screenreader und vielleicht auf Arten und Weisen, die wir heute noch nicht einmal kennen. Die Trennung von Inhalt und Gestaltung bedeutet, dass Webseiten Schichten haben.

Der Kern, die innerste Schicht einer Webseite ist der Inhalt, der Text, das HTML. Dieser Kern ist flexibel und passt sich den Umständen an. Um diesen Kern gibt es Schichten, wie zum Beispiel CSS für den Bildschirm, CSS für den Drucker, JavaScript zur besseren Bedienung und so weiter. Die Schichten um diesen Kern sind Verfeinerungen, machen die Webseite hübscher und besser bedienbar, aber nicht immer werden alle Schichten genutzt.

Beim Erstellen von mediengerechten Webseiten geht es nicht nur darum, dass eine Webseite in allen Browsern gleich aussieht. Das geht nicht und ebenso gut können Sie versuchen, das Ende des Internets zu finden. Eine Webseite muss nicht überall gleich aussehen, sondern überall funktionieren. Der Inhalt muss für den Besucher zugänglich bleiben. Standardkonform, barrierefrei und flexibel ist gleich mediengerecht.

Im Web kursieren viele Schlagworte, mit denen im Grunde genommen die Bewegung weg vom Papierdenken umschrieben wird. Standardkonformes Webdesign, Designing with Web Standards, barrierefreies Webdesign, Accessibility, Deutsch Zugänglichkeit, Flexibilität, Bulletproof Webdesign, Optimierung für Suchmaschinen, Search Engine Optimization.

Letztendlich fordern all diese Schlagworte, Webseiten so zu bauen, dass sie den Möglichkeiten des Mediums World Wide Web entsprechen, weshalb ich sie gerne unter dem Begriff mediengerechtes Webdesign zusammenfasse.

Webseiten gestalten mit Tabellen? Wenn mediengerechtes Webdesign so toll ist, warum wurden dann die Webseiten früher mit Tabellen gestaltet? Hm. Eine kleine historische Rückblende soll das verdeutlichen. Das Web ist von Wissenschaftlern für Wissenschaftler erfunden worden und Wissenschaftler sind nicht nur bei Webseiten meist sehr am Inhalt als am Aussehen interessiert. Webseiten sahen damals fast alle gleich aus.

Grauer Hintergrund, schwarze Schrift und blaue Hyperlinks, die lila wurden, wenn sie auf eine besuchte Seite zeigten. Als Mitte der Neunziger das Web plötzlich zum weltweiten Boom wurde, erklang der Ruf nach Gestaltung der optisch doch eher schlichten Webseiten immer lauter. Das World Wide Web Consortium, kurz W3C, arbeitete an CSS, einer Sprache für die ansprechende Gestaltung von HTML-Elementen. Aber die Welt wollte bunte Seiten, und zwar sofort.

Irgendeine tolle neue Sprache, die irgendwann mal fertig sein würde, war egal. Als Netscape Font zur Gestaltung von Schriften und Table zur Darstellung von Tabellen erfand, waren fast alle begeistert und das klassische Webdesign begann, sich herauszubilden. Schriftgestaltung mit Font, Positionierung mit unsichtbaren HTML-Tabellen. Der Quelltext dieser Seiten ist für Menschen so gut wie unlesbar und nachträgliche Änderungen der Struktur werden schnell zum Albtraum. Quältext statt Quelltext.

In gewisser Weise bedeutet diese Art der Gestaltung einen Schritt zurück in die vertraute Welt des Papierdenkens. Visuelle Editoren wie Frontpage oder GoLive verstecken den Quelltext und verstärken die Papiermetapher, indem sie so tun, als seien sie eine ganz normale Textverarbeitung. Zahllose Homepage-Bastler wundern sich noch heute darüber, dass ihre Webseiten zu Hause im Editor anders aussieht als beim Nachbarn im Browser.

Die Schriftgestaltung per CSS hat sich Ende der Neunziger relativ schnell durchgesetzt. Bei guter Planung war das eine echte Arbeitserleichterung, denn ein Stylesheet kann beliebig viele Webseiten gestalten. Formatierung per Fernsteuerung. Es gab zwar mit CSS theoretisch auch die Möglichkeit, Objekte auf einer Webseite zu positionieren, aber die Browser sprachen damals so schlecht CSS, dass der Versuch nicht zu vorhersehbaren Ergebnissen führte.

Mehrspaltige Layouts wurden also weiterhin mit Tabellen realisiert. Inzwischen ist es anders. Moderne Browser können so gut CSS, dass es für Webdesigner außer einer gewissen natürlichen Trägheit und akutem Zeitmangel kaum noch Argumente gibt, Webseiten nicht komplett mit CSS zu gestalten. Der Unterschied zum traditionellen Neunzigerjahre-HTML-Tabellendesign ist gewaltig.

Und falls Sie bereits Webseiten mit Tabellen gestaltet haben, vergessen Sie am besten alles, was Sie bisher darüber gelernt haben. Gestalten mit CSS ist anders. Ganz anders. Kein Vergleich.

Die Trennung von Inhalt und Gestaltung zum Beispiel ist ein ungewohntes Konzept. Sie beginnen mit sinnvoll strukturierten HTML-Dateien ohne Gestaltung. Danach gestalten Sie die Dateien mit CSS-Anweisungen. Nicht alles ist mit CSS einfacher und die Lernkurve ist anfangs eher flach. Vielleicht fragen sich aber auch einfach nur, warum Sie jahrelang Webseiten erstellen mit Tabellen gelernt haben und jetzt wieder von vorne anfangen sollen. Sie sind nicht allein.

„Es ist schlimm genug", rief Eduard, "dass man jetzt nichts mehr für sein ganzes Leben lernen kann. Unsere Vorfahren hielten sich an den Unterricht, den sie in ihrer Jugend empfangen, aber wir müssen jetzt alle fünf Jahre umlernen."

Goethe, Wahlverwandtschaften, erster Teil, viertes Kapitel, 1809. Neue Regeln für ein neues Medium. Das Web ist nicht aus Papier und zum Gestalten von Webseiten gibt es CSS. Aus dem Buch Little Boxes, Webseiten gestalten mit CSS Grundlagen. Der Autor Peter Müller. Mehr Informationen auf littleboxes.de. Das Buch umfasst einhundertvierundachtzig Seiten, ist im Handel erhältlich für vierzehn Euro neunzig, ISBN drei acht drei drei vier vier acht sechs neun fünf.

Musik.

Wie gut, dass Pod Save Music Network heute nicht erreichbar war. Unter garageband.com habe ich für euch rausgegraben Caitlin Evanson mit Saying That I Love You. Damit verabschiede ich mich von der Technikwürze Folge Nummer fünfunddreißig und hoffe, ihr seid bei der nächsten Sendung nächste Woche Montag auch wieder dabei. Ich sage danke fürs Zuhören. Bis dahin.

Soft dust in my mouth sitting at the coffee house and you just can't stop from being a show off. I'm right here on the edge dreading all the consequences spilling the truth. What will it do? I'm saying that I love you. I'm feeling like an eggshell in your hand. So what does that do for you? Don't look away from me, no more hesitation. I'm saying that I love you. There, now, put it out. Everything I've stepped around is right here in my face becoming more clear to me.

As I think out loud, see it as I say it now. The risk is so great to fly or to break. I'm saying that I love you. I'm feeling like an eggshell in your hand. So what does that do for you? Don't look away from me, no more hesitation. I'm saying that I love you. When you're here, I can never get you. When you're here, I can never shut you. Now we're how I'm always gonna wait you, oh yeah. I'm saying that I love you. I'm feeling like an eggshell in your hand. What does that do for you?

Don't look away from me, no more hesitation. I'm saying that I love you. I'm feeling like an eggshell in your hand. What does that do for you? Don't look away from me, no more hesitation. I'm saying that I love you. Yeah, yeah. I'm saying that, I'm saying that I love you. Yeah. I'm saying that, I'm saying that I love you.

Technikwürze jeden Montag. Eure Kommentare bitte an echo at Technikwürze Punkt de oder direkt im Kommentarbereich auf Technikwürze Punkt de.