Daur-Online

Das Jahr 2016 steht gerade in seinen Startlöchern und schon geht’s weiter. Ich wage heute mal einen dezenten Ausblick in das, was uns dieses Jahr alles erwarten wird und könnte.

Mobil optimierte Webseiten – responsive Design

responsive Design2015 gab es einige Aktionen, die sich auf die folgenden Jahre und insbesondere noch auf das Jahr 2016 auswirken. Dazu gehört vor allem die Ankündigung von Google, nicht mobil optimierte Internetseiten (z.B. ohne responsive Design), ab dem 21.April 2015, bei der Sichtbarkeit schlechter zu bewerten.

Zwar wurde von Google schon seit 2013 auf die Wichtigkeit mobil optimierter Webseiten hingewiesen, da hier aber nie eine Reaktion seitens Google erfolgte, wurde das Thema mehr oder weniger „übersehen“. Entsprechend groß war dann die Überraschung, als Google 2015 ernst machte und die Mobilfähigkeit von Webseiten als Rankingfaktor verkündete.

Wer jetzt noch nicht genau weiß, ob seine Seite mobil-freundlich ist, der kann diese unter folgendem Link testen: https://www.google.com/webmasters/tools/mobile-friendly/

Die Usability und die Ladezeiten sind hierbei auch nicht zu vernachlässigen. Bedenkt man, dass Smartphone-Nutzer meist Volumenverträgen nutzen, liegt diesen mehr daran, dass die Seiten schnell auf den Phones geladen sind. Dem Thema Perforance haben sich die grosen Player wie Facebook, Apple und Google bereits verschrieben und werden hier 2016 einiges an Features und Richtlinen auf den Markt bringen. Google startete hier bereits mit dem Projekt AMP (Accelerated Mobile Pages) und konnte schon ein paar namhafte Unternehmen zu Mitarbeit bewegen.

Infinite Scrolling

infinite scrollIm Zuge der Optimierung der Webseiten für die Darstellung von Inhalten auf mobilen Endgeräten mußten sich die Designer und Programmierer Platz schaffen. Dafür gibt es eigentlich nur 3 Lösungen, entweder die Inhalte werden auf dem Smartphone horizontal oder vertikal aneinandergereiht oder man bastelt ein entsprechendes Menü. Das Gro der Nutzer empfand das vertikale scrollen am angenehmsten, dieses war man auch schon aus Facebook und Co gewohnt.

So wird sich der Trend des scrollens auf „meterlangen“ Seiten auch ins Jahr 2016 retten und weiterentwickeln. Dabei wird vor allem die Platzierung der Inhalte in der Vorschau eine wichtige Rolle spielen. Von einspaltig bis mehrspaltig, fullscreen oder auto, responsive oder parallax, die Funktion setzt sich durch und wird dieses Jahr bestimmt wieder ein paar optische Highlights hervorbringen.

Glaubt man so manch einer Studie, werden wir in nächster Zeit noch mehr scrollen, denn Infinite Scrolling ist eine praktische Funktion für das Content-Marketing und damit einhergehend für das Storytelling.

Storytelling

storytellingWer sich schon länger mit dem Thema SEO befasst, hat es schon mitbekommen. Der Content einer Webseite nimmt einen immer stärkeren Platz beim Ranking für Webseiten ein. Seit Jahren bastelt Google schon an seinen Algorythmen guten Content von schlechtem zu unterscheiden. Die spiegelte sich in den vielen Updates des Suchmaschinengiganten wieder, 2015 wurde hierfür das passende „Panda“ Update herausgebracht. Der Prozess ist noch lange nicht abgeschlossen, zeigt aber die Wichtigkeit von gutem, aktuellem Content.

Modernes Content-Marketing setzt hierbei verstärkt auf das Storytelling. Hierbei werden Inhalte optisch verpackt und kombiniert. So entstehen Geschichten, durch die sich der Nutzer hindurch bewegt. Es gilt den Inhalt für den Nutzer so aufzubereiten, dass dieser neugierig und gespannt am dargestellten hängen bleibt. Natürlich sollte der Inhalte der Story auch authentisch bleiben, darf hier aber gerne auch unterhalten.

Menü-Design – Full, Card oder Hamburger

menuestrukturMit den neuen Ansprüchen der Internetauftritte an die mobilen Endgeräte, änderte sich auch der Aufbau der Menüstruktur. Hier hat sich ein klarer Trend entwickelt, der in 2016 seinen Feinschliff

bekommen wird. In der mobilen Variante auf Smartphones und Co hat sich das reduzierte Menü in Form des Hamburgers durchgesetzt. Für größere Bildschirme bleibt dem Entwickler immer noch die Qual der Wahl erhalten, Navigation oben, unten, rechts oder links, erlaubt ist was dem Nutzer gefällt.

Um den Content mit einer Art Navigation zu versehen, entwickelte Pinterest eine sehr schöne Art und Weise. Hierbei wurden „Cards“ entwickelt, die eigentlich nichts anderes sind als kleine Container mit Inhalten in Form einer Preview. Diese „Cards“ kann man nun bequem mit den diversen, responsiven Grid-Layouts kombinieren und erhält so eine komplette Menü-Oberflüäche.

Durch die rechteckige Form der „Cards“ wird es auch einfacher, diese in einem fullscreen Layout zu platzieren. Diese Forme der Navigation wird uns 2016 öfter begegnen, da sie nicht nur für mobile Engeräte optimal ist, sondern auch für alle anderen.

HD Images und HD Movies

Wer kennt das nicht, gerade in Branchen wie Banken, Unternehmensberatungen oder Kanzleien, tauchen immer wieder die gleichen Bilder auf. Berühmt berüchtigt ist das Stockfoto mit den schüttelnden Händen, ein Klassiker. Dank der sozialen Medien wurden diese Bilderchen so stark verteilt, dass manch einer nur noch genervt weiter klickte, vor allem wenn man das gleiche Bild innerhalb von Stunden zigfach in seiner Facebook-Timeline wiederfindet.

Einer der Gründe, warum soziale Medien so erfolgreich sind, ist die Möglichkeit der Selbstdarstellung. Hier kann sich jede/r so präsentieren wie sie oder er es möchte, von natürlich bis overdressed. Manch eine Dame verbringt Stunden damit, das richtige Selfie zu erschaffen und optimiert dieses zusätzlich über ein Grafikprogramm. Warum? Ganz einfach, sie möchte Reaktionen auf ihr Bild und damit auf ihr Aussehen bekommen.

Diese Selbstdarstellung gilt nicht nur für Menschen, sondern auch für Unternehmen, Produkte usw.

Die Nutzer möchten keine Stockfotos mehr, sondern das echte Leben und die Personen, Produkte, die dahinter stecken. Zeigt uns wer Ihr seid, seid authentisch – aber bitte in HD.

Denn wir wollen nicht nur alles genau und scharf sehen sondern auch überall. Hochauflösende Bilder und Videos dienen nicht mehr nur als Header oder in Galerien als Blickfang. Sie finden auch begeisterte Verwendung als Fullscreen Hintergründe um die Webseiten optisch in Szene zu setzen.

Fullscreen

fullscreenDa selbst auf optimierten Smartphones der Platz für Content begrenzt ist, gilt es diesen maximal auszunutzen. So ist es kaum möglich Inhalte auf Smartpones sinnvoll nebeneinander zu platzieren ohne die Textgröße ins unleserliche zu versenken. Daher nutzt man hier die komplette Breite des Screens maximal aus. Ähnlich verhält es sich mit anderen Displays – warum Platz verschenken. Bilder werden als Fullscreen Hintergründe eingetragen und der Content darüber verteilt. Die verschiedensten Grid-Layouts waren geboren und werden uns auch im Jahr 2016 begleiten.

Flat-Design

flat-designFür jeden Trend gibt es eine Gegenbewegung, bei den HD Bildern und fullscreen Videos ist dies der Minimalismus, das Flat-Design gepaart mit einer neuen Form der Typographie. Bereits 2014 stellte Google die Designsprache „Material Design“ vor. Diese beinhaltet definierte Vorschriften und Anweisungen für sämtliche Formfaktoren auf Laptops, Tablets, Smartphones, TV und Smartwatches. Hier kommen großflächige, einfarbige Elemente zum Einsatz, kontrastreich und bunt. Der Clou dabei ist die Möglichkeit der Überlagerung und Animation dieser Objekte.

So können wir uns auch in 2016 auf Flat-Design orientierte Apps und Seiten freuen. Denn hier gilt, weniger ist mehr.

Flat-Design geht sogar so weit, dass es versucht, komplett auf Bilder zu verzichten. So soll dieser Design-Trend klassisch, schlicht und beruhigend auf den Betrachter wirken, reduziert auf das Wesentliche. Dabei wird das Hauptaugenmerk auf die Typographie gelegt. Dabei schrecken die Schriftsetzer nicht vor schrillen Buchstabenkombinationen zurück. So werden Schrifttypen- und Größen munter miteinander gemischt und kombiniert.

Weitere kleinere Features, denen wir 2016 häufiger begegnen werden.

Der Ghost-Button

ghost-buttonEin kleiner, eleganter Button, umflossen von einer Outline mit transparentem Hintergrund. Macht sich besonders gut auf minimalistischen Webseiten.

Gradient Backgrounds

gradientfillCSS3 macht es möglich, die Verwendung von Farbverläufen in Hintergründen. Damit können saubere Effekte erzielt werden, ohne auf KB-schwere Grafikdateien zurück greifen zu müssen.

In diesem Sinne, freuen wir uns auf ein intuitives Jahr 2016.  Die meisten der Trends werden aus den Vorjahren weitergeführt und weiterentwickelt. 2016 ist also das Jahr des Feinschliffs von bereits erprobtem. Wir werden sehen was sich an komplett neuen Trends in diesem Jahr entwickeln wird.

Wolfram Daur
Online Marketing Manager

(2016 offiziell zertifiziert durch Online-Studium zum Online Marketing Manager durch die DEPAK)

Wolfram Daur - Online Marketing Manager || 2016 offiziell zertifiziert durch ein Online-Studium zum Online Marketing Manager durch die DEPAK (Deutsche Presseakademie)

View Comments

  • Johannes Schubert

    Hallo Wolfram,

    da mir mittlerweile mehrfach ein paar Webdesign-Trends aufgefallen sind, die mich massiv nerven, habe ich mich mal auf die Suche begeben und diese Seite gefunden.

    Ich würde gern die von dir beschriebenen „Trends“ auch in der Umsetzung sehen, doch leider stelle ich eher Gegenteiliges fest:

    – Responsive Design: Leider scheint der Begriff „Responsive“ von vielen Webdesignern missverstanden zu werden und mit „nur für mobil“ übersetzt zu werden. Man findet mittlerweile zahlreiche Seiten, die zur Nutzung mit Touchscreens optimiert sind und dadurch bei Mausbenutzung (als v.a. die „Desktop-Zielgruppe“) unglaublich nervig machen. Heutzutage muss man sich mit zahlreichen Klicks durch Menüs durchboxen, durch die man sich früher noch per Hover schnell ans Ziel kam. One-Click? Heute leider nicht mehr!

    – Menü-Design: Da muss ich mich schon fast wiederholen… Nein, leider sehe ich viel zu oft nur noch Hamburger, auch in der Desktop-Variante. Full Menu? Wird einfach abgeschafft :-((

    Von dir nicht erwähnt, aber m.E. auch ganz furchtbare Trends:

    – Hero Image: Bevor man irgendwelche Informationen lesen kann, muss man erst mal plakatgroße Bilder wegscrollen. 1. völlig überflüssig, 2. (Text-)Content is not king, 3. Seiten werden extrem austauschbar und verlieren optisch an Individualität 🙁

    – Riesige Schriftarten und viiiiiiiel Whitespace: Ja, der neue Trend heißt: Lasst den User scrollen bis sein Finger abfällt. Übersichtliche, kompakte Darstellungen werden durch vereinzelte Elemente mit möglichst viel Luft dazwischen ersetzt. Eigentlich das Gegenteil der Flat-Design-Idee.

    Da bei all diesen überflüssigen Trends die Usability auf der Strecke bleibt, muss ich als User versuchen, die Probleme irgendwie selbst zu lösen. Mittlerweile habe ich einige Seiten kleiner gezoomt (erfreulicherweise merkt sich der Firefox diese Seiten und zeigt sie bereits kleiner an), um so halbwegs den Überblick zu behalten. Und ich schreibe konsequent die Webseiten-Betreiber an mit der Aufforderung, ihr rein Trend-gesteuertes (und nicht Nutzer-gesteuertes) Design zu überdenken. Dem Paradigma „UX Design“ steht das „Mobile Trend Design“ gegenüber.

    Abschließend nur ein paar Beispiele für Seiten, auf die o.g. Trends weitgehend zutreffen:
    http://www.hochschule-heidelberg.de (sowie zahlreiche andere SRH-Hochschulen)
    http://reiseauskunft.bahn.de/
    http://de.voyages-sncf.com/de/
    http://www.hood.de

    Was sagst du zu diesen Trends bzw. dazu, dass manch offensichtlich nutzerorientierte Techniken missachtet werden?


  • Wolfram Daur

    Hi Johannes, na immerhin freut es mich schon mal, dass Du meine Gedankenbaustelle gefunden hast. Nachdem Du Dir die Mühe gemacht hast, zu kommentieren, lege ich jetzt auch mal los.

    Dafür das Dich einige Trends nerven, naja, da kann ich mir leider nicht die Schuld geben, das ist halt so mit den lieben Trends, die gefallen nicht jedem einzelnen, aber dafür der Mehrheit. Und darum geht es ja bei Trends, was die Masse toll findet, hat irgendwo seine Berechtigung und sollte berücksichtigt werden um nicht irgendwann im Nirvana des Online-Multiversums zu versinken.

    Zum Thema „responsive Design“, mobile first ist da ein tragender Begriff, daher optimieren manche Designer gerne anhand der mobilen endgeräte und erweitern dann auf Desktop und Co. Im Fall dieses Thems hier, dieses ist full responsive, wobei sich das Full-Menue ab einer Bildschirmbreite von ca. 1280 Pixeln auf ein Burger-Menue reduziert und dann enstprechend skaliert. Im Zuge der steigenden Relevanz mobiler Endgeräte (http://de.statista.com/statistik/daten/studie/197383/umfrage/mobile-internetnutzung-ueber-handy-in-deutschland/) und der steigenden Zugriffszahlen gilt es dieses thema zu berücksichtigen. Der aktuelle trend geht in Richtung Burger-Menue, ob das nun gut oder schlecht ist, sei dahingestellt. Kalr ist aber, dass gewisse Voraussetzungen an die Menüstruktur gestellt werden um für die mobilen Nutzer komfortabel zu sein. Zu den Funktionen die es mobil nicht mehr gibt, gehört leider auch die hover Funktion.

    Die Probleme mit der Menüstruktur und der dahinter steckenden Ordnung, werden in den nächsten Jahren kaum gelöst werden können. Was sich hier entwickelt sind die ersten Ansätze. Vielleicht gibt es bald eine Art Wählscheibe zum Auswählen der Menüpunkte, aber wahrscheinlicher ist, dass bei komplexeren webseiten das responsive Design durch eine standalone mobile Variante der Seite ersetzt wird. Zwar ist hier dann der Pfelgeaufwand größer, aber der Inhalt kann an die Bedürfnisse der mobilen Nutzer angepasst werden. Bei einer responsiven Lösung ist dies nicht der Fall. Dadurch können auch Menüstrukturen für mobile Nutzer reduziert werden, was Deinem Wunsch nach einer One-Click Struktur im mobilen Bereich wieder näher kommt, außerdem kann dann die alte Navi im Desktop mit hover bestehen bleiben.

    Ja, mit den „Hero“ Bildern als Artikeltitelbild, gebe ich Dir Recht, die sind manchmal schon etwas überdimensioniert. Aber das liegt wiederum auch an der Vorgehensweise – mobile first. Mobile sind die Bilder nicht mehr so überdimensioniert, aber diese werden eben ab einer gewissen Größe zentriert und hochskaliert. Das ist aber Geschmacksache und kann jeder für sein Webdesign festlegen wie er es gerne möchte. Wichtig ist nur, dass Bilder eben stärker wirken als Überschriften oder Texte, daher bekommen diese auch eine gesteigerte Aufmerksamkeit. Man muß nur mal auf die Shoppingseiten von Zalando und Co. gehen, diese legen einen enormen Wert auf die Qualität der Bilder, da diese relevant für die Kaufentscheidung sind.

    Content ist King – hierzu kann ich nur an die letzten Aktualisierungen der Suchmaschinen Google verweisen, die mit ihrem letzten Update (Hummingbird) noch eine Nummer drauf legen.

    Seiten werden austauschbar. Ja das werden Sie, aber nur aus der Sichtweise eines Programmierers, denn der Content unterscheidet sich nach wie vor. Aber in Punkto Aufbau und Struktur werden sich einige Funktionen durchsetzen und dann auf allen anderen mobilen Seiten wieder zu finden sein. Google hatte hierfür extra ein eigenes Konzept entwickelt und als Leitfaden angeboten.

    Das mit der TYPO als Stilelement, indem riesige Schriften „ansprechend“ kombiniert und platziert werden, ist auch nicht so meins. Es gibt ein paar nette Versuche, aber ich glaube nicht dass es ein Hype werden wird. Da sind Titelbilder einfach mächtiger.

    Naja, und das Thema scrollen bis der Arzt kommt, das haben wir ursprünglich Facebook zu verdanken. Das wird sich erst wieder ändern, wenn das Thema responsive Design von mobil optimierten Einzelseiten abgelöst wird. Eine Teilschuld hat aber auch Google, denn der Suchmaschinenriese liebt Content und laut Statistiken sogar mit eine Wortzahl von ca. 1800 Wörtern am meisten. Fazit ist… lange Texte um bei den Google SERPs gut zu ranken, also lauter kleine Romane. Ob ein mobile User gewillt ist einen Text von 1800 Wörtern auf seinem Smartphone durch zu lesen, sei dahingestellt. Aber hier treffen ienfach Welten aufeinander, die noch nicht so ganz im Einklang schwingen.

    Das Flat-Design, das kommt jetzt darauf an, worauf Du Dich beziehst, die Googrl Richtlinien oder Flat-Design wie bei z.B. Pinterest.

    Dem Paradigma „UX Design“ steht das „Mobile Trend Design“ gegenüber. <- Jupp, aber wir stehen ja noch in den Kinderschuhen. Die Trends mißachten nicht die nutzerorientierten Techniken, sie schaffen neue Techniken, die dann von den einzelnen Zielgruppen gemischt und neu organisiert werden, bis ein neuer Trend entsteht. Wer weis wass mit den von Dir gewünschten Funktionen passiert, wenn diese mit VR, AR und Co. konfrontiert werden? Vielleicht wischen diese neuen technischen Spielereien alles biser Gekannte einfach weg, vielleicht sogar die Deutsche Bahn!