Responsive Webdesign – Kaffee am Meer – Teil 4: Media Queries

In diesem Teil behandle ich den wichtigsten Part beim Thema Responsive Webdesign, die Media Queries. Diese sind unerlässlich, um Seiten für die verschiedenen Endgeräte zu optimieren und zugleich einfach zu verstehen, wenn man erst einmal die dahinter steckende Funktionsweise kennt.

Wie genau dies funktioniert, wie man es am besten testet, zeige ich in diesem letzten Video-Training der Reihe.

Hinweis: Die beigefügten Arbeitsdateien sind bei allen vier Teilen die gleichen und enthalten die komplette fertige Webseite mit Responsive Design Anpassung.

Wir empfehlen:
Dreamweaver-Video-Training
Media Queries sind nicht so, wie viele annehmen, eine komplett und grundlegende neue Erfindung in CSS3, sondern die Verwendung von Media Queries beziehungsweise dem Attribut Media in CSS gab es schon vorher.

Eine der bekanntesten Varianten für die Verwendung des Media Attributes gibt es bei der Verwendung von Print-Stylesheets. Vielleicht hast du schon davon gehört und auch schon damit gearbeitet. Denn das Prinzip bei Print-Stylesheets ist im Prinzip genau dasselbe wie bei Media Queries allgemein.

Schritt 1

Um das Ganze hier einmal zu zeigen, haben wir hier oben ganz normal den Style-Tag mit den Haupt-Styles unserer Seite und ich werde jetzt einen weiteren anlegen.

Und zwar in dem unteren Bereich beginnen wir den Media Queria mit @media print, zwei Klammern, und in diesem Bereich können wir jetzt spezielle Angaben für den Ausdruck von Webseiten machen.

@media print { }

Schritt 2

Zum Beispiel könnten wir die generelle Schrift der Webseite auf Rot stellen.

@media print {
body { color: #f00; }
}

Schritt 3

Ich rufe mir jetzt den Drucken-Dialog auf und …

… du siehst schon in der kleinen Vorschau, dass die Schrift rot ist.

Schritt 4

Öffne das Ganze einmal etwas größer und …

… hier ist gut zu erkennen, dass die Schrift jetzt für die Medienausgabe Print, also für den Druck hier entsprechend angepasst wurde.

Schritt 5

Die Umstellung auf die rote Frage beim Ausdrucken macht jetzt nicht wirklich großartig viel Sinn. Mehr Sinn würde das Ganze machen, wenn wir hier zum Beispiel Anpassungen vornehmen würden, wie zum Beispiel den Header ausblenden, da das Headerbild beim Ausdruck nicht benötigt wird.

@media print {
header { display:none; }
}

Schritt 6

So haben wir jetzt den Header ausgeblendet und was auch automatisch von den meisten Browsern ausgeblendet wird, sind Hintergrundbilder, also CSS-Background-Angaben. Deswegen fehlt hier oben jetzt auch das Logo.

Schritt 7

Media Queries kann man auf viele verschiedenen Arten und Weisen verwenden. Zum einen gibt es die Möglichkeit, die Media Queries direkt in die CSS-Datei zu schreiben, so wie ich das jetzt hier gemacht habe mit @media print zum Beispiel.

Schritt 8

Es gibt allerdings noch weitere Möglichkeiten, zum Beispiel, wenn man das Ganze in externe CSS-Dateien auslagert, was generell auch am meisten Sinn macht. Der ganze Code hier zum Beispiel sollte üblicherweise in eine extra CSS-Datei.

Schritt 9

Datei>Neu>Leere Seite.

Ich nenne die jetzt einfach „style.css“ und speichere das Ganze.

Schritt 10

Ich entferne in der HTML-Datei die beiden Style-Tags und …

… binde die CSS-Datei über den Tag-Link wieder ein. Mit href verweisen wir jetzt auf die „style.css“.

<link rel=“stylesheet“ href=“style.css“>

Schritt 11

In dem link-Tag können wir ebenfalls über das Attribut media zum Beispiel print wählen, um hier eine extra CSS-Datei zur Print-Optimierung einzubinden.

<link rel=“stylesheet“ href=“style.css“ media=“print“>

Schritt 12

Screen wäre jetzt der Standard für Desktop-Computer oder …

handheld zum Beispiel für Mobilgeräte.

Schritt 13

Das sind allerdings nicht die Media Queries, die wir benötigen, um hier eine Entwicklung für Responsive Webdesign durchzuführen. Die Media Queries, die wir benötigen, die sehen etwas anders aus. Die schreibe ich wieder direkt in die CSS-Datei und beginne mit @media screen und den beiden Klammern.

@media screen { }

Schritt 14

Die Besonderheit liegt jetzt in dem Operator and, denn hier kann ich jetzt noch weitere Einschränkungen aufführen. Zum Beispiel möchte ich, dass der CSS-Part hier nur dann angewandt wird, wenn wir ein Gerät haben, das eine Mindestweite von 800 Pixel hat.

@media screen and (min-width:800px) { }

Schritt 15

Wenn wir mindestens 800 Pixel haben, dann soll die Textfarbe an der Stelle Rot werden. Wir speichern das Ganze, gehen in den Safari zurück und laden einmal neu.

@media screen and (min-width:800px) {
back { color:#f00; }
}

Da hier 1280 in der Weite sind, haben wir die Mindestanforderung erfüllt und das Ganze ist hier in Rot.

Schritt 16

Jetzt soll das Ganze einmal zusammengezogen werden und in diesem Moment unterschreiten wir die 800 Pixel und dann springt das Ganze auf den Braunton, den wir hier standardmäßig definiert haben.

Schritt 17

Jetzt ist die Frage: Wie nutzen wir das jetzt für unser Layout? Das ist eigentlich ganz einfach; wir werden sagen, wenn wir ein Gerät haben, das eine Maximalgröße oder Maximalweite von unserem Wrapper hat, also quasi ab dem Moment, wo sich das Ganze zusammenschiebt. Unser Wrapper hat 944 Pixel + 20 Pixel padding an jeder Seite, also insgesamt 984 Pixel. Diese 984 Pixel tragen wir unten ein, belassen das jetzt erst noch mal hier bei der Textfarbe Rot, laden im Browser noch mal neu und schieben das Ganze zusammen.

@media screen and (max-width:984px) {
back { color:#f00; }
}

Schritt 18

Genau an dem Scheitelpunkt, wo der Wrapper quasi kleiner wird, bricht das Ganze in Rot um.

Schritt 19

An der Stelle muss jetzt natürlich unsere Überschrift verkleinert werden. Hier können wir 3.5 em verwenden und …

@media screen and (max-width:984px) {
.mainContent h2 { font-size:3.5em }
}

… jetzt springt die Überschrift um.

Schritt 20

Allerdings haben wir hier noch etwas Spielraum durch den Abstand, das heißt, wir werden den Wert 984 noch etwas verkleinern, gehen hier auf 964.

@media screen and (max-width:964px) {
.mainContent h2 { font-size:3.5em }
}

Schritt 21

Wir müssten theoretisch das Ganze an der Stelle noch weiter verkleinern.

Schritt 22

Letztendlich könnte man hier immer wieder verschiedene Angaben nutzen, am einfachsten wäre es jedoch, wenn wir uns hier auf gewisse Standards festlegen.

Das heißt zum Beispiel: Gehen wir davon aus, dass wir hier einen User haben, der die Seite mit dem iPad öffnet.

Das iPad hat eine Auflösung von 1024×768. Das heißt, im Querformat mit 1024 wäre das Ganze überhaupt kein Problem. Bei 768 schon eher, also tragen wir jetzt einmal diese 768 Pixel ein.

@media screen and (max-width:768px) {
.mainContent h2 { font-size:3.5em }
}

Schritt 23

Wir wechseln zurück in den Browser und testen durch das Zusammenziehen, wo denn dieser Schwellenwert genau ist. Hier sieht man das springen, das heißt, hier haben wir unsere 768 Pixel und damit die Darstellung vom iPad.

Schritt 24

Anhand dieser Information können wir das Ganze jetzt etwas anpassen. Wir passen die Schrift mit 2.8 em an, die passen genau.

 @media screen and (max-width:768px) {
.mainContent h2 { font-size:2.8em }
}

Schritt 25

Des Weiteren ist das Ganze noch nicht so schön – dass der mainContent und die Sidebar direkt aneinandersitzen, das werden wir auch noch anpassen. Dazu geben wir dem mainContent an der Stelle einfach ein padding. Dieses padding könnten wir jetzt direkt bei @media screen mit rein schreiben, aber das macht aber mehr Sinn das generell für alle Geräte festzulegen. Denn wenn wir zum Beispiel den Aufruf durch ein Gerät haben, was durch unser Raster durchfallen sollte, dann ist zumindest diese Grundanpassung beziehungsweise die Basis von dem zusammenschieben und dem Fluid Content gegeben und wir haben auch diesen Abstand bei den Geräten, wie gesagt, die durch das Raster durchfallen.

Wir fügen also ein padding-right von 20 Pixel dem mainContent hinzu, gehen auf die Seite und laden einmal neu.

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

Jetzt haben wir hier immer einen entsprechenden Abstand.

Schritt 26

Hier hätten wir jetzt die iPad-Auflösung und so passt das mit der Schrift wesentlich besser.

Schritt 27

Was man jetzt noch optimieren könnt, ist Folgendes: Wenn das iPad so gehalten wird, natürlich nicht allzu viel Platz auf dem Display, weshalb wir das Ganze noch ein klein wenig schmaler setzen. Wir können zum Beispiel Kaffee am Meer kleiner setzen und die Abstände ein wenig reduzieren. Natürlich nicht zu viel, denn die Elemente brauchen natürlich auch entsprechend Luft, um nicht zu gequetscht auszusehen.

Schritt 28

Dafür gehen wir in den Wrapper rein, padding-top, nehmen hier 30 Pixel und haben das Ganze dadurch etwas schmaler gemacht.

@media screen and (max-width:768px) {
.wrapper{ padding-top:30px; }
.mainContent h2 { font-size:2.8em; }
h1 {font-size:3.5em;}
}

Schritt 29

Wir ziehen den Browser auf die volle Weite:

… und hier haben wir den Umbruch mit den Anpassungen für das iPad.

Schritt 30

Das Ganze geht natürlich noch weiter, denn wir haben auch noch Smartphones, das iPhone zum Beispiel. Hier können wir auch wieder mit den Media Queries arbeiten, dazu brauchen wir erst mal die Information, wie denn das iPhone überhaupt auflöst beziehungsweise, über welche Auflösung es verfügt.

Wir legen uns einen weiteren Media-Container an und die Auflösung vom iPhone liegt bei 480×320.

@media screen and (max-width:480px) { }

Schritt 31

Beim iPhone kommen wir mit den normalen Anpassungen beziehungsweise mit diesen sehr einfachen Anpassungen, die wir beim iPad oder generell für Tablet-Computer gemacht haben, nicht mehr ganz hin.

Hier müssen wir das Ganze wesentlich mehr anpassen. Dabei optimieren wir jetzt ganz einfach von oben nach unten. Das heißt, wir beginnen mit der Navigation, und zwar werden wir das in der Navigation jetzt so halten, dass die Navigationspunkte nicht mehr nebeneinandersitzen, sondern untereinander.

Dazu gehen wir über nav li und setzen das Ganze von display inline auf display block.

@media screen and (max-width:480px) {
nav li { display:block; }
}

Schritt 32

Wir ziehen das Fenster jetzt zusammen und kommen hier mit dem Zusammenschieben allerdings nicht auf die 480 Pixel.

Schritt 33

Das heißt, ab jetzt brauchen wir die Hilfe eines kleinen Simulators. Hierzu benutze ich den iPhone Simulator aus Xcode, der Entwicklungsumgebung von Apple. Ich lege mir ein neues Projekt an.

Was wir hier auswählen, ist völlig egal, wir wollen nur an den Simulator ran.

Schritt 34

Was wir hier ausfüllen, ist auch völlig egal.

Wir speichern den Ordner auf dem Desktop.

Schritt 35

Den Simulator können wir ganz einfach über den Run-Button starten. Vorher auf iPhone umschalten …

Enable …

Alle Verbindungen>Für immer>Erlauben:

Schritt 36

… und dann startet der Simulator. Wir kehren jetzt aus der gerade erstellten App zurück …

… und starten den Safari.

Nur Port 443 TCP (https)>Für immer>Erlauben:

Schritt 37

Da ich hier im mobilen Safari in dem iPhone Simulator lediglich Webseiten aufrufen können, die auch online verfügbar sind, habe ich unsere Testseite „Kaffee am Meer“ bereits auf einen entsprechenden Testwebspace hochgeladen.

Die URL füge ich jetzt einfach hier ein …

http://cdn.webdesign-podcast.de/kaffee-am-meer/

… und wir rufen die Seite auf und sehen, dass die Änderungen, die wir gemacht haben, keinerlei Auswirkungen haben.

Schritt 38

Die Navigation ist zwar umgebrochen, das hat aber nichts mit unserem eigentlichen Display block an der Stelle hier zu tun.

Schritt 39

Es hat einen relativ einfachen Grund, warum das Ganze hier nicht übernommen wird. Auf den ersten Blick ist zu erkennen, dass das Layout relativ weit ist und es macht den Eindruck, und das kann ich auch bestätigen, dass es weiter ist als die 480 Pixel und auch weiter als die 768 Pixel.

Schritt 40

Denn das iPhone passt sich automatisch der Größe der Webseite an. Das heißt, wir müssten, um dieses zu verhindern, an der Stelle entweder einen entsprechenden Meta-Tag in die HTML-Datei mit einbauen. Bei diesem Meta-Tag wird quasi die Viewport-Angabe gelöst und da würden wir festlegen, dass die Weite des Browserfensters, also des Viewports, auch gleich die Device-Weite ist.

Eine andere Möglichkeit wäre, dass wir unseren Media Query etwas modifizieren. Das werden wir jetzt auch als Erstes machen. Erst einmal ergänzen wir die Schreibweise um das only, die etwas sicherer ist und quasi so auch zum Standard gehört, das ist aber nicht zwangsweise erforderlich.

@media only screen and (max-width:768px) {
.wrapper{ padding-top:30px; }
.mainContent h2 { font-size:2.8em; }
h1 {font-size:3.5em;}
}

@media only screen and (max-width:480px) {
nav li { display:block; }
}

Schritt 41

Was jetzt an dieser Stelle viel wichtiger ist, ist, dass wir das max-width durch max-device-width ersetzen, speichern. Zusätzlich können wir hier die Schriftfarbe noch einmal auf Rot setzen, dann sind die Änderungen sofort sichtbar und die style.css muss in dem Fall auch wieder auf den Webspace hochgeladen werden.

@media screen and (max-width:480px) {
nav li { display:block; }
body { color:#f00; }
}

Schritt 42

Jetzt habe ich hier im Simulator neu geladen und jetzt wird alleine durch diesen Zusatz von device der Media Query auch angewandt.

Schritt 43

Problem bei der ganzen Geschichte ist natürlich, dass, wenn wir das Ganze mit dem device-Parameter erweitern, es dann funktioniert nicht mehr, wenn wir zum Beispiel einen Desktop-Browser klein ziehen, weil die eigentliche device-Größe in dem Fall die Bildschirmgröße an sich ist beziehungsweise die Auflösung, und das Fenster klein gezogen werden kann, wie wir wollen, da hat es an der Stelle einfach keine Auswirkung.

Ein Beispiel für device-width selber ist die Seite Webdesign Podcast. Da ist das Ganze mit dem entsprechenden Meta-Tag gelöst worden. Wir gehen auf eine neue Seite und …

… geben http://webdesign-podcast.de/ ein.

Schritt 44

Hier haben wir jetzt die entsprechende mobile Ansicht.

Schritt 45

Funktioniert auf dem iPhone eben durch diesen Meta-Tag und wir können sie auch im Browser direkt aufrufen, und …

… wenn ich die Seite jetzt zusammenziehe, dann sieht man hier die verschiedenen Abstufungen.

Schritt 46

Da diese Variante natürlich wesentlich effektiver ist als die über die Device-Weite, werden wir hier an der Stelle auch mit dem entsprechenden Meta-Tag arbeiten. Ich zeige einmal den Quelltext an, und der Meta-Tag, von dem ich rede, ist meta-name viewport.

<meta name=“viewport“ content=“width=device-width, initial-scale=1.0, user-scalable=yes“ />

Schritt 47

Den kopieren wir jetzt einmal und setzen ihn in der index.html in unser eigenes HTML-Dokument.

Schritt 48

Was wird jetzt hier bei diesem Meta-Tag eingestellt? Ich habe es vorhin schon mal ganz kurz beschrieben, es handelt sich hier um die Angabe des Viewports und die Weite der Seite wird auf die Device-Weite gesetzt. Wir haben hier einen initital-scale, das heißt, die Seite ist nicht rangezoomt. Wir haben hier quasi einen Zoomfaktor von 1.0 der ganz normalen Darstellung und dem User ist es erlaubt, die Seite auf Wunsch selber zu zoomen. Man könnte hier auch no einsetzen, dann hätte der Benutzer auf iOS-Geräten nicht die Möglichkeit, selber zu zoomen.

<meta name=“viewport“ content=“width=device-width, initial-scale=1.0, user-scalable=yes“ />

Schritt 49

Mit diesem Parameter ist jetzt auch hier device nicht mehr erforderlich, das können wir rausnehmen.

Schritt 50

Wir speichern das Ganze und laden die Dateien wieder auf den Webspace.

Schritt 51

Ich schließe jetzt diesen Tab …

… und lade die Testseite neu.

Schritt 52

Wir sehen jetzt sofort die Veränderung: Der Text ist weiterhin rot und die Weite wurde angepasst.

Schritt 53

Das ist im Prinzip genau die Darstellung, die wir jetzt haben wollen beziehungsweise brauchen. So ist hier natürlich noch alles durcheinander und muss angepasst werden.

Aber was hier ganz gut zu sehen ist, ist unter anderem durch die em-Angaben die Anpassung der Schriftgröße.

Schritt 54

Wir gehen wieder zurück in den Dreamweaver und werden jetzt die entsprechenden Änderungen vornehmen. Wir beginnen an der Stelle mit der Navigation, wir fügen jetzt zwischen nav und li noch ul mit ein.

nav ul li { display:block; }

Schritt 55

Das machen wir aus dem einfachen Grund, da sonst hier der obere Bereich höherwertig ist und weiterhin das display inline angewandt wird.

Schritt 56

Dann setzen wir die li-Weite auf 100%, genauso wie den ul selber,

nav ul { width:100%; }
nav ul li { display:block; width:100%; }

… damit quasi hier oben die 520 Pixel überschrieben werden.

Schritt 57

Dann passen wir den Link selber an; hier soll jetzt alles zentriert sein, also text-align:center.

nav ul li a { text-align:center; }

Schritt 58

Wir speichern das Ganze, laden es hoch und sehen uns die ersten Änderungen im Simulator an. So sieht das Ganze aktuell aus und von dem Zentrierten ist aktuell noch nicht so viel zu sehen.

Schritt 59

Das liegt daran, dass der li selber natürlich ein display inline-Element ist, das heißt, nur die Größe hat, die auch der Text in dem Link selber zur Verfügung steht. Das heißt, auch dieser muss auf display block gesetzt werden.

nav ul li a { text-align:center; display:block; }

Schritt 60

Und dann haben wir das Ganze hier zentriert.

Schritt 61

Damit haben wir dann im Prinzip die Navigation fertig; um jetzt hier dem Problem vorzubeugen, dass man, wenn man mal etwas größere Finger hat, hier die Links nicht richtig trifft, benötigen wir hier noch einen etwas größeren Abstand.

Wir können einfach in das li-Element reingehen und sagen jetzt padding oben und unten vier Pixel, links und rechts null.

nav ul li { display:block; width:100%; padding:4px 0; }

Schritt 62

Das sieht dann so aus, passt soweit schon mal ganz gut. Sieht auch von der Gesamtoptik ganz nett aus, man ruft die Seite auf, hat oben das Logo und darunter quasi die Navigation.

Schritt 63

Wenn man weiter runterscrollt, geht es mit der eigentlichen Seite los. Was hier in dieser Optik verloren aussieht, ist das Header-Banner. Zum einen, weil es relativ klein ist, und zum anderen, weil man es hier nicht richtig zuordnen kann.

Schritt 64

Wir müssen uns überlegen, ob wir es komplett ausblenden oder an eine andere Stelle positionieren. In dem Fall hier werden wir es einfach komplett ausblenden. Es befindet sich im Header-Bereich, also header display none, speichern und hochladen.

header { display:none; }

Schritt 65

Und damit ist der Header quasi gegessen.

Schritt 66

Als Nächstes widmen wir uns jetzt allem anderen, das heißt, hier dem eigentlichen Content-Bereich.

Schritt 67

Damit wir hier ordentlich arbeiten können, blenden wir als Nächstes einmal die Sidebar aus, weil sich hier quasi alles überlagert. Das machen wir jetzt nur in der Entwicklungsphase, um uns eine bessere Übersicht zu verschaffen.

.sidebar { display:none; }

Schritt 68

Hier haben wir jetzt den eigentlichen Content-Bereich, der sich hier anpasst, …

Schritt 69

… also hier mainContent. Den setzen wir jetzt auf eine Weite von 100%.

.mainContent { width:100%; }

Schritt 70

Speichern und hochladen. Es sieht dann so aus:

Schritt 71

Die Schrift soll jetzt wieder die normale Farbe haben, also hier das body { color:#f00; } wieder raus.

Schritt 72

Dann können wir die Überschrift selber noch mal anpassen, die machen wir von der Schriftgröße in dem Fall etwas kleiner.

Schritt 73

Wir versuchen das hier mit 2.6em.

.mainContent h2 { font-size:2.6em; }

Schritt 74

Und so gliedert sie sich schon ein bisschen besser ein. Einen Tacken ist sie kleiner geworden und das sieht so schon ganz gut aus.

Schritt 75

Als Nächstes kommt die Sidebar, die blenden wir jetzt wieder ein.

.sidebar { }

Schritt 76

Die sitzt jetzt hier quasi oben drüber. Was jetzt hier als Erstes ins Auge sticht, ist der Abstand zum unteren Bereich, beziehungsweise zu der Überschrift der eigentlichen Startseite.

Schritt 77

Der muss an der Stelle also erhöht werden, das können wir hier ganz einfach mit einem padding machen. Probieren wir das als Erstes mal mit 40 Pixel.

.sidebar { padding-bottom:40px; }

Schritt 78

Wir laden einmal neu und so schaut das Ganze schon wesentlich besser aus.

Schritt 79

In dem Fall würde ich an der Stelle eine Ausnahme machen und sagen, wir lassen die Spezialitäten ganz oben. Im Normalfall hätte ich jetzt gesagt oder wäre der Meinung, die Sidebar wird unter den Hauptcontent gesetzt, da es sich aber in diesem Fall um Spezialitäten handelt und wenn wir davon ausgehen, jemand ist unterwegs z.B. in der Nähe von diesem Kaffee am Meer und sucht jetzt in irgendeiner beliebigen Suchmaschine zum Beispiel nach einem netten Kaffee, logischerweise am Meer, wo man sich nett hinsetzen kann, dann sind hier die Spezialitäten vielleicht interessanter als die allgemeinen Informationen der Startseite. Deswegen: In diesem Sonderfall kann man das Ganze hier oben belassen, auch das sind so konzeptionelle Gedanken, die man sich halt beim Aufbau einer Webseite im Responsive-Webdesign-Stil machen muss.

Und das Ganze jetzt noch etwas deutlicher zu machen beziehungsweise, wenn man auf Startseite klickt, würde ich hier an der Stelle noch etwas ändern. Zwar nur eine Kleinigkeit, aber sie sollte geändert werden. Und zwar gebe ich hier dem h2 die ID maincontentheading.

<h2 id=“maincontentheading“>Besuchen Sie uns in Musterstadt</h2>

Schritt 80

Und diese ID setze ich jetzt hier oben bei der Startseite mit ein.

<li><a href=„index.html#maincontentheading“>Startseite</a></li>

Schritt 81

Das Ganze wird gespeichert und hochgeladen, und wenn wir jetzt hier in der Hauptnavigation der Seite auf Startseite klicken, dann wird die entsprechende Sprungmarke aufgerufen und wir kommen nach unten.

Schritt 82

Hier landen wir jetzt bei Unsere Spezialitäten, das ist so natürlich nicht gewollt.

Schritt 83

Das lässt sich aber ganz einfach beheben, und zwar müssen wir im Bereich Sidebar das float auf none setzen.

.sidebar { padding-bottom:40px; float:none; }

Schritt 84

Wir laden das wieder hoch. Zurück in den Simulator und direkt beim Neuladen, da die Sprungmarke noch aktiv war, springen wir hier zum eigentlichen Hauptcontent. Mit einem Klick auf Startseite kommen wir jetzt direkt zum Hauptcontent und überspringen quasi die Spezialitäten.

Schritt 85

So kann man hier durch einfaches Runterscrollen im ersten Bereich die Spezialitäten sehen. Dadurch, dass wir hier das Icon noch mit drinhaben, wirkt das Ganze auch gleich etwas netter und darunter kommt dann der eigentliche Hauptcontent.

Schritt 86

In dem Fall würde ich das Ganze noch etwas mehr unterteilen, und zwar mit einem kleinen Abschluss, also quasi einer Linie. Die bekommt dieselbe Farbe wie die Schrift auch. Die Linie muss jetzt natürlich noch etwas angepasst werden, und wenn wir schon dabei sind, dann könnte man diese Linie oben und unten um die Spezialitäten ziehen.

.sidebar{padding-bottom:20px;margin-bottom:20px;float:none;border-bottom:1px solid #381d11; border-top:1px solid #381d11;}

Schritt 87

Damit haben wir die Spezialitäten selber noch mal extra hervorgehoben als eigenen Bereich.

Schritt 88

Und damit sind wir an der Stelle auch schon so gut wie durch, denn so einfach kann man hier die entsprechenden Seiten optimieren. Jetzt wechseln wir noch einmal in den Safari, laden die Seite hier neu und können uns hier die Schritte, die wir durchgeführt haben, genau anschauen.

Wir schieben das Ganze zusammen, hier kommen wir jetzt in den allgemeinen fließenden Bereich unseres Layouts.

Schritt 89

Hier haben wir die Optimierung für das iPad …

Schritt 90

… und ganz zum Schluss springen wir hier in den Bereich für iPhone und Smartphones generell.

So einfach lassen sich mit Media Queries Webseiten im Responsive-Webdesign-Stil erarbeiten.

Bildquellen: Fotolia © alder #14697790, 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