Dieser Artikel erschien ursprünglich in der November-Ausgabe (221) des .net-Magazins - dem weltweit meistverkauften Magazin für Webdesigner und -entwickler.
Bruce Lawson: Wer hat mit Ihnen daran gearbeitet?
SJ: Filament Group, Ethan Marcotte, Upstatement, Mat Marquis und Miranda Mulligan, Digital Design Director bei Der Boston Globe, bestand aus dem Hauptteam für „Design-Entwicklung“. In der Zwischenzeit war das interne Team von Globe unglaublich kompetent darin, unseren Frontend-Code in die heute voll funktionsfähige Site zu übersetzen.
BL: Ethan Marcotte ist das Aushängeschild für responsives Webdesign. Welchen Einfluss hatte er dabei?
SJ: Ein Großteil des Entwicklungsprozesses wurde von Ethans Überlegungen zum „Responsive“ -Design bestimmt. Um dieses Denken auf einer großen Website anzuwenden, mussten wir die ursprünglichen Techniken, die weitgehend auf das Layout angewendet wurden, auf andere Bereiche wie Verhalten, Markup-Verbesserungen, bedingtes Laden von Assets und Leistung ausweiten.
BL: Was waren die ersten technischen Herausforderungen?
SJ: Hauptsächlich wollten wir, dass die Seite auf Geräten mit geringer Leistung eine gute Leistung erbringt. Dies bedeutete, einen Weg zu finden, um Assets effizient und reaktionsschnell zu laden, damit wir keinen erheblichen Overhead hinzufügen, wenn sie nicht ordnungsgemäß unterstützt oder benötigt werden. Alle wichtigen Funktionen der Website wurden so konzipiert, dass sie unabhängig von JavaScript funktionieren, jedoch durch umfassendere JavaScript-gesteuerte Interaktionen in leistungsfähigen Browsern erweitert wurden. Wir haben uns darauf konzentriert, im Voraus die geringste Menge an JavaScript bereitzustellen, die wir benötigen, um wichtige Polyfüllungen durchzuführen, Funktionen zu erkennen und abhängig von den Umgebungsbedingungen bedingt mehr JavaScript zu laden.
BL: Warum haben Sie sich für HTML5 entschieden?
SJ: Wir haben HTML5 aus mehreren Gründen verwendet. Meistens sind es zukunftsfreundliche und angebotene Funktionen, die in unserem Funktionsumfang nützlich waren. Zum Beispiel haben wir Datenattribute in großem Umfang verwendet, um Verhaltensoptionen zu konfigurieren oder Inhaltsverbesserungen zuzuordnen. Wir haben auch die Möglichkeit geschätzt, neuere semantische Elemente anstelle von div / p / span zu verwenden, wenn sie sinnvoll sind.
BL: Wie haben Sie dazu geführt, dass sich die Website in älteren Browsern elegant verschlechtert hat?
SJ: Damit die reaktionsschnellen Layouts in Browsern ohne Unterstützung für Medienabfragen wie IE6-IE8 funktionieren, benötigen wir eine schnelle CSS3-Polyfill für Medienabfragen. Wir haben festgestellt, dass vorhandene Lösungen zu schwer sind und die Layouts nicht schnell genug übersetzt wurden. Daher mussten wir unsere eigenen schreiben. Das Ergebnis ist die Polyfill Respond.js, die auf Github Open Source ist.
BL: Wie haben Sie mit Bildern umgegangen?
SJ: Wir wollten mobile Bilder von vornherein bereitstellen, um bei langsameren Verbindungen für die Bandbreite verantwortlich zu sein, aber wir mussten viel größere Bilder auf Geräten mit größeren Bildschirmen bereitstellen. Wir haben einen Ansatz namens Responsive Images entwickelt, mit dem wir die Bildschirmgröße erkennen und auf großen Bildschirmen das Bild in Mobilgröße gegen ein größeres austauschen können, ohne beide zu laden.
Eine weitere Herausforderung war die Werbung, da viele Werbedienste von Drittanbietern nicht auf flüssige Layouts ausgelegt sind und ihre Einbettungsmechanismen und die Anzahl der von ihnen gestellten Anforderungen aus Sicht der Leistung recht kostspielig sein können. Am Ende haben wir einige Muster zum dynamischen Laden der Anzeigen entwickelt, damit der Inhalt nicht sofort geladen wird. Ich denke, dass Dienste von Drittanbietern überdacht werden müssen, um sich an die Zukunft der Erstellung von Websites anzupassen.
BL: Und was ist mit alten IE / No-JavaScript-Browsern wie Opera Mini?
SJ: Wir haben viel Zeit darauf verwendet, sicherzustellen, dass die Website ohne JavaScript funktionsfähig und benutzerfreundlich ist, da das mobile Web dieses Problem wieder umso relevanter macht.
Internet Explorer-Browser mussten für die Unterstützung von Medienabfragen mehrfach ausgefüllt werden. Abgesehen davon hatten wir gelegentlich Internet Explorer-spezifische CSS-Problemumgehungen, aber nichts zu viel.
Ich finde, dass Opera Mini in der Regel recht einfach zu unterstützen ist, wenn Sie mit progressiven Verbesserungen erstellen: Es ist ein großartiger Browser mit vielen Leistungsoptimierungen und natürlich unglaublich beliebt, sodass die Unterstützung ein Kinderspiel ist.
Der Basisbrowser, den wir regelmäßig getestet haben, war BlackBerry 4.6, das wie die meisten anderen Browser, die keine Medienabfragen unterstützen, eine grundlegende, JavaScript-freie Erfahrung bietet. Jemand hat uns einen Screenshot von geschickt Globus Seite läuft auf einem Newton vor kurzem!
