Das Web einfach erklärt

Wissen und Tipps zum eigenen Internet-Auftritt für jeden einfachst aufbereitet! Dein Mehrwert rund um Web-Lösungen und Sichtbarkeit im World Wide Web.

Darauf sollte man im Responsive Webdesign achten!

Darauf sollte man im Responsive Webdesign achten!

Grafiker, Webdesigner und Webentwickler müssen beim Thema Responsive Webdesign auf so einige Punkte Acht nehmen. Welche das sind möchte ich in diesem Beitrag zeigen.

 

 

Eine Website ohne Responsive Webdesign bzw. mobil optimierter Version hat heutzutage mit einigen Nachteilen zu kämpfen (Sehr gute Gründe für Responsive Webdesign). Jedoch sollte man beim erstellen von Website im Responsive Design ein paar Punkte beachten.

1. Keine fixe Breite oder Ausrichtung mehr

Gerade vom Printbereich ist man gewohnt, dass eine fixe Größe zur Verfügung steht, in der man Elemente platzieren kann. Ebenso für Websites mit fixer Breite, wurden Elemente an einer fixen Position eingeplant.
Im Responsive Webdesign sind aber die meisten Bereiche (vor allem Inhaltsbereiche) nicht fix. Diese haben eventuell noch eine Maximal-Breite, jedoch passen diese sich an kleinere Auflösungen an. Der Inhalt und dessen Elemente müssen sich also auch anpassen/verschieben.
Dies ist ein wichtiger Punkt in der Planung des Website - Layouts. Bei der Anordnung von Elementen der Website (zB. Texte die um Bilder fließen oder Boxen die nebeneinander stehen sollen), muss immer überlegt werden, was mit diesen Elementen in kleineren Auflösungen passieren soll. Ein Beispiel: Am Desktop fließt der Text um ein Bild, welches rechts ausgerichtet ist herum. Am Smartphone nimmt das Bild die volle Breite des Displays ein und der Text beginnt erst darunter.

responsive webdesgin desktop smartphone

2. Elemente müssen am kleinsten mobilen Endgeräte darstellbar sein

Es ist nicht nur wichtig, dass man sich überlegt, wie Elemente am Smartphone ausgerichtet werden können. Wichtig ist auch, dass diese am Smartphone wirklich darstellbar sind. Es gibt immer wieder grafische Elemente, die nur am Desktop gut aussehen und ihren Zweck erfüllen. Möchte man diese aber auf einer kleineren Auflösung darstellen, ist dies oft nicht mehr möglich, ohne an Funktion zu verlieren bzw. diese noch zu erkennen. Für solche Elemente müssen eigene Lösungen für kleinere Auflösungen gefunden werden. Dies bedeutet zwar um einiges mehr an Arbeit, welche sich aber lohnt. Schließlich möchte man ja nicht die große Zahl an mobiler User ausschließen.

Responsive Webdesign Elemente Alternativen

3. Kein fixer Textfluss

Texte können auf der Desktop Ansicht genau so ausgerichtet werden, sodass es am Ende das Bild ergibt, das man haben möchte. Sobald sich die Auflösung verkleinert, sollte man aber daran denken, dass die Texte nicht mehr diesen Platz zur Verfügung haben. Der Textfluss ändert sich also automatisch. Man kann zwar durch verschiedene Breakpoints und entsprechende CSS Definitionen in den Media Queries probieren für jede Auflösungsstufe einen perfekten Textfluss zu erreichen - aber das ist mit verdammt viel Arbeit verbunden. Ob dieser Aufwand dafür steht ist fraglich.
Einfacher ist es, von Anfang an daran zu denken, dass Texte flexibel sein müssen und darauf dann das Layout der Website aufbaut.

4. Menüstruktur sollte gut geplant sein

Die Struktur des Menüs sollte natürlich allgemein sehr gut geplant sein. Aber gerade im Responsive Webdesign wird dieser Punkt noch viel wichtiger.
Die Desktop-Version einer Website lässt viel mehr Spielraum in der Verwendungen von verschieden positionierten Navigationen und Buttons. In der mobilen Ansicht, lassen sich nicht immer alle diese Elemente darstellen. Diese, nicht mehr sichtbaren ,Navigationen müssen also zum Beispiel über den Menü-Button der mobilen Website erreichbar sein.
Dies ist ein wichtiger Punkt in Hinsicht auf die Usability. Der User sollte sich genauso leicht zurecht finden, wie in der normalen Ansicht der Website.

5. Anderes Verhalten durch Touch

Am Smartphone gibt es keinen Maus-Cursor. Somit bringen die beliebten Hover-Effekte weniger. Das ist ein wichtiger Punkt, der beachtet werden sollte. Oftmals verwendet man den Hover Effekt um darauf aufmerksam zu machen, dass Bilder, Flächen und Links angeklickt werden können/sollen. Diese Effekte können zwar auf Touch-Geräten durch Berührung hervorgerufen werden, jedoch ist oft ohne diesen Hover Effekt nicht klar, dass das Element überhaupt verlinkt bzw. mit einer Funktion versehen ist.
Somit ist es wichtig, dass man sich überlegt, wie man dies am Smartphone löst. So kann man zB. für das Smartphone eine Art Hinweis einblenden, der auf der Desktop Version nicht sichtbar ist.
Wichtig ist dies auch für Hyperlinks in Texten. Am Desktop sind die durch den Hover Effekt oftmals leicht als Link identifizierbar. Auf einem Touch-Gerät, wäre es sinnvoll, diese Links zB zu unterstreichen, damit diese schnell als solche erkannt werden.


6. Ist die Bildwahl auch für das Smartphone optimal?

Bilder erfüllen auf Website oftmals den Zweck, Informationen zu transportieren. Entweder durch Elemente im Bild, oder durch Text im Bild. Wenn diese Texte bzw. Elemente am Smartphone (dort ist das Bild ja schließlich kleiner) nicht mehr erkennbar sind, dann nützt das ganze tolle Bild nichts mehr. Speziell bei der Verwendung von Bildern als Hintergrundbild, sollte man das beachten. Oftmals wird Text auf Bildern platziert, die im Hintergrund liegen. Am Smartphone muss dieses Hintergrundbild eventuell abgeschnitten werden - also ist nur mehr ein Teil davon sichtbar. 
Dies ist ein Punkt der ebenfalls bei der Auswahl von Bildern beachtet werden muss. Auch hier müssen dann für verschiedene Auflösungen falls notwendig Alternativen gesucht werden.

7. Die Datenmenge der Website

Die Größe aller Dateien die zur Darstellung einer Website geladen werden müssen, bestimmt dessen Datenmenge und somit die Ladezeit der Website. Darauf achten, dass eine Website und dessen Inhalte nicht zu groß sind, sollte man auch bei nicht mobilen Websites. Lange Ladezeiten bringen viele Nachteile mit sich.
Aber gerade für Responsive Websites hat die Datenmenge eine noch größere Bedeutung. Meistens werden mobile Websites über das mobile Datennetze des Smartphones abgerufen. Hierbei ist die Verbindung selten so schnell wie eine Verbindung zu einem Festnetz-Internet.
Ist die Datenmenge der Website sehr hoch, dann bedeutet das eine viel längere Ladezeit am Smartphone. Hier muss man aber dazu sagen, dass die Verbindungen heutzutage immer schneller werden, und dieses Thema bald keine große Rolle mehr spielen wird - jedenfalls nicht was die Ladezeit am Smartphone betrifft. Möchte man aber die SEO-Seite nicht außer Acht lassen, dann sollte man hier weiterhin optimieren. Google bewertet immer noch die Ladezeit einer Website und wird das auch noch länger machen.

8. Design muss Sich durchziehen

Das Layout einer Website spiegelt im Idealfall das Unternehmen bzw. dessen CI wieder. Und dies sollte nicht nur in der Desktop Version passieren. Auch in der mobilen Version der Website, sollte das CI des Unternehmens erkennbar sein. Genauso sollte das Layout der mobilen Website nicht komplett abweichen von der Desktop Version. Das Design der Website sollte sich im Responsive Webdesign, von der Desktop Version bis zur Smartphone Version, durchziehen. Gibt es zu starke Unterschiedene der beiden Versionen, dann leidet die Benutzerfreundlichkeit darunter.

 

Sie benötigen Hilfe oder Rat?

Gerne helfen wir bei der Planung von Responsive Websites und stehen mit Rat und Tat zur Seite. Kontaktieren Sie uns!


 

So bleibst du TOP-Informiert!

Wir schreiben laufend interessante Artikel mit rund um das Thema Internet, Websites, Social Media, uvm. Bleibe am laufenden und verpasse nichts!

Chrono Forms Felder Responsive
6 gute Gründe für Responsive Webdesign
 

Kommentare

Derzeit gibt es keine Kommentare. Schreibe den ersten Kommentar!
Bereits registriert? Hier einloggen
Gäste
Montag, 25. September 2017