Kostenloses Ebook: “Tablet Web Design Best Practices” mit vielen guten Tipps

Man wird den Damen und Herren bei Mobify in Kanada kei­nes­wegs die Expertise in Sachen mobi­les Webdesign abspre­chen wol­len, auch wenn man sich mög­li­cher­wei­se mit dem Cloud-basier­ten Konzept Mobifys nicht so recht anfreun­den kann. Vor eini­ger Zeit lie­ßen besag­te Damen und Herren ihrer Expertise frei­en Lauf und stell­ten ein Ebook mit 30 Tipps, ein beson­de­res Nutzererlebnis auf Tablets zu schaf­fen, zusam­men. Sie nen­nen es “Tablet Web Design Best Practices”. Das 25-sei­ti­ge Heftchen gibt es völ­lig gra­tis gegen die Bekanntgabe einer E-Mail-Adresse.

Tablet Web Design Best Practices: 30 Ways to Create Amazing Web Experiences on Tablets

Den größ­ten Nachteil des ansons­ten lie­be­voll gestal­te­ten und mit nutz­wer­ti­gen Informationen ver­se­he­nen Heftchens will ich gleich zu Beginn erwäh­nen, denn es ist sicher­lich für manch Interessenten ein Showstopper. Man kann es sich anhand des Titels und des Herkunftslandes an sich schon den­ken, den­noch sei deut­lich dar­auf hin­ge­wie­sen: Tablet Web Design Best Practices ist in eng­li­scher Sprache ver­fasst. Nicht in schwie­ri­gem, tech­ni­schen Englisch, son­dern eher so auf Mittelschul-Niveau, aber immer­hin.

Stellt die­se Hürde für Sie kein Problem dar, erhal­ten Sie einen kom­pak­ten Ratgeber, der viel­fach auf der Basis von Ergebnissen einer oder meh­re­rer Studien Design-Tipps gibt, die Hand und Fuß haben. Mobify greift dabei nach eige­nen Angaben auf die Erfahrungen aus dem erfolg­rei­chen Umsetzen eini­ger gro­ßer Websites, dar­un­ter Starbucks, aber auch auf die­je­ni­gen der rund 75.000 Designer und Developer, die mit den Mobify-Tools arbei­ten, zurück.

So ver­wun­dert es nicht, dass unter den Tipps sol­che sind, auf die man bei inten­si­vem Nachdenken auch sel­ber kom­men wür­de und ande­re, mit denen zumin­dest ich nicht sofort um die Ecke gekom­men wäre.

Tablet Web Design Best Practices: Two Parts to Rule Them All

In zwei Teile glie­dert sich das Ebook. Im ers­ten Teil wer­den Tipps gege­ben, wie man bestehen­de Desktop-Websites so ver­än­dern kann, dass sie auch auf Tablets sinn­voll nutz­bar wer­den. Im zwei­ten Teil wird der nächs­te Schritt getan. Hier geht es dar­um, wie man vor­ge­hen soll­te, um tat­säch­lich auf Tablets opti­mier­te Websites zu erhal­ten. Zumindest der ers­te Teil ist für jeden Seitenbetreiber rele­vant und soll­te auf jeden Fall bear­bei­tet wer­den.

Die Gründe dafür sind durch­schla­gend. Mit erwar­te­ten Verkäufen von einer hal­ben Milliarde Tablets welt­weit in 2013 und 2014 ist es fahr­läs­sig, deren Nutzer nicht zumin­dest sinn­voll zu bedie­nen. Das umso mehr, als Tablet-Nutzer bei Online-Einkäufen 20 Prozent mehr Umsatz brin­gen als der durch­schnitt­li­che Desktop-Besucher.

Auf der ande­ren Seite die­ser Chance steht das typi­sche Website-Layout mit sei­nen 12 Pixel-Schriften und den nicht auf Touch aus­ge­rich­te­ten Schaltflächen und Formularen. Jeder Tablet-Nutzer wird zustim­men: Auf den aller­meis­ten Websites macht das Surfen kei­nen Spaß. Dabei ist der Anwendungsfall des Internet-Surfens mit Abstand der wich­tigs­te auf Tablets. Sind wir uns einig, dass es Handlungsbedarf gibt?

Und so beginnt das Ebook in sei­nem Teil 1 ganz pra­xis­ori­en­tiert, fast schon hemds­är­me­lig und emp­fiehlt

• Touch-Targets, also Elemente, die per Finger ange­wählt wer­den kön­nen, stets min­des­tens 44 x 44 Pixel groß zu machen,
• auf durch­gän­gi­ge Touch-Bedienungsmöglichkeiten zu ach­ten,
• dafür zu sor­gen, dass der Nutzer mög­lichst wenig schrei­ben muss,
• kon­text-sen­si­ti­ve Eingabemöglichkeiten zu schaf­fen und Auto-Correct oder auto­ma­ti­sche Großschreibung in Formularen aus­zu­schal­ten,
• die Standard-Textgröße und den Zeilenabstand zu erhö­hen,
• Icons als Font und Bilder auch in Retina-Auflösung ein­zu­bin­den,
• und vie­les mehr.

In Teil 2 des Ebooks geht es dann dar­um, Web-Apps so zu gestal­ten, wie man das auch mit nati­ven Apps auf den jewei­li­gen Plattformen tun wür­de. Mit vol­ler Optimierung auf die spe­zi­el­len Möglichkeiten und Limitierungen eines Tablets.

Dazu gehö­ren bei­spiels­wei­se

• dafür zu sor­gen, dass Bilder in Seiten zoom­bar blei­ben, ohne dass die kom­plet­te Seite zoomt,
• die Navigation fest zu ver­an­kern, um sie per­sis­tent ver­füg­bar zu hal­ten,
• orts­ba­sier­te Möglichkeiten zu nut­zen, um etwa logis­ti­sche Fragestellungen leich­ter zu beant­wor­ten,
• Schriftgrößen durch den Nutzer anpass­bar zu gestal­ten,
• viel mit Bildern zu arbei­ten,
• die Navigation abso­lut tablet-gerecht zu gestal­ten, etwa durch Auto-Hide oder Off-Canvas-Varianten,
• beson­ders auf die sog. Hot Zones zu ach­ten, die­je­ni­gen Bereiche, die man mit den Fingern beson­ders leicht errei­chen kann auf einem Tablet,
• und vie­les mehr.

Natürlich, und wer wür­de das auch anders tun, ver­wei­sen die Autoren an vie­len Stellen auf die ent­spre­chen­den Tools aus dem Hause Mobify und ver­lin­ken Tutorials, die zei­gen, wie das Mobify-Konzept die ent­spre­chen­de Umsetzung vor­sieht.

Dennoch ist das Ebook nicht auf das Mobify-Konzept limi­tiert, son­dern bie­tet durch­aus all­ge­mein­gül­ti­ge, dabei gute Tipps, die sicher­lich den erfah­re­nen mobi­len UI-Entwickler nicht aus den Socken hau­en, aber Otto Durchschnittsseitenbetreiber und Feld-, Wald und Wiesen-Designer ein gutes Stück nach vor­ne brin­gen kön­nen – auf dem Weg in das Netz der Zukunft.

Abschließend will ich noch­mal auf den Bezugsweg zurück kom­men. Das Ebook steht, wie bereits erwähnt, kos­ten­los unter dem wei­ter unten genann­ten Link zur Verfügung. Um den Download zu ermög­li­chen, ist ledig­lich die Eingabe einer syn­tak­tisch kor­rek­ten E-Mail-Adresse erfor­der­lich, das eben­falls vor­han­de­ne Feld “Name” kann igno­riert wer­den. Der Download wird zwar auch als Link per E-Mail zuge­schickt, jedoch kön­nen Sie das Ebook schon unmit­tel­bar nach Klick auf “Get the Guide Now” her­un­ter­la­den. Die Gültigkeit der ein­ge­ge­be­nen E-Mail-Adresse ist somit nicht Voraussetzung für den Download.

Links zum Beitrag

• Downloadseite zum Ebook | Mobify
• Startseite des Dienstes sel­ber | Mobify