Wie mache ich meine Website schnell responsive ?

Ihre Website ist erfolgreich, aber schon in die Jahre gekommen? Sie wollen Ihren Kunden auch auf mobilen Geräten ein optimales Erlebnis bieten? Warum dann keine Generalüberholung und Optimierung auf ein Responsive Webdesign? In vielen Fällen lohnt sich der Aufwand, auch wenn es einiges abverlangt. Gehen Sie mit der Zeit und Ihre Besucher werden es Ihnen danken.

Die Statistiken sind eindeutig: Die meisten Internetauftritte werden immer häufiger auch von Smartphones und Tablets aus aufgerufen.
Damit aber nicht genug, denn auch Fernseher, Spielkonsole und eBook-Reader verfügen mittlerweile über eigene Browser. Smartwatches und andere mobile Gadgets stehen ebenfalls in den Startlöchern. In einigen Monaten vielleicht schon VR- und Holo-Brillen. Wer weiß schon, was dann noch folgt? Wahrscheinlich niemand.

Sicher ist jedoch, dass ein Webdesign allein nicht mehr ausreicht, um auf allen Geräten für optimale Usability zu sorgen.
Soll man sich also die Mühe machen und für jedes Endgerät ein eigenes Design entwerfen? Das ist kaum zu schaffen, da auch die Geräte selbst über verschiedene Abmessungen, unterschiedliche Pixeldichte und Wiedergabemöglichkeiten verfügen. Benötigt wird eine Lösung, die alle Gerätetypen abdeckt, aber auch an deren Besonderheiten und Eigenheiten angepasst werden kann. Dieses Paradigma wird auch „responsive web design“ genannt. Es geht hier um das Anpassen der Inhalte einer Website relativ zum Ausgabemedium. Das heisst, man legt für Elemente keine festen Pixelwerte für Maße oder Abstände fest, sondern nimmt z.B. Prozentwerte. So ist sichergestellt, dass alle Inhalte immer mit der Größe des Ausgabemediums skalieren. Im Gegensatz dazu steht das sogenannte „adaptive web design“, bei dem nur an bestimmten Sollbruchstellen, den sogenannten „breakpoints“, Änderungen am Layout oder an den Inhalten in Kraft treten. Aber wie bewerkstelligt man so etwas bei einer bereits bestehenden Website ? Und wie schnell kann man so etwas umsetzen?

Responsive über Nacht – Oder: Wie wird meine Website in kurzer Zeit responsive?

Falls Sie ein Content Management System oder Shopsystem nutzen und die Gestaltung Ihrer Seite jemand anderem überlassen wollen, haben Sie Glück: fertige responsive designs gibt es wie Sand am Meer. Hier genügt es in den meisten Fällen, ein entsprechendes Theme zu installieren, damit die Seite auf allen Endgeräten optimal dargestellt wird. Wer im Netz nach „responsive themes“ für sein CMS oder Online Shop-System recherchiert, wird schnell fündig werden. Umso höher Ihr Anspruch an das Design, desto mehr wird es allerdings auch kosten. Weniger komplexe Werke werden jedoch auch kostenlos angeboten.

Sollten Sie Ihre Website allerdings selbst anpassen wollen, müssen Sie sich fragen, ob es nicht sinnvoller ist, die Grundstruktur Ihrer Seite komplett neu anzlegen, anstatt auf das marode Fundament zu setzen. Beides hat natürlich Vor- und Nachteile. Wenn Sie von vorne beginnen, können Sie etablierte CSS Frameworks wie Bootstrap oder Foundation nutzen. Es handelt sich hier um CSS Bibliotheken die für genau solche Anwendungsfälle entwickelt wurden. Sie können diese Bibliotheken in Ihre Seite einbinden und greifen dann auf bestimmte Eigenschaften mit CSS Klassen zu. Eine Navigationsleiste erhalten Sie dann beispielsweise bereits wenn Sie einem HTML Element die Klasse .nav zuweisen. Hier liegt der Nachteil natürlich auf der Hand. Sie müssten das Seiten-Template quasi komplett neu entwickeln und sehr viel Zeit investieren. Wenn Sie Ihre Seite nur entsprechend anpassen wollen, ohne gleich alles neu zu entwickeln, im Folgenden nun die wichtigsten Grundlagen für die Umsetzung.

Schritt 1: Der Viewport

Zunächst muss der sogenannte Viewport korrekt eingestellt werden. Der Viewport legt fest, welchen Bereich einer Website ein Browser auf einem mobilen Endgerät darstellt und wie groß dieser Bereich ist bzw. wie stark hineingezoomt wird. Wenn man dieses Element nicht verwendet, also dem Browser nicht mitteilt, dass nur ein bestimmter Bereich der Website dargestellt werden soll, zeigt dieser mitunter die gesamte Website an, was auf einem kleinen Display natürlich sehr unvorteilhaft sein kann. Für Desktop-Browser spielt dies keine Rolle, weil dieser Meta-Tag dort nicht ausgewertet wird. Da der Viewport ein HTML Meta Element ist, gehört er in den HEAD Bereich:

<meta name="viewport">

Dem Viewport können unter anderem folgende Eigenschaften zugewiesen werden:

  • width – Legt fest, wieviel Pixel in Breite vom Browser dargestellt werden sollen. Z.B.: 980px.
  • initial-scale – Legt fest, wie stark die Zoomstufe des mobilen Browser ist, sobald man die Seite betritt.
  • user-scalable – Legt fest, ob der Benutzer die Zoomstufe ändern kann, also hinein- oder hinauszoomen kann.
  • minimum-scale – legt eine maximale Zoomstufe fest.
  • maximum-scale – legt eine minimale Zoomstufe fest.

Nun kann man sich überlegen welche Werte man bei den einzelnen Eigenschaften einträgt.
Im Prinzip ist es so, dass der Browser automatisch in die Website hineinzoomt, wenn man bei width einen Wert angibt, der kleiner ist als die Anzeigebreite des Ausgabemediums. Umgekehrt funktioniert das natürlich auch. Hat man also ein Gerät mit einem Display, welches 360 Pixel in der Breite anzeigt und trägt im Viewport die Breite width=360 ein, so zeigt der mobile Browser genau die ersten 360 Pixel einer Website, falls diese mindestens 360 pixel breit ist. Sollte die Website jedoch weniger breit sein, z.B. nur 300 Pixel, so zoomt der mobile Browser so stark in die Website hinein, dass trotzdem der komplette Anzeigebereich vom Ausgabegerät ausgefüllt ist.

Hier kann jeder natürlich im Einzelnen seine Präferenzen haben. In der Praxis hat sich allerdings bewährt, folgende Einstellungen zu verwenden, wenn mann seine Website tatsächlich responsive haben möchte:

  • width=device-width
  • initial-scale=1.0
  • user-scalable=no

Das bedeutet, es sollen immer genau so viele Pixel der Website dargestellt werden, wie die Anzeige des mobilen Endgeräts breit ist.
Außerdem soll die Zoomstufe beim Betreten der Seite bei 1.0, also dem Standardwert, bleiben und der Benutzer darf weder hinein, noch hinauszoomen.

Der HTML Code dazu sollte wie folgt aussehen:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Wenn wir diese Einstellungen nutzen, wird die Website auf dem mobilen Endgerät nun womöglich viel zu groß dargestellt und der Benutzer sieht nur einen Teil davon.
Das darf natürlich nicht passieren. Die Elemente der Website müssen sich möglichst an die Breite des Ausgabemediums anpassen. Dies geht nur, wenn Sie den Elementen relative Werte zuweisen.

Schritt 2: Anpassen einzelner Elemente

Hier können Sie Ihrer Kreativität freien Lauf lassen. Da jedes Design anders ist, kann man hier natürlich keine Standardwerte nutzen.
Falls Sie z.B. ein horizontales Menü haben, welches aktuell die Breite 980px hat, ändern Sie diesen Wert z.B. auf 100% oder benutzen Sie die Maßeinheit em ( für Profis ).


#menue, #footer, #banner {
width: 100%
}

Im Grunde ist es hier wichtig, dass die Seite bei jeder Breite komplett dargestellt wird und die Breiten aller Elemente sich an die Breite des Ausgabemediums anpassen.
Nun werden Sie zu Recht sagen, dass dies doch unschön aussieht, wenn man allen Elementen relative Breiten gibt und diese dann auf großen Displays, wie Desktop-Monitoren, sehr lang gestreckt werden. Das stimmt, das kann und soll man so auch nicht hinnehmen. Es gibt also noch eine letzte Sache zu erledigen: Die Media Queries.

Schritt 3: Die Media-Queries

Mit Media-Queries können im CSS Code Bedigungen für bestimmte Ausgabemedien oder Displaygrößen geschaffen werden.
Alle Eigenschaften innerhalb dieser Bedingungen werden nur dann ausgeführt, wenn diese auch zutreffen.
Dies können wir zu unserem Vorteil nutzen und festlegen, dass z.B. das besagte Menü nur dann eine Breite von 100% erhält, wenn das Ausgabemedium eine maximale Display-Breite von 360 Pixeln hat.
Betrachten wir also die selbe Website mit einem Tablet, würde das Menü nicht die 100% Breite erhalten. In diesem Sinne hat es sich bewährt, für verschiedene Displaygrößen verschiedene breakpoints anzlegen. Wenn man die eigene Website mit dem Paradigma „mobile first“ entwickelt, gibt man dazu immer Mindestbreiten an und arbeitet sich dann hoch:


@media only screen and (min-width: 320px) {
// Ihr Code für schmalere Smartphones, wie z.B. das Iphone
}

@media only screen and (min-width: 480px) {
// Ihr Code für breitere Smartphones
}

@media only screen and (min-width: 768px) {
// Ihr Code für Tablets
}

@media only screen and (min-width: 1280px) {
// Ihr Code für die Desktop-Version
}

Auch bei diesen Angaben haben Sie natürlich die Freiheit, die für Ihre Seite am besten geeigneten breakpoints auszuwählen.

Geschafft !

Sollten Sie diese drei Schritte befolgt haben, werden Sie bereits jetzt feststellen können, dass Ihre Seite sich nun entsprechend den Anweisungen in mobilen Browsern verhält.
Falls noch nicht alles wie erwartet funktioniert, verzagen Sie nicht gleich. Experimentieren Sie noch ein wenig mit den Media-Queries und den relativen Angaben der Elemente und die Ergebnisse werden Sie überraschen. Wir wünschen Ihnen viel Erfolg bei der Umsetzung.

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert