Wie wir die reaktionsschnelle Olympia-Website von MSN UK erstellt haben
Vor drei Monaten, Governor-Technologie wurde beauftragt von MSN UK eine reaktionsschnelle Smartphone- und Tablet-Site für die Olympischen Spiele 2012 in London zu erstellen. Wir haben diesen Artikel geschrieben, um die Herausforderungen zu teilen und die Methoden zu dokumentieren, mit denen wir die Site erstellt haben. Aber zuerst gehen wir den Auftrag für das Projekt durch. Sie können die Site selbst unter anzeigen http://london.msn.co.uk .
1. Der Auftrag
Wir haben den folgenden Auftrag von MSN UK erhalten:
Erstellung einer reaktionsschnellen Website für die Olympischen Spiele 2012, über die Benutzer auf Mobil- und Tablet-Geräten auf die olympischen Inhalte von MSN zugreifen können. Das allgemeine Erscheinungsbild der Website folgt der Microsoft Metro-Designsprache. Dies umfasst die Verwendung von Typografie, die Verwendung eines standardisierten Satzes von Rändern innerhalb eines Rastersystems und die inhaltsgesteuerte Navigation. Da die Site hauptsächlich für die Verwendung in einer mobilen Verbindung vorgesehen ist, spielt die Leistung eine wichtige Rolle.
2. Entwerfen für eine reaktionsfähige Site
Die erste Aufgabe bestand darin, das Gesamtdesign für die Website festzulegen. Das Metro Design-Stil Derzeit von Microsoft verwendet, eignet sich sehr gut für ein gitterbasiertes Layout. Daher haben wir diesen Ansatz schnell für die Hauptzielseiten übernommen.
Nachdem wir den Grundstil ausgearbeitet hatten, begannen wir, die verschiedenen Layouts zu skizzieren, die wir verwenden würden. Wir hatten vier Haupt-Haltepunkte und Layouts für eine Auswahl von Geräten im Auge:
- Smartphones im Hochformat: bis zu 440px breit, 1 Spalte
- Smartphones im Querformat: bis zu 580px breit, 2 Spalten (mit Quadraten und Rechtecken)
- Tablette im Hochformat: bis zu 768px breit, 3 Spalten (nur Quadrate)
- Tablet im Quer- / Desktopbereich: bis zu 1024px breit, 3 Spalten (Quadrate und Rechtecke)
Da wir wissen, dass es keine Standardgröße für Smartphone- und Tablet-Auflösungen gibt, haben wir mit einer Reihe von Geräten getestet, um sicherzustellen, dass jedes Layout an jedem Haltepunkt gut aussieht.
Die Website ist in acht verschiedene Abschnitte unterteilt, die alle auf der Homepage verfügbar sind:
- Nachrichten
- Höhepunkte
- Blog
- Multimedia (Foto- und Videogalerien)
- Veranstaltungsführer
- Veranstaltungsortführer
- Athletenführer
- Live-Informationeno Scheduleo Ergebnisseo Medaille tableo Live-Blog
Wir brauchten diese Abschnitte immer, um die gesamte verfügbare Breite (bis zu einer maximalen Breite von 1024 Pixel) in ein-, zwei- oder dreispaltigen Konfigurationen auszufüllen, wie in der folgenden Abbildung gezeigt.
Diese Abschnitte werden je nach Größe des Ansichtsfensters entweder als Quadrate oder als Rechtecke festgelegt. Wir haben den ersten Block und den letzten Block ausgewählt, die sich von Quadraten zu Rechtecken erstrecken, um die Seitenbalance bei größerer Breite zu erzielen. Die verschiedenen Blöcke haben immer einen 10-Pixel-Rinnenabstand zwischen ihnen, unabhängig davon, wie sie erweitert werden, um das Browser-Ansichtsfenster zu füllen. Es wurde beschlossen, die verschiedenen Blöcke zur Erleichterung der Navigation und Erkennung farblich zu kennzeichnen.
Diese Abschnitte führen zur Auflistung von Seiten, die für jeden Inhaltsbereich spezifisch sind. Die drei Top-Nachrichten - Neueste Nachrichten, Highlights und Blog - enthalten Diashows, in denen bis zu fünf Artikel nacheinander angezeigt werden.
Der Multimedia-Bereich weist ein einzigartiges Verhalten auf: Er ist immer in voller Breite, sodass er mit zunehmender Größe mehr Inhalt anzeigt. Nicht sichtbare Inhalte können durch Scrollen / Wischen auf der Kachel angezeigt werden.
Das Live-Informationsmenü oben auf der Seite wird mit abnehmender Browserbreite von einem herkömmlichen Menü zu einem Dropdown-Menü reduziert. Auf diese Weise können Benutzer von jeder Seite der Website aus problemlos auf hilfreiche Informationen wie die Medaillentabelle oder den Zeitplan zugreifen.
In der Fußzeile der Seite befinden sich einige schnelle Links zu den verschiedenen Abschnitten der Website sowie Nachrichten nach Ereignissen, die den Benutzer zu einer Auflistungsseite führen, die für eine ausgewählte Sportart spezifisch ist.
3. Codierung des Rastersystems
Nachdem wir das allgemeine Design und Layout fertiggestellt hatten, gingen wir zur Codierung der Site über. Der erste Teil, den wir codieren wollten, war das auf der Homepage verwendete grundlegende Rastersystem, das auch in einigen anderen Teilen der Site wiederverwendet werden würde.
Es war aus zwei Gründen sinnvoll, Prozentsätze zum Festlegen der Breiten der Blöcke zu verwenden: um das für das reaktionsschnelle Design erforderliche flüssige Layout zu erreichen und um einfach herauszufinden, wie viel Platz die Blöcke einnehmen sollten. Wir hatten jedoch ein Problem beim Einstellen des festen 10-Pixel-Abstands zwischen den Blöcken, da beim Versuch, festen Abstand mit Prozentsätzen zu mischen, Umbruch- und Abstandsprobleme auftraten.
Die Lösung bestand darin, ein äußeres Div auf zu setzen Überlauf versteckt und darin ein innerer div mit a Rand links von 10px und Rand oben von 10px. Dies bedeutet, dass auf der linken Seite und oben in jedem Block eine Rinne für 10 Pixel angezeigt wird. Wir können den äußeren Div jedoch weiterhin auf Prozentsätze setzen (z. B. 50%, 25%, 25%, um ein Rechteck und zwei Quadrate zu erstellen ).
Die gesamte Seite befindet sich in einem Wrapper-Div, der ebenfalls auf eingestellt ist Überlauf versteckt und hat eine Rand rechts von 10px, um die Rinne auf der rechten Seite der Seite zu erstellen. Wenn Sie das Browserfenster verkleinern und erweitern, können Sie sehen, wie sich die Blöcke dehnen und einrasten, um den Raum zu füllen, während die 10-Pixel-Rinne beibehalten wird.
4. Erstellen eines Top-Menüs für Live-Informationen
Wir hatten zuvor eine gefunden Lernprogramm on Web Designer Wall, von dem wir wussten, dass es perfekt für diese Site funktioniert. Uns hat die Art und Weise gefallen, wie ein Menü erstellt wurde, das bei kleineren Bildschirmgrößen zu einem Dropdown-Menü zusammengefasst wurde. Wenn jedoch mehr Breite verfügbar ist, wird es zu einem vollständigen Menü. Wir haben einige CSS-Elemente so geändert, dass das Menü die gesamte Breite des Browsers mit 10-Pixel-Rinnen ausfüllt und dass, wenn der Speicherplatz verfügbar ist, Symbole zu den Menüelementen angezeigt werden. Wir haben das Verhalten auch geringfügig geändert, sodass bei der kleinsten Größe ein separates Symbol angezeigt wird, mit dem Sie zur Startseite zurückkehren können.
5. Erstellen der Homepage-Karussells
Die nächste Herausforderung bestand darin, zu entscheiden, wie die Bilder für die Inhaltsblöcke den verfügbaren Platz in jedem Block ausfüllen sollen. Während wir über die Verwendung von Bild-Tags nachdachten, haben wir uns dagegen entschieden, da die Verwendung von Hintergrundbildern uns mehr Kontrolle verschaffte.
Wir setzen das Hintergrundbild auf Startseite Dies bedeutet, dass sich die Größe mit den Blöcken dynamisch ändert, während das Seitenverhältnis beibehalten wird. Wir setzen auch die Hintergrundbilder auf Hintergrundposition: Mitte um den richtigen Teil des Bildes anzuzeigen.
Der nächste Schritt bestand darin, die dynamischen Funktionen zu den Abschnitten 'Nachrichten', 'Highlights' und 'Blog' hinzuzufügen. Wir wollten, dass eine Diashow die Folien auf einem Timer ändert oder mit Pfeilen navigiert werden kann. Bei der Online-Suche haben wir eine Diashow gefunden fast was wir wollten .
Nachdem wir einige Markups und CSS geändert und einige kleine Aktualisierungen an der jQuery vorgenommen hatten, passte es sehr gut zu unserem Zweck. Wir wollten nicht, dass alle drei Blöcke gleichzeitig übergehen, daher gibt es zwischen jedem eine Verzögerung von einer Sekunde.
6. Der Multimedia-Schieberegler
Wir wollten, dass der Multimedia-Block die gesamte verfügbare Breite einnimmt und dabei eine festgelegte Höhe beibehält. Der Inhalt kann durch Scrollen oder Wischen auf einem mobilen Gerät angezeigt werden. Dies ist ein relativ einfacher Vorgang, bei dem ein Wrapper-Div auf a gesetzt wird Breite von 100% mit Überlauf: auto , um eine Bildlaufleiste anzuzeigen. Innerhalb des Wrappers befindet sich ein innerer Div, der mit einem großen negativen Rand schwebt, was bedeutet, dass er immer nur so breit wird wie der darin platzierte Inhalt. Wenn wir eine feste Breite festgelegt hätten, würde diese immer auf diese Größe gehen und leeren Raum zum Scrollen lassen, wenn sie nicht vollständig ausgefüllt wäre.
Ein Problem bei scrollbaren Blöcken ist, dass iOS das trägheitsbasierte native Scrollen entfernt. Dies kann jedoch für iOS 4 behoben werden, indem Folgendes hinzugefügt wird: -webkit-overflow-scrolling: berühren . Spätere Android-Telefone funktionieren ohne dies einwandfrei, obwohl es derzeit keine Lösung für das Hinzufügen von Trägheits-Scrollen für Windows Phone 7.5 gibt.
7. Erstellen der Multimedia-Galerieseite
Als nächstes war die Fotogalerie Seite. Wir wussten, dass es eine Vielzahl von Optionen geben muss, also haben wir ein bisschen gesucht und uns entschieden diese Lösung .
Abgesehen von der Änderung des CSS haben wir wenig getan, um den Code zu ändern. Eine Sache, die geändert werden musste, war die maximale Höhe von Porträtbildern: Da sie den verfügbaren horizontalen Raum ausfüllten, wurden sehr hohe Porträtbilder erstellt, die Sie nicht sehen konnten, ohne nach unten zu scrollen. Die Lösung bestand darin, JavaScript zu verwenden, um die Höhe des Browserfensters zu ermitteln, und dann die Höhe des Porträtfotos auf diesen Wert festzulegen. Die Breite ändert sich, um das Seitenverhältnis beizubehalten.
Der Bild-Feed, den wir erhielten, enthielt einige sehr große Bilder (bis zu 5 MB), deren Größe für ein reibungsloseres mobiles Erlebnis geändert werden musste. Wir haben dies auf der Serverseite mit dem gemacht Imageresizer-Plug-In .
8. Die Auflistungs- und Artikelseiten
Auf der Seite mit den Nachrichtenlisten hat jedes Element einen Titel, einen Untertitel, ein Intro und ein Bild, wie unten gezeigt. Bei der kleinsten Bildschirmgröße haben wir beschlossen, das Intro nicht anzuzeigen, da der Platz knapp ist. Beim Skalieren schwebt das Bild nach rechts und das Intro und der Untertitel werden angezeigt.
Der Event Guide, der Venue Guide und Meet the Athletes verhalten sich etwas anders:
Wir hatten das Gefühl, dass auf einer herkömmlichen Listingseite der Inhalt nicht so gut angezeigt wurde wie auf einem kachelbasierten Layout mit Bildern. Daher haben wir dieselben Grundkonzepte wie auf der Startseite angewendet. Abhängig von der Größe des Bildschirms ändert sich die Anzahl der Bilder / Kacheln in jeder Zeile, während sich die Kacheln dehnen, um den verfügbaren Platz zu füllen. Die Symbole auf der Ereignisseite werden nicht erweitert, da sie pixelig geworden wären. Sie werden daher zentral platziert. Stattdessen werden die Felder, in denen sie platziert sind, erweitert.
Die Artikelseite enthält vier Hauptelemente: Titel, Untertitel, Haupttext und ein Bild. Bei den kleinsten Bildschirmgrößen wird das Bild unter dem Titel und Untertitel, aber über dem Text platziert:
Wenn es größer wird, wird das Bild nach rechts verschoben, um den zusätzlichen Platz zu nutzen. Bei maximaler Größe ist die Spaltenbreite des Haupttextes begrenzt, um die Lesbarkeit zu verbessern. Das Bild wird dann in diesen leeren Bereich auf der rechten Seite des Bildschirms verschoben.
9. Größe und Leistung der Website
Die Homepage der Site umfasst bis zu 665 KB über 68 Anfragen. Dies umfasst alle Bilder für die Karussells sowie die auf der Website verwendeten CSS- und JS-Dateien.
Insgesamt sind wir mit dieser Zahl zufrieden. Die MSN-Site ist zwar größer als einige rein mobile Websites, bietet jedoch mehr Bilder und ein dynamischeres Surferlebnis und ist dennoch schlanker als einige andere reaktionsfähige Websites.
10. Wo die Site in die reaktionsfähige Welt passt
Es gab viele Diskussionen über die Verwendung von Responsive Design, und in letzter Zeit die Nielsen vs Clark Debatte hat diesem Feuer mehr Treibstoff hinzugefügt.
Wir haben die MSN-Site mit einer Mobile-First-Methode erstellt: 90 Prozent der Stile im CSS gelten für das einspaltige Layout, während die anderen 10 Prozent lediglich die Größe der Inhaltsblöcke ändern, je nachdem, wie viel Breite angeboten wird vom Gerät oder Ansichtsfenster.
In unserem Fall wurde die Site hauptsächlich für mobile Geräte entwickelt, um eine bestehende zu ergänzen Desktop-Site Wir haben jedoch reaktionsschnelle Techniken verwendet, um das Geräte-Ansichtsfenster voll auszunutzen. Dabei haben wir flüssiges Layout und Medienabfragen verwendet, um uns an die verfügbare Bildschirmgröße anzupassen. Daher ist das Ergebnis auch als Desktop-Website weiterhin sehr gut verwendbar.
Wörter: Matt Clark
Matt Clark ist Front-End-Entwickler bei Governor-Technologie , eine Webentwicklungsagentur mit Sitz in der Londoner Innenstadt. Seine Arbeit umfasste eine breite Palette von Bereichen, vom responsiven Webdesign bis zur Entwicklung der Anwendungsoberfläche. Wenn er nicht programmiert, schaut er gerne klassisches Boxen und nutzt die schwer fassbare englische Sonne.
