Responsive Webdesign – Praxis-Projekt – Teil 4: Responsive Webdesign

In dieser Video-Trainingsreihe baue ich ein Praxis-Projekt nach. Als Grundlage für die HTML-/CSS-Programmierung dient das HTML5Boilerplate und nachprogrammiert wird die Webseite Webdesign-Podcast.de.

In diesem Teil wird der wohl interessanteste Part dieses Praxis-Projekts erklärt: Hier bekommst du alle Informationen darüber, wie eine Webseite möglichst variabel aufgebaut wird und mittels Media Queries die entsprechenden Anpassungen für Tablets und Smartphones durchgeführt werden.

Wir empfehlen:
Dreamweaver-Video-Training

Schritt 1

Hier in dem Bereich werden wir die ersten Schritte über Media Queries zoomen, das heißt, wenn wir das Ganze zusammenziehen, erkennt der Browser, welche Größe das Fenster hat, und passt die Seite automatisch an. Aktuell tut sich hier noch überhaupt nichts.

Schritt 2

Wir gehen dazu in die CSS-Datei und hier haben wir bereits einen Media Query als Vorlage in der CSS-Datei mit drin.

Schritt 3

Den werden wir jetzt anpassen. Die Desktop-Variante haben wir ja bereits fertig, das ist der Standard-CSS-Bereich, und den ersten Media Query werden wir für Tablet-Computer bauen.

Wenn wir das Ganze so eintragen, dann haben wir eine Abfrage beziehungsweise ein Media Query, der im Prinzip die Eigenschaften, die wir jetzt hier reinschreiben, erst dann anwendet, wenn wir eine Bildschirmauflösung von genau 1024 Pixel haben.

@media only screen and ( width:1024px ) {

}

Schritt 4

Jetzt nehmen wir aber mal die gängigen Tablet-Computer, zum Beispiel das iPad, und 1024 wären hier im Prinzip das iPad im Querformat. Da das iPad aber auch gedreht werden kann, verwenden wir jetzt eine Maximalweite von 1024 und zusätzlich nehmen wir eine Mindestweite von 640 Pixel.

@media only screen and ( min-width:640px ) and ( max-width:1024px ) {

}

Schritt 5

Das Erste, was wir jetzt machen, ist, die Sidebar ausblenden. Ganz einfach über display none.

@media only screen and ( min-width:640px ) and ( max-width:1024px ) {  #sidebar{ display:none; }

Schritt 6

Dann speichern, zurück in die Seite, wir ziehen das Fenster zusammen und dann verschwindet ab dem Bereich die Sidebar.

Schritt 7

Dann blenden wir die Teaser-Boxen aus.

Schritt 8

Einfach Komma, dann ID teaserBoxen und dann den rechten Bereich neben der Slideshow, topbox .right.

@media only screen and ( min-width:640px ) and ( max-width:1024px ) {. #sidebar, #teaserBoxen, #topbox .right{ display:none; }

Das ist das Ergebnis:

Schritt 9

Dann geht es weiter mit dem wrapper, und den wrapper setzen wir jetzt auf Weite auto und vergeben eine Maximalweite vom 780 Pixeln.

@media only screen and ( min-width:640px ) and ( max-width:1024px ) {
#sidebar, #teaserBoxen, #topbox .right{ display:none; }
.wrapper { width:auto; max-width:780px; }

}

Schritt 10

Das Ganze wird gespeichert, ich rufe es einmal auf, ziehe die Seite zusammen, und jetzt sehen wir, dass sich das Ganze hier auf die 780 angepasst hat.

Schritt 11

Die topbox werden wir jetzt generell auf 640 Pixel festlegen, und da sie mittig positioniert sein soll, geben wir jetzt hier noch ein margin auto.

#topbox { width:600px; margin: auto; }

Schritt 12

Wir laden neu und sehen jetzt schon, das Ganze passt sich hier an.

Schritt 13

Der Schatten geht noch auf die komplette Weite, da wir hier width 100% angegeben hatten, also als Nächstes den Schatten von der topbox, das ist shadowTopbox, und auch hier tragen wir als Weite 600 Pixel ein.

#shadowTopbox { width:600px; }

Schritt 14

Wir laden einmal neu und ziehen die Seite zusammen.

Schritt 15

Die Weite passt, aber hier muss das Ganze auch mittig positioniert sein, also margin auto.

#shadowTopbox { width:600px; margin:auto; }

Schritt 16

Damit haben wir allerdings auch den Abstand nach unten überschrieben, …

Schritt 17

… also margin-bottom 30 Pixel.

#shadowTopbox { width:600px; margin:auto; margin-bottom:30px; }

Schritt 18

Jetzt passt das Ganze an der Stelle auch wieder.

Schritt 19

Jetzt gehen wir weiter nach unten und sehen uns den Content-Bereich an. Wir gehen hier in den article. Der wrapper geht jetzt aktuell wesentlich weiter.

Schritt 20

Wir müssen erreichen, dass der maincontent sich auch anpasst. Der maincontent hat aktuell eine Weite von 100%, aber eine maximale Weite von 658 Pixel.

Schritt 21

Das setzen wir jetzt auf 780 Pixel fest.

.wrapper { width:auto; max-width:780px; }

Schritt 22

Wir laden einmal neu und damit erhöht sich jetzt auch automatisch die Weite vom maincontent. Der darin befindliche Inhalt passt sich entsprechend an.

Schritt 23

Hier in diesem Moment unterschreiten wir die 640 und deswegen springt das Ganze wieder in die Desktop-Ansicht.

Schritt 24

Jetzt muss allerdings noch etwas angepasst werden, denn wenn wir das Ganze so zusammenziehen – wir befinden uns genau in diesem Bereich hier -, dann liegt alles extrem nah an den Rändern.

Schritt 25

Also geben wir dem wrapper noch einen Abstand nach links und rechts. Oben unten ist okay, das bleibt bei 0, und links und rechts setzen wir das Ganze jetzt auf 20 Pixel.

Schritt 26

Jetzt passt der Abstand.

Schritt 27

Die Bilder passen sich bereits automatisch an. Um das noch mal kurz zu wiederholen, gehen wir noch mal zu den articleImages. Hier haben wir articleImage und hier wurde das Ganze mit width 100% gelöst, passt sich also automatisch an.

Schritt 28

Nun betrachten wir den footer, und der ist für die aktuelle Tablet-Computer- beziehungsweise iPad-Einstellung so eigentlich vollkommen okay. Der Bereich links, der bricht einfach um und setzt sich unter den Bereich Navigation. Das kann man für den Fall so lassen, das ist okay, spezielle Anpassungen machen wir dann gleich für die Smartphone-Variante.

Schritt 29

Deswegen gehen wir jetzt etwas weiter nach oben und widmen uns der mainNavigation und dem Logo, ebenso wie der topNavigation.

Schritt 30

Denn dieser Bereich verschwindet komplett, die Navigation braucht noch einen entsprechenden Abstand, damit sie nicht direkt an der Seite klebt, und das Logo wandert in die Mitte.

Schritt 31

Das Erste, was wir jetzt machen können: Wir sehen uns einmal die Navigation an. Hier haben wir den Bereich mainNavigation.

Schritt 32

Dann rufen wir das Ganze in der CSS-Datei mit auf, da haben wir den Bereich hier.

Schritt 33

Des Weiteren haben wir hier oben mainNavigation ul, das heißt, hier hat der ul der Hauptnavigation dieselben Werte wie der wrapper.

Schritt 34

Den wrapper haben wir unten angepasst und müssen das Ganze noch mal für mainNavigation ul auch machen, oder damit wir es nicht doppelt machen müssten, nehmen wir das Ganze hier einfach wieder raus …

Schritt 35

… und fügen im HTML-Quelltext dem ul einfach noch die Klasse wrapper hinzu.

<ul class=„wrapper”>

Schritt 36

Wir können die Seite jetzt neu aufrufen und so schnell hat sich damit das Thema mit dem Abstand erledigt.

Schritt 37

Als Nächstes ist dann der Logo-Bereich dran. Dazu sehen wir uns auch hier erst mal den ursprünglichen CSS-Code an.

Schritt 38

Der ist soweit okay, und das Einzige, was wir an der Stelle machen müssen, ist, das Ganze in dem Media Query aufzurufen. Branding und dann ganz einfach mit margin auto zentrieren und die topNavigation einfach mit ausblenden. Vor das branding setzen wir noch header, damit wir von den CSS-Eigenschaften höher liegen.

#header branding { margin:auto; }
#sidebar, #teaserBoxen, #topbox .right, #topNavigation{ display:none; }

Schritt 39

Jetzt haben wir hier das margin auto mit drin …

… und müssen noch das entsprechende float left mit rausnehmen.

Schritt 40

Und jetzt passt das Ganze.

Noch mal kurz, falls ihr gerade nicht so schnell gesehen habt, woher ich diese Werte hatte: Wir hatten das Logo und die topNavigation links beziehungsweise rechts nebeneinander hergefloatet. Das margin auto hat soweit funktioniert, wurde allerdings noch überschrieben von der Haupt-Angabe, da wir das header noch nicht vor dem branding stehen hatten. Das nächste Problem war dann einfach, dass das float left höherwertiger war beziehungsweise natürlich dafür sorgt, dass der Bereich immer links langfließt und das margin auto dadurch nicht aussagekräftig war. Damit haben wir die einfache Anpassung soweit schon gelöst.

Schritt 41

Nachdem wir jetzt die ersten zwei Varianten haben, das heißt, die Desktop-Variante und die Variante für Tablet-Computer, sollten wir langsam anfangen, die Schrift mit einzubinden, das heißt, die Google Webfonts.

Dazu rufen wir die entsprechende Webseite www.google.com/webfonts auf. Da wir die Schrift Lato einbinden wollen, suchen wir einfach mal nach der Lato und bekommen sie dann hier angezeigt. Wir können jetzt auf QuickUse klicken.

Schritt 42

Hier wählen wir die Bereiche aus, die wir in die Seite mit einbinden möchten. Das sind in diesem Fall Normal, Book und Bold.

Schritt 43

Jetzt scrollen wir etwas weiter nach unten und bekommen den Code angezeigt. Den können wir uns jetzt kopieren und …

… fügen ihn in den Head-Bereich unserer Webseite ein.

<link href=’http://fonts.googleapis.com/css?family=Roboto+Condensed’ rel=’stylesheet’ type=’text/css’>

Schritt 44

Wir können jetzt einmal neu laden und sehen sofort, dass sich an der Schrift etwas getan hat.

Schritt 45

Wir können, um es etwas deutlicher zu machen, das Ganze noch mal kurz auskommentieren und …

… man sieht direkt beim Neuladen der Seite, dass hier ein Springen bei dem “Herzlich willkommen” stattfindet.

Schritt 46

So einfach lassen sich die Webfonts mit einbinden. Hier müssen wir jetzt noch die entsprechenden Anführungszeichen anpassen beziehungsweise müssen dies nicht tun. Um den Quellcode allerdings synchron zu halten, ist es natürlich sinnvoll, alles einheitlich zu machen.

<link href=’http://fonts.googleapis.com/css?family=Lato:300,400,700′ rel=’stylesheet’ type=’text/css’>
<link href=”http://fonts.googleapis.com/css?family=Lato:300,400,700″ rel=”stylesheet” type=”text/css”>

Schritt 47

Das “Herzlich willkommen” haben wir damit angepasst, bei den anderen Bereichen müssen wir jetzt die Schrift noch anpassen.

Das können wir ganz einfach machen, und zwar indem wir unter dem wrapper einen Bereich anlegen. Wir suchen uns den fertigen Schnipsel, den wir bereits eingefügt haben, das wäre dieser hier, ‘Lato’, sans-serif, fügen den ein und setzen font-family davor.

{ font-family: ‘Lato’, sans-serif }

Schritt 48

Wir fügen davor sämtliche Klassen beziehungsweise Elemente ein, die entsprechend in der Lato dargestellt werden sollen. Das wären unter anderem die Überschriften des Hauptartikels und im footer die Überschriften.

#maincontent article h2,
#maincontent article h3,
footer .footerCol h5{ font-family: ‘Lato’, sans-serif }

Schritt 49

Jetzt müssen wir nur die Schriftgröße anpassen und natürlich auch den Zeilendurchschuss. Das machen wir als Erstes bei den Überschriften, und zwar setzen wir hier bei dem h2 line-height auf 80%.

#maincontent article h2 { font-size:2em; color:#333; margin:0 0 10px 0; line-height:80%; }

Schritt 50

Wir gucken mal, wie das Ganze aussieht … das ist zu nah.

Schritt 51

Probieren wir es einmal mit 100%. 100% passt so perfekt.

#maincontent article h2 { font-size:2em; color:#333; margin:0 0 10px 0; line-height:100%; }

Schritt 52

Hier oben bei Software sieht das Ganze soweit vollkommen okay aus.

Schritt 53

Deswegen können wir uns jetzt getrost dem nächsten Media Query widmen, und zwar geht es dabei um die Anpassung von Smartphone-Geräten. Wir können uns den Bereich hier einfach kopieren.

Schritt 54

Wir müssen jetzt als Erstes die Werte anpassen, wann dieser Media Query greifen soll. Und zwar machen wir das Ganze einfach nur über eine Maximalweite, das heißt, dieser Media Query kommt nur dann zum Einsatz, wenn wir Geräte haben, die maximal 640 Pixel breit sind.

@media only screen and ( max-width:640px )

Schritt 55

Die Werte, die wir hier als Erstes haben, bleiben soweit bestehen, werden allerdings noch etwas angepasst. Die topbox und shadowTopbox fliegen raus, den wrapper setzen wir auf maximal 640 Pixel und mainContent ebenso.

@media only screen and ( max-width:640px ) {
body{ background:#fff; }
#sidebar, #teaserBoxen, #topbox .right, #topNavigation, #topbox, #shadowTopbox, #maincontent .shadow, #maincontent { display:none; }
.wrapper { width:auto; max-width:640px; padding:0 20px; }
#maincontent { max-width:640px; }
header #branding { margin:auto; float:none; }

}

Schritt 56

Wir können die Seite einmal neu laden. Jetzt sind wir in diesem Bereich von 640 drin.

Schritt 57

Als Nächstes entfernen wir bei dem article den Abstand, das heißt, das padding kann hier auf 0 runtergesetzt werden, und wir passen für die gesamte Seite den Hintergrund an, und zwar werden wir jetzt statt des Grauverlaufs den background auf Weiß #fff setzen.

#maincontent article { padding: 0; }
body{ background:#fff; }

Schritt 58

So sieht das aus und jetzt müssen wir nur noch den Abstand etwas anpassen beziehungsweise einmal kontrollieren, dass das hier so passt.

Schritt 59

Dann müssen die Schatten noch mit raus und der articleFooter kann ebenso mit raus.

#sidebar, #teaserBoxen, #topbox .right, #topNavigation, #topbox, #shadowTopbox, #maincontent .shadow, #maincontent, #maincontent .shadow, #maincontent .articleFooter { display:none; }

Das Ergebnis:

Schritt 60

Jetzt brauchen wir unter den Artikeln noch ein wenig mehr Abstand, margin-bottom 50 Pixel.

#maincontent article { padding: 0; margin-bottom:50px; }

Ergebnis:

Schritt 61

Und damit passt das für Smartphones auch schon ganz gut. Hier oben die Navigation muss allerdings noch etwas angepasst werden.

Schritt 62

Bei der Navigation hatten wir display inline und genau da stellen wir jetzt auf display block um, damit wir alles untereinander haben.

#mainNavigation li  { display:block; }

Sieht dann so aus:

Schritt 63

Jetzt müssen wir an der Stelle noch die Abstände entfernen, padding 0.

#mainNavigation li { display:block; padding: 0; }

Das Ergebnis sieht so aus:

Schritt 64

Jetzt müssen wir die Navigation noch möglichst mittig setzen.

#mainNavigation li, #mainNavigation li a  { display:block; padding:0; text-align:center; }

Ergebnis:

Schritt 65

Dann werden wir die Klick-Fläche beziehungsweise Touch-Fläche noch etwas vergrößern, damit wir hier einen schönen Abstand haben und trotzdem noch genügend Platz ist zum Klicken.

#mainNavigation li a { padding:2px 0; }

Schritt 66

Dadurch hat der Nutzer im Endeffekt einen etwas größeren Bereich, um auf die Links zu klicken.

Schritt 67

Im footer passt das Ganze so eigentlich auch noch, man könnte es so lassen, aber hier haben wir auch das Problem: Es könnte beim touchen, mit dem iPhone habe ich es bereits ausprobiert, da funktioniert es ganz gut, aber es gibt ja noch andere Geräte, und gerade bei den Geräten in der etwas unteren Preisklasse, wo die Touchscreens noch nicht ganz so genau sind, da könnte es bei solch einer Liste schnell passieren, dass ungewollt der falsche Link in der Liste angeklickt wird.

Schritt 68

Also werden wir hier beim footer die Abstände auch noch weiter erhöhen um margin-bottom 6 Pixel. Das Ganze wirkt jetzt zwar relativ aufgeblasen, aber ehrlich gesagt kommt es in dem Fall natürlich darauf an, dass man die Bereiche gut anklicken kann, und letztendlich handelt es sich hier auch nur um eine Linkliste.

Schritt 69

Und damit hast du den ersten Workshop-Teil erfolgreich abgeschlossen.

Ich hoffe, du konntest dir so ein gutes Bild verschaffen, wie einfach es ist, mit Media Queries und einigen flexiblen beziehungsweise relativen Weiten- oder Höhenangaben flexible Webseiten mit Responsive Webdesign für verschiedene Endgeräte zu erstellen.

Es gibt natürlich noch weitere Anwendungsmöglichkeiten, wo hier die Reduktion so nicht direkt funktioniert, aber das ist ein Thema für den nächsten Workshop-Teil.

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