Responsive und Mobile-freundliche Websites – mit reinem CSS
Kommentare

Responsive Webdesign spielt bei der Erstellung einer Website eine immer größere Rolle. Gerade auch, was die zunehmende Verbreitung der Zugriffe auf das Internet von mobilen Devices aus angeht, ist die Mobile-Freundlichkeit und Ladegeschwindigkeit einer Website auch bei langsamen mobilen Internetverbindungen wichtig.

Für die Umgestaltung einer Website hin zu einem Responsive Design und der Optimierung der Seitengeschwindigkeit fallen für Webdesigner viele Herausforderungen an. Rajoshi Ghosh und Tanmai Gopal erläutern, wie sie bei der Umgestaltung ihrer Website 34 Cross vorgegangen sind, und nur mit HTML und CSS eine responsive CSS-Seite erstellt haben.

Implementierung eines CSS-Parallax-Effekts

Für die Gestaltung der 34-Cross-Website war das Ziel, sie responsive und Mobile-freundlich zu entwickeln und für eine hohe Ladegeschwindigkeit auch bei langsamer mobiler Internetverbindung zu sorgen.

Eine der Herausforderungen, denen sich die Webdesigner stellen mussten, war die Frage nach einem responsiven, interaktiven Design. Dazu gehört auch ein reiner CSS-Parallax-Effekt, der Elemente, die näher auf dem Display erscheinen, schneller und Elemente, die weiter weg erscheinen, während des Scrollens langsamer bewegt und so für einen 3D-Effekt sorgt. Dafür wird mithilfe des perspective-Properties die Perspektive und die wahrgenommene Entfernung eines Elements definiert. Je geringer dabei der Wert der Entfernung ist, desto intensiver ist der 3D-Effekt.

Für die Implementierung des Parallax-Effekts werden die Parallax-Elemente in Gruppen geteilt, die je ein Element im Vorder- und ein Element im Hintergrund haben. Dabei ist es wichtig, die erste Gruppe mit dem Attribut preserve-3d zu versehen, da sonst die Anweisungen zur Perspektive verloren gehen. Anschließend müssen im CSS zudem Anpassungen in der Höhe der Elemente vorgenommen werden, etwa um Whitespace bei den Hintergrundelementen zu entfernen.

CSS-Interaktivität: Navigation und Scroll-Animation

Die Navigation einer Website stellt Webdesigner bei der Erstellung eines Responsive Webdesigns ebenfalls oft vor ein Problem. Besonders beliebt ist eine Navigation, bei der die einzelnen Links einer Navigationsleiste nebeneinander erscheinen – eine Darstellung, die für kleinere Displays ungünstig ist, weil nicht alle Links angezeigt werden können. Eine Push-Down-Style-Navigation, die sich HTML-Elemente wie Checkboxes zu Nutze macht, bietet sich daher für die Umsetzung der Navigation an.

Eine weitere Möglichkeit für den Einsatz von interaktiven Features, die sich mit reinem CSS umsetzen lässt, ist die Scroll-Animation. Damit kann zum Beispiel das top-Property animiert werden, um einen Scroll-ähnlichen Effekt zu erzeugen. Allerdings sollte hierbei bedacht werden, dass der User dabei die Kontrolle über das Scrollen verliert und sich die Scroll-Animation daher nicht für jede Website eignet.

Seitengeschwindigkeit optimieren

Die Seitengeschwindigkeit spielt für die User Experience eine wichtige Rolle; ihre Optimierung sollte daher bei der responsiven Gestaltung einer Website ebenfalls bedacht werden. Es gibt einige Möglichkeiten, die Seitengeschwindigkeit zu verbessern, etwa durch die Reduzierung der Datenmenge, die bei jedem Request übertragen wird, oder die Verringerung der Request-Anzahl, die für das Laden einer Seite nötig ist.

Genauso hilft der richtige Umgang mit Bildern dabei, die Ladegeschwindigkeit einer Website zu verbessern. So sollte die Bildgröße angepasst und Bilder soweit wie möglich komprimiert werden. Auch die Wahl des Bildformats – sowohl die Dimensionen, als auch der Bildtyp – spielt dabei eine Rolle. Darüber hinaus lässt sich auch durch den Einsatz von Pagespeed-Modulen die Seitengeschwindigkeit verbessern.

Die Casestudy zeigt, dass das Erstellen einer responsive, Mobile-freundlichen Seite zwar für einige Herausforderungen sorgt, diese sich aber leicht mit reinem CSS bewältigen lassen. Die vorgenommen Schritte, die hier nur kurz dargestellt wurden, sind in Rajoshi Ghoshs und Tanmai Gopals Artikel Tour of a Performant and Responsive CSS Only Site ausführlich und mit Codebeispielen beschrieben und bietet so einige Anregungen für die responsive Gestaltung der eigenen Website.

Aufmacherbild: Responsive Design Internet Web Graphic Design Team Concept von Shutterstock / Urheberrecht: Rawpixel

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -