Mobile Geräte werden vor allem zu Hause auf dem Sofa benutzt! Der Kontext ist nicht so mobil wie gemeinhin angenommen, z.B. unterwegs. Nichtsdestotrotz sind die Anwendungsmöglichkeiten und das Potential enorm.
Vortrag von Vedran Rudelj an Reto Hartingers Internet Briefing in Zürich.
Opera ist mit 22% der führende Mobile-Browser gefolgt von Android mit 20% und stark steigender Tendenz. Safari kommt auf 19%, Nokia 17%, Blackberry 12%.
80% der konventionellen Web-Designs für «normale» Bildschirme beschränken sich auf eine Breite von 960 Pixel, was auf den meisten Screens gut dargestellt wird. Das iPhone stellt diese Breite relativ gut auf dem viel kleineren Display von 320 Pixeln dar. Per User Agent Sniffing kann Inhalt separat auf verschiedene Devices ausgeliefert werden. Der Aufwand ist aber relativ hoch und das Vorgehen deshalb nicht optimal.
Native Apps basieren nicht auf einem offenen Standard, da jedes Device eigene Anforderungen stellt.
Optimal wäre die einmalige Generierung von Inhalten und Formaten für alle erdenklichen Devices. Ethan Marcotte hat in seinem Buch «Responsive Web Design» zu dem Thema interessante Inhalte erstellt: Responsive Web-Design sollte sich der Browserbreite anpassen. Ein einziges Stylesheet liefert alle nötigen Formate aus.
Bei mediaqueri.es findet man über 100 Beispiele von Responsive Web-Design.
Dabei geht es um eine neue Praxis wie man Websites baut. In einem Flexible Grid werden alle Elemente wie Schriftgrössen, Margins, Paddings, Widths, etc. in Prozenten oder «em» programmiert anstatt in Pixeln. Empfohlen wird eine Schriftgrösse von 100%, was auf den meisten Browsern 16 Pixeln entspricht. Eine «main» Content-Spalte sollte 63% der Breite umfassen, «other» 37%.
Media Queries sind eine CSS 3 Spezifikation (@media screen, @media print). Je nach Devicegrösse werden zusätzliche Steuerbefehle ausgeliefert.
Flexible Images & Media: Media-Elemente wie Bilder, Videos, etc. werden in verschiedenen Grössen aufbereitet und zur Verfügung gestellt.
Heute gibt es Ansätze, Websites zuerst «Mobile First» zu entwickeln. Man startet dadurch mit den wirklich wichtigsten Elementen und baut allenfalls für den grösseren Screen aus. Das Testing auf verschiedenen Mobile Devices ist elementar und kann beträchtlichen Aufwand verursachen.
Adaptive Design wird z.B. bei dribbble.com vorgestellt.
Samsung bietet heute Geräte mit 12 verschiedenen Screen Dimensionen…
https://twitter.com/#!/WalterSchaerer/status/111897349814628352
