Wie verwandle ich meine bestehende Website in eine Responsive Website?

Dieser kleine Artikel soll als Workaround für Webmaster dienen, die ihre bestehende statische Website in eine Responsive, sprich: „eine flexible Webseite“, verwandeln. Ich werde in dem Artikel durchgängig ein schemenhaftes Grundgerüst einer HTML Seite mit aufführen, um die Änderungen anschaulicher zu machen:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<style>
body{background:white;color:black;}
#example{width:900px;margin:auto;}
</style>
</head>
<body>
<div id=“example“></div>
</body>
</html>
 

 

Grundlagen in HTML und CSS werden hier jedoch nicht weiter beschrieben.

1. Die HTML Deklaration.

Fangen wir ganz vom vorne an, denn dieser Artikel setzt den Standard HTML5 und CSS3 voraus. In diesem Zusammenhang stellt sich die erste Frage: Wie wird meine Seite zu einer HTML5 Seite? Das ist im Prinzip der einfachste Schritt, bei welchem lediglich das Grundgerüst der bestehenden HTML Seite verändert werden muss.

Schauen wir uns eine x-beliebige HTML Deklaration an, die wie folgt aussehen könnte:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Die oben zu sehende Deklaration definiert zum Beispiel den HTML Standard 4. Wir wollen jedoch HTML5. Dafür muss nur die Information oben durch die folgende ersetzt werden:

 <!DOCTYPE html>

Durch das ersetzen der einen Deklaration durch die neue, wird das  HTML Dokument nun als HTML5 „erkannt“.

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{background:white;color:black; }
#example{width:900px;margin:auto;}
</style>
</head>
<body>
<div id=“example“></div>
</body>
</html>

2. Festlegen des Umbruches/der Umbrüche der bestehenden Seite

 

Nun, da wir in dem Dokument mit HTML5 und CSS3 arbeiten können, dürfen wir uns jetzt dem CSS Code zuwenden. Dabei ist es irrelevant, ob der Code in eine externe Datei ausgelagert wurde, ob er im Head des Dokumentes steht, oder ob er inline verwendet wird. Wichtig ist nur die richtige Syntax.

In unserem Beispiel steht der CSS Code zur Veranschaulichung im Headbereich:

<style>
body{background:white;color:black; }
#example{width:900px;margin:auto;}
</style>

 

Diese Angaben sind jedoch starr und müssen im folgenden Schritt mehr oder weniger „flexibel“ gemacht werden. Dazu kommen die so genannten Media Queries ins Spiel.

Die Media Queries erlauben es dem Webmaster verschiedene CSS Bereiche für jede Browsergröße zu definieren, oder verschiedene Umbrüche für jede Größe festzulegen usw.

Wie sehen Media Queries also aus? Das ist im Prinzip kein Hexenwerk. Die Media Queries bestehen aus wenigen Elementen. Mit @media wird das darstellende Medium abgefragt, was in den unten beschriebenen Beispielen alle Geräte mit der jeweiligen Bildschirmgröße betrifft (mehr dazu in dem jeweiligen Beispiel). Die Angaben in den runden Klammern fragen die Bildschirmgröße des Endgerätes, bzw. die Größe des Browserfensters ab. Dabei gibt es verschiedene Möglichkeiten die Spanne der Abfrage, oder das Minimum und Maximum festzulegen. In die geschwungenen Klammern am Ende der jeweiligen Abfrage gehört der CSS Code für die jeweilige Browser/Bildschirm Größe. Schauen wir uns jetzt mal jedes Beispiel separat an:

 

@media (max-width:999px) and (min-width:581px) {#CSScode{background:yellow;}}

 

In diesem Beispiel wird die Abfrage mit @media normal eingeleitet. Danach wird die Größe des Mediums abgefragt. Das bedeutet für dieses Beispiel: Wenn der Browser/Bildschirm mindestens 581 Pixel und maximal 999px breit ist, dann gib folgenden {#CSScode{:;}} weiter.

 

 @media (max-width:580px) {#CSScode{background:white;}}

 

Im nächsten Beispiel wird der CSS Code nur ausgegeben, wenn der Browser/Bildschirm maximal 580 Pixel breit ist. In diesem Beispiel wird der CSSCode bis zu einer Bildschirm/Browserbreite von 580Pixeln ausgegeben.

 

 @media (min-width:1000px) {#CSScode{background:black;}}

 

Das heisst für die oberen zwei Beispiele: Wenn der Browser/Bildschirm  genau oder unter 580px breit ist, ist der Hintergrund grau. Wenn er zwischen 581 und 999 Pixeln breit ist, ist der Hintergrund gelb und wenn er mindestens eine Breite von 1000px hat, ist der Hintergrund schwarz. Unten im Beispiel könnt ihr noch die “@media all” Angabe sehen. Dieses Query spricht immer die jeweiligen HTML Elemente an, unabhängig vom Typen des Endgerätes oder dem “Viewport”, also der Anzeigebereich des Browserfensters

 

<!DOCTYPE html>
<html>
<head>
<style>
@media all {#example{background:white;padding:50px 0px;margin:auto;text-align:center;margin-top:10px;margin-bottom:10px;}}
@media (max-width:580px) {#example{background:grey;width:200px;}}
@media (max-width:999px) and (min-width:581px) {#example{background:yellow;width:300px}}
@media (min-width:1000px) {#example{background:black;width:400px;color:white;}}
</style>
</head>
<body>
<div id="example">BEISPIEL</div>
</body>
</html>

Hier ist ein das obrige Beispiel einmal live im Browser umgesetzt. Probiert es einfach durch vergrößern oder verkleinern des Browserfensters aus.

EXAMPLE

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>