„Das beste Tool für Multi-Device-Entwicklung“ – Scott Jehl über Vorteile & Gefahren von Responsive Design
Kommentare

Scott Jehl ist Webdesigner und Entwickler bei der Filament Group in Boston, die unter anderem das Responsive Design für die Website bostonglobe.com mitentwickelt hat. Darüber hinaus ist er Koautor des Buchs „Designing with Progressive Enhancement“ und Team Lead im jQuery-Mobile-Projekts. Wir haben uns mit dem Responsive Design Experten über Vorteile und Gefahren des Designs-Konzepts unterhalten, das derzeit in aller Munde ist.

WebMagazin: Hi Scott! Als Webdesigner und Entwickler bist du in viele Projekte involviert. Mit der Filament Group entwickelst du Websites und Applikation und trägst Ideen sowie Code zur Open-Source-Community bei. Du hältst Vorträge und schreibst viel über Webdesign. Ferner hast du vor Kurzem das Buch „Designing with Progressive Enhancement“ als Koautor veröffentlicht. Außerdem bist du Team Development Lead beim jQuery-Mobile-Projekt. Das ist eine ganze Menge. Welches Projekt liegt dir am meisten am Herzen?

Scott Jehl: Hi Christoph, danke erst einmal für die Fragen. Insgesamt denke ich, dass es mir am meisten Spaß macht, an Problemen zu arbeiten, bei denen es besonders komplizierte und knifflige Rahmenbedingungen gibt, unabhängig davon, ob sie das Design oder die Entwicklung betreffen. Ich glaube, es sind gerade solche Herausforderungen, die mein Interesse an Webentwicklung aufrecht erhalten, da unser Job mit zunehmender Gerätevielfalt jeden Tag schwieriger wird. Wenn ich ein Projekt benennen müsste, an dem ich zurzeit am liebsten arbeite, wäre es wohl SouthStreet. Das ist unsere Open-Source-Tool-Sammlung, die sich mit verantwortungsvollen und hochperformanten Implementierungstechniken für Responsive Design befasst. 

WebMagazin: Wie bist du zu Webdesign und Webentwicklung gekommen?

Scott Jehl: Durchs Reisen, würde ich sagen. Meine erste Website habe ich im Jahr 2000 in der Highschool gebastelt. Ich habe die HTML-Basics gelernt, um ein Onlinetagebuch zu erstellen, das eine Spanienreise dokumentieren sollte. Danach habe ich Graphic Design am Flagler College in Florida studiert. Ich hatte schon immer ein großes Faible für Visual Design und während des Hauptstudiums habe ich mich dann immer mehr für Motion Graphics und Interactivity interessiert. Das Studium am College war damals sehr auf den Printbereich fokussiert und so habe ich in meiner Freizeit per Selbststudium viel Wissen über Interactive Design gesammelt. Dazu trugen vor allem die Quellensuche und -begutachtung sowie Bücher über Webdesign wie Jeffrey Zeldmans „Designing with Web Standards“ bei. Nach dem Studium arbeitete ich einige Zeit selbstständig als Freelancer, bis sich die Gelegenheit ergab, beim Design und der Entwicklung der Flagler-College-Website mitzuarbeiten. Das war mein erstes großes Projekt.

WebMagazin: An welchen Projekten arbeitest du zurzeit?

Scott Jehl: Neben einigen spannenden Kundenaufträgen, die allerdings noch nicht öffentlich gemacht werden dürfen, arbeite ich an einer ganzen Reihe von Projekten. Vor allem geht es um Verbesserungen von jQuery Mobile und natürlich die SouthStreet-Tool-Sammlung, die ich bereits erwähnt habe. Darüber hinaus habe ich gerade ein Tool namens GruntIcon fertig gestellt. Es soll den Design- und Auslieferungsprozess von SVG-Assets für Hintergrundbilder und Icons vereinfachen. Ich bin wirklich begeistert von diesem Projekt, weil ich SVG für eine äußerst elegante Technik halte, insbesondere für die Arbeit an großen Grafiken, die nicht an bestimmte Pixel-Auflösungen gebunden sind. GruntIcon erspart dem User bei der Erstellung von SVG-Grafiken viel Arbeit, indem es geeignete Support-Fallbacks und eine optimierte Auslieferung bereitstellt.

„Wir mussten uns aus bisher nicht bekannten Situationen quasi ‚herauserfinden’.“

WebMagazin: Im Rahmen deines Engagements bei der Filament Group hast du an der hoch gelobten Website des Boston Globes mitgearbeitet (Abb. 1), die inzwischen zum Vorbild für viele Responsive-Design-Websites avanciert ist. Wie lange hast du an diesem Projekt gearbeitet?

Scott Jehl: Zunächst einmal möchte ich Ethan Marcotte erwähnen, der maßgeblich an dem Projekt beteiligt war, sowie die Bostoner Agentur Upstatement, die für die Designausrichtung verantwortlich zeichnete. Alles in allem haben wir bei Filament neun Monate in die Entwicklung investiert, obwohl ich glaube, dass das Projekt, als wir an Bord kamen, bereits einige Zeit angelaufen war. Angefangen haben wir im Winter 2011 und der Launch war im September 2012.

Boston Globe
Scott Jehl war maßgeblich am Responsive Design der Website des Boston Globe beteiligt, die je nach Display-Größe auf den Viewport angepasste Seiten anzeigt (Bildquelle: Scott Jehl).

WebMagazin: Was waren die größten technischen Herausforderungen des Projekts?

Scott Jehl: Die Tatsache, dass wir eine einzige Frontend Codebase benutzen, um gewissenhaft bzw. sinnvoll eine breite Palette an Geräten zu unterstützen, hatte zur Folge, dass wir viele der Vorgehensweisen, die wir bisher als sinnvoll eingestuft hatten, hinterfragen und überdenken mussten. Es bedeutete ebenfalls, dass wir uns aus bisher nicht bekannten Situationen quasi „herauserfinden“ mussten. So mussten wir zum Beispiel eine Lösung finden, um verschiedene Versionen von Bildern für unterschiedliche Viewport-Größen auszuliefern, ohne dass dabei Bilder runtergeladen werden, die man nicht braucht.

Wir haben erkannt, dass wir genau diesen Ansatz in allen Aspekten des Projekts anwenden mussten, um die Ladezeiten so gering wie möglich zu halten. Das heißt, dass wir im Voraus nur wenig JavaScript, in leistungsstarken Browsern hingegen asynchron mehr JavaScript laden. Ferner leiten wir Ad-Netzwerkskripte von Drittanbietern um und stellen so sicher, dass sie nicht das Layout der Seite blockieren. Sogar ein Teil der echten Seiteninhalte werden nur dann geladen, wenn sie vom jeweiligen Gerät unterstützt werden.

WebMagazin: Welche Entscheidungen habt ihr in Bezug auf den Einsatz von JavaScript und HTML5 getroffen?

Scott Jehl: Bei der Boston-Globe-Seite haben wir für die form element attributes sowie die data attributes (die maßgeschneiderten, in HTML5 enthaltenen Attribute, die es uns erlauben, Informationen zur Auszeichnung hinzuzufügen, um das JavaScript-Verhalten zu konfigurieren) vor allem HTML5 eingesetzt. Wir haben ferner einige semantische Strukturelemente benutzt, aber meistens Gebrauch von div-basiertem Grouping mit so genannten ARIA-Landmarks gemacht, um die Abhängigkeit von JavaScript in älteren Internet-Explorer-Versionen zu reduzieren.

WebMagazin: Während dem Projekt habt ihr mit Respond.js ein CSS3 Media Query Polyfill entwickelt und es Open Source bei GitHub veröffentlicht. Erzähl uns mehr darüber, warum es entwickelt wurde und wie Webentwickler es nutzen können.

Scott Jehl: Damals hatte man hochgerechnet, dass die meisten Besucher der Boston-Globe-Website die Internet-Explorer-Versionen 6 bis 8 benutzen würden. Also wollten wir erreichen, dass die Seite vor allem in diesen Browsern problemlos funktioniert. Leider unterstützt der Internet Explorer vor Version 9 keine Media Queries, was beim Responsive Design natürlich von zentraler Bedeutung ist. Deshalb habe ich Respon.js als einen Workaround entwickelt, damit auch ältere IE-Versionen unsere Layouts verarbeiten können. Einfach gesagt, verleiht Respond.js genau den Browsern einen Support für Media Queries, die ansonsten dieses Feature nicht verarbeiten könnten. Das Polyfill überträgt mit Absicht nur die „min-width“ und „max-width“ Media Queries, da man vor allem diese benötigt, um ein brauchbares responsives Layout zu generieren. So bleibt Respons.js so klein und so schnell wie möglich.

„Responsive Design birgt trotzdem ein großes Kopfschmerzpotenzial.“

WebMagazin: So sehr du offensichtlich das Prinzip des Responsive Design liebst, mahnst du Webdesigner dennoch, vorsichtig zu sein und Performance-Probleme sowie unnötigen Ballast im Blick zu behalten. Was sind die häufigsten Fehler beim Responsive Design?

Scott Jehl Scott Jehl: Klar, ich denke, dass Responsive Design in der Regel das beste Tool für Multi-Device-Entwicklung ist – insbesondere bei einer „Mobile first“-Taktik. Trotzdem birgt es ein großes Kopfschmerzpotenzial, das ernst genommen werden muss, weil es leicht passieren kann, dass man der Bequemlichkeit von Entwicklern den Vorzug gibt – und zwar auf Kosten der User. Ich bin der Meinung, beim Entwickeln von responsiven Websites sollten wir unsere Vorgehensweise bei jeder grundlegenden Technologie in unserem Stack von Webstandards stets hinterfragen.

Heutzutage werden zu viele Websites gebaut, die für ein ordnungsgemäßes Funktionieren ein ideales Szenario voraussetzen. Bei den meisten Usern tritt dieser Idealfall jedoch nur selten auf. Als Entwickler müssen wir in Bezug auf die HTML-Inhalte, die wir den Nutzern ausliefern, mit Bedacht vorgehen und alles unternehmen, um die potenziellen Fehler so gering wie möglich zu halten. Dazu zählt zum Beispiel, dass JavaScript oder sogar CSS so geladen werden, dass sie nicht den frühestmöglichen Aufbau der Seite blockieren. Außerdem müssen wir möglichst intelligente Entscheidungen treffen, wenn es um das Laden von großen Grafiken geht und dabei idealerweise den Uservorgaben bezüglich des Ladens von HD-Grafiken auf großen oder High-Definition-Bildschirmen den Vortritt lassen. 

WebMagazin: Hast du ein paar Tipps, wie man solche Fehler vermeiden kann?

Scott Jehl: Ich kann nur jedem empfehlen, dem von Ethan Marcotte gepflegten Twitter-Account @rwd zu folgen und auch einmal beim SouthStreet-Projekt reinzuschauen. SouthStreet hat inzwischen zahlreiche Sprösslinge, unter denen sich viele unabhängige Tools finden, die einige der oben genannten Probleme beheben. Zum Beispiel ist das SouthStreet Utility Picturefill ein Script, das ein einfaches Markup-Pattern enthält, um responsive Bilder auf der Basis von Media Queries auszuliefern. Es wurde an den W3C-Entwurf des Picture-Elements angelehnt, funktioniert aber ohne nennenswerte Beeinträchtigungen.

WebMagazin: Als Team Leader von jQuery Mobile, wie ist dein persönliches Fazit zu Apples neuem Betriebssystem iOS 6?

Scott Jehl: Hmm, gute Frage. Ich finde, es gibt keine dramatischen Änderungen zu iOS 5, obwohl es einige schöne Features wie den Kamerazugang gibt.

WebMagazin: Was sind derzeit deine Lieblings-Apps? Kannst du vielleicht drei Favoriten nennen, die dir einen besonderen Service bieten und drei, die dir wegen des Designs gut gefallen?

Scott Jehl: Native Apps? Nun, in puncto Service sind Gmail, Twitter und Spotify großartig, ich nutze sie jeden Tag. Beim Design gefallen mir vor allem die von Google designten Apps für das Nexus 7 Tablet. Hier ist es gelungen, das User Interface etwas zurückzunehmen und den Inhalt in den Vordergrund zu stellen. Ihr Design ist mit der Zeit immer unauffälliger geworden, was wahrscheinlich bedeutet, dass es gut funktioniert.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -