on-TOPIC Artikel

Modernes, tabellenfreies Webdesign - Optimieren mit CSS

Als das Internet noch nicht lange für kommerzielle Zwecke freigegeben war, hatten es die Webdesigner noch nicht so leicht wie zur heutigen Zeit. Ganz am Anfang war das Internet lediglich zum Informationsaustausch für das Militär gedacht.

Erst später folgte die Kommerzialisierung die auch die Nachfrage nach grafisch ansprechenderen Seiten und somit das Webdesign hervorbrachte. Die Webdesigner entwarfen wie heute Ihre Benutzeroberflächen meist in einem Grafikprogramm. Um das ganze dann auch im Browser korrekt darstellen zu können, bedienten sie sich oft komplizierter Tabellenstrukturen. Die vorgesehene Anwendung von Tabellen, nämlich die Gliederung von Daten in Spalten und Zeilen, wurde in den Hintergrund gedrängt.

Lesen Sie weiterführende Informationen zu diesem Thema.

Die moderne Lösung: barrierefreies Webdesign

Heutzutage ist es möglich, die gleichen Ergebnisse mit viel weniger Programmieraufwand und Quelltext zu erzielen. Tabellen werden durch Div-Container ersetzt und diese werden mit CSS (Cascading Stylesheets) ausgestaltet. Das auslagern des Stylesheets in eine externe Datei bringt hier weitere Vorteile. Am äußerlichen der Website ändert sich nichts denn die veraltete Tabellenstruktur kann problemlos mit modernen Codes ersetzt werden. Doch dieses Wissen ist nicht den bewanderten Programmierern vorenthalten. Auch für Laien gibt es eine Lösung: in den aktuellen Versionen unterstützen auch Webeditoren wie Dreamweaver, GoLive und Co. die Tabellenfreie Gestaltung von Internetseiten.

Beispiele für die Anwendung von CSS

Die Veränderung von Textlinks durch CSS sollte den meisten Webdesignern bekannt sein. Doch die Entwicklung der Scriptsprache ist nicht stehen geblieben. So kann man mit Klassen und IDs das Aussehen von nahezu allen HTML-Elementen beeinflussen. Unzählige DIV-Container können übereinander gelegt werden, die Darstellung von Texten kann grundlegend verändert werden. Auch Bildattribute sind frei über CSS konfigurierbar. Durch die auslagerung auf eine oder mehrere externe CSS Dateien wird aus dem ehemals Seitenlangen Quelltext nur noch ein Skriptskelett welches erst durch das Einbinden des externen Stylesheet Dokuments Gestalt annimmt.

Vorteile von CSS und barrierefreiem Webdesign

Durch den Einsatz der oben erläuterten Möglichkeiten schrumpft der Quelltext Ihrer Seite zu einem Minimum. Ein Bruchteil der alten Größe bleibt zurück ohne, dass das Aussehen der Website äußerlich verändert werden muss. Daraus ergibt sich eine wesentlich geringere Dateigröße. Nehmen wir an, die Durchschnittsgröße Ihrer Seiten beträgt rund 70 KB mit der alten Tabellenstruktur. Durch die Optimierung mit DIV-Containern und dem externen CSS Dokument verringert sich die Größe auf gute 30 KB. Das macht bei 1700 Unterseiten eine Ersparnis von ca. 66 MB (68.000 KB). Bei monatlichen Seitenaufrufen im fünfstelligen Bereich macht das eine erhebliche Summe aus.

Doch nicht nur eine erhebliche Trafficersparnis kann durch die Optimierung erzielt werden. Auch Ihre Besucher mit schlechteren Internetanbindungen werden es Ihnen danken. Auch in Zeiten von DSL plagen sich noch zahlreiche Modemnutzer im Netz herum. Durch das barrierefreie Gestalten Ihrer Website ermöglichen Sie auch das problemlose Aufrufen Ihrer Seite auf mobilen Geräten wie PDA und Handy. Und nicht zuletzt ermöglichen Sie eine Optimale Indexierung Ihrer Seiten durch die Suchmaschinen-Spider. Eine Grundvoraussetzung für gute Suchmaschinenoptimierung (SEO).

Weiterführende Informationen

Weitere, kostenlose Informationen in deutscher und englischer Sprache finden Sie auf wisewebmaster.de

Von: F. Wahr ]


zurück     zurück letzte Seite