Webdesign und -entwicklung haben sich in den vergangenen Jahren enorm geändert. Daran ist vor allem auch das mobile Internet verantwortlich, was die Art und Weise, wann und wie wir das Internet nutzen, verändert hat. Vieles, was vor zehn Jahren noch gängig war, gilt heute als überholt. Selbst vieles, was vor zwei bis drei Jahren noch völlig aktuell war, gilt heute als veraltet. Welche Dinge solltest bei der Gestaltung und Entwicklung moderner Websites lieber nicht (mehr) machen?
Layouts nur für Desktopgeräte und Smartphones
Die Zeiten, in denen du deine Website nur für eine Ansicht entwickelt hast, sind ja nun schon lange vorbei. Und man findet mittlerweile nur noch wenige Websites, die ohne responsives Layout auskommen.
Doch häufig werden beim responsiven Layout nur zwei Geräte- beziehungsweise Displaytypen berücksichtigt: der klassische Monitor und das Smartphone. Dabei erhält zumindest das Desktoplayout eine feste Breite, während das mobile Layout häufig auf die gesamte Breite des Browserfensters ausgedehnt wird.
Die Unterscheidung nur zwischen Desktop und Smartphone ist mittlerweile jedoch viel zu kurz gegriffen. Denn es gibt mit Tablets und Phablets mittlerweile eine Vielzahl unterschiedlicher Geräte mit diversen Auflösungen. Die Unterscheidung zwischen nur zwei Typen wird dieser Entwicklung nicht gerecht. Daher solltest du dein Layout so flexibel halten, dass es auf allen Auflösungen funktioniert.
Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben. Und auf Tablets sollte nicht das Layout für Mobilgeräte dargestellt werden.
Eigene Mobilversion deiner Website
Bleiben wir beim mobilen Webdesign. Als die Möglichkeiten responsiver Websites noch sehr eingeschränkt waren, wurden eigene Mobilversionen für Websites entwickelt. Noch heute haben vor allem große Newsportale immer noch eigene Mobilversionen, die meist über eine eigene Subdomain zugänglich sind.
Hier ergibt sich natürlich dasselbe Problem mit den Layouts. Darüber hinaus sind immer zwei Versionen einer Website zu pflegen. Und häufig funktioniert die Ausgabe der richtigen Version nicht. Da wird auf Tablets gerne mal die Mobilversion geladen, obwohl die Auflösung eigentlich problemlos die Desktopversion anzeigen könnte.
Inhalte fürs mobile Internet verstecken
Websites werden zunehmend komplexer. Das gilt für den Inhalt, aber auch für die Gestaltung. Großformatige Bilder und Grafiken werden kombiniert mit mehrspaltigen Texten und zusätzlichen Sidebars.
Und auch der Unterschied zwischen den Display- beziehungsweise Monitorgrößen wird immer größer. So gilt es heutzutage, Websites zu gestalten, die auf großen Monitoren ebenso gut aussehen wie auf kleinen Smartphones.
Das ist durchaus eine Herausforderung. Viele Webdesigner gehen da einen einfachen, aber nicht empfehlenswerten Weg. Angeblich verzichtbare Inhalte werden auf Smartphones einfach versteckt. Das mag im ersten Moment sinnvoll sein, um die Übersichtlichkeit einer Website auf einem Smartphone zu gewährleisten.
Aber da Websites oft häufiger mobil besucht werden als über einen Desktoprechner, ist dieses Vorgehen natürlich nicht im Sinne des Besuchers. Daher sollten auf Smartphones keine Inhalte vorenthalten werden. Vielmehr solltest du schauen, wie du alle Inhalte platzsparend und übersichtlich präsentierst. So kannst du Slider einsetzen oder Inhalte über eine Sidebar ausblenden und per Button einblenden lassen.
Fenster und Videos ungefragt über den Inhalt legen
Zu einer regelrechten Unsitte haben sich sogenannte „Modal Boxes“ entwickelt, die beim augenscheinlichen Verlassen einer Seite über den gesamten Inhalt selbiger gelegt werden. In solchen Bereichen wird dann beispielsweise auf den Newsletter oder auf irgendwelche Angebote hingewiesen.
Wenn man tatsächlich dabei ist, eine Seite zu verlassen, sind sie nicht störend. Wer aber nur versehentlich die Maus aus dem oberen Bereich der Seite hinausbewegt, wird bereits mit einem solchen Screen belästigt.
Wer seine Besucher also nicht verärgern will, sollte auf diese Pop-ups des modernen Webdesigns verzichten – so schön sie auch für einen Betreiber einer Website sein mögen.
Gleiches gilt für Videos, die ungefragt den Inhalt einer Website verdecken.
Einfache Auflösungen und falsche Bildformate
Das Internet ist nicht nur mobiler geworden; es ist auch hochauflösender geworden. Bei Displays und Monitoren spielt längst nicht mehr nur die Größe eine Rolle, sondern auch die Auflösung. So nimmt die Pixeldichte zu und die Auflösung wird immer schärfer.
Bei Bildern macht sich das zunehmend bemerkbar. In einfacher Auflösung sieht ein Bild auf einem hochauflösendem Display verwaschen und unscharf aus. Doch HTML5 und CSS3 erlauben es dir, Bilder für verschiedene Pixeldichten zu hinterlegen.
Nutze diese Möglichkeit, damit deine Website auch auf neuen Geräten nicht nur gut aussieht, sondern auch gestochen scharf ist. Wähle zudem das richtige Format für deine Bilder und Grafiken aus. Nutze JPEGs für Fotos, PNGs für Grafiken und SVGs für Vektorzeichnungen.
Systemschriften und zu kleine Schriften
Seit es Webschriften nach vielen Jahren in alle Browser geschafft haben, ist die Verwendung von Systemschriften nicht mehr nötig. Es gibt unzählige kostenlose und kostenpflichtige Schriften, die du in dein Webprojekt übernehmen kannst. Achte darauf, dass du es diese Schriften im neuen Format WOFF2 gibt. Dieses löst das bisherige Standardformat WOFF ab und ist dank besserer Komprimierung noch platzsparender. Und das ist gerade im mobilen Internet ein großer Vorteil.
Achte zudem darauf, dass du Schriften nicht zu klein einsetzt. Vor allem setze nicht auf eine einheitliche, feste Schriftgröße. Auf Smartphones sollten Schriften eine andere Größe haben als auf großen Monitoren.
Den Besucher warten lassen
Heutzutage erwartet man zurecht, dass Websites sich schnell aufbauen. Daher solltest du deine Website so entwickeln, dass sie schnell geladen wird. Optimiere Bilder und verwende das richtige Format.
Nutze Techniken wie das „<picture>“-Element, um immer passend große Bilder auszuliefern. Lade auf Smartphones Bilder in kleinerer Auflösung und nicht in einer Auflösung, wie sie auf einem großen Monitor benötigt wird.
Achte darauf, dass JavaScript die Ausgabe von HTML nicht blockiert oder verlangsamt und versichere dich, dass extern eingebundene Dateien deine Ladezeiten nicht negativ beeinflussen.
11 Antworten zu „Modernes Webdesign: Diese Fehler solltest du vermeiden“
— was ist Deine Meinung?
Hallo!
Warum keine Systemschriftarten verwenden? Gerade diese sind für das jeweilige System optimiert und sehen immer gestochen scharf aus. Außerdem hat man alle Varianten und Kombinationen aus normal, fett und kursiv bereits verfügbar, während diese bei Webschriftarten die zu ladenen Dateien erheblich vergrößern. Und damit die Ladezeit.
Warum auf großen Bildschirmen keine Ränder? Füllt man den ganzen Bildschirm mit Inhalt, verliert sich der Besucher häufig. Da geben Ränder einen schönen abgegrenzten Raum, indem man sich zurecht findet.
Warum keine Inhalte für mobile Versionen verstecken? Ich finde, dass es hier stark auf die Webseite ankommt. Bei einigen Seiten werden bestimmte Inhalte auf dem Smartphone einfach nicht benötigt oder nur von einer so geringen Anzahl an Besuchern benötigt, dass sich die Anzeige für die anderen nicht lohnt.
Warum keine „einfachen Auflösungen“? Auch hier kommt es stark darauf an, was für eine Webseite erstellt werden soll. Bei einem Fotografen sind die Bilder natürlich enorm wichtig, während man sich bei der „Durchschnittsseite“ fragen sollte, ob das den Aufwand wert ist, für zig verschiedene Geräte und Auflösung unterschiedliche Bilder zur Verfügung zu stellen. Das ist auch eine Frage des Geldes (des Kunden), ob er bereit ist, den Aufwand dafür zu bezahlen.
Viele Grüße
Heiko Mitschke
Warum keine Systemschriftarten verwenden? Es ist halt schöner, wenn Websites nicht alle die wenigen möglichen Systemschriften verwenden. Und dank WOFF2 sind die Dateigrößen nochmals kleiner geworden.
Warum auf großen Bildschirmen keine Ränder? Im Idealfall sollte ein Weblayout so aufgebaut sein, dass es den Platz des Browsers bzw. Displays optimal ausnutzt. Gähnende Leere links und rechts sieht einfach nicht schön aus.
Warum keine Inhalte für mobile Versionen verstecken? Da immer öfter mobil gesurft wird, sollte auf Mobilgeräten derselbe Inhalt zu finden sein wie auf Desktopgeräten. Ich möchte jedenfalls niemandem zumuten, extra auf einem Notebook oder so eine Website aufzurufen, nur weil er in der Mobilansicht etwas nicht sieht.
Warum keine einfachen Auflösungen? Bilder in einfacher Auflösung sehen auf hochauflösenden Displays einfach unscharf und matschig aus. Auch bei Durchschnittsseiten sollte das berücksichtigt werden.
Also: Wer Systemschriften, Ränder und einfache Auflösungen verwenden will, kann das ja machen. Es spricht ja auch grundsätzlich nichts dagegen. Aber in dem Artikel geht es ja darum, was man bei modernem Webdesign vermeiden sollte.
Hallo!
Danke für die Antwort. Das heißt aber, dass der Artikel nichts über „Modernes Webdesign“ im Allgemeinen berichtet, sondern nur über den persönlichen Geschmack des Autors. Denn „schöner“ ist rein subjektiv, oft ist es eben sinnvoller, „effiziente“ und für das System optimierte statt „schöne“ Schriftarten zu verwenden. Bestimmt gibt es auch viele, die Systemschriftarten schöner finden als Webschriftarten. Daher kann das für mich keine allgemein gültige Aussage für „modernes Webdesign“ sein, da für jedes Projekt einzeln entschieden werden sollte, was besser ist.
Mit den anderen Punkten verhält es sich genauso. Ich persönlich finde bspw. „gähnende Leere“ links und rechts schön und Weißraum steigert die Übersichtlichkeit und Deutlichkeit enorm. Nur weil „Webdsigner“ und Kunde den wichtigen Inhalt und die wichtige Botschaft nicht herausarbeiten wollen oder können, heißt das nicht, dass durch das Zumüllen der ganzen Bildschirmbreite irgendetwas besser wahrgenommen wird.
An dem Artikel hat mich gestört, dass fast nicht begründet oder mit irgendwelchen Studien, Zahlen oder woanders mit belegt wurde. „Fenster über den Inhalt legen“ finde ich persönlich auch nicht schön, dass es damit aber viele Probleme gibt, wenn man die Maus „in den oberen Bereich der Webseite“ bewegt, kann ich nicht bestätigen. In dem Fall wollen ja zahlreiche Studien herausgefunden haben, dass solche Werbemaßnahman äußerst effizient sein sollen…
Viele Grüße
Heiko Mitschke
Zum Thema Schriftarten mag ich mich nicht äußern. Das hat viel mit Geschmack zu tun. Und eine Systemschriftart sollte eh immer als Fallback definiert sein.
Allerdings mag ich zum Thema Bilder in verschiedenen Größen etwas anmerken.
Natürlich sollten Bilder in angepassten Größen zur Verfügung gestellt werden. Das Geld-Aufwand-Argument kann ich nicht gelten lassen. Jeder Webserver dürfte in der Lage sein ein Bild in beliebig verschiedenen Größen zu berechnen und auch auszuliefern.
So etwas zu implementieren ist keine Raketenwissenschaft und ohne danach zu suchen behaupte ich mal, wird es mindestens 10 verschiedenen Implementierungen für diesen Fall geben.
Drweb könnte beim Design für ultrabreite Monitore auch noch einiges verbessern:
http://i.imgur.com/109U1sT.png
Natürlich hätte ich auch ein Design für ultrabreite Monitore erstellen können. Allerdings muss diese Website durch Werbung Geld verdienen. Deshalb haben wir eine Standardbreite gewählt, in der auch bei kleineren Monitoren die Werbeblöcke korrekt angezeigt werden. Davon abgesehen finde ich den Fliesstext auf fluiden, sehr breit skalierenden Themes schlecht lesbar.
Hmm, keine Systemschriften verwenden? Warum nicht? Für die Headlines geht natürlich ein Google- oder was auch immer Font. Für den Fliesstext kann es nicht verkehrt sein eine Systemschrift zu verwenden. Übrigens habe ich bei der Entwicklung dieses Themes den Fliesstext in Arial gesetzt. Nur mal so. Und der lässt sich verdammt gut lesen.
…“Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben.“
Doch, genau so wie die DRWEB-Seite – find ich gut! Schlecht finde ich z.B. Smashing Magazin – da sitzt man ggf. davor wie bei einem Tennisspiel: Augen/Kopf nach links – Augen/Kopf nach rechts – Augen/Kopf nach links…
Maxx
Nehmen wir auch mal an, jemand hat einen sehr breiten Monitor, da könnte man mit dem Kopf schon „Tennis“ spielen. Ein nicht extrem zu breiter Inhalt, besonders mit Texten ist wohl OK, wobei es auch Seiten gibt, wo der Inhalt zu schmal ist…
Ungefragte Fenster und langsame Ladezeiten ärgern am meisten.
Und: verwende keine hellgraue Schriftfarbe!