Gutes Webdesign: Erh\u00e4lt ein Webdesigner den Auftrag, eine bestehende Webseite zu pr\u00fcfen, so packt ihn bei vielen Webauftritten das kalte Grauen. Wird dem Kunden dann die fertige Analyse ausgeh\u00e4ndigt, so ist das Erstaunen oft gro\u00df. Denn der Kunde war mit dem bestehenden Internetauftritt wom\u00f6glich sehr zufrieden und f\u00e4llt aus allen Wolken, wenn er erf\u00e4hrt, dass er f\u00fcr sein Geld minderwertige Arbeit erhalten hat.<\/p>\n
Nat\u00fcrlich gilt es bei einer solchen Analyse zu ber\u00fccksichtigen, dass die Webtechnologie eine schnelllebige ist. Es gibt allgemeing\u00fcltige Kriterien, die langlebig sind. Und es gibt Bereiche wie Programmcode und Features, die vor wenigen Jahren noch State-of-the-Art waren und heute wom\u00f6glich l\u00e4ngst \u00fcberholt sind.<\/p>\n
So wurden fr\u00fcher Tables<\/em> (= Tabellen) daf\u00fcr \u201emissbraucht\u201c, die gesamte Webseite zu strukturieren und zu gestalten. Oder es wurde mit statischen Gr\u00f6\u00dfen gearbeitet, da die Webseite sowieso nur auf Desktop-Bildschirmen angeschaut wurde. Dabei galt es bestenfalls die Entscheidung zu treffen, ob die Webseite bereits f\u00fcr Bildschirmbreiten von 800 Pixel oder erst ab 1.024 Pixel optimiert werden sollte. Solche Fossilien finden sich auch heute noch im Internet.<\/p>\n Wenn aber eine Webseite erst wenige Jahre alt ist und auf Basis von Tables gestaltet oder wenn sie nicht f\u00fcr Tablets und Smartphones optimiert wurde (= Resposive Design), dann kann auch der Kunde dies sehr einfach pr\u00fcfen. Und es sollte ihm zu denken geben.<\/p>\n Wird \u00fcber gutes Webdesign r\u00e4soniert, so sch\u00e4rfen viele Anbieter ihr pers\u00f6nliches Profil zuallererst mit Fachbegriffen wie \u201eW3C Validit\u00e4t\u201c, \u201eResponsive Design\u201c, \u201eCross-Browser-Kompatibilit\u00e4t\u201c, \u201eSemantik\u201c und vieles mehr. Alles wichtige Aspekte \u2013 ohne Frage.<\/p>\n Das erste, was ein Besucher jedoch zu sehen bekommt, ist nicht der HTML-Quellcode, sondern der Webauftritt selbst. Und er ben\u00f6tigt nur wenige Sekunden, um sich zwischen \u201egef\u00e4llt mir!\u201c, \u201egeht so\u201c und \u201egeht gar nicht\u201c zu entscheiden. Zwar n\u00fctzt auch das tollste Design nichts, wenn der (Text-)inhalt schlecht geschrieben oder irrelevant ist. Aber der erste visuelle Eindruck entscheidet oft dar\u00fcber, ob ein Besucher \u00fcberhaupt auf der Webseite bleibt, oder sie schnellstm\u00f6glich wieder schlie\u00dft. Nervige Pop-Up-Fenster, sei es f\u00fcr die Anzeige von Werbung oder mit der Aufforderung, den Newsletter zu abonnieren, verscheucht viele Besucher. Trotzdem verzichten auch viele gro\u00dfe und bekannte Portale bis heute nicht auf solche Gimmicks.<\/p>\n Ob das Layout einer Webseite gelungen ist oder nicht, ist und bleibt nat\u00fcrlich immer Geschmackssache. Und \u00fcber Geschmack l\u00e4sst sich bekanntlich streiten. Egal wie gelungen ein Webauftritt gestaltet wurde: Kritiker wird es immer geben.<\/p>\n Im ersten Schritt m\u00f6chten wir diese Grundregeln<\/strong> vorstellen und im Anschluss technische Aspekte<\/strong> vorstellen, welche gut konstruierte Webseiten ber\u00fccksichtigen.<\/p>\n Pr\u00e4sentiert sich ein Webauftritt \u00fcberladen, so schreckt das den Besucher ab. Gefragt sind klare Strukturen. Der Besucher soll die Inhalte \u00fcbersichtlich pr\u00e4sentiert bekommen und die f\u00fcr ihn relevanten Informationen schnell finden k\u00f6nnen.<\/li>\n Die Benutzerfreundlichkeit wird oft in einem Atemzug mit dem Navigationsmen\u00fc genannt. Doch diese Perspektive ist zu eng gefasst. Denn zur Usability einer Webseite geh\u00f6rt neben einer klaren Strukturierung und guten Pr\u00e4sentation der Inhalte unter anderem auch der Text<\/strong>.<\/li>\n Kontrastarmer oder zu kleiner Text mag stylish aussehen, erschwert aber die Lesbarkeit. Ebenso Text, der auf unruhigen Hintergrundbildern pr\u00e4sentiert wird. Zu bevorzugen ist ein Text-Design, bei dem schwarzer Text auf wei\u00dfem oder hellem Hintergrund dargestellt wird. Oder alternativ wei\u00dfer Text auf sehr dunklem Hintergrund. Der dadurch entstehende Kontrast erh\u00f6ht die Lesbarkeit des Textes dramatisch \u2013 die Besucher werden es Ihnen danken.<\/p>\n Zur Usability einer Webseite geh\u00f6rt aber nicht nur eine gute Lesbarkeit des Textes, sondern auch der Textinhalt<\/strong>. H\u00e4ufen sich die Rechtschreibefehler, so wirkt das auf den Leser abschreckend. Schlecht geschriebene Inhalte und endlos lange S\u00e4tze reduzieren die Benutzerfreundlichkeit ebenso wie sp\u00e4rlich eingesetzte Abs\u00e4tze. Langweilige Inhalte tragen dazu bei, dass der Benutzer schnell wieder weg ist.<\/p>\n Sie sollten zudem darauf verzichten, \u00fcberfl\u00fcssige Informationen bereitzustellen. Viele Webseiten begr\u00fc\u00dfen ihre Besucher mit \u201eHerzlich Willkommen auf unsere Webseite\u201c<\/em>. Das ist weder interessant noch kreativ und erzeugt beim Leser eher Resignation als Begeisterung. Allgemeinpl\u00e4tze im Brosch\u00fcren-Stil erfreuen die meisten Besucher genauso wenig: \u201eWir sind ein innovatives Unternehmen der Medienbranche, welches die Zeichen der Zeit fr\u00fch erkannt hat und diese Erkenntnisse effizient im Dienste seiner Kunden einsetzt.\u201c<\/em> So kann man schreiben. Muss aber nicht. Und ganz besonders nicht zu Beginn des Textes.<\/p>\n Denn auch der Textaufbau ist ein wichtiges Kriterium. Texte sollten so geschrieben werden, dass wichtige Dinge m\u00f6glichst am Anfang stehen. Bei umfangreichen Textinhalten auf einer Seite kann nat\u00fcrlich nicht alles in den Anfang gepackt werden. In diesem Fall sollte eine interessante Einleitung daf\u00fcr sorgen, dass der Leser \u201eLust auf mehr bekommt.\u201c<\/li>\n Oft bleibt der Besucher nur kurz auf der Webseite. Achten Sie einmal auf Ihr eigenes \u201eSurfverhalten.\u201c Nehmen Sie sich die Zeit, eine halbe bis eine Stunde auf einer Internetseite zu verweilen? Sofern der Inhalt interessant, informativ und weiterf\u00fchrend ist, kann dies durchaus der Fall sein. Im Durchschnitt<\/strong> bleiben Besucher aber \u2013 je nach Webportal und Branche \u2013 oft nur wenige Minuten auf einer Webseite.<\/p>\n Viele Besucher lesen die Texte zudem nicht brav von oben nach unten, sondern \u201escannen\u201c sie zun\u00e4chst schnell darauf, ob sie hier die gew\u00fcnschten Informationen finden. Dabei werden sie durch pr\u00e4gnante Text\u00fcberschriften ebenso unterst\u00fctzt wie durch eine klare Struktur, Abs\u00e4tze oder die Verwendung von Listen.<\/li>\n Zum Text-Design geh\u00f6rt nat\u00fcrlich auch die Wahl einer geeigneten Schriftart. Die meisten Leser bevorzugen am Bildschirm serifenlose Schriften (= \u201eSans Serif\u201c). Diese zeichnen sich dadurch aus, dass die Strichst\u00e4rke der Buchstaben gleichm\u00e4\u00dfig ist und die Schrift keine Serifen aufweist. Serifen sind mehr oder weniger feine Linien, die einen Buchstaben am Ende \u2013 quer zu seiner Grundrichtung \u2013 abschlie\u00dfen.<\/p>\n Fr\u00fcher wurden auf Webseiten ausschlie\u00dflich Standard-Schriftarten verwendet. Denn es konnten nur Schriftarten angezeigt werden, die der Benutzer auch auf seinem Computer installiert hat. Es wurde beispielsweise definiert:<\/p>\n font-family: Arial, Helvetica, Verdana, sans-serif; Heute setzen viele Webseiten so genannte Web-Fonts (= Web-Schriftarten) ein. So bieten die Google-Webfonts eine umfangreiche Auswahl aus verschiedenen Schriftarten. Der Webdesigner sollte trotz dieser verf\u00fchrerischen M\u00f6glichkeit dennoch einen klaren Kopf behalten und folgendes ber\u00fccksichtigen:<\/p>\n Vor der Umsetzung sollte ein Webauftritt gut konzeptioniert werden. Was ist wirklich wichtig? Welche Kategorien sind so wichtig, dass sie einen eigenen Hauptmen\u00fcpunkt rechtfertigen? Denn einerseits ist der f\u00fcr das Hauptmen\u00fc zur Verf\u00fcgung stehende Platz begrenzt. Andererseits zeugt ein ausuferndes Hauptmen\u00fc von mangelhafter Planung oder der Unf\u00e4higkeit, klare Priorit\u00e4ten zu setzen.<\/p>\n Bei einer umfangreicheren Webseite ben\u00f6tigt das Hauptmen\u00fc in der Regel Untermen\u00fcpunkte. Auch hier sollte bereits im Vorfeld ein Konzept erarbeitet werden. Idealer Weise sollte es nur eine Untermen\u00fc-Ebene geben. Bei sehr vielen Inhaltsseiten maximal zwei Untermen\u00fc-Ebenen. Eine zu starke Diversifikation tr\u00e4gt zur Un\u00fcbersichtlichkeit bei.<\/p>\n Eine Webseite ist kein \u201eRatespiel\u201c: Der Besucher sollte jederzeit die Antwort auf die Frage \u201ewoher komme ich und wohin gehe ich?\u201c <\/em>kennen.<\/em> Dazu ist es erforderlich, dass der aktuelle Haupt- und gegebenenfalls aktuell aktive Untermen\u00fcpunkt hervorgehoben wird. Beispielsweise durch eine andere Textfarbe oder eine andere Hintergrundfarbe des Navigationselementes.<\/p>\n Dies ist ein Kriterium, welches erstaunlich viele Webseiten stiefm\u00fctterlich behandeln. So verf\u00fcgen beispielsweise auch viele WordPress-Themes \u00fcber keine entsprechende Hervorhebung aktiver Navigationselemente.<\/p>\n Besonders bei umfangreicheren Webseiten ist ein Breadcrumb (= Brotkrumenpfad) hilfreich. Er zeigt dem Besucher an, in welcher Verzweigung der Webseite er sich aktuell befindet.<\/li>\n<\/ol>\n Die zuvor genannten Kriterien f\u00fcr ein gutes Webdesign geben Designern \u2013 aber auch dem Kunden \u2013 Anhaltspunkte ob ein Design die grunds\u00e4tzlichen Voraussetzungen f\u00fcr gutes Webdesign erf\u00fcllt. Auf diesem Wege kann auch der Kunde \u2013 selbst als Laie \u2013 pr\u00fcfen, ob bei der Erstellung der Webseite sauber gearbeitet wurde.<\/p>\n Es gibt aber noch weitere Bereiche, die zu einem guten Webdesign geh\u00f6ren und die nicht auf den ersten Blick ersichtlich sind. Insbesondere im Hinblick auf die eingesetzte Technik.<\/p>\n Wird die Webseite auf unterschiedlichen Browsern fehlerfrei dargestellt? Kleinere Abweichungen bei der Darstellung unter unterschiedlichen Browsern sind normal, da jeder Browser den HTML-Code interpretiert<\/strong> und den Webseiteninhalt auf dieser Basis darstellt. Die Webseitenelemente sollten sich aber unabh\u00e4ngig vom Browser einheitlich pr\u00e4sentieren und korrekt dargestellt werden.<\/p>\n Die am weitesten verbreiteten und damit wichtigsten Browser<\/strong> sind Chrome, Firefox, Safari und Internet Explorer. Zumindest auf neueren Versionen dieser Browser \u2013 d.h. nicht \u00e4lter als ca. 5 Jahre \u2013 sollte die Webseite korrekt dargestellt werden. Mehr Abw\u00e4rtskompatibilit\u00e4t ist nat\u00fcrlich nicht falsch und auch nicht unm\u00f6glich. Sie ist jedoch oft aufwendig und verursacht dadurch zus\u00e4tzliche Kosten.<\/p>\n Erst k\u00fcrzlich durften wir eine einfach gestaltete TYPO3 Webseite begutachten, die vor weniger als zwei Jahren erstellt wurde und nicht responsive war, d.h. nicht f\u00fcr Mobilger\u00e4te optimiert wurde. Dies muss nicht zwangsl\u00e4ufig auf fehlendes Know-how zur\u00fcckzuf\u00fchren sein. Vielleicht stand f\u00fcr die Webseite nur ein kleines Budget zur Verf\u00fcgung. Es w\u00e4re aber auch in diesem Fall sinnvoller gewesen, statt auf TYPO3 auf ein einfacheres CMS-System zur\u00fcckzugreifen und daf\u00fcr Responsive Design zu integrieren.<\/p>\n Ob eine Webseite responsive ist, l\u00e4sst sich oft auch am Desktop-Computer pr\u00fcfen, indem das Browserfenster immer schmaler gezogen wird. Passt sich das Layout an den zur Verf\u00fcgung stehenden Platz an, so ist die Webseite responsive.<\/p>\n Es kann allerdings sein, dass eine Device-Detection<\/em> zum Einsatz kommt. Also ein Tool, welches \u00fcberpr\u00fcft, ob der Besucher die Webseite mit einem Desktop-Computer, einem Tablet oder einem Smartphone aufruft. Und dass je nach Ergebnis dieser \u00dcberpr\u00fcfung die Anzeige angepasst wird. M\u00f6glich ist auch, dass der Webdesigner bei den Media Queries<\/em> statt mit width<\/em> mit device-width<\/em> gearbeitet hat und das Layout nur angepasst wird, wenn der Webseitenaufruf tats\u00e4chlich mit einem Mobilger\u00e4t erfolgt.<\/p>\n Falls also bei einer Verringerung der Browserfensterbreite keine Layoutanpassung erfolgt, sollte die Webseite sicherheitshalber zus\u00e4tzlich auf einem Mobilger\u00e4t gepr\u00fcft werden.<\/p>\n Auch der Laien kann \u00fcber den Source-Code (= Quellcode) einer Webseite zumindest grundlegende Schw\u00e4chen erkennen. Der Quellcode l\u00e4sst sich \u00fcber das Browsermen\u00fc aber auch \u00fcber Shortcuts (= Tastenk\u00fcrzel) aufrufen. Beim Firefox, Chrome und Internet Explorer \u00fcber STRG+U, beim Safari am Mac mittels CMD+ALT+U.<\/p>\n Finden sich im Quellcode endlose Eintr\u00e4ge der Form:<\/p>\n <\/p>\n so ist die Webseite entweder schon sehr alt (ca. aus dem Jahre 2006\/2007 oder \u00e4lter) oder jemand hat sein Handwerk nicht ordentlich gelernt. Neuere Webseiten basieren auf dem CSS Box-Modell. Tabellen d\u00fcrfen selbstverst\u00e4ndlich weiterhin eingesetzt werden, allerdings sollten sie nur dann Verwendung finden, wenn tats\u00e4chlich Tabellen<\/strong> ben\u00f6tigt werden. Als Layoutinstrumente sollten sie schon seit mehr als einem Jahrzehnt nicht mehr zum Einsatz kommen.<\/p>\n Bei Content Management Systemen wie z.B. TYPO3<\/strong><\/a> oder dem Blogsystem WordPress finden sich im Quellcode auch Angaben zum System. Bei TYPO3 lassen sich \u00fcber das Copyright R\u00fcckschl\u00fcsse auf die Aktualit\u00e4t ziehen (\u201eTYPO3 is copyright 1998-2017<\/strong> of Kasper Skaarjo.\u201c)<\/em>. Bei WordPress findet sich folgende Angabe:<\/p>\n <\/p>\n \u00dcber die Versionsnummer (vorstehend: 4.8) l\u00e4sst sich das Alter der WordPress-Installation<\/strong> <\/a>pr\u00fcfen.<\/p>\n Hierzu ist allerdings auch folgendes festzuhalten:<\/strong> Unter Markup wird der HTML-Code einer Webseite verstanden. Dieser sollte idealer Weise \u201evalide\u201c sein, also keine Fehler aufweisen. Kleinere Fehler sind oft verschmerzbar. Sie werden gegebenenfalls auch von Extensions oder Plugins von Drittanbietern verursacht. Zudem kann eine Webseite bei der Fertigstellung durchaus 100 Prozent valide sein, die Redakteure bei der Einpflege neuer Inhalte im Anschluss aber \u201eFehler einbauen.\u201c Dennoch ist es ein Unterschied, ob 10 bis 20 Fehler gefunden werden oder hunderte. Wir haben schon Webseiten gepr\u00fcft, die mehrere hundert Fehler enthalten haben \u2013 und zwar pro Seite.<\/p>\n Zu viele Fehler bzw. sich wiederholende Fehler auf unterschiedlichen Inhaltsseiten sind ein Indikator daf\u00fcr dass der Webdesigner nicht sauber gearbeitet hat. Sofern die Webseite nicht \u201ef\u00fcr besonders kleines Geld\u201c realisiert wurde, sollten solche Fehler nicht vorkommen.<\/p>\n Problematisch ist hier oft auch der Einsatz von WordPress-Themes. Webseiten mit WordPress werden nicht selten relativ g\u00fcnstig realisiert und basieren auf Vorlagen. Diese Vorlagen halten h\u00e4ufig nicht zu 100 Prozent die HTML-Standards ein. Circa ein bis zwei Dutzend Fehler im Markup sind hier nicht un\u00fcblich.<\/p>\n Das HTML l\u00e4sst sich pr\u00fcfen, indem die URL der Zielseite \u00fcber den W3C Markup Validation Service<\/strong><\/a> untersucht wird.<\/p>\nGutes Webdesign: das Layout<\/h2>\n
Es gibt allerdings einige Grundregeln f\u00fcr gutes Webdesign<\/h3>\n
\n
Ein klares, \u00fcbersichtliches Weblayout<\/h4>\n
Usability (= Benutzerfreundlichkeit )<\/h4>\n
Text-Design<\/h4>\n
Verwendung von Text\u00fcberschriften und Abs\u00e4tzen<\/h4>\n
Wahl der Schriftart<\/h4>\n
\n<\/em>
\nDas bedeutet, dass der Browser angewiesen wird, die Schrift Arial<\/em> zu verwenden, wenn sie auf dem Computer vorhanden ist. Arial ist eine Standard-Schriftart unter Windows. Falls Arial nicht installiert ist, soll er Helvetica<\/em> nehmen, eine Standardschriftart auf dem Mac. Sind beide nicht vorhanden, so soll Verdana<\/em> zum Einsatz kommen und ist auch diese Schrift nicht verf\u00fcgbar, so soll wenigstens eine serifenlose Schrift verwendet werden.<\/p>\n\n
Navigationsmen\u00fc<\/h4>\n
Gutes Webdesign: die Technik<\/strong><\/h2>\n
Pr\u00fcfen der Browserkompatibilit\u00e4t<\/h2>\n
Pr\u00fcfen des Responsive Designs<\/h2>\n
Pr\u00fcfen des Quellcodes<\/h2>\n
<table>\r\n <thead>\r\n <tr>\r\n <th>Kopf<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Inhalt<\/td>\r\n <\/tr>\r\n <\/tbody\r\n<\/table><\/pre>\n
<meta name=\"generator\" content=\"WordPress 4.8\" \/><\/pre>\n
\ndie regelm\u00e4\u00dfige Pr\u00fcfung und Systemaktualisierung ist mit einem entsprechenden Aufwand verbunden, den der Webdesigner oder die Webagentur nicht kostenfrei leisten kann. Ist der Kunde nicht bereit in die regelm\u00e4\u00dfige Pflege seines Systems zu investieren, so veraltet das CMS.<\/p>\nPr\u00fcfen des Markup auf Semantik und Validit\u00e4t<\/h2>\n