Mobil werden - FAQ

Ja, grundsätzlich schon. Kinder nutzen das Internet immer früher. Kinder gehen zunehmend über mobile Geräte ins Netz. Insbesondere die Jüngsten haben die beste Tablet-Ausstattung. Kindliche Mediennutzung findet zunehmend mobil statt.

Aber: Gerätenutzung ist abhängig von den Tätigkeiten bzw. den angebotenen Inhalten:

• Spielen und Lernen -> PC
• Spielen und Videos anschauen -> Tablet
• Spiele, Kommunikation, Musik -> Smartphone

Wichtig: Zielgruppe(n) analysieren und definieren, Nutzungsverhalten der Zielgruppe analysieren

Linktipp:

Warum responsive Webseiten sinnvoller sind als Apps

Nutze interaktive Elemente in HTML5 statt Flash.

Linktipp

Video und Audio mit HTML5

Es gibt keine „ideale“ Auflösung mehr. - > Optimiere das Layout für verschiedene Auflösungen. Auf jeden Fall in den drei Auflösungen (Desktop, Tablet, Smartphone).

• Flexible Bildgrößen
• Prozentuale Schriftgrößen
• Menüs verschwinden hinter „Hamburger“-Icon oder verkleinern sich
• Inhaltselemente positionieren sich je nach Auflösung und Bildschirm-Orientierung
• Einsatz von media-queries
  • Breite / Höhe
  • Orientierung
  • Seitenverhältnis ...

Linktipp

t3n.de: Hamburger-Icon und bessere Alternativen für Navigationselemente

t3n.de "Was du als Designer über Mobilsurfer wissen musst"

• Verzicht auf Animationen in der mobilen Ansicht
• Zusammenfassung von JavaScript und CSS-Files – Minifizierung, Kompression
• Komprimierung von PNG und JPG, Einsatz von Vektor-Bildern (SVG)
• Messen der Performance per mod_pagespeed

Linktipps:

Test auf Optimierung für Mobilgeräte bei Google

Website speed test

Über Wordpress

• ursprünglich als BLOG-System gestartet, inzwischen vollwertiges CMS
• sehr leichte Bedienung / nutzerfreundlich, schnelle Einarbeitung f. Redakteure
• sehr viele Themes (Gestaltungsvorlagen) und PlugIns
• nicht so sehr auf Individualisierung ausgelegt, eher Standardlösung

Über Joomla!

• als einfaches CMS entwickelt
• hatte 2012 noch 40% Marktanteil, verliert aber z.Z. viele Nutzer an Wordpress
• einfache Verwaltung der Inhalte
• komplexere Seitenstrukturen als bei Wordpress möglich
• komplexe (z.T.unübersichtliche) Erweiterungen (unterteilt in Module, Komponenten + PlugIn)
• sehr viele Themes und PlugIn

Über Typo3

• als Enterprise-System entwickelt
• hohes Maß an Skalierung und Individualisierung möglich
• komplexes Backend mit vielen Möglichkeiten (erhöhter Einarbeitungsaufwand)
• höhere Entwicklungs- und Anpassungskosten
• größere Firmen und Agenturen setzen eher auf Typo3, daher nicht so viele kostenlose
• Erweiterungen / Themes wie bei Wordpress oder Joomla vorhanden

Fazit

• im Bereich Responsive / mobiles Webdesign sind alle 3 Systeme gleichermaßen geeignet
• je komplexer und individueller die zu erstellenden Webseiten werden, umso mehr verschiebt sich die Auswahl von Wordpress und Joomla zu Typo3
• Auswahl ist für ein System ist schwierig und von vielen Faktoren abhängig, da man sich oft für viele Jahre an dieses System bindet, ist ggf. eine Beratung durch Experten empfehlenswert

Linktipps

• Infos zu Drupal
• Infos zu Joomla
• Infos zu Typo3
• Infos zu WordPress

• Content: Die Besucher einer Website erwarten den gleichen Content, unabhängig von dem Gerät, mit dem sie die Seite besuchen.
• Seitenaufbau:
  • Der Fließtext muss auch auf kleinen Displays und bei Sonneneinstrahlung gut lesbar sein. Daher empfiehlt es sich, mobil etwa 150% der Desktop-Schriftgröße zu nehmen bzw. etwa 16–18px. Auch mehr Zeilenabstand ist empfehlenswert (150–160%).
  • Die Umbrüche von Headlines müssen beachtet werden, evtl. einen Soft-Umbruch (­) einfügen.
  • Bei Text, der mobil länger als 3 Zeilen läuft, keine Großbuchstaben verwenden, da dies die Lesbarkeit enorm einschränkt.
  • Bilder sollten auch für Retina Displays optimiert sein.
• Touchability:
  • „Designing for touch“: Bei der Gestaltung muss beachtet werden, dass man wichtige Elemente mit dem Daumen erreichen & klicken kann.
  • OnMouseOver sind mit einem Touch-Display nicht nutzbar.
  • Für Touch-Elemente empfiehlt Google eine Mindestgröße von 48x48 Pixeln. Auch an Checkboxen denken!
• Navigation:
  • Versuche eine möglichst geringe Navigationstiefe zu erzielen. Versuche mit 5–6 Hauptnavigationspunkten auszukommen.
  • Das Hamburger- (iOs) bzw. Kebab-Menü (Android) ist nicht für jeden selbsterklärend und verständlich. Es ist zudem nicht in Daumen-Reichweite.
  • Besser wäre es, sich an App-Navigationen zu orientieren: D.h. eine Tab Bar Navi mit Icons und Text.
  • Diese sollte mitscrollen und etwas verzögert angesprochen werden.
• Infinite Scrolling:
  • Scrolling ist das neue Klicken: Siehe Facebook.
  • Vorteile: Keine Unterbrechung oder zusätzlicher Handlungsbedarf des Users durch Klicken
  • Um die Ladezeit gering zu halten, sollten beim Scrollen Inhalte nachgeladen werden (Contextual Loading).
  • Um den User auf der Seite zu halten, können zudem passende weitere Links (Querverlinkungen) angeboten werden.
• Formulare:
  • Frage deine User nur nach wirklich notwendigen Informationen, um ein Formular übersichtlich zu gestalten.
  • Gib ihnen direktes Feedback, ob sie ein Feld richtig ausgefüllt haben.
  • Blende eine kontextbezogene Tastatur ein.
• Call to Action:
  • Benutze auffordernde Wörter, damit man gerne auf den Button klickt.
  • Beachte, dass Hover (Veränderung des Buttons beim Herüberfahren mit der Maus) bei Touch-Gesten nicht vorhanden sind.
  • nur ein Haupt-CTA pro Seite

Linktipps

in Blog: The essential usability checklist for web apps

t3n.de: Hamburger-Icon und bessere Alternativen für Navigationselemente

Netzstrategen: Wie euch Usability-Testing dabei hilft bessere Produkte zu schaffen

• Konzeption für „Responsive“: Mobile First: Das Spiel wird zuerst für die Smartphone–Version konzipiert, danach wird die Konzeption auf größere Auflösungen ausgeweitet. Dabei gilt: Identischen Funktionsumfang auf allen Devices ermöglichen, die Darstellung/Anordnung darf abweichen.
• Anpassung des Grafik Design/Raster/Layout, z.B. Buttongröße, Menüs, Definition von Breakpoints
• Evtl. Steuerungsmechanik, z.B. Drag‘n Drop, Virtueller Joystick, Swipe usw.
• „Faire Wettbewerbsbedingungen“ auf allen Devices schaffen.
• Programmierung (inkl. Integration von Animationen und Sounds)
• Crossbrowser- und Device-Testing

• Der Umbau eines Spiels benötigt ungefähr das gleiche Investitionsvolumen wie die damalige Flash-Produktion, wenn Teile des Spiels wiederverwendet werden können.
• Die Neuproduktion eines Spiels in HTML5 ist zumeist teurer als die Umsetzung in Flash.