Responsive Webdesign – Kaffee am Meer – Teil 3: Erste Schritte in Richtung Responsive Webdesign

In diesem Tutorial werde ich das in Teil 1+2 erstellte Design bzw. die in HTML- und CSS-Code vorliegende Basis-Seite anpassen. Dies sind die ersten Schritte in Richtung Responsive Webdesign. Du lernst den Umgang mit fließenden Elementen, die eine wichtige Basis für gutes Responsive Webdesign bilden.

Hinweis: Die dem zugehörigen Video-Training beigefügten Arbeitsdateien sind bei allen vier Teilen dieselben und enthalten die komplette fertige Webseite mit Responsive-Design-Anpassung.

Hinweis: Dieses Tutorial ist die im Rahmen unseres Vertextlichungsaufrufs entstandene Textversion des zugehörigen Video-Trainings von Pascal Bajorat. Die Texte können daher durchaus auch einen umgangssprachlichen Stil aufweisen.

Wir empfehlen:
Dreamweaver-Video-Training
Um nun die ersten Schritte in Richtung Responsive Webdesign zu wagen, werden wir hier einige Anpassungen vornehmen müssen.

Schritt 1

Dazu wechseln wir in den Dreamweaver und in die Codeansicht. Das Erste, was wir hier machen müssen, ist in dem Bereich der Schriften, und zwar haben wir überall feste Schriftgrößen mit Pixelangaben vorgegeben.

Schritt 2

Das ist beim Responsive Webdesign nicht ganz so glücklich. Wenn wir hier zum Beispiel mit %- oder em-Angaben arbeiten würden, kann sich jedes Gerät die Schriftendarstellung besser einteilen und diese Größe ist besser optimiert für die aktuelle Ansicht.

Deswegen werden wir das Ganze jetzt umstricken und statt Pixelwerten (px) em-Werte verwenden. Wir setzen das Ganze erst mal auf 1em, das wäre quasi die Standardgröße.

body { background:#fff; font:1em "Trebuchet MS", Arial, Helvetica, sans-serif; color:#381d11; line-height:1.4 }

Schritt 3

Wir hätten dann hier bei der Überschrift, weil wir ja standardmäßig im body 13 Pixel hatten, dann zum Beispiel 1.1em, also etwas höher.

nav ul { list-style:none; font-size:1.1em; text-transform:uppercase; width:540px; margin:auto; }

Schritt 4

Bei der Sidebar-Überschrift nehmen wir zum Beispiel 1.2em.

.sidebar h3 { font-size:1.2em; color:#381d11; font-weight:normal; background:url(images/icon.png) no-repeat left; height:50px; padding:28px 0 0 65px; }

Schritt 5

Die ganzen Werte passen so natürlich noch nicht. Ich kann noch einmal kurz in die Entwurfsansicht wechseln. Hier sehen wir, dass das Ganze noch überhaupt nicht hinhaut. Die Navigation ist zu groß, bei den Spezialitäten haut es schon eher hin und der eigentliche Text ist auch zu groß geworden.

Schritt 6

Wir werden jetzt im body auf 0.8em gehen.

body { background:#fff; font:0.8em "Trebuchet MS", Arial, Helvetica, sans-serif; color:#381d11; line-height:1.4 }

Schritt 7

Wir können jetzt noch mal in den Browser wechseln und können jetzt hier als Anhaltspunkt dafür, welches der richtige Wert ist, ganz einfach die Navigation verwenden.

Schritt 8

Denn bei der Navigation hatten wir vorhin das Ganze, ich blende noch mal die Entwickler-Konsole ein. Entwickler>Webinformationen einblenden.

Da hatten wir das Ganze ja entsprechend angepasst, und zwar auf die 520 Pixel, und da müssen wir wieder hinkommen.

Schritt 9

Wenn wir das Ganze jetzt so kontrollieren, dann sieht es so schon mal ganz gut aus. Das heißt, die 0.8em im body passen soweit.

Schritt 10

Was hier noch nicht passt, sind unsere Spezialitäten, das muss wesentlich größer sein.

Schritt 11

Mit 1.4em …

.sidebar h3 { font-size:1.4em; color:#381d11; font-weight:normal; background:url(images/icon.png) no-repeat left; height:50px; padding:28px 0 0 65px; }

… passt auch das wieder besser.

Schritt 12

Dann benötigten wir noch die Hauptüberschriften bzw. das Logo. Hier ist etwas Ausprobieren gefragt, aber mit 4.5em …

h1 { background:url(images/logo.png) center top no-repeat; font:4.5em 'Alex Brush', cursive; color:#381d11; text-align:center; padding-top:50px; }

… scheint das Ganze so ganz gut zu funktionieren.

Schritt 13

Denselben Wert tragen wir jetzt noch für den h2 ein …

.mainContent h2 { font:4.5em 'Alex Brush', cursive; color:#381d11; font-weight:normal; }

… und sehen jetzt hier, dass das wiederum etwas zu groß ist.

Schritt 14

Mit einem Wert von 4em …

.mainContent h2 { font:4em 'Alex Brush', cursive; color:#381d11; font-weight:normal; }

…passt es auch hier.

Schritt 15

Danach können wir jetzt wieder den h1 richten …

h1 { background:url(images/logo.png) center top no-repeat; font:4em 'Alex Brush', cursive; color:#381d11; text-align:center; padding-top:50px; }

… und so können wir uns das Ganze relativ schnell zusammenbasteln, wenn man von Pixelangaben auf em-Angaben umsteigt.

Schritt 16

Ein weiterer wichtiger Bereich ist die Flexibilität des Layouts selber. Widmen wir uns als Erstes dem Wrapper. Der Wrapper hat eine Weite von 944 Pixel. Das ist so natürlich nicht ganz ideal, denn wenn zum Beispiel ein iPad quer gehalten wird oder wir ein Smartphone in der Hand haben, dann wird das Ganze wesentlich kleiner und wir müssten in der Horizontalen scrollen.

Also machen wir aus der festen Weite eine Maximalweite.

.wrapper { max-width:944px; padding:50px 20px; margin:auto; background:url(images/linie.gif) top center no-repeat, url(images/linie.gif) bottom center no-repeat; }

Schritt 17

So, an sich ändert sich hier nicht viel, und wenn ich das Ganze zusammenziehe, wird auch nichts passieren, …

… außer das Ganze bricht um, denn jetzt passt sich die Weite einfach dem Browserfenster an.

Schritt 18

Was noch nicht funktioniert, ist hier an der Stelle das Bild, denn das Bild hat ebenfalls eine feste Weite und wandert deswegen nicht mit.

Schritt 19

Das Ganze lässt sich auch relativ einfach anpassen, und zwar können wir im Bereich Header einfach header img verwenden. Hier setzen wir eine Maximalweite von 100%. Jetzt seht ihr, dass das Bild mitgeht.

header img { max-width:100%; }

Schritt 20

So in der Form natürlich extrem unschön, denn das Seitenverhältnis passt nicht mehr. Wir gehen weiter nach unten zum Header-Bereich und entfernen die feste Weite und Höhenangabe, denn diese wird nicht benötigt. Sie ist quasi optional.

<header>
   <img src="images/header.jpg" alt="Kaffee am Meer">
</header>

Schritt 21

Wenn wir die entfernen, dann passt der Browser automatisch das Seitenverhältnis an.

Schritt 22

Ein weiteres kleines Problem, das wir jetzt haben, ist natürlich, dass hier der Bereich Unsere Spezialitäten umbricht.

Entweder muss der Hauptbereich Besuchen Sie uns in Musterstadt sich ebenfalls anpassen und schmaler werden oder das Ganze muss auf eine andere Art gelöst werden.

Schritt 23

In dem Fall werden wir erst einmal dafür sorgen, dass der Bereich Besuchen Sie uns in Musterstadt, also der Hauptcontent, schmaler wird. Und die Schriftgröße etwas kleiner, damit das Ganze nicht umbricht.

Schritt 24

Dazu müssen wir den HTML-Code noch etwas umbauen. Als Erstes kümmern wir uns um den CSS-Part, und zwar machen wir das Ganze ähnlich wie auch bei dem Image und dem Wrapper.

Wir setzen einfach max-width ein, speichern das Ganze, gehen zurück und laden neu.

Schritt 25

Wenn wir jetzt das Ganze zusammenziehen, bricht die Box zwar noch immer um, …

… aber ab diesem Moment passt sich der Container an.

Schritt 26

Jetzt müssen wir nur noch dafür sorgen, dass hier die Sidebar mit den Spezialitäten nicht mehr umbricht, und genau dafür müssen wir jetzt ein klein wenig umbauen. Wir entfernen das float:left von dem mainContent-Container und ersetzen dies durch ein margin-right mit 280 Pixeln.

.mainContent { max-width:610px; margin-right:280px; }

Schritt 27

Wir müssen jetzt noch einen wichtigen Schritt durchführen, und zwar setzen wir die Sidebar über den mainContent-Bereich …

… und laden die Seite neu.

Schritt 28

Auf den ersten Blick hat sich nichts getan. Wenn wir das Ganze aber zusammenziehen, dann bleibt der Sidebar-Container am rechten Seitenbereich sitzen, weil wir jetzt durch das margin-right für den entsprechenden Platz gesorgt haben, und das Ganze schiebt sich zusammen. Damit ist das Ganze schon mal wesentlich flexibler geworden.

Im nächsten Schritt müssen wir die Schrift anpassen. Dafür benötigten wir Media Queries, damit sich das Ganze im Prinzip an die Browsergröße, bzw. an die Browserweite anpasst.

Bevor wir jetzt direkt mit dem Thema beginnen, die Schrift kleiner zu machen, möchte ich noch ein paar allgemeine Informationen über Media Queries loswerden.

Bildquellen: http://fotolia.com – Fotolia © alder #14697790, http://fotolia.com – Fotolia © Stephan Leyk #7982735

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training