Mobil werden - FAQ

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

Linktipp:

Warum responsive Webseiten sinnvoller sind als Apps

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

Nutze interaktive Elemente in HTML5 statt Flash.

Linktipp

Video und Audio mit HTML5

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)

Linktipps

Webkrauts.de: Der neue Standard für responsive Bilder

Webkrauts.de: Tabellen, die sich anpassen

t3n.de "8 CSS-Tricks, die jeder Webdesigner kennen muss"

t3n.de "SVG-Guide: Designer veröffentlicht Leitfaden für den Einsatz im Web"

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

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

Wie optimiere ich die Bedienbarkeit?

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

Wie optimiere ich 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 ...

Linktipp

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

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

 

Wie optimiere ich die Touch-Funktion?
  • Slider per swipe-Geste bedienbar
  • Spiele mit Hinweis auf korrekte Orientierung
  • Umsetzung von Spielen in HTML5

Linktipp

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

Wie optimiere ich 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

Linktipps:

Test auf Optimierung für Mobilgeräte bei Google

Website speed test

Welches sind die meistgenutzten OpenSource-CMS in Deutschland?

Wordpress 35,37% TYPO3 17,11% Joomla! 14,46% (Stand Juni 2016)

Linktipps:

Tagesaktuelle Werte zur Nutzung von CMS auf CMSCrawlder.com

"Die besten kostenlosen CMS"

Kategorie "Content-Management-Systeme" auf Wir machen Kinderseiten

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

Linktipps

Was bedeutet Usability ü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?

Linktipp

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

t3n.de "Website-Usability: So prüfst du die Nutzbarkeit deiner Website"

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

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

Was kann ich von meinem Flash-Spiel für die mobile Seite "retten"?
  • Spielprinzip
  • Illustrationen (Animationen)
  • Sounds/Musik
  • Einzelne Funktionen und Logik des Programmcodes (ActionScript ->
  • JavaScript
Und was muss ich von meinem Flash-Spiel 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.
  • Gegebenenfalls Texte für mobile Version 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, wenn Teile des Spiels wiederverwendet werden können.
  • Die Neuproduktion eines Spiels in HTML5 ist zumeist teurer als die Umsetzung in Flash.

 

Weitere Informationen zum Fachtag Ausgehend von aktuellen Daten und Zahlen im Nutzerverhalten von Kindern diskutierte Seitenstark an dem Fachtag 2016 gemeinsam mit Expertinnen und Experten und interessiertem Fachpublikum über aktuelle und zukünftige Entwicklungen in der Kinderseitenlandschaft.

In drei Schwerpunktthemen haben wir im Nachklang zum Fachtag die wichtigsten Erkenntnisse aus den Vorträgen, Diskussionsrunden und Fachgesprächen zusammengefasst.

Präsentationen der Vorträge sowie die Handouts der Experten und Expertinnen der Thementische finden Sie unter dem Menüpunkt Mobil werden - Fachtag.

Fotos vom Fachtag haben wir in der Bildergalerie Impressionen vom Fachtag für Sie zusammengestellt.