Skip to content
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Smarte Agenturköpfe
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » Webdesign » Kostenloses Ebook: „Tablet Web Design Best Practices“ mit vielen guten Tipps

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

Sozial sein
Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Dieter Petereit
  • 18. Juli 2013

Man wird den Damen und Herren bei Mobify in Kanada keineswegs die Expertise in Sachen mobiles Webdesign absprechen wollen, auch wenn man sich möglicherweise mit dem Cloud-basierten Konzept Mobifys nicht so recht anfreunden kann. Vor einiger Zeit ließen besagte Damen und Herren ihrer Expertise freien Lauf und stellten ein Ebook mit 30 Tipps, ein besonderes Nutzererlebnis auf Tablets zu schaffen, zusammen. Sie nennen es "Tablet Web Design Best Practices". Das 25-seitige Heftchen gibt es völlig gratis 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 ansonsten liebevoll gestalteten und mit nutzwertigen Informationen versehenen Heftchens will ich gleich zu Beginn erwähnen, denn es ist sicherlich für manch Interessenten ein Showstopper. Man kann es sich anhand des Titels und des Herkunftslandes an sich schon denken, dennoch sei deutlich darauf hingewiesen: Tablet Web Design Best Practices ist in englischer Sprache verfasst. Nicht in schwierigem, technischen Englisch, sondern eher so auf Mittelschul-Niveau, aber immerhin.

Stellt diese Hürde für Sie kein Problem dar, erhalten Sie einen kompakten Ratgeber, der vielfach auf der Basis von Ergebnissen einer oder mehrerer Studien Design-Tipps gibt, die Hand und Fuß haben. Mobify greift dabei nach eigenen Angaben auf die Erfahrungen aus dem erfolgreichen Umsetzen einiger großer Websites, darunter Starbucks, aber auch auf diejenigen der rund 75.000 Designer und Developer, die mit den Mobify-Tools arbeiten, zurück.

So verwundert es nicht, dass unter den Tipps solche sind, auf die man bei intensivem Nachdenken auch selber kommen würde und andere, mit denen zumindest ich nicht sofort um die Ecke gekommen wäre.

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

In zwei Teile gliedert sich das Ebook. Im ersten Teil werden Tipps gegeben, wie man bestehende Desktop-Websites so verändern kann, dass sie auch auf Tablets sinnvoll nutzbar werden. Im zweiten Teil wird der nächste Schritt getan. Hier geht es darum, wie man vorgehen sollte, um tatsächlich auf Tablets optimierte Websites zu erhalten. Zumindest der erste Teil ist für jeden Seitenbetreiber relevant und sollte auf jeden Fall bearbeitet werden.

tablet-web-design-book-bottom

Die Gründe dafür sind durchschlagend. Mit erwarteten Verkäufen von einer halben Milliarde Tablets weltweit in 2013 und 2014 ist es fahrlässig, deren Nutzer nicht zumindest sinnvoll zu bedienen. Das umso mehr, als Tablet-Nutzer bei Online-Einkäufen 20 Prozent mehr Umsatz bringen als der durchschnittliche Desktop-Besucher.

Auf der anderen Seite dieser Chance steht das typische Website-Layout mit seinen 12 Pixel-Schriften und den nicht auf Touch ausgerichteten Schaltflächen und Formularen. Jeder Tablet-Nutzer wird zustimmen: Auf den allermeisten Websites macht das Surfen keinen Spaß. Dabei ist der Anwendungsfall des Internet-Surfens mit Abstand der wichtigste auf Tablets. Sind wir uns einig, dass es Handlungsbedarf gibt?

Und so beginnt das Ebook in seinem Teil 1 ganz praxisorientiert, fast schon hemdsärmelig und empfiehlt

  • Touch-Targets, also Elemente, die per Finger angewählt werden können, stets mindestens 44 x 44 Pixel groß zu machen,
  • auf durchgängige Touch-Bedienungsmöglichkeiten zu achten,
  • dafür zu sorgen, dass der Nutzer möglichst wenig schreiben muss,
  • kontext-sensitive Eingabemöglichkeiten zu schaffen und Auto-Correct oder automatische Großschreibung in Formularen auszuschalten,
  • die Standard-Textgröße und den Zeilenabstand zu erhöhen,
  • Icons als Font und Bilder auch in Retina-Auflösung einzubinden,
  • und vieles mehr.

In Teil 2 des Ebooks geht es dann darum, Web-Apps so zu gestalten, wie man das auch mit nativen Apps auf den jeweiligen Plattformen tun würde. Mit voller Optimierung auf die speziellen Möglichkeiten und Limitierungen eines Tablets.

Dazu gehören beispielsweise

  • dafür zu sorgen, dass Bilder in Seiten zoombar bleiben, ohne dass die komplette Seite zoomt,
  • die Navigation fest zu verankern, um sie persistent verfügbar zu halten,
  • ortsbasierte Möglichkeiten zu nutzen, um etwa logistische Fragestellungen leichter zu beantworten,
  • Schriftgrößen durch den Nutzer anpassbar zu gestalten,
  • viel mit Bildern zu arbeiten,
  • die Navigation absolut tablet-gerecht zu gestalten, etwa durch Auto-Hide oder Off-Canvas-Varianten,
  • besonders auf die sog. Hot Zones zu achten, diejenigen Bereiche, die man mit den Fingern besonders leicht erreichen kann auf einem Tablet,
  • und vieles mehr.

tablet-web-design-book-hot-zones

Natürlich, und wer würde das auch anders tun, verweisen die Autoren an vielen Stellen auf die entsprechenden Tools aus dem Hause Mobify und verlinken Tutorials, die zeigen, wie das Mobify-Konzept die entsprechende Umsetzung vorsieht.

Dennoch ist das Ebook nicht auf das Mobify-Konzept limitiert, sondern bietet durchaus allgemeingültige, dabei gute Tipps, die sicherlich den erfahrenen mobilen UI-Entwickler nicht aus den Socken hauen, aber Otto Durchschnittsseitenbetreiber und Feld-, Wald und Wiesen-Designer ein gutes Stück nach vorne bringen können – auf dem Weg in das Netz der Zukunft.

Abschließend will ich nochmal auf den Bezugsweg zurück kommen. Das Ebook steht, wie bereits erwähnt, kostenlos unter dem weiter unten genannten Link zur Verfügung. Um den Download zu ermöglichen, ist lediglich die Eingabe einer syntaktisch korrekten E-Mail-Adresse erforderlich, das ebenfalls vorhandene Feld "Name" kann ignoriert werden. Der Download wird zwar auch als Link per E-Mail zugeschickt, jedoch können Sie das Ebook schon unmittelbar nach Klick auf "Get the Guide Now" herunterladen. Die Gültigkeit der eingegebenen E-Mail-Adresse ist somit nicht Voraussetzung für den Download.

Links zum Beitrag

  • Downloadseite zum Ebook | Mobify
  • Startseite des Dienstes selber | Mobify
Dieter Petereit

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Jobs

Full Stack Developer SW Prototyping

Berlin

Lead Entwickler Mobile mit Fokus iOS-Entwicklung

Karlsruhe

Grafik-Designerin

Freiburg im Breisgau

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Agenturpartner

Logo der Webdesign Agentur in Dresden mit Schriftzug DAZECON auf blauem Hintergrund.

DAZECON – Webdesign und Marketing

Dresden

CAF chris and friends berlin Logo.

CAF Webdesign Agentur

Berlin

SEO-Sicht Agentur Berlin Logo.

SEO-Sicht

Berlin

iPower, trigger your leads. Logo der SEO Agentur für Berlin.

iPower AG

Berlin

der informationsdesigner kaufbeuren logo

Der Informations­designer

Kaufbeuren

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign: Die Basics guter Informations­architektur

Lineare Informationsarchitektur bezeichnet eine Konstruktion, in der es stets nur einen vordefinierten Weg zum Ziel gibt. Nutzer in linearen Systemen arbeiten Aufgaben entlang der vorgegebenen Pfade ab und können nur so und nicht anders zum Ziel zu gelangen. Diese Vorgehensweise ist aus Sicht des Designers nicht uninteressant.

 →   

Webdesign-Agentur gründen: 10 Tipps, wie der Start gelingt

Eine Webdesign-Agentur zu gründen ist keine einfache Aufgabe, denn du musst eine ganze Reihe Fähigkeiten mitbringen, um erfolgreich im harten Markt bestehen zu können.

 →   

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Unternehmen: Agenturen finden in…

  • Augsburg
  • Basel
  • Berlin
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Freiburg im Breisgau
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Ingolstadt
  • Innsbruck
  • Frankfurt am Main
  • Karlsruhe
  • Köln
  • Leipzig
  • Mainz
  • Mannheim
  • München
  • Nürnberg
  • Potsdam
  • Regensburg
  • Reutlingen
  • Salzburg
  • Stuttgart
  • Wien
  • Wuppertal
  • Zürich
Menü
  • Augsburg
  • Basel
  • Berlin
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Freiburg im Breisgau
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Ingolstadt
  • Innsbruck
  • Frankfurt am Main
  • Karlsruhe
  • Köln
  • Leipzig
  • Mainz
  • Mannheim
  • München
  • Nürnberg
  • Potsdam
  • Regensburg
  • Reutlingen
  • Salzburg
  • Stuttgart
  • Wien
  • Wuppertal
  • Zürich

Für Agenturen

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.