Das Folgende ist ein Gastbeitrag von Ben Terrill. Ben ist Co-Autor des E-Books Tablet Web Design Best Practices und VP of Customer Success bei Mobify, wo er an großen Kunden-Websites wie British Telecom, Starbucks und Expedia arbeitet.
Die Tablet-Revolution ist im Gange. Neue Daten von Adobe zeigen, dass globale Websites mittlerweile mehr Traffic von Tablets als von Smartphones erhalten. Dennoch funktioniert eine Standard-Desktop-Website auf einem Tablet nicht sehr gut. Die typische Desktop-Schriftgröße von 12 Pixeln ist zu klein, ebenso wie Buttons. Bilder sind nicht scharf und, schlimmer noch, einige Funktionen funktionieren einfach nicht.
Die gute Nachricht ist, dass Sie Ihre Website nicht komplett umbauen müssen. Eine funktionierende Desktop-Website ist ein guter Ausgangspunkt für den Aufbau einer effektiven Tablet-Website. In diesem Artikel stelle ich sechs Techniken aus Mobifys neuestem E-Book Tablet Web Design Best Practices vor, um Desktop-Websites auf Tablets erheblich zu verbessern.
Zu 100 % Touch-freundlich
Eine der besten Möglichkeiten, Ihre Desktop-Website auf einem Tablet zum Strahlen zu bringen, ist die Touch-Freundlichkeit. Wenn Website-Elemente so aussehen, als könnten sie geswiped, getippt oder gequetscht werden, dann müssen Sie diese Funktionalität integrieren, um Ihre Website für Tablets vorzubereiten.
Erwägen Sie das Hinzufügen von Elementen wie Karussells und Akkordeons, Drawers und Panels. Mobify bietet eine Vielzahl von Open-Source-JavaScript-Modulen, die Sie für diesen Zweck verwenden können.
Redaktioneller Hinweis: Wir haben kürzlich das JavaScript für touch-freundliche Slider behandelt. Ich denke auch, dass Royal Slider ein schöner Slider ist, der touch-freundlich und auch responsiv ist.
Standardmäßige Schriftgröße und Zeilenhöhe erhöhen
Zwingen Sie Benutzer nicht, Ihren Inhalt doppelt anzutippen oder zu zoomen. Erhöhen Sie stattdessen die Schriftgröße auf mindestens 16 Pixel. Sie können auch eine Zeilenhöhe von 1,5 verwenden, um bei inhaltsreichen Seiten Luft zwischen den Textzeilen zu schaffen, wie es Mashable im folgenden Beispiel tut. Denken Sie daran, dass Text immer lesbar sein muss, unabhängig davon, wie ein Benutzer sein Tablet hält.
Fingerfreundlich sein
Unsere Finger sind viel ungeschickter als ein Cursor, daher verbessert die Erhöhung des Abstands zwischen verschiedenen Touch-Zielen die Benutzergenauigkeit. Und machen Sie diese Touch-Ziele groß! Unsere Fingerspitzen benötigen typischerweise bis zu 44 Pixel, um bequem in ein Touch-Ziel zu passen, also gestalten Sie entsprechend.
Kontextbezogene Tastaturen aktivieren
Das Tolle an Software-Tastaturen ist, dass sie dynamisch sind. Das heißt, Sie können ihr Layout kontextabhängig ändern. Wenn beispielsweise Ihr Eingabefeld eine E-Mail-Adresse erfordert, sollte die Tastatur das Symbol '@', Unterstriche und Bindestriche enthalten. Wenn der Benutzer aufgefordert wird, eine Telefonnummer einzugeben, stellen Sie ein numerisches Tastenfeld bereit. Versuchen Sie, die folgenden Eingabetypen für Formularfelder zu verwenden:
- Standardtastatur |
<input type="text" /> - URL-Parameter |
<input type="url" /> - E-Mail-spezifische Tastatur |
<input type="email" /> - Numerische Tastatur |
<input type="text" pattern="[0-9]*" />
Redaktioneller Hinweis: Ich habe auch Daten über HTML5 Eingabeattribute/-typen/-elemente behandelt. Es wird ein wenig alt, ist aber immer noch nützlich.
Schriftbasierte Icons für den Sieg
Auflösungen und Pixeldichten auf Tablet-Bildschirmen sind weitaus höher als auf Desktop- und Laptop-Bildschirmen. Infolgedessen können Grafiken pixelig aussehen, wenn sie nicht für hochauflösende Bildschirme konzipiert sind. Aus diesem Grund sind schriftbasierte Icons eine gute Wahl, da sie gut auf hochauflösenden Displays skalieren; sie sind einfach mit CSS zu färben und zu schattieren; und sie erfordern nur einen HTTP-Request zum Herunterladen. Außerdem müssen Sie sich nicht mit einem Sprite-Sheet herumschlagen.
Erstellen Sie Ihre eigenen Icon-Font-Sets oder verwenden Sie bestehende Sets wie Font Awesome, Glyphish, Iconsweets, Symbolset oder Icnfnt.
Redaktioneller Hinweis: Ich habe einmal eine massive Zusammenfassung von Icon-Fonts gemacht (die ich noch ergänzen muss). Ich bin ein Fan davon, diese HTML-Techniken für die Einbindung in die Seite zu verwenden, die sie zugänglich halten. Ich bin auch ein Fan von IcoMoon zum Erstellen von reduzierten, angepassten Icon-Font-Sets.
Performance ist Design
Moderne Webdesign-Techniken wie Responsive Design können die Leistung von Websites beeinträchtigen. Da 57 % der Benutzer Ihre Website wahrscheinlich verlassen, wenn das Laden 3 Sekunden dauert, sind Leistungserwägungen entscheidend. Einige Tipps zur Verbesserung der Leistung mobiler Websites umfassen das Komprimieren von Bildern und das Verketten von CSS und JavaScript, um die Anzahl der HTTP-Requests und die Gesamtseitengröße zu reduzieren. Mit diesen Korrekturen werden Sie eine deutlich schnellere Ladezeit der Seiten und glücklichere, konvertierungsstärkere Benutzer feststellen. Verwenden Sie Tools wie Uglify, Sass, Compass und Mobify.js, um Leistungsverbesserungen zu automatisieren.
Redaktioneller Hinweis: Ich behandle einige dieser Leistungstechniken und einige andere in #114: Lasst uns einfache Dinge tun, um unsere Websites schneller zu machen
Machen Sie sich an die Arbeit!
Mit diesen Tablet-Transformations-Techniken in Ihrem Werkzeugkasten gibt es keinen Grund, gestresst zu sein, weil Sie keine vollständig Tablet-optimierte Website haben. Für weitere Möglichkeiten, Ihre Desktop-Website Tablet-freundlich zu gestalten, lesen Sie Mobifys kostenloses E-Book Tablet Web Design Best Practices.
Die numerische Tastatur-Eingabe ist etwas, über das ich mich gewundert habe. Danke für das Teilen all dieser!
Danke!
Ich wusste nicht, dass es -> <input type=”text” pattern=”[0-9]*” /> gibt, um eine numerische Tastatur zu erhalten... das muss ich ausprobieren...
Vielen Dank für den informativen Beitrag...
Wenn Sie mehr Kontrolle über die Zahleneingabe wünschen, gibt es auch die Option "type='number'", mit der Sie die minimale/maximale eingegebene Zahl steuern und auch Desktop-Benutzern eine dynamische Möglichkeit zur Eingabe von Zahlen geben können, indem Sie sie um einen von Ihnen angegebenen Schritt erhöhen/verringern.
Alle HTML5-Eingabeoptionen hier
http://html5doctor.com/html5-forms-input-types/
Der Nachteil von type="number" und warum die Option type="text" und pattern eine gute Idee sein kann, ist, dass Apple-Geräte die vollständige Tastatur und nicht das Ziffernfeld anzeigen (obwohl sie das vielleicht im nächsten iOS beheben). Ich würde jedoch argumentieren, dass es besser ist, semantisch korrekt zu sein und die Mehrheit der Geräte abzudecken, als ein wenig hacky zu sein, nur um mit einer Teilmenge von Geräten umzugehen, die ihre mangelnde Unterstützung durch Updates irgendwann beheben könnten. Insbesondere wenn der einzige Einfluss darin besteht, dass Apple-Benutzer ein paar zusätzliche Tasten ignorieren müssen, da sie immer noch den vollen Zahlenbereich oben auf der Tastatur haben.
Ein paar Kommentare
1) Ihr Link zum 57%-Verweis ist kaputt; sieht so aus, als ob ein Tag im Link selbst ist? Redaktioneller Hinweis: behoben.
2) Ich habe die tatsächliche Referenz gefunden, und es sind 57 % der Besucher von REISE-WEBSITES, z. B. Fluggesellschaften oder Kreuzfahrtunternehmen, nicht die Besucher jeder beliebigen Website insgesamt oder auch nur von E-Commerce-Websites im Allgemeinen. Das ergibt mehr Sinn, da diese Zahl etwas hoch erschien. Sie sollten Ihr Datenzitat aktualisieren, um dies widerzuspiegeln, anstatt eine sehr spezifische Branchenstatistik auf das Internet im Allgemeinen anzuwenden.
Ist der Link zum kostenlosen E-Book korrekt?
Ich habe eine 404-Antwort erhalten.
behoben.
Ich halte die Drei-Sekunden-Regel/Forschung für unglaubwürdig. Wenn die Ergebnisse korrekt sind, sollten sie mehr Details dazu hinzufügen. Es scheint wahrscheinlicher, dass jemand eine Website innerhalb von drei Sekunden verlässt, wenn er nichts innerhalb von drei Sekunden laden sieht, im Gegensatz zum Verlassen innerhalb von drei Sekunden, wenn alle Assets noch nicht vollständig geladen sind. Die Infografik ist bei diesem kleinen Detail nicht klar. Habe ich Recht? Oder denke ich zu viel darüber nach?
Ich denke, "etwas innerhalb von 3 Sekunden sehen" ist näher dran. So schaue ich mir Webseiten an. Wenn ich ein paar Sekunden lang einen leeren Bildschirm sehe, bin ich schon weg. Das beeinflusst, wie ich codiere, da ich derzeit kein Festnetzinternet habe, sondern 3G-Mobilfunkinternet nutze. Um fair zu sein, es ist zuverlässig und hat eine akzeptable Geschwindigkeit für die meisten einfachen Anwendungen (3-4 MBit/s), hat aber offensichtlich niedrigere Datenvolumenlimits. Also bevorzuge ich schlank und schnell.
Ziemlich nützliche Tipps. Danke, Kumpel. Eine weitere unbedingt zu beachtende Praxis (zumindest für unser Projekt) ist nur die Anzeige relativer Informationen. Die meisten von uns entscheiden sich für responsives Design, vergessen aber, unnötige Inhalte wegzulassen.
Danke für die Tipps zu den Icon-Fonts. Ich habe sie gerade erst kennengelernt.
Kurzer Hinweis zu Webfonts...
Webfonts sind großartig, aber denken Sie daran, dass sie unter Windows Phone nicht funktionieren.
Anscheinend haben sie das jetzt in Windows 8 behoben, aber eine Reihe von Leuten verwenden immer noch Windows Phone 7.5 und darunter, mich eingeschlossen (ich habe ein Android-Handy bestellt, sie haben mir das falsche geschickt und es hat so lange gedauert, bis es ankam, dass ich dachte, ich probiere es aus).
Ich habe das noch nicht getestet, aber Sie können dies wahrscheinlich mit einem IE-bedingten Kommentar und einer @media-Abfrage umgehen.
Auch für Eingabetypen
Ich habe input type="tel" für Telefonnummern und input type="number" für andere numerische Felder verwendet. Gibt es einen Vorteil bei der Verwendung von input type="text" pattern="[0-9]*" oder ist alles in Ordnung so, wie es ist?
Viele Grüße,
Mark
Hallo Mark,
Designer bei Mobify und einer der Mitwirkenden am Buch. Zunächst einmal vielen Dank für Ihre Zeit für die Kommentare und ich hoffe, Ihnen gefällt das Buch.
Guter Punkt bezüglich der Webfont-Unterstützung für Windows Phone 7.5. Diese Geräte unterstützen definitiv keine Webfonts, daher sollten Sie sicherstellen, dass Sie einen guten Fallback haben. Wir haben diese Überlegung nicht in das Buch aufgenommen, nur weil es sich um Tablets konzentriert, aber es ist definitiv eine großartige Sache, die man im Auge behalten sollte, wenn man für mehrere Bildschirme entwickelt.
Was die Eingabetypen betrifft, ist die Verwendung von 'tel' im Allgemeinen in Ordnung, obwohl ich das mit ein paar Vorbehalten sage. Die Verwendung von 'tel' beruht auf der aktuellen Browser-Implementierung von tel, die das numerische Tastenfeld anzeigt – was ein netter Workaround ist – aber in Zukunft können wir nicht sicher sein, dass sie das immer tun werden. Sie könnten beispielsweise mit der Anzeige der Kontaktliste beginnen oder Ihre Telefonnummer autosuggieren. Durch die Verwendung des [number]-Feldes können wir sicherstellen, dass der Browser immer den gewünschten Tastaturtyp liefert – im Wesentlichen den richtigen Typ spezifiziert, anstatt sich auf einen zu verlassen, der nur funktioniert. Es ist etwas mehr Tipparbeit, aber es lohnt sich.
Ich hoffe, das beantwortet Ihre Fragen. Wenn Sie weitere haben, zögern Sie nicht, mir eine E-Mail an [vorname]@mobify.com zu senden oder mir eine Nachricht auf Twitter an @kpeatt zu schicken.
Vielen Dank,
Kyle
Hallo Kyle,
Ja, das ergibt Sinn wegen der Eingabetypen, damit werde ich später ein bisschen spielen.
Viele Grüße,
Mark
Schriftbasierte Icons sind seit ihrer Einführung hervorragend und ich bin ein großer Fan von Fontawesome. Und ich habe versucht, Bootstrap zu verwenden und mich seitdem darin verliebt. Wenn Sie gute jQuery/JavaScript-Kenntnisse haben, kombinieren Sie es mit Bootstrap und Sie erzielen Killer-Ergebnisse.
Tolle Ratschläge zu den Eingabetypen, danke!
Ich habe sie sofort implementiert, aber festgestellt, dass die Verwendung von
input type="number"tatsächlich funktioniert undinput type="text" pattern="[0-9]*"nicht funktioniert (auf einem Android 2.3.6).Es ist wirklich cool zu sehen, wie die Tastatur zwischen Standardtext, E-Mail-Adresse und Zahlen wechselt.
Ich konnte vor diesem Beitrag keine Tablet-freundlichen Websites gestalten, aber jetzt kann ich meine Websites mit den obigen Tipps & Anleitungen Tablet-freundlich gestalten. Danke für diesen Beitrag.
Innerhalb dieses einzelnen Artikels stellen Sie viele Referenzen zur Verfügung, die uns dazu veranlassen, mehr über responsives Design sowie andere verwandte Themen zu lernen.
Danke für die Veröffentlichung eines so schönen Artikels.
Gute Ideen..