Responsive Webdesign macht Ihre Webseite anpassungsfähig für alle mobilen Endgeräte. Das ist für heutige Webseiten nicht mehr wegzudenken, denn die einmal für PC oder Laptop gestaltete Seite wäre auf den kleinen Monitoren von Smartphone, Tablet & Co. sonst nur mit Mühe lesbar. Zumindest hat der User viel Aufwand mit dem Scrollen – insbesondere horizontal ist das äußerst lästig. Hinzu kommen die unterschiedlichen Eingabemöglichkeiten, die horizontale oder vertikale Ausrichtung und schließlich auch die Auflösung des Monitors. Die Folge eines fehlenden Responsive Webdesigns ist, dass man vor allem Besucher, die Ihre Homepage mit dem Handy ansehen, schnell wieder verliert.
Installation eines WordPress Responsive Webdesign
Die Installation von Responsive Webdesign sollte in den Händen eines Fachmanns liegen – ein Freelancer wie ich kennt viele Tricks und Kniffe, insbesondere wenn es gilt, eine ältere WordPress Seite umzustellen. Ich erstelle ich Ihnen eine Internetseite, die optimal auf die unterschiedlichsten Auflösungen eingestellt ist. Es ist so gestaltet, dass sich die Website dem jeweiligen Endgerät ganz automatisch anpasst. Speziell bei WordPress sind mittlerweile viele Responsive Themes vorhanden.
Als Freelancer in München unterstütze ich Sie gerne bei der Entwicklung oder Umstellung Ihrer Seite.
Wie funktioniert Responsive Webdesign und welchen Effekt hat es auf Webseiten?
Mobile First – Zuerst das Smartphone, dann der PC
Bei der Erstellung des Webdesigns sollte man sich zunächst an den kleinsten Bildschirmen und schwächsten Browsern orientieren, die meistens das Handy hat. Beim „Mobile First“ Ansatz wird also das Layout zuerst für das Smartphone entworfen, und erst danach wird es stückweise so weiterentwickelt, dass es auch den Anforderungen großer Monitore genügt.
Ein cleverer Zwischenschritt heißt Wireframe. Dabei kommt es zunächst einzig auf die Inhalte an, ohne dass Farben oder stilistische Elemente eine Rolle spielen. Diese Methode ist für Designer und Kunden von wesentlichem Vorteil – sie können sich ganz auf den Content konzentrieren.
Media Queries – Automatische Anpassung an die Bildschirmgröße
Die sogenannten Media Queries fragen bei jedem Aufruf einer Website die Bildschirmgröße des jeweiligen Users ab. Danach richtet sich das entsprechende Format, in dem die Site angezeigt wird. Wenn der Administrator seine Website so gestalten möchte, dass sie auf unterschiedlich großen Monitoren ohne Einschränkungen zur Verfügung steht, sollte er mehrere Stylesheets hinterlegen lassen. Für einen Freelancer wie mich ist dies eine fast alltägliche Angelegenheit.
Media Queries beruhen auf CSS3. Bereits die Vorgängerversion CSS2 war in der Lage, in gewissem Umfang Ausgabe und Stylesheet miteinander zu verknüpfen. Die neue Version lässt sich indessen weitaus vielfältiger programmieren und somit auch besser an die Bedürfnisse von Administrator und Usern anpassen. Kommt etwa ein Tablet zum Einsatz, bleibt das Layout bestehen, selbst wenn der Nutzer das Fenster zusammen- oder auseinander schiebt. Daneben lässt sich mithilfe von Media Queries auch abfragen, ob der User auf seinem Gerät die Seite im Quer- oder Hochformat anzeigen lässt.
Fluid Images – Flexible Bilder in unterschiedlichen Größen
Bilder auf Websites konnten bislang den Webdesigner zur Verzweiflung bringen: Meist nur durch Zufall passten sie ins vorhandene Layout. Im Regelfall verschoben sich die bereits erstellten Texte. Der Grund: Die Bilder waren lediglich in einer einzigen Größe vorhanden.
Somit sind die jetzt möglichen „flexiblen“ Bilder eine sehr sinnvolle Neuerung. Der Weg bis zur fast vollständigen Perfektion benötigte einige Versuche. Zwischenzeitlich bestand die Lösung darin, alle Bilder in hoher Auflösung zu laden. Das hatte für die Nutzer von Smartphone & Co. den Nachteil, dass sie bei den vergleichsweise langsamen Datenverbindungen lange auf ein letztlich sehr kleines Bild warten mussten.
Die bislang optimale Lösung heißt Adaptive Images. Sie beruht auf dem Fakt, Bilder zwar in höchster Auflösung zu speichern, sie aber auf dem Server – und nicht erst auf dem Browser – auf die erforderliche Größe herunterzurechnen.
Fluid Grid – Anpassung der Elemente
Beim Fluid Grid passen sich die Elemente einer Website unterschiedlichen Monitorgrößen an. Ist dies nicht der Fall, wird die Webseite auf den einzelnen Endgeräten immer wieder anders aussehen.
Bislang ging man von 1024 Pixeln für alle Designs aus. Bei den früher üblichen PCs und Laptops funktionierte dies auch. Seit aber Tablets, Smartphones & Co. die Internetwelt bereichern, funktioniert das fixe Design nicht mehr.
Daher ist es notwendig, dass die Designer von den (festen) Pixeln zu (relativen) Prozent wechseln. Die Berechnung ist ein wenig kompliziert und zeitaufwendig, aber als Freelancer in München bin ich mit der Materie vertraut.
Iconfonts für eine optimale Darstellung von Symbolen
Auf nahezu allen Websites sind kleine Symbole zu finden: Warenkorb, Lupe oder Pfeile. Da sie meist sehr klein sind, bereiten sie bei Laden kaum Probleme, zumindest nicht bei den früher üblichen Bildschirmgrößen. Das änderte sich mit den hochauflösenden Monitoren, für die eine höhere Auflösung der hinterlegten Symbole zwingend notwendig ist.
Die Lösung besteht in den Iconfonts. Dabei handelt es sich letztlich um Buchstaben, deren Aufruf einen deutlich weniger großen Aufwand bedeutet als der eines kompletten Bildes. Diese Icons werden auf jedem Display immer scharf dargestellt, können per CSS beliebige Farben und Effekte annehmen und sind zudem auch nach oben skalierbar.
Ein weiterer Vorteil der Iconfonts besteht darin, dass sie von allen Browsern gleich gut präsentiert werden.
Stufenlose Anpassung der Bilder durch Vektorgrafiken (SVG)
Ein Bild, das sich – wie bislang die meisten – aus Pixeln zusammensetzt, benötigt eine vergleichsweise lange Ladezeit und zudem eine Menge Speicherplatz. Die Lösung besteht in SVG (Scalable Vector Graphics).
An die Stelle der Pixel treten nun die Pfade. Sie bewirken, dass sich ein Bild stufenlos nicht nur verkleinern, sondern auch vergrößern lässt. Der letzte Fall war bislang nicht möglich. Der Grund für die neue Errungenschaft liegt darin, dass dank der Vektorgrafik die Größe der Bilddatei immer gleich ist – unabhängig von der Größe des dargestellten Bildes. Mit Ausnahme von Fotos lassen sich alle Bilder im SVG-Format hinterlegen.
Breakpoints für eine veränderte Darstellung
Breakpoints benennen die Stellen auf unterschiedlich großen Displays, die für eine Änderung der Darstellung einer Website verantwortlich sind. Um eine einheitliche Darstellung zu gewährleisten, galt es bislang, sich an bestimmten (vorhandenen) Gerätetypen zu orientieren. Da aber stets neue Produkte auf den Markt kommen, die zudem wieder andere Anforderungen stellen, sind neue Methoden zu finden, um die Breakpoints zu bestimmen.
Sie bestehen schlicht im Content. Sobald der Designer die Inhalte so verkleinert, dass sie schwer lesbar oder kaum noch navigierbar sind, ist der erste Breakpoint gefunden. Schließlich ist zu überdenken, welche Inhalte eventuell weniger wichtig sind, damit sie auf einem kleinen Monitor den bedeutenden keinen Platz wegnehmen.
Kontaktieren Sie mich: info@lake-studio.de