Am 13. Juni 2016 fand in der Bildungswerkstatt der TH Köln der offene Seitenstark-Fachtag "Mobil gut aufgestellt für die Zukunft – Kinderseitenlandschaft im Umbruch" statt. Die Fragen und Antworten, die wir hier zusammengestellt haben, wurden auf dem Fachtag gemeinsam erarbeitet.

Lohnt es sich für eine Kinderseite mobil zu werden?

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

Wo kann ich testen, ob  meine Seite responsiv bzw. mobil gut verwendbar ist?

• Google Chrome Entwickler-Tools
• Google Pagespeed/mobile friendly Test

Wie programmiere ich interaktive Elemente?

Nutze interaktive Elemente in HTML5 statt Flash

Worauf muss ich bei der Neuentwicklung einer mobilen Webseite achten?

• HTML, CSS, JavaScript
• Media-Queries
• Prozentuale Bildgrößen
• SVGs statt PNG/JPG
• CSS statt Grafik
• Spritesheets
• variable Schriftgrößen
• Keine Mouseover
• Keine pixelgenaue Umsetzung
• Verzicht auf Abwärtskompatibiltät
• Entwicklung von Innen nach Außen (von Handy-Auflösung zu Desktop-Variante)

Wie optimiere ich…

… die Bildschirmauflösung für die Webseite?

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)

…die Bedienbarkeit?

Die Bedienung muss für verschiedene Konzepte (Mouse/Tastatur, Touch) optimiert werden

….das Layout für eine responsive Kinderwebseite?

• 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 ...

…. die Touch-Funktion?

• Slider per swipe-Geste bedienbar
• Spiele mit Hinweis auf korrekte Orientierung
• Umsetzung von Spielen in HTML5

 … Ladezeiten und Performance?

• 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

Stichwort Content-Management-System

Welches sind die meistgenutzten OpenSource-CMS in Deutschland?

Sind Wordpress, Joomla! und TYPO3 für mobile / responsive Webdesigns geeignet?

Ü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
• Infos zu Drupal

Stichwort Usability

Was bedeutet das überhaupt?

Unter Usability versteht man die Benutzerfreundlichkeit oder Gebrauchstauglichkleit einer Website. Gute Usability wird in der Regel gar nicht explizit wahrgenommen, schlechte hingegen schon.

Ein gutes User Interface sollte den Besucher wie ein imaginäres Band von einer Aktion zur nächsten führen, ohne dass es aufdringlich wirkt.

Checkliste:

• Effektivität: Kann das gewünschte Ziel erreicht werden?
• Effizienz: Wie hoch oder niedrig ist der Aufwand des Besuchers, um sein Ziel zu erreichen?
• Zufriedenheit: Wie zufrieden ist der Besucher mit dem Produkt?

Was sind die wichtigsten Punkte für gute Usability?

• 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

Stichwort Flash-Spiele

Was kann ich „retten“ für die mobile Seite?

• Spielprinzip
• Illustrationen (Animationen)
• Sounds/Musik
• Einzelne Funktionen und Logik des Programmcodes (ActionScript ->
• JavaScript

Und was muss ich neu machen?

• 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

Habt ihr weitere Tipps für Spiele?

• Animationen z.B. Intros, die synchron zum Ton laufen sind schwer realisierbar: evtl. besser auf Video ausweichen oder anders lösen.
• Nicht alle Animationen können ebenso elegant umgesetzt werden wie mit Flash. Es ist darauf zu achten, dass kein Qualitätsverlust durch „lieblos erscheinende“ Animationen entsteht.
• Es lässt sich nicht alles 1:1 nachbauen. Es lässt sich aber sehr Vieles sehr gut nachbauen. Es gibt unterschiedlichste Möglichkeiten, die eine qualitativ hochwertige Produktion erlauben.
• Die Dateigröße sollte nicht erheblich größer werden als bei der Flashversion, besonders wichtig für Zugang ohne WLAN z.B. PNG komprimieren (PNG Crusher/TinyPNG), SVG benutzen, HTML5 Picture-Tag
• Ggfls. Texte für Mobile kürzen

Welche Kosten kommen beim Umbau von Spielen auf?

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

Mit Funktionen zum Weiterempfehlen versuchen Webseitenbetreibende, die Reichweite ihres Angebots zu erhöhen, über Spendenfunktionen können sich Nutzerinnen und Nutzer an der Finanzierung des Angebots beteiligen.