Zur Machart Studios Website
Back to top

Webdesign – 20 Don’ts

Die Grundmotivation einer statischen Webseite sollte immer Informationsverbreitung sein. Kein User verzeiht Blockaden und Störungen auf der Suche nach Informationen, Spaß und Spiel. Das bedeutet nicht direkt: „Keep it simple“, aber helfen würde es in den meisten Fällen.

Und da sind wir schon beim ersten Punkt:

1. Vermeide ablenkende Effekte und Inhalte

Nichts ist anstrengender als eine überladene Seite mit Werbung, dicht gepaart mit 40 Kategorien und zu kleinem Text. Ein Website-Design braucht Hierarchien, Elemente sind unwichtig und nicht von Bedeutung. Nicht jedes Element braucht uneingeschränkte Hervorhebung. Nicht jede Box braucht die gesamte Palette an Photoshop-Effekten. Ein aus Lust und Laune entstandener Verlauf, ein dicker Schlagschatten und Outlines um Schriften sind einfach zu viel. „Keep it simple“ – einheitliche Schriftgrößen, einheitliche Farbgebung, einheitliche Abstände und einheitliche Hervorhebungsmaßnahmen sind wichtig. Sie erleichtern dem Benutzer die Bedienung. Sehr lange Texte sollten ordentlich dargestellt werden, die Grundregel „ca. 8 Wörter pro Zeile“ ist zwar abhängig von Schriftgröße, Zeilendurchschuss und Inhalt, ist aber immer noch ein guter Richtwert, auch beim Website-Design. Kategorien und/oder Seiten sollten Sinn ergeben, es macht keinen Sinn, eine Unterkategorie anzulegen, wenn alle Artikel in einer Kategorie sind und der User somit vergeblich klickt. Ebenso macht es keinen Sinn, nach einem halben Bildschirm schon Seitenzahlen für Texte einzubauen, der User scrollt lieber, statt zu klicken.

2. Raus aus den Schablonen

Nur weil eine andere Website etwas tut, bedeutet dies noch lange nicht, dass es für jede Website notwendig ist. Wenn Features und Inhalte schon bald auf jeder Seite zu sehen sind oder wenn jeder davon schwärmt, ist das immer noch kein Grund. Der TagCloud-Wahn ist ein hervorragendes Beispiel für einen Trend, den niemand so richtig verstanden hat, aber jeder genutzt hat. Beeindruckend, in welcher Form Verlage die TagClouds nutzten, ernüchternd, wie die Adaptionen aussahen. Nur die wenigsten haben mit der Idee hinter und um TagClouds auch etwas anfangen können, die TagClouds mutierten zu einer unübersichtlichen 2. Seitennavigation – wofür sie einfach zu schade sind. Bei der Gestaltung einer Website sollte also vollkommen objektiv vorgegangen werden, jeder Inhalt, jede Funktion und jedes Gadget sollten hinterfragt werden. Nur so folgen hervorragende Ideen.

3. Abschied von blinkenden Eyecatchern

Auf Werbebanner kann die eine oder andere Website nicht verzichten, das kennt der User. Die meisten User versuchen sich hier mit Adblockern zu schützen. Wenn die eigenen Inhalte auch noch blinken und ablenken, dann werden User verärgert und der kleinste Vorsprung durch Mehrwert ist automatisch dahin. Schließlich liest ja auch kein Mensch weiter Zeitung, wenn in Las Vegas plötzlich die Lichter angehen. Eins noch: Es gibt für einen Webdesigner keinerlei Verwendung für das HTML-Element „<blink>“, wirklich nicht!

4. Social Marketing ist nicht immer notwendig

Social Marketing oder in anderen Worten: Twitter, Facebook, Social Bookmarks und weitere „Web 2.0-Dienste“ sind ein wichtiges Instrument geworden, um mit Usern zu kommunizieren und Informationen zu verbreiten. Beim Thema Webdesign ist es wichtig zu erkennen, wie stark diese Dienste genutzt werden und wie relevant sie sind. Bei Kunden sollte mit einem Tweet im Monat kein riesiger Twitter-Spatz prominent platziert oder die Facebookseite beworben werden, wenn sich niemand für die Seiteninhalte verantwortlich fühlt. Ein Traditionsunternehmen kann unter Umständen sogar Schaden nehmen, wenn eine gewisse Unbeholfenheit durch falsche Verwendung der Dienste kommuniziert wird. Man sollte sich also rechtzeitig und genau Gedanken darüber machen, wie die Userzubringung auf diese Dienste effektiv umgesetzt werden kann.

5. Keine Frames!

Frames zu verwenden ist die wohl schlimmste Technik-Sünde bei der Umsetzung von modernen Websites überhaupt. Frames wirken sich negativ auf Suchmaschinen, Barrierefreiheit und Wartbarkeit aus. Der Einsatz auf mobilen Ausgabegeräten ist ebenso problematisch. Es gibt keinen Vorteil, der nicht durch CSS-Eigenschaften wie „overflow“ oder „position“ erreicht werden könnte. Nur wenn es in Ausnahmesituationen keine andere Lösung gibt, machen Frames noch Sinn, z. B. wenn auf dem Webserver keine serverseitige Scriptsprache verfügbar ist oder ein Flash-Element bei einem Seitenwechsel nicht erneut geladen werden soll und kein Workaround möglich ist.

6. JS- und Flash-Fallbacks nicht vergessen!

Flash und JavaScript sind Features, die Webseiten zu Anwendungen machen können, meist aber nur das Nutzererlebnis verbessern sollen. Eine Flash-Website hat heute immer noch eine Daseinsberechtigung, wenn es um Interaktivität und Dynamik geht. Überwiegend Microsites oder Multimediainhalte sind hier die Zielgruppe. JavaScript ist vor allem aufgrund fertiger Bibliotheken beliebt, um Objekte zu bewegen, Formulare zu validieren oder Inhalte dynamisch nachzuladen. Portale wie Xing oder Facebook nutzen JavaScript exzessiv. Kleinere Webseiten vergessen aber bei all den schönen Effekten die Abwärtskompatibilität. Wenn JavaScript deaktiviert ist, sollten trotzdem alle Inhalte erfassbar sein. JavaScript Rollover-Funktionen sollten eher mit CSS umgesetzt werden, der Fade-in-Effekt beeindruckt heute niemanden mehr. Bei deaktiviertem Flash sollten HTML-Inhalte als Alternative angeboten werden.

7. Suchmaschinen nicht betrügen

Die Zeiten, in denen versteckte Texte von Suchmaschinen gewertet wurden, sind vorbei. Weiß auf Weiß, „display:none“, negative Texteinzüge und sogar durch JavaScript erzeugte Ausblendungen werden von modernen Suchmaschinen entdeckt und abgewertet. Es zählen nur noch echter Content und halbwegs echte Links. Auch zeitverzögerte Weiterleitungen sind nicht gerne gesehen, weder beim User noch bei Suchmaschinen.

8. Weitere Ausgabemedien nicht vergessen

Außer auf dem Monitor im Büro wird eine Website auch als Ausdruck,- auf dem mobilen Endgerät oder auf der Playstation 3 betrachtet. Aus diesem Grund ist es wichtig, seine Zielgruppe zu kennen. Auch wenn nur ein Bruchteil der Benutzer die Webseite mit dem iPhone besucht, ist dieser Bruchteil deutlich mehr wert als ein normaler Benutzer. Durch eine optimierte Ausgabe der Website wird dieser Benutzer wiederkommen, die Konkurrenz verschläft diese Trends meistens. So müssen seltene Ausgabegeräte nicht erst überzeugt werden, nicht zur Konkurrenz zu gehen, sie kommen automatisch lieber zur optimierten Seite und sind somit leicht zu überzeugendes Publikum.

9. Ungenutzte Funktionen vermeiden

Nichts ist peinlicher als ein leerer Chat, ein durchgängig nicht verfügbarer Livesupport oder ein Forum ohne User. Vergesst Funktionen und Services, die einen Wartungsaufwand verlangen, der nicht geleistet werden kann. Das sorgt für Frustration beim User und einen wertvollen, aber enttäuschenden Klick von ihm – evtl. der letzte vor dem Absprung.

10. Keine Oldschool-Techniken verwenden

In Zeiten, in denen Tabellenkonstrukte hinfällig geworden sind, sollte man auch keine 1-Pixel-Grafiken als Spacer verwenden. Auch Navigationen, die nur über JavaScript oder Flash erreichbar sind, schaden der Usability und der SEO. Auch der „<font>“-Tag ist ein No-Go!

11. Lesbarkeit durch Zeilenabstand erhöhen

Einer der wichtigsten globalen CSS-Einstellungen ist der seitenweite Zeilenabstand. Ein Zeilenabstand (line-height) von 1.4 ist ein guter Richtwert für eine gute Lesbarkeit und einen angenehmen Grauwert. Natürlich ist es auch immer eine Frage der Ordnung, wenn die Abstände aus dem Fließtext sich wiederholen oder sogar mit weiteren Spalten übereinstimmen.

12. Keywords und Metatags weiterhin verwenden

Metaangaben haben dramatisch an Wert verloren und einige SEOs behaupten: Sie sind überhaupt nicht mehr relevant. Trotzdem sollte dieser Punkt nicht vernachlässigt werden. Die Meta-Description stellt immerhin meist noch den Text für die organischen SERPs. Keywords sind wahrscheinlich immer noch zumindest ein Anhaltspunkt für die Absicht der entsprechenden Seiten. Die Vorstellung, dass ebenso unsichtbare Alternativtexte für Bilder mehr wert sein sollen als Keywords, macht keinen Sinn.

13. Keine exotischen Browser vernachlässigen

Gut, dass der Trend, für Netscape oder Internet Explorer zu optimieren, generell vorbei ist. Aber eine Seite valide und ordentlich umzusetzen und dann trotzdem keine Testdurchläufe in anderen Browsern durchzuführen ist fahrlässig. Die wichtigsten Browser sind die Internet Explorer-Versionen 6, 7 und 8 sowie Safari, Firefox, Chrome und Opera in den aktuellen Versionen.

14. Webdesign endet nicht nach dem Launch

Die meisten Änderungen haben auch tatsächlich Folgen. Nicht immer ist eine Änderung auch eine Verbesserung. Den ständigen Kontakt zu Usern zu pflegen ist hierbei wichtiger als Statistiken. Wenn man aber die Wahl hat, sollte man auf Serverstatistiken zurückgreifen. Alternativ stehen natürlich auch Dienste wie econda oder Google Analytics zur Verfügung. Letzteres sorgt jedoch auch mal für längere Ladezeiten. Um von Anfang an auf der klügeren Seite zu sein, können gravierende oder höchst optimierte Änderungen z. B. durch das Google Website-Optimierungs-Tool gejagt werden und A/B-Tests können helfen, Conventions und Absprünge sowie Klickmuster zu analysieren und so konkrete Werte dafür zu erhalten, welcher Inhalt besser zieht.

15. Formulare zugänglicher machen

Vor allem Formulare sind schwierig zu gestalten und zu bedienen. Um es dem Benutzer so leicht wie möglich zu machen, sollten „label“-Tags verwendet werden und der Website- Designer sollte darauf aufmerksam machen (evtl. durch einen „cursor:pointer“). Auch ein JavaScript-Formular-Validator kann helfen Serverlast zu vermindern und Usern schnell klarmachen, wo etwas fehlt. Ein gutes Formular ist ein Formular, das nur aus Pflichtfeldern besteht und davon auch nur aus 3 bis 4 enthält. Wenn es mehr Fragen werden, bieten sich mehrstufige Formulare an. Ein absolut falscher Trend sind Captchas für jedes kleine Formular und Reset-Buttons, die so prominent sind, dass schnell mal ein mühsam ausgefülltes Formular aus Versehen gelöscht wird. So kommt Frust auf, und über die Lieblingsausstiegsseite „Kontakt“ muss sich auch niemand mehr wundern.

16. Semantischer Quelltext und Div-Suppe

Ein semantischer Quelltext ist wichtig für die Übersichtlichkeit und Suchmaschinen sowie für die allgemeine Kompatibilität einer Website. Je weniger (X)HTML-Tags im Code vorhanden sind, desto höher wird das Code/Inhalt-Verhältnis und Suchmaschinen belohnen das. Es gibt keinen Grund dafür, Navigationslisten nicht mit HTML-Listen zu formatieren.
Die beliebten „<div>“-Tags haben zu einem unheimlich schlechten Stil geführt.“<div>“-Tags sollten nicht aus Gewohnheit verwendet werden. Warum die durch das „<ul>“-Tag umschlossene Navigation noch mal mit einem „<div>“-Tag umschließen, wenn die Funktion eines „<div>“-Tags doch nur in der Gruppierung von Inhalten liegt und die Navigation schon durch das „<ul>“umschlossen ist?

17. Individuelle Designs umsetzen

Webdesign muss individuell bleiben. Unabhängig von Inspirationen ist das Ergebnis von auf einem Standardtemplate oder Framework aufbauenden Webdesign nie zufriedenstellen. Ein Standardlayout bleibt auch nach einer Farbanpassung ein Standardlayout. Ein HTML-Framework wie YAML bleibt immer überladen, selbst wenn man die Funktionen voll ausnutzt. Individuelle Arbeit dauert und ist anstrengender, aber das Ergebnis ist effektiver und im Verhältnis deutlich günstiger als provisorische Lösungen, die nicht funktionieren, auch nicht nach 20 weiteren Anpassungen.

18. Keine Starhacks mehr nutzen

Starhacks sind CSS-Hacks, die Formatierungen nur im IE funktionieren lassen. So wurden vor dem IE 7 häufig Starhacks genutzt, um die Fehler vom IE 6 und 5.5 auszubessern. Nun sind mit jeder weiteren IE-Version mehr und mehr Programmbugs durch Microsoft behoben worden und Eigenschaften, die einmal Fehler korrigiert haben, lassen Fehler in modernen Browsern erst entstehen. Die Alternative kommt direkt von Microsoft. Die Conditional Comments bilden eine elegante Möglichkeit, separate Style-Sheets für diverse Browserversionen einzubinden, ohne neue Browser schon vor deren Erscheinen zu beeinflussen.

19. Auf Photoshop-Bugs achten

Ganz gleich, ob man sie nun Bugs oder technisch bedingte Ungenauigkeiten nennen möchte, dem Photoshop-Kenner fallen folgende Patzer meist direkt ins Auge:

Speziell bei kleinen Schriftgrößen fangen die einzelnen Buchstaben eines gedrehten Textes in Photoshop an, aus der Reihe zu tanzen. Vermutlich ist die Ursache eine nur pixelgenaue Positionierung der Buchstaben. Abhilfe schafft hier vorheriges Rastern der Textebene. Also erst texten, dann rastern und dann erst um den gewünschten Winkel drehen. Alternativ kann auch schon eine Umstellung der Textglättung von „scharf“ auf „abrunden“ Abhilfe schaffen.

Das zweite Phänomen sind angeschnittene Rundungen an verkleinerten Grafiken. Photoshop neigt dazu, Rundungen, die sich am Dokumentenrand befinden, beim Verkleinern anzuschneiden. Abhilfe schafft hier ein Vergrößern der Arbeitsfläche, sodass Randbereiche der Grafik nicht mehr am Dokumentenrand liegen. Noch sicherer ist es, etwas an die Dokumentenränder zu kritzeln und nach dem Verkleinern wieder zu entfernen, da tatsächlich immer nur der äußerste Bereich unschön angeschnitten wird.

20. Richtige Grafiken verwenden

Allein zum Umgang mit Bilddateien könnte man sicher 20 eigene „Don’ts“ nennen. Ein Klassiker ist das Skalieren von Grafiken im Browser. Bilddateien sollten immer in Originalgröße ausgegeben werden bzw. vor dem Upload physikalisch auf die gewünschte Größe gebracht werden. Nicht nur die Lade- und Renderzeit der Seite kann sich extrem erhöhen – auch die Qualität der Skalierung ist, abhängig vom verwendeten Browser, meist sehr schlecht.
Ein weiteres Problem ist die Zweckentfremdung von Grafikformaten, dabei sind die Anwendungsbereiche schnell erklärt …
JPEGs sind aufgrund ihrer geringen Dateigröße und hohen Farbtiefe bestens für Fotos geeignet, dabei sollte stets ein Qualitätsfaktor zwischen 80 und 90 gewählt werden. Über 90 wird die Datei schnell sehr groß, unter 80 zeigen sich erste Artefaktbildungen. Ein mehrfaches Abspeichern von JPEGs verschlechtert die Qualität stetig, Bearbeitungen sollten daher immer vom Originalbild ausgehen.
GIFs können maximal 256 Farben darstellen, eignen sich aber bestens für Buttons und Layoutgrafiken, sofern diese keine großen Farbverläufe beinhalten. Es gibt keine Artefaktbildung wie bei JPEGs und ein mehrfaches Bearbeiten und Speichern wirkt sich nicht negativ auf die Qualität aus.
PNGs sind dann sinnvoll, wenn man sowohl viele Farben als auch eine 100 % saubere Darstellung benötigt, dafür nimmt man eine etwas höhere Dateigröße in Kauf. PNGs unterstützen zudem einen Alphakanal, also Semitransparenz in 256 Abstufungen. Hierbei sollte man zumindest vorerst noch an den IE 6 denken, der zur Darstellung von transparenten PNGs einen IE PNG Fix in Form von Alphafiltern oder JS-Hacks benötigt.

Von Eduard Weber

Ein Machart-Macher mit ungestilltem Tatendrang, dazu voll Herz, Tiefe, Mut und Laune. Als gelernter Mediengestalter und Vollblutwerber im positiven Sinn, arbeitet er effizient und kundenorientiert. Kundenzufriedenheit ist eben das A und O für ihn. Eduard Weber ist zuständig für die strategische und kreative Kundenberatung, der seine Fäden im ganzen WorldWideWeb spinnt. Eduard Weber bei Google+

3 Kommentare

  1. 25. Januar 2011 Sibille Spaltenstein Antworten

    Hallo an alle bei Machart

    Ich bin heute über die Website von machart gestolpert und hab mich etwas umgesehen. Dabei bin ich vom Job-Angebot für einen Azubi (nein, als Azubi wäre ich schon etwas alt!) über den Link „Hilfestellung für Ihre Bewerbung…“ zum 1. Standardfehler mit dem Tipp zum Lektorat gelangt.

    Direkt anschliessend, habe ich den blog-Beitrag Webdesign – 20 Don’ts gelesen. Ja,richtig gelesen, nicht nur überflogen. Und der Beitrag hat so viele Rechtschreib-, Tipp- und Kommafehler, dass ich mich frage, wo hier das Lektorat geblieben ist.

    Viele Grüsse und einen schönen Tag
    Sibille

    • 6. März 2011 machart Antworten

      Zwischen Bewerbungen und Blogbeiträgen liegen eben immernoch Welten.
      Trotzdem vielen Dank für die Info, wir haben den Beitrag editiert!

  2. 25. Februar 2014 DaSch Antworten

    Das ist echt spannend zu lesen, was Webdesign 2010 so war. Wenn man das mit heute vergleicht, hat sich da wirklich viel getan. Doch obwohl einiges davon ziemlich überholt ist, haben einige Dinge doch nicht an Aktualität verloren.

Schreibe einen Kommentar zu machart Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Machart Studios Werbeagentur