Eine bestehende Webseite responsiv machen

Responsives Webdesign ist in aller Munde. Da lohnt es sich auch mal einen Blick auf eigene bestehende Webseiten zu werfen und zu schauen, ob diese mit überschaubarem Aufwand geändert werden können, damit sie auch auf Smartphones und Tablets gut aussehen.

Eine solche Umstellung ist spannend und es sind ein paar Entscheidungen zu treffen, die scheinbar individuell für die jeweilige Webseite zu beantworten sind. Die gefundenen Antworten entsprechen am Ende einem "responsiven Denkmuster", welches auch in weiteren Projekten zum Tragen kommen kann.

Ich werde die Umstellung an der Webseite www.kinderkrebshilfe-weseke.de vornehmen. Für diese Seite bin ich der ehrenamtliche Webmaster und habe ursprünglich das Design sowie die Programmierung gemacht.

div-basiertes statt tabellenbasiertem Layout

Die Seite sieht vor der Umstellung so aus:

kinderkrebshilfe_homepage_tabellenlayout

Ein Blick in den Quelltext verrät noch mehr, denn die Seite habe ich mit einem tabellenbasierten Layout umgesetzt. Die Tabelle hat drei Zeilen: Kopfbereich, Hauptbereich und Fußzeile. Das macht man heutzutage nicht mehr, daher ist der erste Schritt, die Tabellen zu entfernen und mit divs zu arbeiten.

Nach einiger Arbeit sieht das Ganze dann so aus:

kinderkrebshilfe_homepage_divlayout

Der Unterschied ist nicht so groß, aber ein paar kleine Änderungen gibt es:

  • divs statt table
  • Schriftart ein 1px größer
  • Hauptbereich größer

Das hat alles noch nichts mit responsivem Design zu tun. Den bisherigen Schritt hätte ich schon viel früher machen können. Aber: Voraussetzung für ein responsives Design ist ein div-basiertes HTML.

Viewport setzen

Die folgende Zeile ist fast schon obligatorisch auf Seiten die responsiv sind.

<meta name="viewport" content="width=device-width" />

Ich habe vor einiger Zeit viele Dokumente im Netz gelesen und auch viel ausprobiert, um das Thema Viewport, Geräteauflösungen, verfügbare Breiten und Höhen zu verstehen. Hier ein paar Links, die das besser erklären, als ich das könnte:

Außerdem hat mir diese Seite beim Verständnis geholfen. Hier werden Breiten und Höhen für das verwendete Gerät ausgespuckt: http://htmldoodads.appspot.com/dimensions.html.

Der Viewport ist kein klassisches Meta-Tag, er ist erst mit dem Aufkommen von responsivem Design eingeführt worden. Auf nicht responsiven Seiten wird dieser eher nicht gesetzt.

Vorüberlegungen

Bevor es an den Code geht, braucht man einen Plan, wie sich die Seite verhalten soll, wenn der verfügbare Platz (meist wir dabei nur die Breite betrachtet) zu klein ist. In meinem Fall sieht das so aus:

kinderkrebshilfe_homepage_nicht_responsiv

Was hier auffällt: Das Logo passt nicht mehr rechts neben die Adresse und bricht um. Da das Logo für den Besucher nicht essenziell ist, kann das nicht so bleiben. Außerdem wird der Content abgeschnitten, da sich das Menü links ganz schön breit macht.

Ich verwende übrigens zum Nachstellen von geringen Breiten die Firefox-Funktion Extras -> Webentwickler -> Bidschirmgrößen testen und passe dann die Breite manuell an.

Logo kleiner

Ich entscheide mich dazu bei einer Breite < 800px das Logo kleiner darzustellen. Und zwar relativ zur Gesamtbreite.

@media screen and (max-width: 800px) {
    #logo {
        width: 50%;
        height: auto;
    }
}

Wenn ich nun die Seite langsam kleiner ziehe, sieht das schon besser aus. Wird die Seite schmaler als 800px schrumpft das Logo mit.

Elemente ausblenden

Allerdings kommt es dann zu einem Umbruch wie im obigen Screenshot bei einer Breite von ca. 510px. Meine Lösung ist, die Adresse einfach auszublenden. Der Besucher bekommt die Adresse auch über den Menüpunkt Kontakt oder Impressum. Responsives Design bedeutet, dass vor allem Eyecatcher auf den Prüfstand kommen und bewertet werden muss, ob diese auf einem Smartphone angezeigt werden müssen. Ich führe eine zweite Media Query ein, blende die Adresse aus und setze eine fixe Breite für das Logo:

@media screen and (max-width: 520px) {
    #address {
        display: none;
    }
    #logo {
        width: 260px;
    }
}

Navigation (Teil 1)

Nun geht es an den Hauptbereich und an die Navigation. Die Navigation kann bei geringer Bildschirmbreite nicht links stehen. Es bietet sich an, diese über dem Content zu platzieren. Die Menüpunkte könnten dann nebeneinander statt untereinander stehen.

Das hört sich erstmal gut an, eine Tatsache habe ich aber bisher verschwiegen: Es gibt eine zweite Navigationsebene:

kinderkrebshilfe_navigation_nicht_responsive

Die Navigation besteht aus einer Liste, in der die 2. Navigationsebene eingeschoben ist und sich nur durch CSS von der 1. Ebene absetzt. Die Idee, die Navigationspunkte nebeneinander darzustellen funktioniert so nicht, denn dann tauchen die Punkte der 2. Ebene mitten in der Hauptnavigationsebene auf.

Auch hier heißt es, kreativ zu sein. Responsives Design heißt auch, die bisherigen Lösungen zu hinterfragen und gegebenfalls zu vereinfachen. Meine Lösung heißt: Die 2. Menüebene aus dem Menü links herauszulösen und oberhalb des Contents darzustellen. Damit die 2. Ebene etwas kompakter wird, benenne ich außerdem die Seiten um. Das sieht dann so aus:

kinderkrebshilfe_subnavigation_ueber_content

BTW: Ich verwende für die Navigation mein eigenes Plugin: https://www.bjoerne.com/navigation-du-lapin-blanc/. Die hier angestellten Überlegungen sollten sich aber auch auf das Standard-WordPress-Menü übertragen lassen.

Navigation (Teil 2)

Jetzt geht es an das eigentliche Vorhaben, nämlich die Optimierung für kleine Bildschirme: Die linke Navigation soll dann nach oben wandern und die Menüpunkte nebeneinander darstellt werden. Der Content bekommt dann die volle Breite zur Verfügung. Den Kalender blende ich einfach aus, ein paar Abstände passe ich noch an und für ganz kleine Bildschirme verringere ich die Schriftgröße um Footer.

kinderkrebshilfe_homepage_responsiv

Das war's! Ich habe hier bewusst auf Codebeispiele verzichtet. Wer sich für den Quellcode interessiert, dem empfehle ich mit Firebug oder einem ähnlichen Werkzeug die oben verlinkte Seite zu analysieren.

Fazit

Um am Ende eine zufriedenstellende Lösung zu haben, sind einige Schritte notwendig. Gut wird es am Ende nur, wenn man die individuellen Herausforderungen der Seite angeht. Man sollte nicht erwarten, dass man mit irgendeinem Framework (z.B. Twitter Bootstrap) auf einen Schlag eine tolle responsive Seite bekommt. Im Gegenteil: Ein kreatives Herangehen ist gefragt. Manche Lösungen wie das Ausblenden von Inhalten oder die Neustrukturierung der Navigation liegen nicht auf der Hand und ergeben sich erst mit ein bisschen Gehirnschmalz.

Die finale Lösung gefällt mir und ich finde auch, dass responsives Design Spaß macht.

 

bjoerne_com_bjoern_weinbrenner_softwareentwickler_icon_leistungen_02

Lust auf mehr? Als Experte für WordPress und individuelle WordPress-Entwicklung kann ich Sie in Ihren Projekten unterstützen. Melden Sie sich gerne bei mir.

2017-01-28T13:52:54+00:00 28.08.2013|Tags: , , , |0 Kommentare

Hinterlassen Sie einen Kommentar