Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 18. Juli 2013

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.

tabelt-web-design-best-practices-page

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.

tablet-web-design-book-bottom

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.

tablet-web-design-book-hot-zones

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
Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.