Responsive Websites einfacher planen mit der smooster RWD-Checkliste

28.02.2014 von

Responsive Websites einfacher planen mit der smooster RWD Checkliste

“Können wir das vielleicht so machen? Ist das möglich?”

Responsive Webdesign (RWD) ist kein brandneues Phänomen mehr, aber bei der Kommunikation zwischen Designer und Umsetzung gibt es immer wieder offene Fragen.

Aus unserer Erfahrung bei der Umsetzung von Responsive Websites ist dieser Blogartikel entstanden. Darin findest du die wichtigsten Punkte zusammengefasst, die du aus unserer Sicht bei der Planung deines RWD-Entwurfs beachten solltest. Am Ende diese Blogartikels kannst du dir zusätzlich alle Informationen komprimiert als Checkliste herunterladen.


Mobile First

Bevor es an die Details der einzelnen Website-Elemente geht, stellt sich die Frage, wie du mit der Planung eines Responsive Designs am besten anfängst. Der Mobile-First-Ansatz dreht den Spieß bei der Webdesign-Planung um. Anstatt einen Entwurf für den Desktop nachträglich für kleine Bildschirme zu optimieren, ist es empfehlenswert zuerst den Entwurf für die kleinste Bildschirmauflösung (Smartphone: 320px) zu machen. So entgehst du der Problematik nachträglich viele Inhalte an einen kleinen Bildschirm anpassen zu müssen. Elemente, die für die Desktop-Version nötig erscheinen, entpuppen sich bei der kleineren Darstellung als gar nicht so wichtig. So hilft der Mobile-First-Ansatz auch dabei den Inhalt auf das Wichtige zu reduzieren.

Ausgehend von dem kleinsten Entwurf und der dafür passenden Navigation, kannst du dann die Anordnung der Website-Elemente für größere Bildschirme einfacher planen. Mehr über die Reihenfolge von Website-Elementen auf Smartphones, Tablets und der Desktop-Darstellung findest weiter unten in diesem Artikel unter der Überschrift “Anordnung der Website-Elemente”.


Art des Responsive Webdesigns

  • Responsive (fluid) - “wächst” fließend mit der Bildschirmgröße
  • Adaptive (fixed) -  passt sich in festgelegten Intervallen an die Bildschirmgröße an

Es gibt zwei Varianten RWD umzusetzen. “Echtes” Responsive Design wächst fließend mit der Größe des Bildschirms, sodass sich die einzelnen Elemente wie z.B. das Bild im Header flexibel anpassen. Bei der Adaptive-Variante passiert die Anpassung in, vom Designer festgelegten, Schritten. Ab einer bestimmten Bildschirmgröße wird eine andere Darstellung eingeblendet. Häufig werden auch beide Varianten gemischt verwendet. Was bei welchem Projekt am besten passt, finden wir meist bei der Absprache der Entwürfe für die verschiedenen Bildschirmgrößen in Zusammenarbeit mit dem Designer heraus.


Bildschirmgrößen für die Darstellung in der Breite

  • 320px - 480px (Smartphones)
  • 480px - 960px (Tablets)
  • > 960px (Desktop-Computer)

Tipp: Je nachdem wie das Design aufgebaut ist, ist es sinnvoll separate Entwürfe für die jeweiligen Bildschirmgrößen zu erstellen. Besonders bei vielen zusammenhängenden Bild- und Text-Elementen kann sich die Anordnung je nach Bildschirmgröße ändern. Unter dem Punkt “Anordnung der Website-Elemente” findest du dazu noch mehr Informationen.


Minimale Größe von Touch-Elementen

Alle anwählbaren Elemente wie Buttons, Links oder Formularfelder sollten mindestens 44px x 44px groß sein, damit die Bedienung für den Nutzer leichter fällt.


Navigation

Der geringe Platz, vor allem auf Smartphone-Bildschirmen, erfordert meist eine andere Art der Darstellung von Navigationspunkten als in der Desktopvariante. Diese Navigationsarten werden dafür auf vielen Websites verwendet:

  • “Tu fast nichts”-Navigation
  • Footer-Navigation
  • Toggle, Accordeon oder Aufklappbox-Navigation
  • Off-Canvas-Navigation
  • Overlay-Navigation
  • Select- oder Auswahlmenü-Navigation

Detailliertere Informationen zu diesen Responsive Navigations findest du in meinem Artikel: 6 Tipps, die dir helfen die richtige Responsive Navigation für deine nächste Website zu finden


Wichtig:

  • Ist die Navigation ein- oder mehrstufig?
  • Ist die Website mehrsprachig? Wie soll die Sprache über die Navigation angewählt werden?
  • Hover-Effekte können auf Touch-Geräten nicht verwendet werden. Das ist vor allem wichtig für die Planung von mehrstufigen Navigationen, gilt aber für die gesamte Website auf Touch-Geräten


Inhalt

Auch wenn die Planung nach dem Mobile-First-Ansatz bei der Reduktion des Inhalts auf das Wesentliche hilft, kommt es vor, dass dem Kunden Inhalte in der Website wichtig sind, die aufgrund der Länge oder Größe auf kleinen Bildschirmen schwer bedienbar sind. In diesem Fall ist es möglich Inhalte z.B. in der Smartphone-Version gezielt auszublenden und sie nur dem Nutzer der Tablet- oder Desktop-Ansicht zur Verfügung zu stellen.

Da Smartphones und Tablets immer öfter nicht nur unterwegs, sondern als Zweitbildschirm zuhause genutzt werden, kann man nicht pauschal sagen, dass manche Inhalte für Smartphone-Nutzer definitiv wichtiger sind.


Ein wiederkehrender Nutzer wird sich am ehesten zurecht finden, wenn er auf allen Geräten den gleichen Inhalt antrifft. Wenn es aber nicht anders lösbar ist, solltest du dir die folgenden Fragen stellen:

  • Gibt es Desktop-Inhalte, die auf der mobilen Ansicht ausgeblendet werden sollen?
  • Gibt es stattdessen Inhalte, die auf der mobilen Version sichtbar sind?


Header, Slider, Animationen und Videos

Bei Website-Elementen wie Header, Slider, Animationen und Videos solltest du dich entscheiden, ob sie dynamisch mitwachsen und bei jeder Bildschirmgröße angezeigt oder ab einer bestimmten Bildschirmgröße ein- bzw ausgeblendet werden sollen. Dabei kommt es sowohl auf die Usability als auch auf die Ladezeit der einzelnen Elemente an.


Formulare

Bei komplexen Formularen, die sich auf Wunsch des Kunden in der Desktop-Variante nicht reduzieren lassen, gibt es die Möglichkeit einzelne Felder in der mobilen Version gezielt auszublenden. Die Formularfelder können sowohl direkt in der Website ausgefüllt werden oder auf die Eingabefunktion des Betriebssystems des Touch-Geräts zugreifen. Da der Nutzer gezielt die Felder mit seinen Fingern bedienen können muss, ist es an dieser Stelle besonders wichtig auf die Usability der Formulare zu achten.


Anordnung der Website-Elemente

Besonders bei der Planung der Reihenfolge von Website-Elementen hilft der Mobile-First-Ansatz. So kannst du die Inhalte auf kleinem Raum planen und ihnen dann auf den größeren Darstellungen mehr Platz einräumen. Grundsätzlich hilft es, sich den Inhalt wie eine Kette vorzustellen. Es ist möglich die Anordnung der Kette zu ändern, sie quasi zu biegen, die Reihenfolge der Kettenelemente bei einer anderen Bildschirmgröße neu zu mischen ist dagegen schwerer.

Anordnung der Website-Elemente bei Responsive Webdesign


Wenn die Reihenfolge von einzelnen Elementen grundsätzlich geändert wird, ist es nicht ratsam mit Ein- und Ausblendungen zu arbeiten, da dabei Duplicate Content entsteht, der sich negativ auf das Suchmaschinenranking auswirken kann. Wenn die Ansicht auf Smartphone strukturell grundsätzlich verschieden aufgebaut werden soll, macht eine eigene mobile Website mehr Sinn als ein Responsive Design. Einen einzelnen Inhaltsblock - wie z.B. die Navigation bei der Footer-Navigation - gezielt an einen festen Punkt, in diesem Fall das Ende der Seite, zu verschieben ist hingehen einfacher möglich.


Diese Informationen sind absichtlich sehr allgemein gehalten. Da es in einzelnen Fällen fast immer möglich ist Lösungen zu finden, kannst du uns bei einem konkreten Projekt gerne darauf ansprechen.


Allgemeine Tipps

  • Wenn du einzelne Elemente bereits in einem Raster von max. 320px anlegst, erhöhst du die Flexibilität der Responsive Website
  • Achte bei der Größe der klickbaren Elemente auf die Mindestgröße (40px x 40px) für Touch-Geräte
  • Bei Seiten mit viel Inhalt oder Footer-Navigation empfiehlt es sich eine einfache Möglichkeit zu schaffen, um an den Anfang der Seite zurück zu “springen”

Klicke hier um dir die Responsive Webdesign Checkliste für Designer herunterzuladen

Hast du Fragen oder Anregungen zu der Responsive Design-Checkliste? Melde dich bei uns.



Du hast einen Designentwurf für eine Responsive Website und möchtest ihn gerne mit smooster umsetzen?

Alles was wir dafür von dir brauchen sind die folgenden Daten:

Art des RWD:

  • Responsive (fluid)
  • Adaptive (fixed)

Standard: Responsive

Bildschirmgrößen (Breite):

  • 320px - 480px (Smartphones)
  • 480px - 960px (Tablets)
  • > 960px (Desktop-Computer)

Der Entwurf für Tablets ist optional.

Navigation:

Welche Responsive Navigation möchtest du verwenden?

Ab welcher Bildschirmbreite soll sie zu sehen sein?

Website-Elemente:

Sollen Elemente ein- oder ausgeblendet werden? Wenn ja: Ab welcher Bildschirmbreite?


...und schließlich deinen Entwurf als Photoshop-, Indesign- oder Illustrator-Datei an info@smooster.com.


Header image by: Galymzhan Abdugalimov

zurück
comments powered by Disqus