Wenn der Smartphone- und Tabletmarkt noch weiter ausfranst, rentiert es sich nur noch für wenige Angebote, auf allen Geräten mit eigenen Apps vertreten zu sein. Wartung und Weiterentwicklung unterschiedlicher Apps werden schnell sehr teuer.
Responsive Webdesign könnte dieses Problem künftig lösen: Statt native Apps für die einzelnen Plattformen anzubieten, werden die Inhalte dabei auf einer Website präsentiert, die sich mit jedem Gerät im Browser anzeigen lässt. Egal, ob Fernseher, PC oder Tablet – Browser „sprechen dieselben Sprachen“.
So funktioniert Responsive Webdesign
Früher wurde eine Website in Photoshop entworfen und dann pixelgenau in HTML und CSS umgesetzt. Sie wurde also auf eine bestimmte Bildschirmauflösung optimiert. Der nächste Schritt ist das Adaptive Webdesign, bei dem Layouts für bestimmte Bildschirmbreiten vorbereitet werden – zum Beispiel für 480, 1024 und 1440 Pixel. Zwischengrößen werden dabei durch mehr und weniger Rand ausgeglichen. Responsive Webdesign ist eine besonders flexible Form des Adaptive Design, weil es mit relativen Angaben arbeitet. Die Elemente einer Seite können sich hier auch Zwischengrößen anpassen. Ein Bild nimmt dann zum Beispiel 90 Prozent der Bildschirmbreite ein – unabhängig davon, wie groß dieser ist. Leider ist es damit noch nicht getan. Wenn ein Bild zu klein wird, kann man darauf nichts mehr erkennen; wenn ein Textfeld zu breit wird, lässt sich der Text nur noch schwer lesen. Deshalb arbeiten Webdesigner in Responsive Webdesigns mit den sogenannten „Media Queries“. Die ermitteln Eigenschaften des Gerätes, von dem die Website aufgerufen wird. Die wichtigste Eigenschaft ist dabei die Bildschirmbreite. Mit dem Media Query
@media screen and (min-width: 400px) and (max-width: 700px) { … }
kann der Webdesigner festlegen, wie die Seite auf Bildschirmen aussieht, die zwischen 400 und 700 Pixel breit sind. Das kann ein iPhone 3 im Landscape-Modus sein (480 Pixel) oder ein iPhone 4 im Porträt-Modus (640 Pixel). Durch verschiedene Media Queries setzt der Designer sogenannte „Break Points“, an denen sich das Layout verändert. So kann etwa eine Seitenleiste mit Zusatzinfos vom rechten Bildschirmrand unter einen Blogpost springen, wenn der Nutzer sein iPad vom Breit- ins Hochformat dreht.
Weitere Vorteile
* Google kann auf Website-Inhalte zugreifen, auf App-Inhalte nicht
* Nutzer können auf mobile Inhalte direkt verlinken – jeder Inhalt hat nur eine URL
* Es muss keine App installiert werden, man braucht kein Apple App Store Approval
* Die Nutzung einer Website lässt sich mit Analysetools wie Google Analytics leicht prüfen
* Unabhängigkeit von Smartphone-Herstellern und App-Store-Betreibern
Die Nachteile der Website
Warum aber entwickelt man dann überhaupt noch Apps? Weil auch die webbasierte Lösung mit Responsive Design noch nicht der Weisheit letzter Schluss ist.
* Native Apps sind auf dem Endgerät sichtbar installiert und können den Nutzer auf sich aufmerksam machen – etwa mit Pushnachrichten. Websites müssen dafür andere Wege finden (z. B. Twitter).
* Web-Apps können nicht auf das Adressbuch zugreifen, so wie es Native Apps wie Whatsapp oder Facebook tun. Basisfunktionen wie Kamera, Lagensensor oder GPS-Empfänger können aber auch von Websites angesprochen werden.
* Das Hauptargument gegen mobile Websites und Web-Apps ist die Geschwindigkeit. Eine mobile Website, die nur mit LTE oder im WLAN richtig funktioniert, nervt. Manche Seiten wie „mashable.com“ beweisen aber, dass sich auch aufwendige Layouts schnell laden lassen.
* Offlinefunktionen wie Artikeldownload sind schwieriger integrierbar.
* App- und In-App-Käufe sind etabliert, die Kunden haben sich daran gewöhnt, Apps über ihr iTunes- oder Google-Konto zu kaufen. Wer über eine Web-App Produkte verkaufen will, braucht einen eigenen nutzerfreundlichen Bezahlmechanismus.
Link:Tipps
bbc.co.uk
time.com
bostonglobe.com
mashable.com
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
Thomas Strothjohann
ist Online-Redakteur der „Oberhessischen Presse“ und Mitglied der „medium magazin“-Redaktion.
thomas@strothjohann.net
Erschienen in Ausgabe 03/202013 in der Rubrik „Praxis“ auf Seite 77 bis 77 Autor/en: Thomas Strothjohann. © Alle Rechte vorbehalten. Der Inhalt dieser Seiten ist urheberrechtlich geschützt. Für Fragen zur Nutzung der Inhalte wenden Sie sich bitte direkt an die Redaktion.