Einfache Dinge beachten und Fehler vermeiden – modernes Webdesign richtig machen

In den letzten Jahren hat sich das Design neuer Webseiten stetig weiterentwickelt und verändert. Verantwortlich ist dafür vor allem das mobile Internet. Vieles was vor fünf oder sogar nur zwei Jahren aktuell war, gilt heute als verstaubt oder gar antiquiert. In diesem Blog-Post wollen wir Ihnen erklären, was bei der Gestaltung und Entwicklung von modernen Websites beachtet werden muss und was Sie lassen sollten.

Responsive Design nutzen

Die Zeit, in der Websites nur für eine Ansicht entwickelt wurden, ist längst vorbei. Heutzutage findet man nur wenige Websites die ohne ein responsives Design arbeiten, also mit einem Layout was sich dem jeweiligen Endgerät anpasst. Doch immer noch allzu häufig werden dabei nur zwei Display- bzw. Gerätetypen berücksichtigt: Das Smartphone und der Desktop-/Notebookbildschirm. Diese Unterscheidung ist inzwischen allerdings viel zu gering. Denn mit Tablets und Smartphones in allen möglichen Größenordnungen, gibt es unzählige Auflösungen, bei denen Ihre Website optimal dargestellt werden muss. Daher sollte Ihr Layout sehr flexibel sein, damit es auf allen Geräten gut aussieht und funktioniert. Auf großen Monitoren sollten die Ränder nicht verschwenderisch groß sein und auf Tablets sollte nicht die mobile Ansicht geladen werden, sondern die Desktopansicht.

Eigene Mobilversion ist nicht mehr zeitgemäß

Bleiben wir bei der mobilen Ansicht Ihrer Website. Als die Möglichkeiten für responsive Design noch eingeschränkt waren, war es gängig eine eigene mobile Version für die Website zu entwickeln. Große Newsseiten haben meist noch eine mobile Version, welche meist über eine Subdomain aufgerufen werden kann. Dadurch sind zwei Versionen einer Website zu pflegen, was einen großen Mehraufwand darstellt und hinzu kommt, dass die richtige Version meist nicht den Umständen entsprechend ausgegeben wird. Auf einem Tablet wird oftmals die mobile Version geladen, obwohl die Desktopversion problemlos angezeigt werden könnte.

Fenster oder Videos nicht ungefragt über den Inhalt legen

Modal Boxes gibt es leider immer häufiger. Unter Modal Boxes versteht man Inhalte die sich bei dem augenscheinlichen verlassen einer Website über den eigentlichen Inhalt der Seite legen. In diesen Bereichen wird dann meist auf Angebote oder den Newsletter hingewiesen. Viele die einfach nur kurz etwas in einem anderen Tab nachschauen möchten und deshalb den eigentlichen Bereich der Seite verlassen um den anderen Tab anzuklicken fühlen sich meist gestört von solchen Modal Boxes. Wer also seine Besucher nicht verärgern möchte sollte also tunlichst auf diese Pop-Ups verzichten. Gleiches gilt übrigens für Videos die sich ungefragt über den Inhalt Ihrer Website legen.

Niemals Inhalte verstecken

Wo wir gerade bei unerwünschten verdecken von Inhalten sind, viele Webdesigner verstecken komplexe Inhalte auf den mobilen Versionen Ihrer Website. Dies ist definitiv nicht empfehlenswert. Inhalte auf die angeblich verzichtet werden kann, werden versteckt, was aber unsinnig ist, da viele Websites am häufigsten über ein Smartphone abrufen. Im ersten Moment mag es sinnvoll wirken um die Übersichtlichkeit bei der mobilen Version nicht zunichte zu machen, aber es gibt smartere Lösungen für dieses Problem. Beispielsweise können Inhalte über eine Sidebar ausgeblendet werden und erst eingeblendet werden, wenn die Sidebar über einen gut sichtbaren Button aufgerufen wird. Zudem können Inhalte durch einen Slider platzsparend dargestellt werden.

Falsche Bildformate meiden

Das Internet wird nicht nur immer mobiler, sondern auch immer hochauflösender. Aus HD wurde schnell Full HD und jetzt schon 4K und bald vielleicht 8K. Die Pixeldichte nimmt zu, was zu einer schärferen Darstellung der Inhalte führt. Bei Bildern wird das immer sichtbarer. In einfacher Auflösung können manche Bilder unscharf aussehen. Doch durch CSS3 und HTML5 können Bilder in verschiedenen Auflösungen hinterlegt werden, um für jedes Device die optimale Auflösung anzuzeigen. Dabei ist es auch wichtig, die richtigen Formate zu nutzen:

• JPEGs für Bilder
• PNGs für Grafiken
• SVGs für Vektorzeichnungen

Die richtige Schriftart und -größe wählen

Es gibt unzählige kostenlose und kostenpflichtige Schriften heutzutage. Vor einigen Jahren haben es Webschriften in alle Browser geschafft, somit muss man nicht mehr auf Systemschriften zurückgreifen. Sie können sich also die Schrift aussuchen, die für Ihr Projekt am besten passt und Ihnen am meisten zusagt. Dabei sollten Sie darauf achten, dass Sie das WOFF2-Format nutzen, welches besser ist als das alte WOFF, da es Schriften besser komprimieren kann, was gerade im mobilen Internet ein riesiger Vorteil ist. Des weiteren sollte die Schriftgröße immer einheitlich sein. Wählen Sie also beispielsweise für die Zwischenüberschriften immer die gleiche Schriftgröße und ändern Sie diese nicht von Beitrag zu Beitrag oder schlimmer von Zwischenüberschrift zu Zwischenüberschrift.

Lange Ladezeiten sind ein Todesurteil

Heutzutage wird zurecht von jeder Website erwartet, dass sie schnell lädt und aufgebaut wird. Daher sollten Sie beim Bau Ihrer Website nur die nötigsten Plug-Ins verwenden und Bilder optimieren. Mit dem <picture>-Element können Sie immer passend große Bilder ausliefern und somit werden auf Smartphones beispielsweise kleinere Auflösungen geladen als auf Desktop-Monitoren. Bei extern eingebundenen Dateien sollten Sie darauf achten, dass Sie Ihre Ladezeiten nicht negativ beeinflussen. Zum Schluss sollten Sie sich noch versichern, dass JavaScript die Ausgabe von HTML nicht blockiert oder verlangsamt.

Fazit:

Wenn Sie das alles beachten steht einer modernen und tollen Website im Grunde nur noch ein schlechter Geschmack bei der Farbauswahl im Weg.

Bei Fragen wenden Sie sich gerne an uns, gerne geben wir Ihnen Antworten auf Ihre Fragen. Auch für andere Anliegen können Sie uns gerne kontaktieren.