Aktuelle Web-Techniken
für Mobile Geräte

Download

Die Webseite als als Zip-Datei und HTML sowie CSS als A3 PDF.

Responsive-Parallax-Perspektiven (1.1 MiB)

CODE-Sheet-Parallax DINA3 PDF.zip (2.1 MiB)

Vorschau (1)

▲ Watch in HD!

InhaltTon und Musik
Wir gehen auf die viele neue Aspekte ein, die eine mobile Webseite ausmachen.

Responsive Webseiten bauen auf HTML und CSS auf. Damit auf den mobilen Geräten auch die Bilder in stimmiger Auflösung geladen werden, bedarf es allerdings derzeit noch Javascript. Wir nutzen dafür den populären Picturefill.

Wir werden in der Reihe auch spezifische Funktionen wie das Giroskop der mobilen Geräte mit dem Javascript Parallax ansprechen.

Ein mobiles Menu, erzeugen wir nur mit CSS und ebenso CSS Animationen.

Wie lernen die Besonderheiten von Vektor-Dateityp- SVG kennen und nutzen.

Ebenso schauen wir uns die Faktoren an, nach denen Google die Seite bewertet.

Das alles wird gezeigt und erklärt.
Peter Hermann (Sprecher)
Thomas Erszeny (Post-Production)

Bildnachweis
David Bowie Tribute
Bowie 1976 als Thin White Duke (Foto)
O'Keefe center, Toronto 02/28/1976
CC BY-SA 2.0, Jean-Luc / Flickr

Musik

"The Stars Look Different (Ziggy Stardust Mix)"
by spinningmerkaba

2016 - Creative Commons Attribution (3.0)

Intro-Music Thomas Erszeny
Creative Commons CC BY-NC 3.0 Lizenz
Der HEAD der index.html (2)

▲ Watch in HD!

InhaltTon und Musik
Wir schauen uns den HEAD der HTML Datei an. Es werden META Angaben für den Viewport gemacht, das Favicon geladen und der Picturefill Javascript für die responsiven Bilder asynchron geladen. Die CSS extern verlinkt. Es gibt Informationen über den Aufbau des file-system der Webseite.Anna Sprecherin (Sprecherin)
Peter Hermann (Sprecher)
Thomas Erszeny (Post-Production)

Musik
Confirmation blues by Robbero (c) 2015 Licensed under a Creative Commons Attribution Noncommercial (3.0) license. http://dig.ccmixter.org/files/Robbero...

Intro-Music Thomas Erszeny
Creative Commons CC BY-NC 3.0 Lizenz

Bildnachweis in Fair use Zitat
http://scottjehl.com
http://www.polycell.co.uk
Der BODY der index.html (3)

▲ Watch in HD!

InhaltTon und Musik
Wir haben in dem Projekt responsive Bilder, Parallax-Effekt und CSS Menu. Deshalb verschaffen wir uns zu Beginn einen Überblick auf den Aufbau des BODY der index.html.Peter Hermann (Sprecher)
Thomas Erszeny (Post-Production)

Musik
Confirmation blues by Robbero (c) 2015 Licensed under a Creative Commons Attribution Noncommercial (3.0) license. http://dig.ccmixter.org/files/Robbero...

Intro-Music Thomas Erszeny
Creative Commons CC BY-NC 3.0 Lizenz
picturefill.js Javascript (4)

▲ Watch in HD!

InhaltTon und Musik
In dem Video wird der Einsatz des populären Javascript Picturefill von Scott Jehl gezeigt. Dieser sorgt für responsive Bilder in den gängigen Browsern.

Das HTML5 PICTURE Element bietet die Möglichkeit, vergleichbar zum AUDIO und VIDEO Element, für verschiedene Geräte optimierte Versionen. Als Vorteil haben wir dadurch schnellere Ladezeiten und abgestimmte Bildausschnitte. Jedoch unterstützen nicht alle Browser das PICTURE Element.

Dies wird von dem zur Gruppe der Polyfill Javascripte gehörenden Picturefill.js glatt gebügelt.
Peter Hermann (Sprecher)
Thomas Erszeny (Post-Production)

Musik
Confirmation blues by Robbero (c)
2015 Licensed under a Creative Commons Attribution Noncommercial (3.0) license.
http://dig.ccmixter.org/files/Robbero...

Intro-Music Thomas Erszeny
Creative Commons CC BY-NC 3.0 Lizenz
SVG (5)

▲ Watch in HD!

InhaltTon und Musik
SVG Dateien sind Vektordaten. Sie sind im Gegensatz zu Pixeldaten skalierbar bei gleichbleidener Qualität. Wir schauen uns die Integration der Vektordaten im Projekt Responsive Parallax Perspektiven an. SVG bieten den Vorteil dass sie auf allen Geräten immer in optimaler Qualität angezeigt werden.Peter Hermann (Sprecher)
Thomas Erszeny (Post-Production)

Musik
Confirmation blues by Robbero (c) 2015 Licensed under a Creative Commons Attribution Noncommercial (3.0) license. http://dig.ccmixter.org/files/Robbero/50510

Intro-Music Thomas Erszeny
Creative Commons CC BY-NC 3.0 Lizenz
@font-face und WOFF (6)

▲ Watch in HD!

InhaltTon und Musik
Letztlich soll die Webseite schnell geladen werden. Dies kann man mit Google Page Speed Insight tun, dabei kommt heraus das es einen langsamen Weg für Webfonts gibt und einen schnellen Weg und dieses Tempo fliest in eine gute Bewertung bei Google ein.

Wir zeigen wie mit der CSS Eigenschaft @Font-Face Webfonts als WOFF und WOFF2 Schriften eingebettet werden können.
Peter Hermann (Sprecher)
Thomas Erszeny (Post-Production)

Musik
Confirmation blues by Robbero (c) 2015 Licensed under a Creative Commons Attribution Noncommercial (3.0) license. http://dig.ccmixter.org/files/Robbero...

Intro-Music Thomas Erszeny
Creative Commons CC BY-NC 3.0 Lizenz
Mobile First Design

Mobile Design

Luke Wroblewski ist der renomierte Autor, der mit seinem Buch "Mobile First" die Design Szene geprägt hat. Dieser Vortrag bei den Google Conversions im Jahr 2015 stellt alle wesentlichen Grundlagen zusammen. Absolut empfehlenswert für Know-How zu Mobile Design und ebenso digitale Präsentationstechniken. Er spricht in den beiden Videos wesentliche Dinge an:

  • Marktanteile und Wachstum
  • Nutzerverhalten am mobilen Gerät
  • Responsive Design und Mobile First Design
  • Geräteklassen von Smartphone, Tablett oder andere Devices
  • Übersicht der Bildauflösungen und Seitenverhältnisse
  • Prinzip "Rich and Reach"
  • Formulare für mobile Geräte
  • Conversion Rates verbessern
  • Tipps für die Steuerung, z.B. über Gesten
  • Benutzerfreundlichkeit und Nachteile von Hamburger oder Kebab Menus
  • Konsiszenz und Kohärenz

Design Style Guide

Google hat mit dem Material Design Style Guide eine sehr umfangreiche und gut ausgearbeitete Ressource bereit gestellt. Es gibt umfangreiche Beispiele und Anregungen für Animation, Farben, Ebenen, Pattern, Components - schlicht alles was für Apps wichitg ist.

Google Material Design Style Guide

Speed Pimp
waterfall

Speed Pimp

Hohe Geschwindigkeit ist ein wesentlicher Faktor für Mobile Design. Wir können vielseitig an der Geschwindigkeit optimieren.

Liste empfohlener Optimierungen

    Serverumgebung

  • Letzlich ist ein schneller Server mit entsprechender Kapazität ein sehr großer Faktor.
  • Server sollte die Daten als GZIP ausgeben, dies kann mit der HTACCESS definiert werden
    Schriften

  • Webfonts als Woff bzw. Woff2 mit @font-face einbinden.
  • Sparsam bei den Schriftschnitten sein. Jeder Schriftschnitt bedeutet Ladezeit.
    Bilder

  • Falls Logo im Header verwendet wird, dieses als SVG und als inline HTML CODE
  • Bei SVG Daten möglichst wenig Ankerpunkte und mit 1 oder 2 Dezimalstellen auskommen
  • JPG und PNG mit besseren Algoryhtmus gegenüber Photoshop minimieren. Z.B. mit dem Programm ImmageOpt.
  • Bilder Responsiv laden. Z.B. mit dem PICTURE Element und einem Polyfill oder anderer Technik.
  • Eingebettete Mini-Gif mit den dominanten Farben des Bildes, die dann per Lazy-Load geladen werden.
    https://manu.ninja/dominant-colors-for-lazy-loading-images
    Animation

  • Bei CSS Animationen sollte mittels transform: translate animiert werden und nicht über andere Formen der Positionierung, z.B. mit top: oder bottom. Transform erzielt auf der Grafikkarte höhrere Frameraten und wirkt somit flüssiger.
  • CSS Animation ist gegenüber Javascript Animation deutlich vorzuziehen. CSS ist performanter, wird. z.B. durch die Grafikkarte und nicht CPU abgespielt.
    CODE

  • CSS inline in den Style, jedenfalls bei Mission- bzw. Landing- / Singlepages. Bei sehr großen Projekten ist der Tempoeffekt nicht mehr gegeben und andere Faktoren wesentlicher.
  • CSS sollte sich nicht unnötig überschreiben
  • Responsive Angaben der Media-Queries smart in einer (!) CSS schreiben
  • CSS final minimieren. Dabei werden unnötige Zeichen und Kommentarte entfernt
  • Umfangreiche CSS mit vielen Styles welche nicht genutzt werden, bremsen erheblich
  • Javascripte minimiert und asynchron laden
  • Fehlendes Favicon erzeugt in den meisten Browsern ein unnötiges Request
  • Quellcode auf Fehler durchsuchen. Dinge die vom Browser glatt gebügelt werden, können erhebliche Zeiten verursachen. Angenommen eine Seite2.html liegt auf dem Server. Ein Link auf eine seite2.html zwar gut funktioniert, kostet jedoch Zeit.


Geschwindigkeit selber messen

Die Kombination der beiden Tests ist gut. Der Google Test ist etwas plakativer und der Webpagetest ist exakter.

Google stellt eine Reihe von Tests bereit, mit denen man eine Seite testen kann. Diese Tests werden auch auf das Ranking bei Google angewendet. Wir haben eine Version der Seite online ohne Optimierung. Und eine Version nahezu allen Optimierungen.

Eine deutlich feinere Auswertung erhält man auf der kostenlosen Seite Webpagetest. Dort gibt es ein aussagekräftiges Waterfall-Diagramm und auch die sehr praktische Möglichkeit diverse Geräte zu simulieren und gezielte Tests auf anderen Servern durchzuführen.

Googe Page Speed Insight
http://www.webpagetest.org

Versionen für den Test

http://arnoldbodeschule.de/(...)/Perspektiven_old (langsam)
http://arnoldbodeschule.de/(...)/Perspektiven-Mini (schnell)


Tools für die Optimierung der Dateigrößen

Im Vergleich zu Photoshop CS6 und den älteren Versionen können erhebliche Resultate bei gleicher Qualität erzielt werden. Natürlich entwickelt man immer mit Kommentaren sein CSS und JS. Geht es im Finish dann um Tempo ist minimierter CODE von Vorteil. Für den sehr coolen und kostenlosen Atom Editor von Git Hup gibt es dafür z.B. ein Package. Imageoptim ist eine grandiose Open Source Software für PNG, JPEG und Gif.

https://imageoptim.com

http://www.jpegmini.com
https://tinypng.com
https://cssminifier.com
http://jscompress.com
https://atom.io/packages/atom-minify
https://www.smashingmagazine.com(...)svgs-with-css/