25. Juli 2014 von & gespeichert unter Coding.

One Pager erfreuen sich im Netz wachsender Beliebtheit, wie unser Neuer für Rügenwalder Mühle, den wir nach einem Konzept von elbkind umgesetzt haben. Dank HTML5 und CSS bietet die einzelne Seite eine schicke Bühne, um eine Marketing-Aktion von Rügenwalder zu präsentieren – und zwar gleichermaßen auf Desktop, Tablet und Smartphone (Stichwort: responsive Design).

Die Erfahrungen, die unsere Entwickler bei diesem Projekt gesammelt haben, teilen wir heute in 5 Tipps mit Euch:

1. Lazy Loading

Was zuerst nicht nach Optimierung klingt (lazy?), ist eben das. Grafiken, JavaScript und CSS Dateien etc. werden bei Bedarf geladen, sprich wenn eine Aktion von Nutzer oder Software ausgeführt wird. Bei Toughmühle löst das Scrollen des Nutzers das Nachladen aus.

2. CSS statt Grafiken

Jede Grafik auf einer Website hat einen lähmenden Einfluss auf die Ladezeit. Ein Killer vor allem für die mobile Darstellung. Damit das nicht passiert, haben wir so viel wie möglich in CSS-Code gepackt. Der Hover-Effekt in der Fotogalerie ist z.B. mit CSS realisiert. Früher hätte man an der Stelle zwei Bilder hinterlegt – ein schwarz-weißes und ein buntes – und bei Mouse-over entsprechend miteinander vertauscht.

toughmühle_slider



Heute erzielt dieser CSS-Code denselben Effekt und spart dabei Ressourcen:

3. Serveranfragen minimieren

Zu diesem Zweck haben wir JavaScript- und CSS-Dateien mit Grunt zu einer Datei zusammengefasst. Auch die Icons im Footer liegen nicht in mehreren Dateien vor, sondern gebündelt in einer sogenannten Spritegrafik – statt vieler Bilder lädt die Seite nur eins. Und das dann eben schnell.

toughmühle_footer

4. Ladezeiten reduzieren

Wie oben bereits erwähnt: Bilder lähmen. Der One Pager für Toughmühle strotzt nur so vor Illustrationen und Fotos. Mit smushit haben wir diese nochmals komprimiert. Das intelligente Tool entfernt Informationen aus der Datei, die das menschliche Auge ohnehin nicht wahrnimmt.

5. Reichweite erhöhen

Dank responsive Design kann ein One Pager auf einer Vielfalt von Geräten optimal dargestellt und genutzt werden. Um den Programmieraufwand zu reduzieren, haben wir aufBootstrap gesetzt. Das Open Source Framework liefert responsive Templates, die sich an die eigenen Wünsche anpassen lassen.

Über das Projekt:

Ein Team von Rügenwalder Mühle stellt sich dem Toughmudder Hindernis-Lauf. Bilder und Videos der Trainings und des Laufs gibt es auf dem One Pager zu sehen. Zusätzlich ist die Seite noch auf Facebook und Youtube eingebunden. Um das Projekt schlank zu halten, ist die Seite statisch und ohne dahinterliegendes CMS realisiert. Idee und Konzept stammen von elbkind, das Design von Rügenwalder Mühle selbst.

Folgende Technologien und Funktionen kommen zum Einsatz:

  • HTML5
  • Responsive Design
  • JSON konfigurierbare Slider mit Swipe-Funktion
  • Modal Overlay für die Bilder
  • CSS3 Keyframe Intro Animation
  • Countdown Funktionalität



Ein Kommentar für “One Pager: 5 Tipps für Programmierer.”

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.