Responsive Webdesign Trends 2017

Was ist das Responsive Webdesign?

Beim Responsive Webdesign handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts (Smartphones, Tablets) reagieren können. Kurz zusammengefasst ist es die Darstellung einer Webseite auf mobilen Endgeräten.

Diese 7 Trends werden Ihre Webseite spannend gestalten

1. Seitenansicht

Ihre Webseite soll dem Benutzer so angenehm wie möglich gestaltet werden. Dafür muss sie aber übersichtlich und strukturiert sein. Als Allererstes braucht Ihre Seite ein Menü. Durch das Menü kann man auf Unterkategorien zugreifen. Zusätzlich haben alle Unterseiten der Webseite dadurch einen wiedererkennbaren Aufbau, der die Seite übersichtlich macht und für Wiedererkennung sorgt. Der Inhalt der Seite wird immer in Boxen platziert. Jede Box hat ihren eigenen Inhalt, was dazu führt, dass der Besucher mehrere Themen auf einen Blick erfassen kann. Diese Boxen skalieren an der Bildschirmbreite. Das heißt, wo sich die Boxen am PC nebeneinander befinden, sind sie am Smartphone untereinander.

2. Spannende Inhalte

Der Text muss spannend wirken! Keine Frage! Aber was ist, wenn der Inhalt nicht all zu spannend ist. Dazu können Features wie Interviews, Videos, Bilder und Animationen eingebunden werden. Diese lassen den Text lebendig wirken. Wenn der Text aber zu lange ist, können Sie Teile vom Text ausblenden und dem Benutzer die Möglichkeit geben, diese mithilfe eines Buttons bei Interesse wieder einzublenden.

3. ,,Ghost“-Buttons

Buttons können unterschiedlich gestaltet werden. Ein Trend sind sogenannte ,,Ghost“-Buttons. Diese besitzen einen transparenten Hintergrund und meist auch eine dünne Kontur. Deshalb passen sie sich auch wunderbar am Design der Seite an.

4. Infinite Scrolling

Diese Methode wird schon seit Jahren genutzt. Sie ist sehr beliebt und hilft dem Benutzer, sich leichter durch die Webseite fortzubewegen. Ist das Ende eines Informationsabschnitts erreicht, erscheint direkt ein neuer Absatz. Viele Soziale Netzwerke, wie Facebook oder Instagram greifen schon lange auf diese Methode zu. Zum ,,Infinite Scrolling“ gehört auch die sticky Navigation. Diese bewirkt, dass ein Menü mit einer Suchleiste statisch ,,kleben“ bleibt, anstatt mit der Seite weiter zu scrollen. Zur Verbesserung der Benutzerfreundlichkeit kann ein „To-the-Top“-Button am Ende des Browserfensters platziert werden. Dieser ermöglicht dem Benutzer direkt zum Startpunkt der Webseite zu springen, anstatt wieder hochscrollen zu müssen. Dies erfolgt durch eine Scrollanimation und der Button blendet sich, oben angekommen, wieder aus.

5. Parallax Scrolling

Diese Methode wird ebenfalls schon ewig lange verwendet. Man schafft visuelle Effekte, indem sich z.B. einzelne Ebenen unterschiedlich schnell bewegen. Diese erscheinen dem Benutzer spannend und lebendig. Man kann den Benutzer auch zum Scrollen auffordern, dass etwas passiert. Die Seite „everylastdrop.co.uk“ verdeutlicht diese Methode. Das ,,Parallax Scrolling“ kann man daher wunderbar mit spannenden Inhalten verbinden.

6. Optimierte Ladezeiten

Die besonders grafisch aufwendigen Features, können auch einige Probleme hervorrufen, mit denen man zu kämpfen hat. Deshalb sollte man sich überlegen, welche interaktiven Inhalte dem Benutzer einen Mehrwert bieten und welche die Ladezeit nur unnötig bremsen. Ihre Seite soll hochwertig und einzigartig sein, jedoch kann dies die Ladezeit beeinträchtigen, denn der Computer braucht länger Bilder in hoher Qualität, Animationen und Videos zu laden. Außerdem ist es sinnvoll, dass solche Inhalte erst dann geladen werden, wenn der Besucher sie aufruft. Bis dahin reichen Vorschaubilder, um das Interesse zu wecken. Wenn man allerdings ein wenig warten muss bis eine Seite geladen ist, kann ein spannender Ladescreen mit einer Lade-Animation die Zeit überbrücken.

7. Microinteractions

Microinteractions werden schon sehr häufig benutzt. Sie machen eine Webseite lebendig und interagieren mit dem Benutzer. Häufig sind dies kleine Animationen, die Feedback über einen Zustand liefern. Zum Beispiel auf Facebook wenn Sie einen Beitrag liken wollen, erscheint eine kleine Microinteraction die Ihnen verschiedene Möglichkeiten zum Liken bietet. Sie können aber auch in Form von Pop-ups auftauchen. Diese bitten den Benutzer den Beitrag zu bewerten, einer Umfrage teilzunehmen oder einen Newsletter zu abonnieren. Man sollte aber grade diese Funktion mit Bedacht wählen, da sich manche Benutzer von den aufpoppenden Fenstern gestört fühlen könnten.