Get these flashcards, study & pass exams. For free! Even on iPhone/Android!

- Viele Betriebssysteme
- Viele Browser
- Viele Hardware-Hersteller
- Viele Bildschirmgrössen
- Viele Auflösungen (z. B. Retina-Display)
- Viele Hard- und Softwarefunktionen, wie z. B. GPS oder Rotation

- Nur JPG, PNG oder GIF verwenden
- JPG immer optimieren, z.B. mit jpegmini
- PNG optimieren mit kraken.io

Hochaufgelöste Bilder werden auf HiDPI-Displays (Retina) in hoher Präzision wiedergegeben.

Der Bedarf an Bandbreite ist vier Mal höher.

Ein Bild in Standardauflösung sieht auf einem Retina-Bildschirm unscharf aus. Fehlende Pixel müssen interpoliert werden.

Die Gerätepixel entsprechen nicht den CSS-Pixeln. Wenn man CSS- und Gerätepixel gleichsetzt, wäre die Darstellung zu klein.

1. Lösung mit HTML und CSS Sizing
Doppelt so grosse Grafik erzeugen und diese mit CSS verkleinern

<img src="bild300px.jpg" width="150" height="150">

oder

.bild {
  background-image: url(bild300px.jpg);
  background-size: 150px 150px;
}

Vorteil: Einfache Implementierung
Vorteil: Für Bilder und Hintergrundbilder anwendbar

Nachteil: Für alle Geräte dieselbe Datenmenge

Geplant ist der <picture>- und/oder das srcset-Attribut





(Die Zahlen beziehen sich auf die Auflösungsdichte)

Hochaufgelöste Bilder werden auf HiDPI-Displays (Retina) in hoher Präzision wiedergegeben.

Der Bedarf an Bandbreite ist vier Mal höher.

Ein Bild in Standardauflösung sieht auf einem Retina-Bildschirm unscharf aus. Fehlende Pixel müssen interpoliert werden.

Die Gerätepixel entsprechen nicht den CSS-Pixeln. Wenn man CSS- und Gerätepixel gleichsetzt, wäre die Darstellung zu klein.

- Benutzerführung muss einfach, schnell und unkompliziert sein
- Mobile Netzwerke haben limitierte Kapazität oder Bandbreite
- Ziele der Anwender und ihr Verhalten herausfinden

Microsoft Windows Phone 8.0
Basiert auf Windows 8 (ab 2002)

Android 1X, 2.X, 3.X, 4.X (im Moment 4.4.2)
Android wurde von der OHA (Open Handset Alliance) und Google entwickelt und basiert auf dem Linux Betriebssystem (ab 2008)

Research In Motion Version 10.2
Die Blackberry Mobiles für Business Anwendungen basieren auf dem Betriebssystem Research In Motion (RIM) (ab 2006)

iOS 7.1
Das Unix Betriebssystem iOS (früher iPhone OS) von Apple basiert auf Mac-OS-X und gibt es ausschliesslich für iPhone, iPad, iPad Mini und den iPod Touch (ab 2007)

Symbian OS (Symbian Belle)
Nokia, Sony Ericsson, Motorola, LG und verwenden dieses weit verbreitete Betriebssystem. Per April 2011 wurde die Symbian Foundation aufgelöst und die Tage dieses Betriebssystems sind gezählt (ab 2008)

Tizen 2.1 (MeeGo, Moblin, Maemo) (ab 2005)
Nokia verwendete Maemo für seine Highend Mobilegeräte. Ursprünglich sollte dieses Betriebssystem das Symbian OS ablösen. 2010: Zusammenarbeit Intel (Moblin) und Nokia => MeeGo
2011: Windows 8 als Standard bei Nokia
2011: MeeGo und Linux Mobile (LiMo) =>Tizen

WebOS 3.05
Die Firma Palm verwendet diese Linux Plattform für ihre PDAs. Wurde von HP ausgekauft (ab 2009)
2011: Einstellung der Entwicklung
2012: WebOS als Open-Source-Software
2013: An LG verkauft für den Einsatz auf Smart-TVs

Bada 2.0
Von Samsung entwickeltes Betriebssystem Bada, für welches diverse Apps zur Verfügung stehen (ab 2009)

Firefox OS 1.2
Betriebssystem, vollständig nach offenen Webstandards gebaut (ab 2013)

jB5: Symbian, Windows Mobile
- Polaris: Samsug, LG
- Android (Webkit): Android Geräte
- WebOS (Webkit): Palm
- Blackberry: Blackberry, Webkit ist angekündigt
- Blazor: Palm
- Firefox for Mobile: für Maemo, Windows Mobile und Android
- Internet Explorer Mobile: Diverse Hersteller mit Windows Mobile - Opera Mobile: Verschiedene Hersteller
- Opera Mini (läuft auf praktisch allen Plattformen)
Ruft nicht direkt Website auf, sondern kontaktiert den Opera Mini Server, welcher die Seite komprimiert und vor-rendert
- Nokia Series 40 (Webkit): Nokia S40; Nokia Series 60
- Safari (Webkit): iPhone, iPod, iPad, iPad Mini
- Dolphin Browser HD (Android)
- Mercury Browser (iPhone, Android)
- xScope Browser (Android)

- Gecko, die Rendering-Engine vom Mozilla Firefox wird sich ev. ändern: Mozilla (und Samsung) Servo

- Presto, die Rendering-Engine von Opera
13. Februar 2013 Ankündigung Opera: setzen auf WebKit
03. April 2013 Ankündigung Google: setzen auf Engine Blink
03. April 2013 Ankündigung Opera: setzen auf Engine Blink

- Trident, die Rendering-Engine des Internet Explorer
- WebKit, die Rendering-Engine von Safari und Chrome(?)
- Blink: neue Rendering Engine von Google (Chrome) und Opera

Wir verwenden CSS2 und CSS3

Erlauben das Beeinflussen der Bildschirmdarstellung


Beispiel und empfohlener Eintrag

<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0,user-
scalable=yes" />

1. Strategie: Keine Änderungen vornehmen, nur Optimierungen
Auf den Mobiles und dem Desktop werden dieselben Inhalte und Formatierungen zur Verfügung gestellt. Diese Strategie ist erfolgreich, wenn folgende Annahmen getroffen werden:

- Bandbreiten sind kein Thema in Bezug auf Kosten und Geschwindigkeiten
- Intelligente Browser reagieren auf das Darstellungsgerät
- Die Wünsche der mobilen Benützer sind nicht so wichtig

Mögliche Optimierungen
- Nicht unterstützte HTML-Befehle (wie Frames etc.) entfernen
- Grösse der Links anpassen (mindestens 44 Pixel)
- Überprüfung der Bildgrössen (Kilobytes)

Kritik
Nicht zu empfehlen. Zu viele Anwender verwenden Mobiles

2. Strategie: Separate mobile Webseiten

Für die Smartphones gibt es völlig andere Webseiten (HTML, CSS, Bilder etc.)

- Inhalt anders angeordnet: Navigation unten, Inhalt oben
- Optimierte Bilder: kleine optimierte Bilder
- Struktur: Unwichtige Inhalte nur via Link erreichbar
- Besondere Inhalte für das Smartphone: ortsbezogene Werbung
- Es gibt zwei verschiedene Varianten der Website (Inhalt und Gestaltung)

Fragen
Wie wird bestimmt, was der Nutzer der mobilen Version braucht? Oft gibt es Links, wie «View Full Site» oder «Desktop Site»

Wie erkenne ich ein mobiles Gerät?
Über den User Agent

Kritik
- Nicht zu empfehlen. Aufwand, um Inhalt und Gestaltung doppelt zu warten ist zu hoch.
- Die Detection mit dem User Agent ist fehleranfällig

3. Strategie: Progressive Enhancement und Feature Detection
Auf den Mobiles und dem Desktop werden ähnliche Inhalte und Formatierungen zur Verfügung gestellt. Dazu teilen wir die Browser in verschiedene Kategorien auf. Beispiel:

- Kategorie 1: Browser hat keine CSS-Unterstützung
- Kategorie 2: Browser hat limitierte CSS-Unterstützung
- Kategorie 3: Browser hat CSS Mobile Profile Unterstützung
- Kategorie 4: Browser hat CSS2-Unterstützung
- Kategorie 5: Browser hat CSS3-Unterstützung


Vorgehen

- Für das Herausfinden der Bildschirmgrössen können Media Queries und Media Features verwendet (MediaQuery Spezifikation) werden.

- Für das Herausfinden der unterstützten Funktionen kann Modernizer verwendet werden.

- Die Weiterentwicklung dieses Gedankens führt zum Responsive Webdesign (RWD)