Tipps für schlankes Webdesign |
|
| 01. Dezember 2006/ von Stefan Plagge | |
Obwohl nicht beabsichtigt, tauchen immer wieder Design-Fehler im Web auf. Mitunter bemerkt der Webdesigner es noch nicht einmal. Denn was mit dem Internet Explorer gut aussieht, muss nicht auch zwangsläufig für den Firefox oder Opera gelten (oder umgekehrt). Nicht zu vergessen sind auch die anderen -weniger bekannten- Browser.
Mit ein wenig Umsicht lassen sich Sites realisieren, die in allen Browsern (nahezu) identisch aussehen. Ebenso sollten Sie -wenn möglich- ihre Site mit einem “Mac” (Apple) testen.
Fehler im Quellcode wirken sich nicht nur unterschiedlich in den verschiedenen Browsern, sondern auch in deren Revisionen aus. Es gibt spezielle Software, die den Code durchsuchen und Fehler aufzeigen (HTML-Validierungsprogramme). Zu empfehlen ist der Online-Validator des "World Wide Web Consortium" (W3C).
Was auf dem Bildschirm gut aussieht, muss nicht unbedingt W3C-konform sein: Manche Webdesigner(innen) erzwingen mit kleinen Tricksereien ein Angleichen unterschiedlicher Darstellungen zwischen verschiedenen Browsern. Dies wiederum kann weitere Probleme in anderen, unbekannteren Browsern erzeugen.
Auch das Testen mit mehreren Browsern wird dem Webautoren nicht leicht gemacht: Es gibt eine riesige
Anzahl verschiedener Browser, und nicht jeder hat neben dem PC einen Apple (oder umgekehrt) zur
Verfügung. Das Austesten in mehr als nur dem Internet Explorer und Firefox sollte zum Pflichtprogramm
eines jeden Webdesigners gehören.
Hier kann man sich an den Marktanteilen orientieren. Der mittler- weile sehr beliebte Browser Firefox
findet immer mehr Anwender - u.a., da dieser Browser (kostenlos von Mozilla) in seiner Grundeinstellung
sicherer als das Microsoft-Produkt ist. Auch der Browser Opera sollte nicht vergessen werden: Immerhin
hält dieser immer noch einen Marktanteil von einigen (wenn auch wenigen) Prozent.
Außerdem -wenn möglich- Tests in den verschiedene Revisionen. Ein Problem stellt hier sicherlich der Internet Explorer dar, der bei einem Update kompromisslos die ältere Version überschreibt. Hierfür gibt es allerdings Workarounds auf diversen Websites, welche hier die Parallel-Installationen erlaubt. Firefox z.B. kann problemlos in verschiedene Versionen koexisitieren. Ebenso Opera, welches sich durch die sehr umfangreiche Konfigurationsmöglichkeiten eignet, Seiten im “no frames”-Modus zu testen.
Einige HTML-Editoren bieten die Möglichkeit, den Quellcode auf Browserunverträglichkeiten zu überprüfen.
Ganz wichtig: Die Site-Größe: Vergessen wir nicht die User mit dem “kleinsten” Modem! Auch wenn Breitband für Sie seit Jahren “selbstverständlich” ist, gibt es immer noch einen hohen Anteil an Surfern, welche mit einem langsamen Modem online sind. Durch die große Verfügbarkeit an Informationen werden die meisten dieser Surfer nicht Willens sein, den Aufbau einer 500 Kilobyte- Startseite (inklusiv aller enthaltenen Grafiken!) abzuwarten. Die Startseite sollte schnell geladen sein, damit der Besucher schnell einen Eindruck dessen bekommt, was ihn erwartet. Eine Faustregel besagt, dass die Startseite maximal 40 Kilobyte betragen sollte. Es gibt sicherlich genug Möglichkeiten für “designambition- ierte” Webdesigner, die Site trotz schickem Design relativ schlank zu halten, und den Besucher nicht durch unnötige Wartezeiten zu vergraulen.
Sieben Grundregeln für “schlankes” Webdesign:
1.
Schauen Sie sich schlanke Sites an und vergleichen Sie den Informationsgehalt mit denen von aufgeblähten
Sites (Relation). Der Inhalt rechtfertigt mitunter keine übertrieben gestylte und “dicken”
Sites mit langen Wartezeiten bei vergleichsweise wenig Inhalt.
2.
Gerade bei umfangreichen Sites sind Cascading Stylesheets (CSS) -wie eigentlich bei jeder Site- zu
empfehlen. Dies verkleinert den Quellcode, da die Formatierung in einer externen Datei definiert wird,
was außerdem die Verarbeitungszeiten verringert.
3.
Optimieren Sie alle Bilder in ihren Seiten! Nirgendwo lassen sich auch nur annähernd solche Datenmengen
einsparen wie bei der Kompression von Fotos und Grafiken. Machen Sie sich mit der Komprimierung von GIFs
und JPEGs vertraut, und vergleichen Sie einmal die Dateigrößen unterschiedlich stark komprimierter Bilder
- Sie werden sich wundern, was sich hier einsparen läßt!
4.
Stichwort Tabellen: Tabellen zeigen ihren Inhalt erst, wenn sie vollständig übertragen sind. So bekommt
der Benutzer den Eindruck, dass die Seite sehr langsam geladen wird. Arbeiten Sie stattdessen mit
mehreren kleinen Tabellen (die nacheinander angezeigt werden). So kann der User schon an Informationen
gelangen, bevor die komplexe Seite komplett geladen wurde.
5.
Werbebanner verlangsamen die Ladezeit ihrer Site. Nehmen Sie an einem Banneraustauschdienst teil, so
haben Sie weder einen Einfluss auf die Größe, noch auf das sich wiederholende Neuladen der (wechselnden)
Bannner. Zudem reduzieren Werbe-Popups -die ständig weggeklickt werden müssen- nicht nur die Performance,
sondern sind in den meisten Fällen eher störend. Spätestens wenn sich die Anzahl der Popups beim
Seitenwechsel von ein auf zwei vergrößert, kann man mit genervten Besuchern rechnen, die dann mitunter
schnell ihre Website verlassen.
6.
Überprüfen Sie abschließend den Quellcode manuell nach Fehlern und unnötigen Einträgen (z.B. doppelte
Tags, Tags ohne Endung, bzw. Endtags ohne Anfang).
7.
Verwenden Sie validen Code! Die Verwendung von validiertem Quellcode hat außerdem den Vorteil, dass ihre
Website von allen Browsern richtig interpretiert wird. Im Endeffekt werden Sie bei dieser Vorgehensweise
viel Zeit sparen, da Sie sich zum Abschluss der Programmierung nicht mehr über die Fehlinterpretationen
der verschiedenen Browser ärgern müssen.
8.
Übertreiben Sie nicht beim Einsparen. Zu spartanische Websites sind genauso unangenehm wie Überladene. Es
gibt zwar auch Puristen unter den Webautoren und Surfern, doch die Mehrheit freut sich über ein gelungenes,
durchdachtes Design.
