Vor- und Nachteile von Responsive Design und wann der Einsatz wirklich Sinn macht

Kurz zur Vorgeschichte: Der Begriff „Responsive Design“ wurde erstmals 2010 in einem Artikel vom Webdesigner und Developer Ethan Marcotte erwähnt. Er umschreibt damit eine Technik zur Erstellung von flexiblen Websitelayouts. “Flexibel” bezieht sich in diesem Zusammenhang auf die Höhe und Breite der Website, sowie deren Inhalte wie z.B. Schrift, Bilder oder Videos. Der Content wird auf diese Weise automatisch skaliert und passt sich relativ der Bildschirmauflösung an. Diese Technik ist eine Erweiterung des „Liquid“ bzw. “Fluid” Layouts, das mit prozentualen Grössenangaben arbeitet und schon Jahre vorher im Einsatz war.

Ziel dieser Arbeitsweise ist die optimale Darstellung von Websites für verschiedene Bildschirmgrössen – vom Desktop bis zu mobilen Endgeräten wie dem iPhone oder dem iPad. Die Notwendigkeit für diese Arbeitsweise erklärt sich nahezu von selbst: als Webdesigner musste man sich noch vor ein paar Jahren lediglich für eine optimierte Darstellung zwischen 15 oder 17 Zoll entscheiden und allenfalls zusätzlich eine Mobileversion erstellen. Mittlerweile ist aber durch die Tendenz zu immer grösseren Desktopmonitoren und einer stetig wachsenden Anzahl an mobilen Endgeräten die Überschaubarkeit längst nicht mehr gegeben. Smartphones, Netbooks, Tablets – was kommt als nächstes? Es ist nicht nur ineffizient, sondern annähernd unmöglich für jedes Endgerät eine eigene Version der Website zu produzieren. Responsive Design wird als alternative Option gehandelt, dieser Situation mit einfachen Mitteln und nur gering erhöhtem Arbeitsaufwand zu begegnen.

A movie demonstrating the Responsive Web Design principles described by Ethan Marcotten

Wie funktioniert Responsive Design?

Responsive Design besteht aus drei Grundpfeilern:

• Fluid Layouts

  Sie sind meistens mit Hilfe eines Rasters aufgebaut und werden deshalb auch “Fluid Grids” genannt

• media queries

  Die media queries sind Bestandteil der CSS3-Spezifikation und stellen eine erweiterte Funktion des bekannten media=“screen“ aus CSS2 dar. Zusätzlich zur Abfrage der Bildschirm- bzw. Viewportgrösse kann auch die Auflösung abgefragt werden, so dass sich je nach gestellter Bedingung verschiedene Styleanweisungen zuordnen lassen. Ein Beispiel für eine Breite bis 480px und einer Auflösung von 163dpi entsprechend dem iPhone 3:

  Source code

• flexible images

  Bilder werden in div-Container eingebunden und mit einer maximalen Grösse von 100% versehen:

  Source code

  img {
  	max-width: 100%
  }

  Dies bewirkt ein automatisches Resizen analog zur Containergrösse, sprich die Bildgrösse passt sich dem Verkleinern oder Vergrössern des Layouts an.

Vor-und Nachteile

Die Vorteile sind offensichtlich, doch welche Nachteile gibt es?

Grundsätzlich ist Responsive Design nur in Browsern darstellbar, die CSS3 interpretieren können. Die korrekte Darstellung im Internet Explorer gestaltet sich auch in diesem Fall wie gewöhnlich komplizierter und ist ohne zusätzliche Workarounds – wie etwa mit Hilfe des Einsatzes von Javascript – nicht realisierbar. Erst ab dem IE9 werden beispielsweise die entsprechenden media queries unterstützt.

Ein weiterer Nachteil ist aber vor Allem im Mobilebereich relevant, wo eine niedrige Ladezeit die wichtigste Rolle spielen sollte. Mehr Code, Bilder, die nur zu einem Bruchteil ihrer Originalgrösse angezeigt, aber komplett heruntergeladen werden, sowie geringere CPU-Leistung und Speicherkapazität der Endgeräte, können schnell die Performance der Site negativ beeinflussen und die Geduld des Besuchers herausfordern. Nicht zu vergessen sind natürlich auch die Kosten, die bei einer Datenübertragung via 3G-Netz entstehen können.

Fazit

Meiner Meinung nach sollte diese Arbeitsweise wohl abgestimmt auf Zielgruppe und Endgeräte eingesetzt werden. Sicher ist Responsive Design nicht die “All-in-One”-Lösung wie oftmals euphorisch angepriesen, kann allerdings bei passenden Rahmenbedingungen einen äusserst effizienten Lösungsansatz darstellen.

Ihre Meinung

Haben Sie Responsive Design bereits im Einsatz und würden Sie diese Technik uneingeschränkt weiterempfehlen?

Links:

• Homepage Ethan Marcotte
  
• Responsive Web Design – Artikel auf “A list apart” mit Codebeispielen
  
• Übersicht gängige Bildschirmauflösungen seit Januar 2000
  
• aktuelle Übersicht CSS3- und HTML5-kompatible Browser
  
• Beispiele: Mr. Simon Collison, Hickdesign, Media Queri.es
  
• Media Queries für HTML-Emails
  

Links:

• Swiffy Homepage
• Beispiele (korrektes Rendern nur in Webkitbrowsern)

   

Would you like to replay the video or share the link to it with your friends?

“We were blown away by the potential of this technology for the graphic novel” berichtet Disney’s Creative Director Nashie Castro. Tatsächlich wird in der Comicbranche noch immer der grösste Umsatz über den Printkanal (Produkte und Werbung) generiert. Das Potenzial von Apps oder Online-Versionen der Comics bzw. grafischen Novellen wie TRON ist bisher nur rudimentär genutzt worden und hinterlässt durch das oftmals statische Look&Feel einen eher müden Eindrück. Technische Möglichkeiten, um das Storytelling in diesem Bereich auf ein höheres Niveau zu bringen und damit auch ein neues Publikum zu erreichen, gibt es zahlreich. Warum die Wahl auf HTML5 und nicht CSS3, jQuery oder DOM fiel, begründet Giorgio Sardo (Senior Technical Evangelist, Microsoft) nicht zuletzt mit der Performance unter IE9 bzw. dessen Möglichkeit, Hardwarebeschleunigung für die Grafik nutzen zu können.
Mehr zu den technischen Details und den Überlegungen zur Umsetzung:
Behind the Scenes of Disney TRON: Legacy Digital Book Site

Fazit
Generell kommt bei mir durchaus das “Comicfeeling” auf, allerdings kann ich mir vorstellen, dass ich dieses Gefühl auf dem iPad noch intensiver geniessen könnte. Leider funktioniert die Site dort nicht…

Welche Branchen sind am stärksten betroffen?
Zum Einen die nicht zu unterschätzende E-Learning Branche, bei der eine grosser Anteil der eingesetzten Software (Articulate, iSpring, etc.) standardmässig Flashfiles bzw. SWFs generiert. Und genau in dieser Branche haben mobile Endgeräte einen hohen Stellenwert, da sich beides optimal ergänzt. Sehnsüchtig wird dementsprechend auch der Release der Nachfolgeversion von Articulate “Storyline” erwartet, welches HTML5 kompatibel sein soll.
Zum Anderen natürlich auch die Marketingbranche. Ich schätze den Anteil an Flashbannern im Internet auf ca. 80%, wenn nicht höher. Als iPad User empfinde ich diese Situation als relativ angenehm. So muss ich nicht bei jedem “Klick” darauf achten, ob ich ungewollt einen Banner aktiviere und sich sofort mind. eine weiteres Fenster öffnet, das ich dann auch erst nach mehreren Versuchen wieder schliessen kann, weil auf dem close-button kein window.close(), sondern ein window.open() versteckt ist. Auch sind die Inhalte einer Website sofort lesbar, ohne von irgendwelchen Tandems, Pagepeels oder Banderoles verdeckt zu werden. Aber selbstverständlich ist dies keine befriedigende Situation für die Marketingabteilungen der grossen Brands, die mit sämtlichen Mitteln probieren, diese Endgeräte bzw. deren User zu erobern. Das Produkt “Sencha Animator” versucht, sich diesem Ziel anzunähern.

Sencha Animator: HTML5-Animationen einfach erstellt
Der Name “Sencha” ist vielleicht dem ein oder anderen Webentwickler schon ein Begriff. Zur Produktpalette zählt das weit verbreitet Javascript Framework “Ext JS”, welches u.a. auch für das Backend von TYPO3 5.0 eingesetzt wird. Auch “Sencha Touch” ist ein prominentes Produkt, wenn es um den Einsatz eines HTML5-Frameworks für die Entwicklung von iPhone/iPad-Apps geht. In puncto Look&Feel von HTML5-Apps steht es den nativen Apps kaum nach. Lediglich die Hardwaresteuerung ist noch nicht 1:1 analog, aber in Kombination mit PhoneGap schon sehr nahe daran.

“Sencha Animator” ist explizit für die Erstellung von Werbemittel konzipiert. Zur Zeit erinnert das GUI der Beta-Version stark an Flash, wobei ich diese Analogie eher kritisch sehe, denn die Enttäuschung erfolgt abermals direkt auf den Fuss. Für reine Gestalter/Designer, die bereits Flash kennen, aber wenig oder gar keinen Kontakt mit Web-Programmierung hatten, ist die Ähnlichkeit eher fatal. Stage, Timeline, Palette: “Kenne ich, aber da fehlt doch was…”
Es kann z.B. nicht jeder Schrifttyp verwendet werden, was ganz klar den HTML-Standards entspricht, aber für einen Flasher eher bemitleidenswert erscheint. Dort wird dann auch wieder der Äpfel/Birnen-Vergleich relevant. Als Webentwicklerin, die sich mit CSS+Javascript+HTML auf Codebasis schon lange Zeit beschäftigt, finde ich das Tool natürlich sehr bequem, da ich optisch arbeiten kann und der HTML5-Code automatisch generiert wird. Leider ist dieser nicht immer 100%-ig sauber (opacity:1; opacity:0; in der gleichen Klasse hintereinander), aber im Grunde einfach zu Handeln. Vor allem als CSSler ist der Aufbau des GUIs und die Funktionalität dahinter relativ klar, z.B. wenn es um verschachtelte Container geht. Resümierend würde ich ” Sencha Animator” für kleinere Animationen, Slideshows etc. weiterempfehlen. Luft nach oben gibt es noch viel, aber mit ein wenig Kreativität lässt sich auf jeden Fall ein solides Ergebnis erzielen, das iPhone/iPad-tauglich ist. Als Verwendungszweck wären sicherlich iPad-Magazine wie die Schweizer Illustrierte zu nennen ;).
Ein direkter Vergleich von HTML5-Ads zu Flash-Ads ist hier zu sehen: Link.

Welche Erfahrungen haben Sie mit diesen Tools oder kennen Sie noch weitere?
Wie ist Ihre Meinung zum Thema HTML5 versus Flash?

Portfoliowebsite der Grafikerin und Fotografin Martina Näf.

Task: Technische Umsetzung und Hosting der Website www.foto-grafisch.ch.

www.foto-grafisch.ch

EXIF-Daten

Casa Milà war der letzte Profanbau Gaudís, bevor er all seine Energie auf das Kirchengebäude Sagrada Família konzentrierte.

EXIF-Daten

Die Schweizer Illustrierte ist eine wöchentlich erscheinende illustrierte Publikumszeitschrift des Schweizer Medienhauses Ringier.

Die Zeitschrift hat eine beglaubigte Auflage (WEMF, Stand 2010) von 215’268 Exemplaren und ist mit 917’000 beglaubigten Lesern (MACH Basis, Stand 2009) das meistgelesene People-Magazin der Schweiz.

Die digitale Version der Schweizer Illustrierten bietet sämtliche Inhalte der Printausgabe und bereichert sie noch mit zusätzlichen interaktiven Elementen, wie Videos, Audio-Einspielungen, Diashows, 360°-Ansichten , Animationen, weiterführende Links und Online-Newsfeeds. Sämtliche Ringier-Medien-Kanäle können erstmals optimal integriert werden.

Task (seit Feb. 2011): Erstellung Content, Coding Animationen (HTML5, CSS3, Javascript)

Redesign der Website “Rheinaubund”
Die Seite wurde komplett neu gestaltet – grafisch wie auch technisch. Zu Grunde liegt das OpenSource-System “TYPO3″, welches die Administration des gesamten Webauftrittes um ein Vielfaches erleichtert.

Task: Technische Umsetzung und Betreuung (Maintainance) der Website www.rheinaubund.ch

Layout: Konzentrat

Source code

# MSIE 1-6 umleiten
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (msie)(\s)([1-6]) [NC]
RewriteCond %{HTTP_USER_AGENT} !((msie)(\s)([7-9])) [NC]
RewriteCond %{REQUEST_FILENAME} !(/redirect/ie.html) [NC]
RewriteRule .* http://%{HTTP_HOST}/redirect/ie.html [R=301,L]

Auf dieser Seite lassen sich z.B. Links zum Upgraden anbringen oder man leitet direkt auf eine kompatible Webseitenvariante um.
Es gibt natürlich auch andere Möglickeiten, den Browser abzufragen oder auch eine fertige Variante mit dem entsprechenden Hinweis und Downloadlinks einzubauen: www.ie6nomore.com