Was bedeutet Responsive Webdesign eigentlich?

Responsive Webdesign basiert auf fluid Grids und flexiblen Layouts (Dazu später). Das Layout passt sich an die verfügbare Bildschirmauflösung an, positioniert den Content dementsprechend und skaliert Texte, Bilder, Slider und Videos mit. Das Webdesign reagiert also auf die Gegebenheiten des Endgeräts und liefert ein dementsprechend angepasstes Layout aus. Richtig eingeschlagen hat das Thema erst durch die Implementierung und Unterstützung von CSS3 Media Queries. Mit Hilfe von Media Queries können Parameter wie zum Beispiel die Auflösung des Endgeräts oder dessen Orientierung bestimmt (mehr zu den Features von Media Queries) werden. Auf Basis dieser Informationen kann dem Endgerät spezifischer CSS-Code ausgeliefert werden, der ein Layout erzeugt, das auf die Gegebenheiten abgestimmt ist.

Gelungene Beispiele für Responsive Webdesign

Und warum das Ganze?

In den letzten Jahren haben sich zwei Trends stark hervorgehoben, die für uns Webdesigner immer wieder neue Herausforderungen darstellen. Zum Einen werden die Auflösungen der Desktop Monitore immer größer, sodass wir in einigen Fällen schon mit einer Content-Breite von 1280px arbeiten. Andererseits nimmt aber auch die Internetnutzung auf mobilen Endgeräten sowie die Vielfalt der Bildschirmauflösungen zu. Alleine bei mobilen Endgeräten reicht die Bandbreite möglicher Bildschirmauflösungen von 240 x 320 Pixel bis 1024 x 600 (oder 768) Pixel. Es liegt also auf der Hand, dass eine Website auf einem 1920 x 1080 Pixel Monitor anders aussehen wird, als auf einem älteren 240 x 320 Pixel Endgerät oder einem iPad 2, das mit einer Auflösung von 1024 x 768 Pixel arbeitet. Ein Begriff, der mir dabei immer wieder in den Sinn kommt: Chaos! Responsive Webdesign versucht, Ordnung in das Konvolut aus Geräten und Bildschirmauflösungen zu bringen, ohne eine Website dabei auf bestimmte Geräte zu optimieren. So könnten hochauflösende Desktop Monitore beispielsweise mit einem 4-spaltigen Content-Layout bedient werden, während der Content für mobile Endgeräte in 1- oder 2-spaltige Layouts verpackt wird. Idealerweise wird damit eine Website für möglichst viele Endgeräte zugänglich gemacht und vermittelt das Gefühl einer nativen Applikation, ohne eigenes auf ein spezifisches Endgerät optimiert zu sein. Klingt sinnvoll, oder?

Worauf ist bei der Umsetzung von Responsive Webdesigns zu achten?

Konsistenz – schlüssiges Design, das sich durch alle Auflösungen durchzieht

Ein entscheidender Faktor für gut umgesetztes Responsive Webdesign mittels Media Queries ist vor allem die Wiedererkennbarkeit und Konsistenz des Designs. Es liegt auf der Hand, dass aufgrund der unterschiedlichen Bildschirmgrößen das Layout und die Anordnung des Contents, von Auflösung zu Auflösung anders dargestellt werden muss. Zentrale Elemente wie zum Beispiel Logos und Farbwelten sollten aber möglichst konsistent bleiben. Idealerweise findet sich der User im Desktop Interface genauso zurecht, wie auch in den mobilen Versionen, ohne dabei den Aufbau sowie das Navigations- und Contentschema neu erlernen zu müssen.

Mobile und Portable Endgeräte verhalten sich anders

Anders als bei Desktop Interfaces gibt es bei mobilen und portablen Versionen einer Website keinen Maus-Cursor, keine Hover-States und auch keine Dropdown-Submenüs. Was bedeutet das für das Interface Design? Navigationselemente, sollten sehr gut als solche erkennbar sein und auch wirklich als Schaltflächen verstanden werden. Wichtig ist hier, dass die Textgröße hinauf skaliert wird, die Größe der Schaltfläche großzügig bemessen ist und dem gesamten Element genug Space gegeben wird. Schließlich navigieren wir ja nicht mit der Maus, sondern zumeist mit dem Finger und wollen das Betrachten einer Website nicht als Geschicklichkeits-Übung erleben. Textlinks sollten sich klar vom Text unterscheiden.

Navigationsdesign

Der Erfolg einer Website steht und fällt oftmals mit dem Navigationskonzept und –design. Dies gilt natürlich auch für den Responsive Webdesign Ansatz. Allerdings werden wir hier vor zusätzliche Herausforderungen gestellt, denn auf mobilen und portablen Endgeräten ist das Userverhalten nunmal anders, als am Desktop. Wie können Navigationen vom Desktop Interfaces auf mobile Interfaces übertragen werden? Wie werden Elemente der Hauptnavigation angeordnet, wie geht man mit Navigationselementen auf 2. oder 3.Ebene um? Wie bildet man Dropdown-Navigationen ab? Fragen, die gut überlegt sein müssen und nicht selten ausgeklügelte Lösungen erfordern. Ellen hat sich speziell dem Thema „Webseiten Navigationen im responsive Webdesign“ gewidmet, diesen Artikel kann ich euch nur empfehlen.

Bei Five Simple Steps wurde die Navigation so gelöst, dass mobilen Usern bei geringerer Bildschirmauflösung eine Dropdown Box zur Verfügung gestellt wird.

Datenmenge

Gerade bei mobilen und portablen Endgeräten zählt oftmals jedes KB an Datenmenge, das geladen werden muss. Aus dem Grund sollte man einmal mehr auf einen schlanken, semantischen Quellcode achten. Wer glaubt, bei mobilen Varianten die Menge der geladenen Daten mit Display: none zu reduzieren, der sollte aufpassen. Mit Display: none werden divs und andere Elemente zwar ausgeblendet, allerdings werden die dahinter liegenden Daten trotzdem geladen.

Zusätzlicher Aufwand

Responsive Webdesign bietet zahlreiche Vorteile und Möglichkeiten vor allem in Hinblick auf die wachsende mobile Internetnutzung. Mit einem Webdesign, das responsive reagiert, müssen User, die mobil surfen nicht mehr abgefangen und auf eigene Domains umgeleitet werden. Fakt ist aber auch, dass es zusätzlichen Aufwand bedeutet, eine Website responsive zu gestalten. Der Zusatzaufwand zieht sich durch alle Bereiche und Stadien der Entstehung einer Website. Konzeptionell muss angedacht werden, wie Desktop und mobile Versionen aussehen und funktionieren werden. Mockups werden erstellt; davon abgeleitet wird ein Design entwickelt, das wie oben beschrieben, unterschiedlichen Anforderungen standhalten muss. Im nächsten Schritt findet das CSS-Coding und HTML-Templating statt. Auch hier muss mit zusätzlichem CSS-Coding Aufwand gerechnet werden. Schlussendlich muss das Design natürlich getestet werden. Auch hier ist mit zusätzlichem Zeitaufwand zu rechnen, da das Design und Verhalten in möglichst vielen Geräten und Bildschirmauflösungen untersucht werden sollte. Eine Website lässt sich also nicht im Spaziergang responsive machen. Zu Beginn eines Projekts sollte daher gut abgewogen werden, ob der Responsive Webdesign Ansatz für dieses spezifische Projekt Sinn macht und die richtige Kosten-Nutzen-Lösung darstellt.

Tools & Plugins, die das Arbeiten mit Responsive Webdesign erleichtern

Grids

Mit dem Golden Grid System lassen sich flexible Grids für Auflösungen von 240 Pixel bis 2560 Pixel erzeugen.

Tiny Fluid Grid ist ein hilfreiches Framework, mit dem ihr ebenfalls flexible Grids erzeugen könnt.

Text & Tabellen

Um Textinhalte flexibel zu halten, empfiehlt es sich, die Schriftgröße nicht in absoluten Pixelwerten, sondern in relativen EM Angaben festzulegen. Für die Umrechung von Pixel in EM gibt es hier einen hilfreichen EM Converter. Chris Coyier beschäftigt sich intensiver mit Tabellen und Datensheets und liefert Lösungsvorschläge für die tabellarische Darstellung von Daten im responsive Webdesign.

Das FitText jQuery Plugin aus dem Hause Paravel passt die Schriftgröße von Überschriften flexible an die gegebene Bildschirmauflösung an. Dieses Plugin ist für die Skalierung von Headlines gedacht und sollte auch wirklich nur dafür genutzt werden.

Bilder, Videos, Slider

Im Responsive Webdesign wird natürlich auch die optimale Skalierung und Auslieferung von Bildern ganz groß geschrieben. Responsive Images bietet eine schöne Möglichkeit, Bilder via JavaScript an die entsprechende Bildschirmauflösung anzupassen und für das Endgerät optimiert auszuliefern. Auch für flexible Videos gibt es auf der Web Designer Wall einen Beitrag, der uns zeigt, wie nicht nur HTML5 Videos, sondern auch Iframe Embedded Videos mit Hilfe von CSS elastisch gemacht werden können.

Slider sind momentan aus dem Webdesign kaum noch wegzudenken. Auch für Responsive Webdesign gibt es hier mit dem Flexslider jQuery Plugin eine sehr schöne, semantische Lösung, um Slider und Sliderinhalte mitzuskalieren und an die gegebene Bildschirmauflösung anzupassen.

Testing

Beim Testen von Responsive Webdesigns in unterschiedlichen Bildschirmauflösungen kann ein Tool wie Screenfly unter die Arme greifen.

Fazit

Eine Website responsive zu gestalten ist definitiv ein Trend, der langsam aber sicher auch in unseren Breitengraden aufgegriffen und angenommen wird. Schön, wie ich finde. Nachdem ich täglich auf mobilen Endgeräten Websites ansurfe, habe ich den Komfort und die Eleganz von gutem Responsive Design sehr schnell zu schätzen gelernt. In Hinblick auf Accessability, Usability und Reichweite hat der Responsive Webdesign Ansatz großes Potential, muss aber gut überlegt, durchdacht und abgewogen werden. Responsive Webdesign ist zwar seit einiger Zeit ein heißbegehrtes Thema, muss aber nicht automatisch der richtige Lösungsansatz für jedes Projekt sein.

Wie sind eure Erfahrungen mit Responsive Webdesign? Kennt ihr schöne Beispiele, vielleicht sogar aus Österreich?

Wir suchen eine/n engagierte/n  (Junior)Programmierer/in für Fixanstellung (20-40Stunden Woche) mit folgenden Anforderungen:

•           – fließend PHP, MySQL etc.

•           – sauberes XHTML und CSS

•           – HTML 5, Mobile

•           – JavaScript, Ajax, XML

•           – Vorteil: WordPress Know-How

•           – Kentnisse Web 2.0 APIs – Facebook, Twitter, Youtube

Es erwarten dich sehr spannende Web 2.0 Projekte, Ausbildungsmöglichkeiten, zukunftsorientierte Arbeitsweise, offene Strukturen, angenehmes Arbeitsumfeld.

Bei Interesse bitte melden unter office@liechtenecker.at oder ganz einfach mit einem Kommentar.

MP kommt nicht aus den Kinderschuhen

Diese Tätigkeiten funktionieren bereits ausgezeichnet mobil, mit dem Einkaufen selbst hapert es aber noch ein bisschen. Mobile Payment gibt es schon lange, man denke an die etwas schmierigen Anfänge mit Klingeltonverkäufen a la Jamba und Co. Laut Wikipedia gibt es seit Mitte der 90er Jahre bereits Bestrebungen, das Mobiltelefon zur Bezahlung einzusetzen, doch es steckt auch heute noch in den Kinderschuhen.

Starbucks: Einfach und schnell über Barcodes

Was bisher recht gut funktioniert, sind mobile Einkäufe zum Beispiel über iTunes, aber für das quasi "echte" Bezahlen in einem Geschäft gab es bisher wenig gute Beispiele. Starbucks lässt jetzt mit einer iPhone- und Blackberry-App aufhorchen, die uns sehr gut gefällt. Das amerikanische Kaffeehaus hat ja bereits mit der Foursquare-Nutzung gut reagiert – so bekommt in den USA jeder Major eines Ladens diverse Vergünstigungen.

Mit der neuen App kann im Moment in 300 ausgewählten Starbucks-Geschäften in Silikon Valley (oh Wunder), Seattle, New York City etc. nur mit dem Mobiltelefon (bzw. iPhone und Blackberry) zahlen. Dazu notwendig ist der Besitz einer sogenannten "Starbucks Card", die mit einem gewünschten Betrag aufgeladen wird. Diese wird quasi auf dem Smartphone von einer Plastikversion in eine digitale Version umgewandelt, weil die App dann die gleichen Funktionen hat. Der Bezahlvorgang selbst funktioniert schnell und einfach über Barcodes. Dabei hält der User einfach einen 2D-Barcode über einen Scanner direkt an der Kassa. Mit der App kann man zudem überprüfen, wie viel Guthaben man hat, die gesamten bisherigen Einkäufe anschauen und den nähesten Starbucks finden.

Wer sich das ganze einmal genauer anschauen will, hier geht’s zur iPhone-App

Primus and Paypal

Auch für kleine Unternehmen kann Mobile Payment durchaus eine Variante sein: Die Plattform Primus bietet bisher rund 50.000 Unternehmen die Möglichkeit, ihre elektronische Bezahlung ohne große Kosten abzuwickeln. Sie haben dafür knapp 40 unterschiedliche Bezahlsysteme in ihrem System, wobei Paypal eines der beliebtesten ist.

Mit der neuen "Digital Goods Solution" von Paypal , die Plimus nun integriert hat, werden User nicht mehr von der eigenen Seite auf die Paypal-Seite geleitet, wo sie ihre Kundendaten eingeben müssen, sondern können direkt auf der Unternehmensseite bezahlen. Unserer Meinung nach ist diese neue Funktion für das Mobile Payment prädestiniert – keine komplizierte Anmeldung, keine neuen Browserfenster und zudem akzeptiert Paypal als globale Firma Fremdwährungen, was auch den internationalen Markt erschließbar macht.

Fazit

Menschen sind durchaus bereit, neue Bezahlsysteme zu nutzen, wenn sie einfach und komfortabel zu nutzen sind und wenn der Anbieter dieser Systeme vertrauensvoll ist. Es nutzt also durchaus, sich neben Klingeltönen und SMS-Verkäufen zu positionieren, mit einem nutzbaren Produkt für jeden Tag.

Handyprovider in Regionen

Apple ist unaufhaltsam. Nokia hat gegenüber Apple 15% Rückgang bei der globalen Verteilung einstecken müssen. Interessant ist aber, daß in Afrika noch immer Nokia mit 54% dominiert. Es herrschen hier spezielle Nokia Modelle, welche für den afrikanischen Markt konzipiert wurden. Samsung sollte in Westeuropa den Gürtel enger schnallen.

Mobile Betriebssysteme nach Regionen

iPhone OS dominiert den Weltmarkt mit bereits 51%. Symbian ist in Afrika besonders populär mit 87%. Man sieht ganz klar, daß sich Android noch durchsetzen muß. Vielleicht gelingt dies mit dem neuen Android 2.0

Mobiles Marketing

Wo funktioniert mobiles Marketing am Besten? Ganz klar, am iPhone. 24,1% der Ad-Requests kamen im Dezember vom iPhone.

Den detaillierten Report zum Download (admob)

Aber Welches Handy bloß?

Ich bin mir äußerst unsicher welches Mobile ich mir zulegen soll, da ich diesbezüglich nicht so direkt auf dem neuesten Stand bin. Ich habe meine berufliche Karriere zwar damit begonnen diese Dinger zu verkaufen – das war vor fast 20 Jahren – jetzt ist die Spezialisierung durch die vielen Berufswechsel auf der Strecke geblieben. Ich kann ein Lied davon singen, daß die Handys damals ein Vermögen kosteten nur betuchten Kunden vorbehalten war. Akkulaufzeit (NiCd) wenn es gut ging 1 Stunde, dafür das Gewicht unvorstellbar. (So alt bin ich schon..)

Eure Meinung

Da ich mir äußerst unschlüssig bin, probiere ich (ganz auf Schwarmintellegenz :) eine kleine Umfrage zu der Kaufentscheidung. In meiner engeren Auswahl stehen die 3 Trend-Handys G1, iPhone und das Blackberry Storm. Meine Kriterien: Das iPhone ist optisch eine Augenweide und hat natürlich unendlich viel Apps. Das G1 gefällt mir von der haptischen Tastatur sehr gut und die nahtlose Integration der Google-Programme. Blackberry Storm hat halt Push-Mail und beim Touch-Screen-Klick taktiles Feedback. Im Freundeskreis ist es eher durchmischt, alle 3 Modelle kommen vor. Das Trio ist doch recht vergleichbar, Touchscreen, super zum Internetsurfen und eine komplette Tastatur. Liebe Blogleser und Nerds da draußen, was ist eure Meinung?

Handykauf Umfrage

Ein wichtiger Bestandteil meiner früheren Webdesign-Ergüsse war die Optimierung des Screendesigns auf die Bildschirmauflösung 800 x 600 Pixel. Davor entwickelte man die meisten Applikationen sogar auf eine Breite von 640 x 480 Pixeln. Augenscheinlich holt einen die Vergangenheit immer wieder ein, denn mit den modernen Mikrolaptops und Mobile-Devices rücken diese Auflösungen wieder ins Designerlicht, doch dazu später.

Die Großen

Speziell die breiten Flachbildschirme haben sichs auf dem State-of-the-Art-Schreibtisch gemütlich gemacht. Die Formate 16:9 oder 16:10 haben sehr stark angezogen. Hier sind ansteigende Auflösungen 1680 x 1050 und 1440 x 900 Pixel. Den Löwenanteil hat nach wie vor 1024 mal 786 Pixel. Meine Lieblingsauflösung 1280 mal 1024 Pixel folgt danach und wird sicher bald an 1. Stelle rücken. Hier ein kleiner Chart:

Konklusio: Ich bin absoluter Befürworter zentraler Webdesigns, wie es diesem Blog zugrundeliegt. Bei fixen Layouts gibt es somit bei den breiten Formaten keine unschönen Darstellungen. Noch dazu setzen die Browser der Zukunft auf skalierbare Darstellung bei Zoom oder Verkleinerung. Obwohl nie wirklich die gesamte Kontrolle über das Layout möglich ist, die End-Darstellung legt immer der Nutzer fest. Diskussionen zu diesem Thema gibts ja genug. Denn trotz der breiten Bildschirme, haben die meisten User die aufgerufenen Webseiten über den gesamten Screen ausgebreitet.

Die Kleinen

Mobile Internet-Devices sind seit dem iPhone wohnzimmerfähig geworden. Das Apple-Handy hat als Beispiel folgende Auflösung: Im Hochformat: 320 x 356 Pixel und
im Querformat: 480 x 208 Pixel. Muss man deswegen wieder 3 Schritte zurück und an die oben erwähnten kleinen Auflösungen denken? In diesem Fall gibt es Erleichterung. Der mobile Safari Browser auf dem iPhone geht mit gutem Beispiel voran und rechnet die Auflösung um: Eine Webseite wird mit 980px Breite geöffnet. Dieser Ausschnitt wird auf die kleine Auflösung runterskaliert. Webseiten die breiter als die 980px sind werden mit Scrollbalken ausgeliefert.

Man sieht die Kluft der Bildschirmauflösungen geht immer weiter auf, das Webdesign muss solange es richtig gemacht wurde nicht extra angepasst werden. CSS3 bietet hier hervorragende Möglichkeiten alle Devices abzudecken. Hier speziell fürs iPhone. Für die Abdeckung der besonders breiten Bildschirme bevorzuge ich wie gesagt/geschrieben fixe Layouts. Was meint ihr zu dem Thema, mit welcher Auflösung arbeitet ihr am liebsten?

UPDATE: Natürlich sind Displaygrößen nicht gleichzeitig Bildschirmauflösungen. Danke an Twitter für den Hinweis.

Nun dürfte die Zusammenarbeit gefruchtet haben, denn das Flashmagazine hat gestern einen Artikel dazu veröffentlicht. Auf der Flash On The Beach (FOTB) Konferenz in Brighton hat der Oberboss von Adobe Systems Engineering bestätigt, daß eine gemeinsame Entwicklung eines iPhone Flash-Players in Arbeit ist, dennnoch sei die Abhängigkeit von Apples Entscheidungen einer sicheren Veröffentlichung im Weg. Na mal sehen, hört sich eher wackelig an.

Flash ist zwar für ganze Weboberflächen zwar auf dem Rückgang, trotzdem würde ich es auf dem Iphone befürworten, um sinnvolle multimediale Inhalte darstellen zu können. Denke da speziell an Audio und Videoplayer. Interessant ist dies sicher auch für dementsprechende teuflische Werbeformate.

Mehr als 3 Schritte sind nicht zu tun:

• Ausgangssprache wählen
• Ergebnissprache wählen
• Wort eingeben

Das Interface hat so gut wie keinen Style, aber das minimale Screendesign erfüllt am Handy mehr als seinen Zweck. Satte 11 Sprachen stehen derzeit zur Auswahl. Solche mobile Anwendungen wünscht sich das Handy.

By the Way: Der neue Opera-Mini Browser mit der Version 4.1 ist wirklich etwas performanter als sein Vorgänger.

Die Abkürzung MoFuse bedeutet “Mobile Fusion”. Ich könnte mir es so vorstellen, dass man mit einem mobile.css den MoFuse-Link an oberster Stelle anzeigt, sozusagen als Mobile-Feed. In der Sidebar bietet das Service die Option eines SMS Widget an, mit dem man den generierten Link per SMS erhält. Nützlich könnte der Dienst für ältere Handys oder Mobile Endgeräte sein, da die Darstellung rein Text-basiert ist.

Grundsätzlich macht dieser Service Sinn, aber sind mobile Surfer mit älteren Geräten unterwegs? bzw. bieten neue mobile Browser bessere Darstellungsmöglichkeit auf dementsprechenden Endgeräten. Als Vorteil sehe ich unter anderem, dass Datenverkehr aufgrund der Textdarstellung sicherlich reduziert wird und das SMS-Feed werde ich ausprobieren.

Neue Features sind

• URL-Vervollständigung (erachte ich als sehr wichtig)
• endlich kann man Webseiten auch speichern und offline betrachten
• verbesserte Site-Suchfunktion
• bessere Performance, schnellere Ladezeiten (bis zu 50%)

Mit diesem Blog funktionert der Browser sehr gut, aber er ist ja auch semantisch richtig aufgebaut ;)

Der neue Opera Mini wird auf allen gängigen Handymodellen funktionieren, ein Termin für die Vollversion ist noch nicht ersichtlich. Ein tolles Video über den Mobile-Browser gibts auf der Opera Webseite.

Microsoft schläft auch nicht. An Ende diesen Jahres gibt es auch eine neue mobile Version des Internet Explorer Damit soll die Betrachtung von Flash-Inhalten erleichtert werden. Eine neue Zoom-Funktion passt Fotos und Texte automatisch der Bildschirmdarstellung an.