Allgemeine Tipps zum Webdesign

Mit diesem Artikel möchte ich dir einige Dinge zeigen, auf denen es beim Webdesign ankommt. Was sollte man tun, was besser nicht.

Normalerweise sollten die nachfolgenden Hinweise alle selbstverständlich sein. Leier werden sie jedoch nicht immer beachtet oder ganz ignoriert. Wenn du jedoch eine erfolgreiche Website haben möchtest, solltest du bei ihrer Gestaltung an die folgenden Punkte denken.

 

1. Technische Optimierung

1.1 Browser-Kompatibilität

Heutzutage gibt es unzählige Browser auf dem Markt. Internet Explorer, Firefox, Opera, Vivaldi, Safari, Chrome – nur um mal ein paar Beispiele zu nennen. Jeder Browser hat seine Vor- und Nachteile. Jedoch interpretiert auch jeder Browser HTML und besonders CSS teilweise auf seine eigene Art und Weise. Manche können mehr, manche können weniger Befehle darstellen – je nach Konformität.

Daher sollte man beim Gestalten seiner Seiten darauf achten, eine möglichst breite Auswahl an Browsern zu unterstützen. Die mit Abstand meist genutzten Browser sind sicherlich der Internet Explorer von Microsoft, Firefox von der Mozilla Foundation und Google’s Chrome. Diese drei Browser sollte man auf alle Fälle unterstützen. Nützlich ist es daher, mehrere Browser auf dem Rechner installiert zu haben. So kann man schauen, wie sich welcher Browser beim Navigieren auf den eigenen Seiten verhält. Es ist wichtig, dass die eigene Webseite auf möglichst vielen Plattformen funktioniert. Denn nur so lässt sich sicherstellen, dass niemand ausgeschlossen wird.

 

1.2 HTML-Konformität

Bleibe bei den allgemeinen Regeln für HTML bzw. XHTML. Verwende möglichst keine „Eigenschöpfungen“, wie sie es beispielsweise für den Internet Explorer zu Hauf gibt. An sich spricht natürlich nichts dagegen, kleinere Spielereien (z.B. Bookmarks mittels JavaScript, etc.) einzusetzen. Alternativen sollten jedoch immer angeboten werden. Du solltest dich an die Web-Sprachstandards des W3-Konsortoums (deutsches Büro des „W3C“) halten. Wie du HTML „richtig“ einsetzt, erfährst du zum Beispiel auf SelfHTML.

Je standardisierter du arbeitest, desto größer ist auch die Wahrscheinlichkeit, dass deine Website in jedem Browser richtig angezeigt wird.

 

1.3 Auflösung

Hast du dir deine Website schon mal in einer Auflösung von 640×480 betrachtet? Eine Auflösung, so möchte man meinen, die in Zeiten von 24-Zoll-TFT-Monitoren nicht mehr zum Einsatz kommt. Aber diese Annahme ist falsch. Niedrige Auflösungen kommen gerade dann zum Einsatz, wenn alte Hardware verwendet wird oder der Anwender eine Sehschwäche hat. Auch der Einsatz von Mobilgeräten wie Smartphones oder Tablets führt zur Benutzung von niedrigeren Auflösungen.

Daher sollte deine Website ein flexibles Layout und ein anpassbares Schriftbild bieten. Das Schlüsselwort dazu lautet: Responsive Webdesign.

 

2. Schrift

Manchmal wird das Problem übersehen, dass der Web-Browser nur die Schriftarten darstellen kann, die auch auf dem Computer des Seitenbesuchers installiert sind. Schuld daran sind aber auch häufig HTML-Editoren, die dem Nutzer die Wahl über das komplette Angebot an installierten Schriftarten wählen lassen. Wenn du keine bösen Überraschungen erleben möchtest, solltest du darauf achten, nur Standard-Schriftarten zu verwenden.

Der Artikel „Welche Schriftart kann ich im WWW verwenden?“ kann dir bei der Auswahl der Standard-Schriftarten helfen. Solltest du ungeachtet dessen dennoch exotische Schriftarten verwenden wollen, findest du ein paar nützliche Hinweise im Artikel „Eigene Schriftarten verwenden„.

 

3. Frameset oder Tabellen

Bei der Gestaltung einer Website sollte man tunlichst darauf verzichten, Framesets oder Tabellen für das Layout einzusetzen. Frames sind inzwischen völlig veraltet und werden im HTML 5 Standard auch nicht mehr unterstützt. Suchmaschinen haben oftmals Probleme, die Inhalte von Frame-Seiten vollumfänglich zu analysieren und in den entsprechenden Kontext zu rücken, was sich schlussendlich negativ auf das Ranking auswirkt.

Tabellen als Layout-Element zu verwenden war ohnehin noch nie eine gute Idee und sollte daher ebenfalls vermieden werden, insbesondere weil es auch nicht in den semantischen Kontext einer Tabelle passt.

Moderne Webseiten basieren auf HTML 5 und CSS. Dies sind die Standards, die auch du einsetzen solltest.

 

4. Grafiken

Grafiken sollten mit Angabe der Parameter für Höhe und Breite versehen werden. Wenn diese angegeben sind, zeigt der Browser einen leeren Rahmen um die noch nicht fertig geladene Seite. Dies wiederum hat den Vorteil, dass dein Design nicht aus der Bahn geworfen wird.

Bei der Verwendung von Image Maps solltest du darauf achten, diese auch als solche kenntlich zu machen. Nicht immer ist für den Seitenbesucher zwingend ersichtlich, dass es unterschiedliche Links auf einer Grafik gibt.

Wenn du ein Hintergrundbild für deine Website verwenden möchtest solltest du bedenken, dass ein Browser die Grafik kachelt. Das heißt, dass die Grafik nahtlos neben, über und unter der Grafik erneut angesetzt wird, wenn sie „zu Ende“ ist.

Benutze daher CSS um den unschönen Kachel-Effekt zu umgehen, oder setze eine Grafik ein, bei der ein solcher Effekt nicht auffällt.

 

 

5. Animierte GIFs

Auch heute noch finden sich auf vielen privaten Homepages unzählige animierte GIF-Bilder. Als Webmaster solltest du jedoch auf den Einsatz von animierten Grafiken verzichten. Ein oder zwei, an der richtigen Stelle platziert, können ja noch ganz nett aussehen – aber wenn es überall blinkt und zappelt muss man sich schon fragen, ob das so sinnvoll ist.

Schließlich hat man – je nach Art der Website – auch einen gehobenen Anspruch. Daher sollte man es nicht mit dem Einsatz solcher Grafiken übertreiben beziehungsweise sie gar nicht einsetzen.

 

6. Überladene Startseiten und Doorway-Pages

Die Startseite deines Internetauftrittes sollte klar definiert, übersichtlich und nicht zu überladen sein. Unzählige Bilder, Buttons, Werbebotschaften und dazu noch jede Menge Text gehören einfach nicht zum guten Ton. Die Startseite ist dein Aushängeschild. Vergraule deine Besucher also nicht schon direkt am Eingang.

Ebenfalls sollte auf sogenannte „Doorway-Pages“ verzichtet werden. Das sind Seiten, die vor dem eigentlichen Inhalt bzw. vor der eigentlichen Website geschaltet werden. Ende der 90er waren solche Seiten überaus beliebt. Inzwischen gehören sie aber nicht mehr zum guten Ton und auch Suchmaschinen wie Google bewerten den Einsatz solch unnützer Seiten sehr kritisch.

 

7. Links

Für viele Internet-Nutzer besonders ärgerlich sind Links, die auf nicht (mehr) existierende Seiten verweisen. Auch Scheinlinks (unterstrichene Wörter) können für den unerfahrenen Seitenbesucher ärgerlich sein, wenn er versucht den vermeintlichen Link anzuklicken. Benutze zum Hervorheben von wichtigen Textstellen lieber Kursiv- oder Fettschrift. Alternativ ist es natürlich auch möglich, einfach die Links per CSS anders zu gestalten.

 

8. Schlechter Kontrast

Achten darauf, dass die gewählte Schriftfarbe im Kontrast zur Hintergrundfarbe steht, damit der Text leserlich bleibt und nicht irgendwann in den Augen schmerzt.

Beispiel für guten Kontrast: Schwarzer Text auf weißem Hintergrund
Beispiel für schlechten Kontrast: Grüner Text auf gelbem Hintergrund

 

Auch sollte eine Hintergrundgrafik wirklich im Hintergrund bleiben. Sonst lässt sich auch hier Text nur schwerlich erkennen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.