Responsive Webdesign

Kompetenzen

Kompetenzen

An Smartphones, Tablets, Netbooks etc. angepasstes Design (Responsive Webdesign)

Schon seit ca. zwei Jahren ist mehr oder weniger jede neue Seite, die ich erstelle, auch an mobile Endgeräte wie Smartphones, Tablets etc. angepasst. Was zuvor noch Luxus und relativ selten war gehört also heute fast schon zur Standartausstattung einer modernen Webseite.

Ist ja eigentlich auch klar, der Gebrauch dieser mobilen Geräte wächst über alle Altersgruppen hinweg - eine Seite, die auch dort komfortabel angezeigt wird, hat einen großen Wettbewerbsvorteil.

Cascading Style Sheets

Wie funktioniert das?

Da mobile Geräte nur über eine begrenzte Anzeigemöglichkeit, sprich einem wesentlich kleinerem Display als sonst üblich verfügen, muss das Layout so angelegt werden, dass der vorhandene Platz gut genutzt, gleichzeitig aber das Layout erkennbar gleich und natürlich professionell wirkt. Weiterhin sollten Bedienelemente und Schriften nicht zu klein werden, damit Buttons anklickbar und Texte lesbar bleiben - nicht immer ganz einfach.

Das Layout einer modernen Webseite wird schon länger nicht mehr direkt in HTML, sondern über die Cascading Style Sheets (CSS) festgelegt. Das hat den großen Vorteil, dass Änderungen z.B. an der Farbe einer Überschrift, nur einmal in der CSS-Datei vorgenommen werden müssen und sofort für alle Webseiten gelten.

Um eine Webseite nun an verschiedene Auflösungen anzupassen stehen innerhalb von CSS die sogenannten Media Queries zur Verfügung. Mit diesen kann man festlegen, wie sich ein Layout, abhängig von der Anzeigenbreite, ändern soll.

Mehr erfahren

Innerhalb meines Blogs habe ich einige Responsive Webdesign-Projekte und die dazu angestellten Überlegungen beschrieben:

Webseiten mobil

Praxisbeispiel

Hier ein Beispiel aus einen kürzlich realisierten Webprojekt, zuerst die komfortable PC-Ansicht, durch den großen Bildschirm ist alles in voller Größe sichtbar:

PC-Ansicht

Auf einem Tablet ist die Bildschirm-Auflösung auf Werte zwischen 768 und 1024 Pixel reduziert. Da hier das relativ breite Menü gar nicht mehr in bedienbarer Große anzuzeigen ist wird selbiges zu einer grauen Schaltfläche am oberen Bildschirmrand verkleinert. Klickt man auf diese zeigen sich die Menüpunkte, vertikal angeordnet:

Tablet-Ansicht

Nutzt man ein Smartphone steht natürlich noch weniger Platz zur Verfügung, niemand möchte ja ein verhältnismäßig riesiges Tablet zum Telefonieren mit sich schleppen. Die Anzeige ist auf das Wesentliche reduziert.

Smartphone-Ansicht

Dem Ganzen sind natürlich auch gewisse Grenzen gesetzt, niemand wird umfangreiche Recherchen auf einem Smartphone machen wollen, die wichtigsten Dinge sollten aber auch dort erreichbar sein

Selber ausprobieren

Wenn Sie die hier vorstellte Seite lieber selber testen möchten folgen Sie bitte diesem Link:

www.icouvert.de

Suchmaschinen-Relevanz

Im April 2015 hat Google seinen Suchalgorithmus signifikant geändern, fortan ist die „Mobilfreundlichkeit“ einer Website ein Ranking-Faktor. Mehr dazu in meinem Blog:

Jetzt wird's ernst
 

Ältere Projekte nachrüsten

Wenn Sie eine ältere Webseite einsetzen kann die Anpassung an mobile Geräte theoretisch auch nachgerüstet werden, die Fragestellung ist hier eigentlich nur der zu betreibende Aufwand.

Falls Ihnen das bestehende Layout nicht mehr zusagt oder das CMS nicht mehr gepflegt wird ist aber es meist einfacher, die Seite komplett neu aufzusetzen.

In einigen Fällen genügt auch schon die Anpassung des CSS-Codes, näheres zu Ihrer Seite erfahren Sie gerne, wenn Sie mich kontaktieren.