Seite 3: Navigation und Eingaben

Inhaltsverzeichnis

Bilder sollten optimiert ausgeliefert werden, und eine weitere Herangehensweise zeigt, dass eine bestimmte Kombination von Auflösung und Kompressionsrate interessante Ergebnisse liefert. Rendert man ein Bild mit der doppelten Auflösung und einer höheren Kompressionsrate, benötigt es zwar weniger Speicher, lässt sich aber dennoch auf Bildschirmen mit hoher Auflösung relativ scharf anzeigen.

Das Privileg, mit pixelunabhängigen Vektorgrafiken zu arbeiten, blieb bisher den Designern vorbehalten. Mithilfe von SVG-Grafiken (Scalable Vector Graphic) lassen sich derart erstellte Bilder auch im Browser anzeigen. Mit einer kleinen Speichergröße, einer Skalierung ohne Qualitätsverlust und einer perfekten Darstellung – auch auf hochauflösenden Bildschirmen – eignet sich das Format ideal für responsive Webseiten. Icon-Fonts sind nur eine von vielen sinnvollen Einsatzmöglichkeiten. Ab Internet Explorer 9 und Android 2.3 können die entsprechenden Browser in den vollen Genuss dieser Technik kommen, für den Rest steht ein normales PNG-Bild per JavaScript-Fallback zur Auslieferung bereit:

<img src="bild.svg" onerror="this.onerror=null; this.src='bild.png'">
 

Auch Frameworks wie Mondernizr oder SVGeezy bieten kleine Helferlein, um mit JavaScript auf die Kompatibilität prüfen zu können:

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

Viele Wege führen zum Ziel: Navigation

Eine funktionierende Navigation ist bei RWD essenziell. Der Besucher soll sich mobil, aber auch auf dem Desktop schnell zurechtfinden. Eine einzige Hauptnavigation mit vielen Punkten kann sich negativ auf die Benutzerfreundlichkeit mancher Geräte auswirken. Viele Webseiten wandeln das Menü auf kleineren Geräten in Dropdown-Listen um, was bei einer begrenzten Anzahl an Punkten zwar übersichtlich sein mag, aber spätestens ab einer tieferen Struktur mit mehreren Ebenen unübersichtlich wird. Es ist also in den meisten Fällen nicht empfehlenswert, mit Input-Elementen ein Pseudo-Menü-Control zu erstellen.

Das Beispiel des auf Mobilgeräten zugeklappten Menüs findet sich auf immer mehr Webseiten wieder. Ab einer bestimmten Auflösung verschwindet das Menü innerhalb eines Liste-Icons und wird erst bei Klick beziehungsweise Touch angezeigt (ein Implementierungsbeispiel ist im Exkurs "Responsive Navigation" zu finden). Diese Art der Umsetzung bringt einige Vorteile, denn es lassen sich mehrere Ebenen ineinander verschachteln, und durch die Implementierung auf zahlreichen Webseiten verstehen sie viele Besucher automatisch. Außerdem lässt sie sich für jede Auflösung optimieren, um beispielsweise auf einem Tablet in einer linken Spalte aufzuklappen, wie es native Anwendungen vormachen. Es gibt noch keine Pauschallösung, die in jedem Fall zu 100 Prozent die richtige ist, aber das Rad muss auch nicht neu erfunden werden, denn es haben sich schon viele Entwickler und Designer mit diesen Konzepten auseinandergesetzt.

Gut überlegt: Eingabefelder und Formulare

Mit vielen Textfeldern und unübersichtlichem Design bei Formularen ist ein Ausstieg der Nutzer auf mobilen Webseiten garantiert. Deshalb ist es wichtig, sie nicht nur kurz, sondern auch übersichtlich zu halten. Beispielsweise lassen sich Textfelder in vielen Fällen viel eleganter mit einer Checkbox, Radio-Buttons oder einer Dropdown-Liste ersetzen.

Bei der Validierung der Eingabe ist es besonders wichtig, dem Besucher sofort einen Hinweis auf fehlerhafte Eingaben zu geben. Beim Absenden des Formulars ist es meistens zu spät, denn ein Formular ist im Normalfall viel länger als ein Smartphone-Bildschirm hoch, was zu unnötiger Verwirrung führen kann.

Zahlreiche Frameworks bieten eine große Palette für hübsche Formulare und eine mächtige Validierung. Als Krönung bringt HTML5 einige Neuerungen mit, wie das require-Attribut für Eingabeelemente. Ganz ohne JavaScript erfährt der Besucher, dass es sich um ein Pflichtfeld handelt. Auch neue Form-Controls, wie ein number-, email-, range- oder date-Input, sorgen gerade auf mobilen Geräten für neue Interaktionsoptionen. So kann beim Fokussieren eines Datumsfeldes der mobile Browser sofort einen nativen Kalender öffnen, ohne immer auf eine Framework-UI-Komponente wie dem jQuery-Datepicker zurückgreifen zu müssen.

Da sie zum Teil nicht auf Touch-Geräte optimiert sind, kann eine lästige Überlappung von anderen Elementen die Folge sein. Bei E-Mail- oder Zahlenfeldern kann sich der Browser ebenso dafür entscheiden, eine angepasste und optimierte Tastatur anzuzeigen, um dem Besucher Zeichen wie "@" sofort anzeigen zu können.

date	Ein Control für Datumsfelder, welches auf viele mobile Browser den nativen Kalender anzeigt	<input type="date">
datetime	Für das Datum und Zeit im UTC-Format	<input type="datetime">
datetime-local	Für das Datum und Zeit unter Verwendung der aktuellen Zeitzone	<input type="datetime-local">
month	Auswahl für Monat und Jahr	<input type="month">
time	Auswahl für die Zeit	<input type="time">
week	Auswahl für Woche und Jahr	<input type="week">
color	Ein Feld für die Eingabe von einfachen Farb-Werten (hexadezimal)	<input type="color"">
email	Ein Feld für die Validierung von e-Mail Adressen	<input type="email">
tel	Ein Feld für die Validierung von Telefonnummern gegen ein optionales Pattern	<input type="tel">
search	Für die Suche in einem Datenset (zum Beispiel in einem <datalist> HTML element)	<input type="search">
range	Ein Slider-Element für die einfache Auswahl einer Zahl, welcher zwischen zwei Zahlen liegt	<input type="range">
number	Ein Feld, welches nur Zahleneingaben akzeptiert	<input type="number">
url	Ein Feld, welches nur korrekte URLs akzeptiert	<input type="url">

Nicht ohne Grund gibt es ab HTML5 zahlreiche neue Input-Felder (Tab. 1)

Testen, Testen, Testen!

Eine responsive Webseite lässt sich auf vielerlei Arten testen – im einfachsten Fall, indem das Browser-Fenster größer und kleiner gezogen wird. Das lästige Ändern des Browser-Fensters lässt sich durch Werkzeuge wie die Chrome-Entwicklertools oder Online-Tools wie responsinator, responsivepx oder screenfly einfach ersetzen, inklusive vordefinierter Breakpoints für MediaQueries. Es ist aber zu beachten, dass die Online-Tools meist nur mit IFrame-Einbettung oder mit ergänzenden Scrollbalken arbeiten und somit nicht hundertprozentig pixelgenau sind. Die Simulation kann bei der Entwicklung von enormen Vorteil sein und eine wahre Zeitersparnis darstellen, trotzdem sollte das Ergebnis am Ende noch ausgiebig auf den jeweiligen Geräten getestet werden.