medani-pixel
news
29
Apr 14

Responsive Webdesign Tricks - updated: weiterführende Tipps für Responsive Webdesign und Design auf Mobilen Geräten

Über die Basic-Elemente hinaus, die für Responsive Design zum Standard geworden sind, gibt es weitere Tricks, die noch nicht überall zum Standardrepertoire geworden sind. Reachable Areas, Angepasste Tastaturen, uvm…

Über die Basic-Elemente hinaus, die für Responsive Design bereits zum Standard geworden sind, wie Flexible Grids, Fluid Images und relativ gesetzte Fonts, gibt es weitere Tricks, die noch nicht überall zum Standardrepertoire geworden sind.

Reachable areas

Die Mehrheit aller Menschen sind laut einer aktuellen Statistik Rechtshänder. Daher werden auch mobile Geräte oft schwerpunktmäßig mit der rechten Hand bedient und mit der linken gehalten. Um die Bedienung zu erleichtern, macht es Sinn,

die wichtigsten Navigationselemente dort anzusiedeln wo die Hand am Leichtesten hin kommt, ohne sich selbst im Weg zu sein, oder andere Elemente abzudecken. Mobify hat dazu eine gute Grafik für Tablets realisiert. Hier sieht man, dass am Tablet die am leichtesten zu erreichenden Punkte unten rechts und links sind, und der obere Teil schwieriger zu treffen ist.

Zusätzlich macht es durchaus Sinn in noch kleineren Formaten die Navigation entgegen des Standards rechts anzusiedeln, weil sie so leichter erreichbar ist als auf der linken Seite und man so weniger leicht aus Versehen über andere Stellen fährt. Denn bei Mobiltelefonen ist die linke obere Ecke mit der rechten Hand eindeutig die am schwierigsten zu erreichen.

Screensafe-areas-mobify

Quelle: mobify

 

Grid Vorlagen

Responsive Design baut sich bekanntlich auf beweglichen und skalierbaren Grids (Rastern) auf. Diese in den Designprozess einzubinden ist sehr wichtig. Um das Rad nicht jedes Mal neu zu erfinden und dabei Zeit zu sparen, hilft es, Grid-Templates (Raster-Vorlagen) zu verwenden, auf denen das eigene Design aufgebaut werden kann.

Auf Bootstrap etwa wurde ein gutes Set von downloadbaren Grid-Templates zur Verfügung gestellt, die man in Photoshop einbinden kann. Es gibt Vorlagen für die Desktop Version, die Tablet Portrait und die Mobile Portrait Version.

Treffsichere Buttons – auch für steife Finger

Der Winter ist gerade vorbei, doch wir erinnern uns an kalte Zeiten, in denen wir versucht haben mit eisigen unbeweglichen Fingern das Smart-Phone zu bedienen. Buttons die groß genug sind, um auch in diesem Zustand schnell getroffen zu werden, sind wahre Helfer um schnell ans gewünschte Ziel zu kommen. 44 Pixel aufwärts empfiehlt mobify als Richtwertgröße. Wir empfehlen außerdem auch den Abstand rund um die Buttons groß genug zu halten.

Mobile First Prinzip

Beim Designen mit der kleinsten Version zu beginnen, hat den Vorteil sich bei der Inhaltsplatzierung auf das Wesentliche zu fokussieren, und überflüssiges gnadenlos auszusortieren. Dies haben wir bereits in unserem Artikel Responsive Webdesign – Mobiles Design und der Designprozess beschreiben. Mehr dazu dort!

No hover? Guide the user

Auf Touchscreens fällt bekanntlich der Hoover Effekt aus, und damit die Möglichkeit, den User durch Hover Effekte (Veränderungen des Designs die entstehen, wenn die Maus über bestimmte Bereiche geführt wird) visuell zu führen. Für mobile Geräte braucht es daher andere Werkzeuge:

Animierte Elemente wie Pfeile, Buttons oder animierte Wegweiser sind durchaus wieder sinnvoll geworden, obwohl die Zeiten der html Blinktexte vorbei sind. Diese ersetzen die Hover Erfahrung, in dem sie den User klar anleiten, wo er wichtige Navigationselemente findet. Im Gegensatz zu Hover-Effekten, sind diese auch auf Touch Screens zu sehen, und auch in den kleinsten Formaten ein sichtbarer Anziehungspunkt. In einem unserer jüngsten Projekte: 24-7ticketagency.com – einer Event-Ticketagentur – haben wir am Startscreen ein intuitiv verständliches und erklärendes Feld eingeblendet, das den Usern in wenigen Augenblicken  erklärt, wie Sie auf dem schnellsten Weg u Ihren Tickets kommen, und wie die visuell sehr reduzierte Navigation funktioniert. Das Feld aktiviert sich auf allen Geräten.

Überaus sinnvoll, gerade auf Smartphones ist es außerdem schwer zu bedienende Scrollbars oder sonstige mit der Maus zu ziehende Hebel zu vermeiden, und leicht zu bedienende Elemente wie Akkordeons, Toggles und oder Full-Screen Lightboxes zu verwenden.

Tastaturen anpassen

Die Anforderung eine Tastatur zu bedienen, zeigt sich spätestens bei langen Text-Eingabe-intensiven Formularen auf dem iphone. Es gibt hier einige Tricks, die man beim Design für mobile Geräte umsetzen kann, um dem User die Eingabe seiner Daten zu erleichtern:

  • Texteingabe-Felder generell minimieren, und sie so weit wie möglich durch Auswahlmenüs zu ersetzen
  • Contextual Keyboards einsetzen, sprich die elektronischen Tastaturen per CSS-Code so anzupassen, dass die im entsprechenden Feld benötigten Buttons, wie etwa „@“ gleich greifbar sin, und nicht auf der zweiten oder Dritten Keyboard ebene gefunden werden müssen
  • Autokorrekturen und Auto-Großschreibung per CSS ausschalten
  • Die Kamera-Eingabe im Code aktivieren, das lässt den Foto-Upload direkt und ohne Umwege zu

Sticky Navigation

Die Navigation immer an einer fixen Stelle eingeblendet zu lassen, obwohl die User den Inhalt unabhängig davon scrollen können (Sticky Navigation), erleichtert die Bedienung einer Website enorm. Laut mobify erhöht eine Sticky Navigation auch die Geschwindigkeit beim Browsen, um ganze 22%. Auf kleinen Screens kann solch ein Menü zusätzlich visuell reduziert und off Canvas gesetzt werden, um dem Content viel Raum zu lassen.

Starke große Bilder auch in kleinen Formaten

Dass wir auf emotionale Botschaften stark ansprechen, und diese in unserer visuell geprägten Gesellschaft besonders schnell über Bilder kommuniziert werden, ist auch im Responsive Design zu berücksichtigen. Darum sollte auch auf mobilen Geräten Bildern viel Raum gelassen werden. Texte können additiv zu den Bildern gesetzt werden, und ebenfalls durch sichtbare und leicht zu bedienende Buttons Off Canvas gesetzt werden. So können Bilder die User in die Themen einführen, Texte können per Klick aktiviert und gelesen werden. Bei kleinen Formaten zusätzlich die Browser-Bar auszublenden, gibt den Inhalten noch mehr Raum und Wirkung.

Textgrößen optimieren, Zoom ausschalten

Texte so groß zu setzen, dass sie auf kleinsten Formaten gut lesbar sind, ermöglicht einerseits die Lesbarkeit und ersetzt gleichzeitig die Zoom Funktion. Diese zu deaktivieren, erleichtert die Übersichtlichkeit einer Webpage, da man nicht in Detailausschnitten den Überblick über das Gesamtbild verlieren kann.

Transitions

Durch Transition (Effekte die beim Erscheinen und Verschwinden von Designelementen entstehen), wie Überblendungen, Farbeffekte und Bewegungseffekte, kann in Websites schnell das Look and Feel von potenten Apps entstehen und das Erlebnis wird deutlich spannender.

Not always the best solution

Responsive Design ist ganz klar ein Must Have für die Mehrheit aller Webprojekte geworden. Nicht zu vergessen ist gleichzeitig die Tatsache, dass es für manche Anwendungen nicht die beste Lösung ist oder sich überhaupt nicht eignet. Denn Sehr komplexe Inhaltsstrukturen und Seiten mit äußerst vielen und verschachtelten Informationsstrukturen etwa, sind möglicherweise mit getrennten Versionen für Desktop und Mobil besser beraten als mit einer flexibel anpassbaren Responsive Design Lösung.

Stay the same

Werden die Inhalte für mobile Versionen stark reduziert, kann die Gefahr entstehen, dass die mobile Version nicht mehr genug visuelle Zugehörigkeit zur Desktop Variante hat.

Da viele User Webseiten mehrmals von verschiedenen Geräten aus besuchen, ist es wichtig die Zusammengehörigkeit klar zu zeigen, da Besucher sonst irritiert werden könnten.

 

 

 

Quelle

Mobify
Webdesigner. 3/2013
Dribble Wikipedia "Linkshänder"
SENDEN
SENDEN