Bilder auf Webseiten ziehen Besucher in ihren Bann. Wie man Google Analytics nutzt, um bei einem geräteoptimierten Layout Breakpoints und Bildgrößen richtig festzulegen, erklärt unser Gastautor.
Um eine Website für Mobilgeräte fit zu machen, stehen zwei grundlegende Techniken zur Auswahl. Webentwickler und -designer können eine eigene Website für Smartphones und Tablets erstellen oder auf eine responsive Website mit dynamischem Layout setzen. Diese zwei Techniken unterscheiden sich jedoch grundlegend im Aufbau. Während eine eigene Website für mobile Inhalte in der Regel über https://m.xxx.de erreichbar ist, unterscheidet sich die URL einer responsiven Website nicht von der einer mobilen Page.
Bei einer mobilen Website, die sich über die Subdomain https://m.xxx.de erreichen lässt, existiert ein eigenes Template, das dann geladen wird, sobald ein Mobilgerät erkannt wird. Responsives Webdesign setzt stattdessen auf sogenannte Breakpoints, die das Layout anpassen, sobald ein Smartphone oder Tablet die Website aufruft.
Beide Techniken führen eine Koexistenz, da sie sowohl Vor- als auch Nachteile haben. Bei einer mobilen Website muss zuvor ein eigenes Template erstellt werden. Das erfordert Zeit. Darüber hinaus benötigt dieses Template einen gewissen Speicher auf dem Webspace. Bei einer responsiven Website hingegen entdecken Breakpoints die Bildschirmauflösung des Endgerätes und reduzieren das bestehende Layout auf die Größe des Bildschirmes. Breakpoints passen die Auflösung an den Viewport so an, dass sich die Seite an die jeweilige Auflösungen anpasst. Der Vorteil bei dieser Technik ist, dass sich die Breakpoints in Form von CSS (Cascading Style Sheet) in einer Datei hinterlegen lassen. Dadurch lassen sich Anpassungen schnell und effizient vornehmen.
Auch bei einem responsiven Webdesign besteht die Gefahr, dass zu viel unnützer CSS-Code lädt. Je mehr Breakpoints und Anpassungen, desto mehr Daten muss der jeweilige Browser bewältigen. Eine Lösung für dieses Problem stellt zum Beispiel das CSS-Framework von Cirrus dar. Dadurch ist gewährleistet, dass tatsächlich nur nützlicher und schlanker Code geladen wird. Beide Techniken haben jedoch etwas gemeinsam: Sie müssen die Inhalte in gleicher Weise quetschen und die wichtigsten Inhalte so präsentieren, dass diese die Aufmerksamkeit des Lesers erhalten.
Bei einer responsiven Website lässt sich mit dem Befehl @media, über den sich Breakpoints erstellen lassen, nachhelfen.
Dieser Befehl
<code>@media only screen and (max-width: 768px) {
width: 100%;
}
</code>
sorgt zum Beispiel dafür, dass unter einer Auflösung von 768 Pixeln die Breite auf 100 Prozent festgelegt wird.
Ein responsives Webdesign kommt in vielen Systemen vor. So setzen CMS wie WordPress bereits auf responsive Themes, die sich dynamisch den verschiedenen Auflösungen anpassen. Darüber hinaus sind auch Shopsysteme wie Shopify bestens für responsive Layouts gerüstet. Mithilfe des Page-Builders Shugun lassen sich per Drag & Drop sogar eigene responsive Layouts erstellen.
Brandaktuelle News und nützliche Informationen zum Thema Responsive Webdesign findet ihr auf dieser Website.
