Responsive Webdesign Tutorial - so baut man responsive Webseiten

Die Übersetzung dieses Tutorials ist momentan leider noch nicht optimal und wird nach und nach verbessert. Du kannst alternativ die englische Version lesen.

Im zweiten Teil des Tutorials werden wir den CSS-Code erstellen und die Webseite responsive machen. Falls Ihr den ersten Teil des Tutorials, in dem der Aufbau der HTML-Struktur und das Einbinden der benötigten Skripts erklärt wird, noch nicht gelesen habt, solltet Ihr dies tun bevor Ihr mit dem zweiten Teil anfangt.

Wir haben ja bereits im letzten Teil unseren CSS Reset eingebunden. Der Reset sorgt dafür, dass wir keine vorgegebenen Stylings für HTML-Elemente haben, die in jedem Browser unterschiedlich ausfallen können. Wir können nun also anfangen unsere Seite von Grund aus aufzubauen, müssen aber natürlich darauf achten, dass z.B. Paragraphen nicht mehr automatisch einen vom Browser vorgegebenen Innenabstand haben und wir somit jeden Wert selbst definieren müssen.

Erstellen des Stylings – Definieren der globalen Regeln

Wenn wir ein Stylesheet erstellen, ist es wichtig mithilfe von Kommentaren die Datei in verschiedene Bereiche einzuteilen. Der erste Bereich ist der globale oder generelle Bereich, in dem wir generelle Stylings einfügen, die auf der ganzen Webseite verwendet werden und sich im Allgemeinen nicht verändern. Das erste Element, das wir stylen, ist das body-Element. Wie Du auf der Webseiten-Vorschau sehen kannst, soll die Seite einen orangenen Streifen am oberen Rand erhalten. Dieser Streifen wird durch einen 5px dicken Rand dargestellt, den wir in unserer Regel für das body-Element definiert haben. Lass uns außerdem unsere Hintergrundfarbe sowie die allgemeine Schriftart und -farbe festlegen.

body {border-top: 5px solid #e56038; background: #ebe8de; font-family: 'Open Sans', sans-serif; color: #333333;}
Als nächstes stylen wir unsere Eingabefelder. Da wir möchten, dass die Eingabefelder auf allen Seiten der Webseite gleich aussehen, positionieren wir die Regel hierfür ebenfalls in den globalen Bereich unserer CSS-Datei. In unserem Webseiten-Beispiel haben wir nur zwei verschiedene Arten von Eingabefeldern: ein Eingabefeld vom Typ “text” und eines vom Typ “submit”. Aus diesem Grund werden wir eine generelle Regel definieren, die auf alle unterschiedlichen Typen von Eingabefeldern angewendet wird und eine zweite nur für den Submit-Button.

input {font-family: 'Open Sans', sans-serif; font-size:16px; padding: 7px; outline: 0; border:0; width:250px; background: #EBE8DE; border-radius:5px;} input[type=submit] {width:auto; padding: 5px 18px; line-height:25px; text-shadow:none; cursor:pointer; box-shadow: none; background: #333333; color: #fff;}

Als nächstes lasst uns die Regeln für unsere Absätze (paragraphs) und Anker (anchors) hinzufügen. Da wir alle Stylings mit dem Einsatz der Reset-CSS entfernt haben, müssen wir nun den Außenabstand (margin) beziehungsweise den Innenabstand (padding) sowie den Zeilenabstand (line-height) für die paragraphs manuell festlegen. Die Anker sollen ihre Schriftfarbe vom ursprünglichen Element vererben und dann von einer zur anderen Farbe wechseln, wenn man sie ausblendet. Um das zu erreichen, benutzen wir das CSS3-Feature transition (mehr Informationen zu transitions findet ihr auf meinem Blog). Nachdem wir alle vordefinierten CSS-Auszeichnungen entfernt haben, müssen wir auch klären wie mit besonders wichtigen Textstellen umzugehen ist. In unserem Fall sollen sie fett ausgezeichnet werden.

p {margin: 5px 0; line-height: 25px;} a {text-decoration: none; color: inherit; transition: color .5s ease;} strong {font-weight: bold;}
Im generellen Abschnitt der CSS-Datei bleiben nun noch drei Regeln. Die erste ist die Regel für unser Bildunterschriften-Element (figcaption). Wie im vorangegangenen Teil des Tutorials erwähnt, ist figcaption – in Verbindung mit dem figure element – nützlich, um Bilder oder Diagramme zu erläutern. In unserer Website wird das figure -Element für unsere vier kleinen Bilder gebraucht. Um die Titelzeile der Bildlegende ein bisschen mehr zu unterstreichen und eine Linie zwischen Legenden-Titel und -Text einzufügen, werden wir nun innerhalb des figcaption-Element eine CSS-Regel für unser strong-Element ergänzen.

figcaption {line-height: 25px; font-size:14px; width:200px;} figcaption strong {border-bottom: 1px solid #D6D0C1; padding-bottom:10px; margin: 10px 0; display:block;}

Das Styling entwickeln – Definieren der Abschnittsregeln

Nachdem wir nun die generellen CSS-Regeln festgelegt haben, können wir damit beginnen, die Regeln für die verschiedenen Sektionen auf unserer Website von oben nach unten festzulegen. Um unsere Website responsiv zu machen – sie also an die verschieden großen Displays der Endgeräte anzupassen – werden wir die width-Eigenschaft auf auto setzen und eine max-width von beispielsweise 900px für jede Sektion unserer Website definieren. So erreichen wir, dass die Sektionen eine Breite von 900px beibehalten, wenn das Browser-Fenster größer ist. Wenn die Browser-Breite kleiner als 900 px ist, wird die Breite der Sektionen sich automatisch anpassen und die volle Breite einnehmen.

Wenn wir die Sektionen horizontal zentrieren wollen, müssen wir die margin-right– und margin-left-Eigenschaft auf auto setzen (ein Beispiel gibt es hier). Das Zentrieren von Elementen auf diese Weise wird zwar im Internet Explorer 5 nicht unterstützt, aber wer nutzt heutzutage schon noch den IE5… Möchtest Du diesen Browser trotzdem unterstützen, könntest Du alternativ für das body-Element text-align auf center setzen.

Lasst uns nun damit beginnen, die Regeln für die verschiedenen Sektionen unserer Website zu entwickeln. Die erste Sektion, die wir auszeichnen wollen, ist unser Kopfbereich (header). Auf einer echten Webseite mit unterschiedlich aussehenden Seiten könnte es sein, dass man verschiedene header-Elemente benötigt. In dem Fall müsstest du dem header eine Klasse oder eine ID geben, um spezielle Regeln für dieses Element festzulegen. In unserem Beispiel, in dem wir nur ein header-Element für die gesamte Webseite verwenden, reicht es, jeweils eine Regel für alle header-Elemente, für alle p-Elemente in header-Elemente sowie die h1-Überschriften innerhalb des header zu setzen.

header { position:relative; width:auto; max-width:900px; margin: 0 auto 20px auto;} header h1 {margin: 35px 0 0 0; font-size: 55px; color: #e56038; font-family: 'Baumans', cursive;} header p {font-family: 'Open Sans', sans-serif; font-size: 16px; color: #4A463B; margin-left:132px;}
In unserer Hauptnavigation benutzen wir das neue HTML5 nav-Element. Da wir die CSS-Eigenschaft position: relative für den header definiert haben, können wir jetzt position: absolute verwenden, um die Navigation in der rechten unteren Ecke unseres header zu positionieren.

Für unsere ungeordnete Liste (unordered list = ul), die alle Navigationslinks als Listenpunkte beinhaltet, wollen wir den vorgegebenen Listen-Stil (der kleine rote Punkt vor jedem Listenpunkt) entfernen. Unsere Listenpunkte sollen nicht untereinander, sondern nebeneinander stehen. Um das zu erreichen, werden wir jeden Listenpunkt fließen lassen (float) und ein padding zuweisen, um die Abstände zwischen den Listenpunkten festzulegen. Für die Anker der Listenpunkte weisen wir den Schrifttyp und die Schriftfarbe zu. Außerdem setzen wir text-transform auf uppercase, um alle Buchstaben in Großbuchstaben zu verwandeln. Zusätzlich wird transition auf 0.25 Sekunden gesetzt und eine Farbe für den Status hover definiert. Auf diese Weise verändert sich die Farbe, wenn die Maus darüber fährt.

nav ul {list-style:none;} nav ul li {display:block; float:left; padding:3px 15px;} nav ul li a {font-family: 'Open Sans', sans-serif; text-transform: uppercase; transition: all .25s ease;} nav ul li a:hover {color: #E56038;}
Als nächstes gestalten wir die Sektion slider-image (vergiss nicht, einen Kommentar in der CSS-Datei einzufügen, um nicht den Überblick zu verlieren). So wie in der Beispiel-Datei des Slider-Skriptes setzen wir die Container-Breite auf auto, um die Bildgröße der Browser-Breite anzupassen. Das div “slides” muss mittels CSS versteckt werden, weil es im Slides-Skript sichtbar gemacht wird. Ergänze auch einen Rahmen (border) zum div mit der class “slidesjs-container”, um zu verhindern, dass die Slideshow beim Laden startet. Unser Slider-Inhalt wird im Slider-Container absolut positioniert und bekommt einen z-index höher als die des Containers. So legt sich der Text über die Bilder (und nicht andersherum). Da wir nur slider_content1 während des Ladevorgangs der Seite zeigen wollen, setzen wir display auf none für alle Boxen außer slider_content1.

#slider_content1, #slider_content2, #slider_content3 {line-height: 25px; font-family: 'Open Sans', sans-serif; width:350px; position:absolute; top:15%; left:15%; display:none; z-index:11;} #slider_content1 {display:block;} .container {width:auto; margin: 0 auto; position:relative;}

Nachdem wir jetzt einen Wrapper für unseren Slider-Inhalt erstellt haben, können wir die Überschriften und Paragraphen innerhalb von slider_content1, slider_content2 und slider_content3 gestalten. Um den Effekt zweier abgerundeter Rahmen zu bewirken, füge einfach 0 für die Seiten ein, die in der Eigenschaft border-radius nicht abgerundet werden sollen. Die Reihenfolge für die Werte innerhalb dieser Eigenschaft ist oben-links, oben-rechts, unten-rechts, unten-links.

Für die Eigenschaft display wählen wir inline-block. So werden die Überschriften zwar inline dargestellt, es lässt uns aber die Möglichkeit offen, sie als Block-Elemente zu stylen (wir können also width, height, margin, padding und so weiter festlegen). Der Vorteil gegenüber dem block-Element ist, dass der schwarze Hintergrund des Titels so breit wie der Text selbst und nicht das umgebende Element ist.

Für die Paragraphen setzen wir den gleichen Innenabstand wie für den Titel, damit diese auf gleicher Höhe beginnen. Wir fügen außerdem einen Außenabstand unten ein, um einen Abstand zwischen Paragraph und “Read more”-Button zu erhalten. Außerdem kannst du einen kleinen border-radius verwenden, um den Rahmen des Absatzes ein wenig rund darzustellen.

#slider_content1 h3, #slider_content2 h3, #slider_content3 h3 {color:#EBE8DE; font-size:25px; font-weight:bold; margin-bottom:10px; background-color:#333333; padding:10px 15px; border-radius: 15px 0 15px 0; display:inline-block;} #slider_content1 p, #slider_content2 p, #slider_content3 p {margin:0 0 30px 0; color:#4a463b; background-color:#EBE8DE; padding:10px 15px; border-radius: 5px;}

Damit ist der CSS-Teil unserer Slideshow beendet und wir können uns der nächsten Sektion zuwenden, dem orangefarbenen “Raumteiler” (spacer). Wir setzen width auf auto, um die komplette Breite des umgebenden Elements zu füllen (was unser body-Element ist).

Um den Suchtext, der von einem p umschlossen ist, zu positionieren, können wir leider keinen festen prozentualen Wert für die left-Eigenschaft verwenden. Denn dann würde die Suche sich in Abhängigkeit von der Breite des Browsers an verschiedene Positionen bewegen und nicht an einer bestimmten, von uns gewünschten Position stehen. Die Lösung ist, die position im Paragraph auf absolute und die left-Eigenschaft auf 50% zu setzen, so dass der Paragraph in der Mitte des Spacers erscheint. Wenn man jetzt noch einen negativen Wert für margin-left einfügt, rutscht die Suche noch ein bisschen weiter nach links. So steht der Absatz immer an derselben Position, unabhängig davon, wie breit der Browser ist. Mit dem Suchformular verfahren wir in gleicher Weise. Beachte bitte, dass wir die Formular-Elemente nicht mehr gestalten müssen, weil wir das bereits im generellen Styling des globalen Teils der CSS-Datei gemacht haben.

#spacer {width:auto; height:70px; background-color:#e56038; position:relative; font-family: 'Open Sans', sans-serif; color:#fff; font-size:18px;} #spacer p {margin-top:22px; width:auto; position:absolute; left:50%; margin-left:-450px;} #spacer .search {margin-top:15px; width:auto; position:absolute; right:50%; margin-right:-480px;}

Die nächste Sektion enthält drei article, jeweils mit einem Bild, einer Überschrift und einem Paragraphen. Wieder müssen wir die width unseres “boxcontent” auf auto setzen, damit die Sektion die volle Breite des Browser einnimmt. Außerdem definieren wir wieder eine max-width, um die Breite nach oben zu begrenzen. Um die Sektion zu zentrieren, nutzen wir erneut ein margin: 0 auto. Um einen kleinen Abstand nach oben und unten zu schaffen, setzen wir ein padding. Weil wir die article nebeneinander positionieren wollen, fügen wir einen float nach links hinzu, geben ihm eine festgelegte Breite und schaffen einen kleinen Zwischenraum, indem wir margin-right setzen. Innerhalb der article lassen wir das Bild nach links fließen, so dass sich der Text rechts daneben positioniert und nicht unter dem Bild. Die Überschrift befindet sich jetzt rechts vom Bild, aber der Text, der im Paragraph enthalten ist, wird nur so lange neben dem Bild bleiben, so lange das Bild auch da ist. Sobald der Text die Höhe des Bildes übersteigt, wird er an der linken Seite unter dem Icon weiter laufen. Um das zu verhindern, müssen wir ein margin-left für den paragraph definieren, damit er horizontal in einer Linie mit der Überschrift steht.

#boxcontent {width:auto; max-width:900px; margin:0 auto; padding:70px 0 45px 0;} #boxcontent article {float:left; width:250px; margin-right:45px; font-size:14px;} #boxcontent article h3 {font-family: 'Open Sans', sans-serif; font-size:20px; margin-bottom:10px; margin-left:75px;} #boxcontent article img {float:left;} #boxcontent article p {line-height:25px; font-family: 'Open Sans', sans-serif; margin-left:75px;}

Für die nächsten beiden Sektionen werden wir zwei Regeln kombinieren, um sie nicht zwei Mal schreiben zu müssen. Sowohl für die Sektion „four_columns“ als auch für die Sektion „text_columns“ setzen wir Schrift, Zeilenabstand, Breite und so weiter. Außerdem müssen wir das Styling der h2- und h3-Überschriften bearbeiten.

#four_columns, #text_columns {line-height:25px; font-family: 'Open Sans', sans-serif; width:auto; max-width:900px; margin:0 auto;} #four_columns h2, #text_columns h3 {font-size:20px; border-bottom: 1px solid #D6D0C1; padding: 20px 0; margin-bottom: 20px;}

Wie gerade eben in der letzten Sektion lassen wir auch die Artikel in “four_columns” fließen, damit sie sich nebeneinander positionieren. Den Hover-Effekt beim Überfahren der Thumbnails erreichen wir, indem wir zunächst display auf block für die Anker innerhalb unseres Artikels setzen. Wir möchten sie als Block-Elemente darstellen, damit sie ihre eigene Größe an die Größe der Elemente in ihnen anpassen können und die volle Höhe und Breite der Thumbnails ausfüllen. Auch setzen wir position auf relative, damit wir das span-Element “thumb_screen” absolut positionieren können. Dieses span-Element wird oben auf dem Bild angezeigt und zeigt ein kleines Zoom-Icon und einen schwarzen Hintergrund beim Mouse-Hover. Wir müssen es absolut positionieren, damit es über dem Bild liegt. Mit einer relativen Position würde das span-Element unter dem Bild liegen. Für den halbtransparenten Hintergrund setzen wir die Hintergrundfarbe (background color) auf schwarz und fügen das Zoom-Icon als vertikal und horizontal zentriertes Hintergrundbild hinzu. Anschließend setzen wir die opacity auf 0 und verbergen so standardmäßig das span-Element. Damit das span-Element sichtbar werden kann, verwenden wir das schon bekannte CSS3-Feature transition (mehr dazu in meinem anderen Blogpost) für die Eigenschaft opacity. Im Hover-Status des span-Elements setzen wir die opacity auf 0.5. So erreichen wir eine Transparenz von 50 Prozent, wenn die Maus darüber fährt.

#four_columns .img-item {float:left; margin-right:25px;} #four_columns .img-item a {position:relative; display:block;} .thumb-screen {display:block; position:absolute; top:0; left:0; width:100%; height:113px; background: #000 url(img/zoom.png) center center no-repeat; z-index:99; opacity: 0; transition: opacity .5s ease;} .thumb-screen:hover {opacity:0.5;}

Die nächste Sektion besteht aus zwei Spalten, einem article und einer section, die nebeneinander fließen. Jede der beiden Spalten sollte etwa die Hälfte der Webseiten-Breite von 900px haben. Um die zweite Spalte nach unten zu schieben, damit sie vertikal zentriert zur ersten Spalte steht, definieren wir ein margin. Die Sektion “column2” enthält zwei article, die beide eine relative Position haben sollten. So können Raketen- und Wecker-Icons absolut positioniert werden.

#text_columns article.column1, #text_columns .column2 {margin: 70px 0; font-size:14px; float:left; width:450px;} #text_columns .column2 {margin: 120px 0;} .row {position:relative; margin: 40px 0 0 50px; float:right; width:350px;}

Als kleines Gimmick wollen wir jetzt die CSS-Animation bauen, die startet, wenn man mit der Maus über Rakete und Wecker fährt. Ob das nun ein nützliches Feature ist, hängt von deiner Seite ab und davon, was du mit der Animation bezweckst. Beachte bitte, dass CSS-Animationen nicht von jedem Browser unterstützt werden und in einigen Fällen zu einem unerwarteten Verhalten führen (zum Beispiel könnte die Rakete in einigen Browsern verschwinden, wenn man mit der Maus darüber fährt).

Wir wollen die Rakete nach oben rechts fliegen und verschwinden lassen, wenn man mit der Maus darauf kommt. Also setzen wir die opacity auf 0 bei Mousehover und definieren eine transition für die opacity. Wir wollen die Rakete innerhalb von 0.4 Sekunden nach einer Verzögerung von 0.2 Sekunden verschwinden lassen. Das erreichen wir, indem wir delay als letzten Wert in der transition-Eigenschaft einsetzen. Damit wir jetzt die Rakete bei Mausberührung verschwinden lassen können, müssen wir den Animationspfad einrichten. Weil wir uns ersparen wollen, alle Keyframes manuell zu setzen, verwenden wir das Tool Stylie, um den Weg von der linken unteren zur rechten oberen Ecke festzulegen. Kopiere einfach den CSS-Code, der von dem Tool in der Klasse “stylie” produziert wird, in die rocket:hover-Regel. Dann lege eine neue Sektion „keyframes“ am Ende deiner CSS-Datei an, in der du die Keyframe-Regel einfügst (der Teil, der startet mit “@keyframes stylie-transform-keyframes”). Möglicherweise musst du die translateX– oder translateY-Eigenschaft anpassen, damit der Startpunkt der Rakete mit dem Raketen-Icon übereinstimmt. Probiere einfach verschiedene Werte aus, bis es realistisch aussieht. Außerdem musst Du den Wert für animation-iteration-count auf 1 setzen, weil sonst die Animation nur einmal funktioniert und die Rakete nicht unendlich fliegt.

Die Animation des Uhren-Icons soll aussehen wie ein Wecker, der gerade klingelt. Das erreichen wir, indem wir wieder Stylie verwenden. Allerdings kreieren wir diesmal einen horizontalen Weg und setzen animation-duration auf über 100ms. Anschließend setzen wir animation-iteration-count auf infinite, damit der Wecker endlos klingelt. Beachte bitte, dass wir den Namen der Keyframe-Regel ändern müssen, weil der Name “stylie-transform-keyframes” schon für die Raketen-Keyframes belegt ist.

.rocket:hover {opacity:0; transition: opacity 0.4s ease 0.2s; animation-name: stylie-transform-keyframes; animation-duration: 700ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 0 0;} .clock:hover {animation-name: stylie-transform2-keyframes; animation-duration: 100ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: 0 0;}

/* KEYFRAMES */

@keyframes stylie-transform-keyframes
{0%
{transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);
animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
100%
{transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}}

@keyframes stylie-transform2-keyframes
{0%
{transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);
animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
100%
{transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}}

Wir haben das Fußende, den Footer unserer Website erreicht. Weil der Footer die volle Breite des body-Elements und eine festgelegte Höhe haben soll, setzen wir die Breite auf auto und definieren einen Wert für die Höhe. Daneben müssen wir wieder position:relative ergänzen, um später die Position der copyright-Sektion am Ende des Footers korrekt setzen zu können.

Innerhalb des Footers haben wir eine weitere Sektion mit der Klasse “wrapper”, die ebenso wie die anderen Sektionen unserer Website ein width: auto und eine max-width von 900 px haben muss. So stellen wir sicher, dass der Footer-Inhalt seine Breite an die Browser-Breite anpasst.

Die drei Spalten innerhalb des Footers sollen nebeneinander stehen. Also „floaten“ wir sie und verleihen der Schrift eine andere Farbe, damit sie auf dem dunklen Hintergrund zu erkennen ist. Die mittlere Spalte besteht aus verschiedenen Listenpunkten und einem kleinen Pfeil-Icon. Jedem der Listenpunkte wurde ein padding und ein border-bottom hinzugefügt. Um die Listenpunkte etwas herunterzusetzen und ein symmetrisches Aussehen entstehen zu lassen, nutzen wir margin-bottom. Für das Pfeil-Icon fügen wir ein Hintergrundbild ein und positionieren es links und mit 6px vom Kopfende. Weil wir ein padding definiert haben, wird der Text das Icon nicht überlappen.

footer {position:relative; clear:both; width:auto; height:350px; background:#333333;} footer .wrapper {line-height:25px; margin: 0 auto; padding-top:30px; width:auto; max-width:900px; font-size:14px;} footer .wrapper .column {font-family: 'Open Sans', sans-serif; color:#ababab; float:left; width:280px; margin-right:20px;} footer .wrapper .column.midlist ul li {width:auto; padding:0 0 10px 25px; margin-bottom:10px; border-bottom: 1px solid #444444; background:url(img/arrowright2.png) left 6px no-repeat;} footer .wrapper .column.midlist ul li a:hover {color:#fff;}

In der rechten Spalte setzen wir display auf block für die span-Elemente innerhalb der Listenpunkte. Der Text in unserem span-Element soll als Block-Element ausgezeichnet werden, damit wir ein margin zwischen dem kleinen Bild und dem Text einfügen können. Für das Bild setzen wir ein float und können es so zum Text positionieren. Nachdem unser span-Element, das den Text enthält, als Block-Element gestaltet ist, müssen wir ein margin-left setzen, das von dem linken Rahmen unseres ul-Elements startet, um so einen Raum zwischen Bild und Text zu schaffen. Für unsere Bilder definieren wir border-color und transition. So erreichen wir, dass der Rahmen seine Farbe ändert, wenn die Maus über das Bild fährt.

Für unsere h4-Überschriften im Footer setzen wir eine Schriftfarbe, die sich deutlich vom Hintergrund abhebt. Und wir definieren eine bottom-border wie wir es schon für die vorangegangenen Überschriften getan haben.

footer .wrapper .column.rightlist ul li {width:auto; margin-bottom:15px;} footer .wrapper .column.rightlist ul li a span {margin-left:95px; display:block;} footer .wrapper .column.rightlist ul li a img {transition: border .25s ease; float:left; border:3px solid #444444;} footer .wrapper .column.rightlist ul li a img:hover {border-color: #5e5e5e;} footer .wrapper .column h4 {font-size: 16px; color: #fff; border-bottom: 1px solid #444444; padding: 0 0 10px 0; margin-bottom: 10px;}

Nachdem wir den Footer erstellt haben, werden wir jetzt noch das Copyright am unteren Ende des Footers einfügen. Wenn du dir den HTML-Code anschaust, siehst du, dass wir da ein div mit der ID “copyright” eingefügt haben. So können wir das Copyright am Ende des Footers absolut positionieren und ihm einen etwas dunkleren Hintergrund geben. Die Breite dieses div soll der Breite unseres Footers entsprechen. Also setzen wir die Breite auf 100%.

In der Copyright-Sektion gibt es ein div mit der Klasse “wrapper”. Hier brauchen wir keine width oder max-width zu definieren, weil das schon in der Regel footer .wrapper geschehen ist. Allerdings müssen wir Schriftfarbe und -typ setzen, ein padding festlegen und die position auf relative setzen, damit wir unsere sozialen Links absolut im Wrapper positionieren können. Das div mit unseren sozialen Links sollte in der rechten Ecke und 25px vom Kopfende unseres Wrappers positioniert werden.

Wenn du dir den HTML-Code anschaust, siehst du, dass für unsere sozialen Links einfach ein Anker um ein Bild gelegt wird. Weil die Links nebeneinander gesetzt werden, müssen wir sie „floaten“ lassen wie wir es inzwischen schon verschiedene Male gemacht haben. Für den Hover-Effekt setzen wir die opacity auf über 30 Prozent und dann auf 70 Prozent oder mehr für den Mousehover. Für die Veränderung der Transparenz von 30 auf 70 Prozent definieren wir eine transition.

#copyright {background: #1D1D1D; height:70px; position:absolute; bottom:0; left:0; width:100%;} #copyright .wrapper {font-family: 'Open Sans', sans-serif; padding-top:25px; color: #5e5e5e; font-size:14px; position:relative;} #copyright .wrapper .social {position:absolute; right:0; top:25px;} #copyright .wrapper .social a {transition: opacity .25s ease; opacity: 0.3; margin-left: 12px; display:block; float:left;} #copyright .wrapper .social a:hover {opacity: 0.7;} #copyright .wrapper a {color: #ABABAB;} #copyright .wrapper a:hover {color: #fff;}

Die nächste Sektion in unserer CSS-Datei habe ich “MISC” genannt. Sie enthält verschiedene Regeln, die nicht unmittelbar zuzuordnen sind. Für unsere Website insgesamt müssen wir zwei Regeln definieren. Im HTML-Code findest du mehrere br mit der Klasse “clear”. Diese sind notwendig, um das Fließen aufzuheben, das die horizontale Positionierung regelt. Versuch einfach mal die Klasse .clear nicht zu definieren und Du wirst sehen, wofür sie gebraucht wird.

Die zweite Regel, die wir noch definieren müssen, gilt den versteckten Überschriften. Wie im ersten Teil dieses Tutorials erwähnt, müssen wir für jede Sektion eine eigene Überschrift verwenden, wenn wir eine saubere HTML-5-Outline schaffen wollen. Es macht allerdings meist wenig Sinn, diese Überschriften auch auf dem Bildschirm auftauchen zu lassen. Deshalb verwenden wir hier die Klasse „hidden“ mit der CSS-Eigenschaft clip.

.clear {clear:both;} .hidden {position:absolute; clip: rect(1px 1px 1px 1px); /* IE6 & 7 */ clip: rect(1px, 1px, 1px, 1px);}

Das Styling entwickeln – Die Seite responsiv machen

Wir haben das Styling unserer Website beendet, und sie sollte jetzt so aussehen wie in der Vorschau. Der einzige Unterschied: Die Webseite, die wir gebaut haben, ist noch nicht vollständig responsiv. Wir haben die width bereits auf auto gesetzt und eine max-width für unsere Sektionen definiert. Allerdings ändert das nur die Breite unserer Sektionen, es kann dennoch zu falschen Positionen oder Überlappungen des Inhalts kommen. Jetzt werden wir CSS Media-Queries verwenden, mit denen wir spezielle Regeln für verschiedene Fenstergrößen erstellen. Ich möchte das Thema Media Queries hier nicht vertiefen. Wenn du mehr dazu wissen willst, schau bitte in den Web Developer Guide. Bei unserer Webseite verwenden wir nur das max-width-Attribut für unsere Media Queries, das die maximale Breite festlegt, für die die Regeln angewendet werden. Wenn Du also eine Regel mit der max-width von 500px definierst, dann wird diese Regel nur dann angewandt, wenn das Darstellungsfeld kleiner als 500px oder exakt 500px ist.

Wenn wir unsere Website responsiv machen wollen, müssen wir als erstes darüber nachdenken, welcher Inhalt relevant ist und auf den kleinen Displays von Smartphones oder Tablets erscheinen soll. Wenn du eine Website bauen willst, musst du schon zu Beginn der Entwicklungsphase wissen, wie der Auftritt später auf dem Smartphone aussehen soll.
Beginne damit, die Breite deines Browser-Fenster so weit zu reduzieren, bis du feststellst, dass einzelne Elemente falsch positioniert sind oder auch einfach nicht mehr gut aussehen. In diesem Fall ist der einfachste Weg, die aktuelle Größe der Website zu bestimmen, das Web-Development-Tool Deines Browsers zu benutzen, um die Breite des body Elements herauszufinden. Für diese Breite müssen wir dann eine Medienabfrage (Media Query) definieren, um das Layout unserer Website zu ändern und sicherzustellen, dass alles in Ordnung ist. Beachte, dass die in den Media Queries festgelegte Breite variieren kann, je nachdem, welchen Browser du benutzt. In Firefox wird die vertikale Scrollbar in die Breite des Darstellungsfeldes einbezogen. Wenn du also eine Media Query mit einer max-width von 1000px definierst, dann wird die Media Query in Firefox die Breite auf 985px begrenzen, weil die 15px der Scrollbar abgezogen werden. Mehr über dieses Thema findest du in diesem Blog-Post. Die Lösung dieses Problems in unserem Fall könnte sein, einen Puffer einzubauen, also schlicht unsere max-width etwas höher zu setzen als notwendig.

Das erste, was du bei unserer Webseite bemerkst, wenn die Breite deines Browser-Fensters größer als 1215 px ist: der “Read more”-Button unseres Sliders überlappt den Spacer. Wie können wir das Problem lösen? Eine Möglichkeit ist, den Button komplett zu entfernen (setze display auf none) und das „Read more“ hinter den Paragraphen als Klartext zu setzen. So sparen wir schon einiges an Platz. Um dies umzusetzen, brauchen wir auch noch etwas HTML-Code in unserer Datei. Füge hinter jedem Paragraphen innerhalb unserer Slider-Content-Boxen einen Anker ein und gib ihm die Klasse „responsive_button“. Dann füge in Deine CSS-Datei eine Regel hinzu, um display auf none für alle Elemente mit der Klasse “responsive_button” innerhalb eines Paragraphen innerhalb einer Slider Content Box zu setzen.

#slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p .responsive_button {display:none;}

In unserer Media-Query-Regel können wir jetzt einfach display auf inline setzen, um es hinter dem Paragraphen darzustellen. Außerdem können wir die Textfarbe beliebig anpassen.

Allerdings gibt es dann noch ein Problem: der Text innerhalb der Paragraphen überlappt den orangefarbenen Spacer. Um dieses Problem zu lösen können wir den Slider-Inhalt verbreitern. Dazu setzen wir seine width auf auto, passen ihn somit an das Eltern-Element an und geben ihm ein margin-right, damit ein Freiraum zwischen den Slider Content Boxen und der rechten Ecke unserer Slider-Bilder zu schaffen. Außerdem verringern wir die Schriftgröße. Dadurch können wir Platz einsparen und es sieht ein bisschen offener und leichter aus.

@media (max-width: 1215px) {#slider_content1, #slider_content2, #slider_content3 {width:auto; margin-right:50px;} #slider_content1 h3, #slider_content2 h3, #slider_content3 h3 {font-size:18px;} #slider_content1 p, #slider_content2 p, #slider_content3 p {font-size:14px;} #slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p .responsive_button {display:inline; color:#000;} .container .button {display:none;}}

Wenn man die Breite weiter reduziert, wirst du bemerken, dass die “gefloateten” Artikel unterhalb der max-width von 900px, die wir für unsere Website eingestellt haben, nicht mehr nebeneinander stehen. Ich habe ja erzählt, dass wir, um das Firefox-Scrollbar-Problem zu lösen, die Breite um 15px erweitern und eine Media Query für eine max-width von 915px definieren. Wenn jetzt die Artikel nicht mehr nebeneinander stehen, können wir sie, horizontal zentriert, untereinander stellen. Dazu müssen wir das Floating entfernen und setzen margin-right und margin-left auf auto. Außerdem ändern wir die width auf 60 Prozent, um die Änderung der Breite von der Breite der Webseite abhängig zu machen.
Zusätzlich haben wir das Problem, dass das Suchformular nicht mehr mit dem orangefarbenen Spacer zusammenpasst. Das können wir ändern, indem wir die Schriftgröße des Spacers und des Eingabefeldes ändern, den Paragraphen mit dem Fragetext neu positionieren und die Größe unseres Eingabefeldes mit den padding-Werten neu justieren.

Ein weiteres Problem taucht im Zusammenhang mit der Sektion “four_columns” auf. Unterhalb von 900px überlappen einige der Artikel mit der Klasse “img-item”. Das beheben wir, indem wir eine spezifische Breite für die Sektion setzen, so dass zwei Artikel die nächste Zeile mit umfassen. Dann definieren wir eine margin-top für die beiden umfassten Artikel, so dass wir einen Raum zwischen den beiden Zeilen schaffen. Um nur den dritten und vierten Artikel zu adressieren (das sind die beiden in der zweiten Zeile), verwenden wir das CSS3-Feature nth-of-type. Beachte bitte, dass das Feature nicht in IE 8 oder einem älteren Browser funktioniert. Wenn du sicherstellen willst, dass alle Browser unterstützt werden, könntest du stattdessen eine spezifische Klasse für den dritten und vierten Artikel vergeben.

Auch in der Sektion text_columns müssen wir die Artikel neu positionieren. Hier entfernen wir das Floating und ändern die Breite der beiden Spalten, indem wir den Wert für max-width überschreiben. Die beiden Artikel in der Sektion zentrieren wir, indem wir margin-left und margin-right auf auto setzen, wie wir das ja bereits mehrfach gemacht haben. Auch die beiden Artikel in der zweiten Spalte (die beiden mit den Raketen- und Uhren-Icons) sollen nicht länger “floaten” und werden deshalb mit margin neu justiert.

Die letzte Sektion, die wir bei 900px anpassen müssen, ist der Footer. Damit diese Sektion zu der schmaleren Breite der Website passt, reduzieren wir die Schriftgröße und die Breite der drei Spalten.

@media (max-width: 915px) {#boxcontent article {float: none; margin: 30px auto 0 auto; width: 60%;} #spacer {font-size:15px;} #spacer .search {margin-top:19px; margin-right:-385px;} #spacer p {margin-left:-370px;} input {padding:4px; font-size:14px;} input[type="submit"] {padding: 1px 14px;} #four_columns {width: 500px;} #four_columns .img-item:nth-of-type(3), #four_columns .img-item:nth-of-type(4) {margin-top: 25px;} #text_columns article.column1, #text_columns .column2 {float:none; max-width: 500px; margin: 50px auto 0 auto;} .column2 .row {float:none; margin:0 0 40px 50px;} footer .wrapper .column {font-size: 12px; width: 230px;}}

Wenn du die Breite deines Browsers noch weiter reduzierst, wirst du feststellen, dass die Slideshow an einigen Stellen zu schmal wird und nicht mehr gut aussieht. Das verhindern wir mit einer Änderung des top-Wertes zu einem hohen negativen Wert, so dass es verschwindet. Wir können hier kein display: none nutzen, da die Slideshow in diesem Fall auch nach einem Ändern der Browserbreite nicht mehr dargestellt wird. Jetzt, da die Slideshow verschwunden ist, überdeckt der orangefarbene Spacer unsere Navigation. Deshalb müssen wir eine feste Höhe für unseren Header definieren. Wir können natürlich auch unsere Navigation neu positionieren, denn da jetzt sowieso alles zentriert ist, sieht es vermutlich auch besser aus die Navigation ebenfalls zu zentrieren. Dazu überschreiben wir zunächst die Werte von top und bottom, indem wir sie auf auto setzen. Dann setzen wir die left-Eigenschaft auf 50 Prozent und definieren einen negativen Außenabstand, der mit der Hälfte der Navigationsbreite korrespondiert.

Auch mit dem Spacer müssen wir uns noch befassen. Das Suchformular und der Paragraph passen nicht mehr nebeneinander, so dass wir sie untereinander stellen müssen. Wir definieren eine feste Höhe für den Spacer und setzen margin-right und margin-left auf auto, um den Spacer zu zentrieren. Um die margin– und left-Eigenschaften wirkungslos zu machen, setzen wir position auf static. Mit der Definition eines padding erhalten wir Freiraum über und unter dem Paragraphen. In gleicher Weise verfahren wir mit dem Suchformular.

Weil unser Footer ebenfalls nicht mehr passt, positionieren wir die drei Spalten untereinander. Dazu setzen wir die Höhe auf auto, auf die gleiche Weise wie wir sie zuvor auf 350 px gesetzt haben. Dann geben wir dem Wrapper innerhalb des Footers eine feste Breite und zentrieren ihn. Die drei Säulen im Wrapper sollen nicht mehr „floaten“ und ebenfalls untereinander stehen. Wir setzen deshalb die width auf auto, damit sie die komplette Breite des Wrappers ausfüllen. Da es nicht mehr viel Platz im Footer gibt entfernen wir die sozialen Buttons komplett.

@media (max-width: 765px) {.container {top: -1500px;} header {height:120px;} header nav {right: auto; bottom: auto; left: 50%; top:100px; margin-left: -184px;} #spacer {height:100px;} #spacer p {text-align:center; position:static; margin: 0 auto; padding:15px 0 7px 0;} #spacer .search {text-align:center; position:static; margin: 0 auto;} footer {padding-bottom:70px; height: auto;} footer .wrapper {width: 350px; margin: 0 auto;} footer .wrapper .column {margin-top:30px; float:none; font-size: 14px; width: auto;} footer .wrapper .social {display:none;}}

Für den Bereich über 500px müssen wir das Layout unserer Website erneut anpassen. Die Sektion “four_columns” zeigt die Artikel nicht mehr untereinander. Weil wir jetzt keine fest definierte Breite mehr brauchen, setzen wir sie auf auto. Weil wir die Artikel innerhalb der Sektion “four_columns” nicht mehr nebeneinander stehen haben wollen, entfernen wir das Floating und definieren eine fixierte Breite.

Für unseren Wrapper im Footer sowie für die Raketen- und Uhren-Artikel setzen wir die Breite auf auto, so dass deren Breite sich an das übergeordnete Element anpasst. Unglücklicherweise ist unsere Navigation jetzt auch zu breit, so dass wir auch dafür eine Lösung finden müssen. Wir könnten sie natürlich in zwei Teile trennen. Dann stünden sie untereinander. Aber ich finde es besser, die Navigation komplett zu entfernen und durch eine einfache Auswahlbox zu ersetzen. Dazu ergänzen wir den HTML-Code für die Auswahlbox im Header unserer Webseite und geben ihm die ID “alternative_menu”. Anschließend setzen wir display auf none, um sie standardmäßig zu verbergen und positionieren sie irgendwo unterhalb des subheading-Paragraphen. In unserer Media Query setzen wir display auf block, so dass sie erscheint, wenn die Navigation verborgen wird.

Wenn du dir die Webseite jetzt wieder anschaust und die Breite des Browsers reduzierst, wirst du sehen, dass die Webseite jetzt auf die geänderte Breite reagiert und bei jeder Bildschirmgröße gut aussieht. Natürlich kann man immer noch daran feilen, damit die Webseite noch besser in den verschiedenen Bildschirmgrößen aussieht. Spiel einfach ein bisschen mit den einzelnen Werten und ergänze die entsprechenden Regeln für die Elemente, die du der Bildschirmgröße anpassen willst.

Entwickeln des JavaScripts – Kodieren der Slideshow

Nachdem wir unser Styling fertig gestellt haben, wollen wir jetzt den JavaScript-Code schreiben, den wir für den Bildwechsel in unseren Slider Content-Boxen benötigen. Damit die Slideshow richtig arbeiten kann, fügen wir JavaScript-Code wie in der Beispieldatei des SlidesJS-Plugins hinzu und nehmen darin einige Einstellungen vor. Wir müssen in der JavaScript-Funktion eine Höhe definieren, die sehr viel kleiner als die der aktuellen Slider-Bilder ist. Ich bin mir noch nicht sicher, warum es so ist, aber gib einfach eine Höhe an, die den Slider gut aussehen lässt. In unserem Fall ist das ca. 235px.

Damit die Slider-Content-Boxen auftauchen und verschwinden, wenn ein Bilderwechsel stattfindet, müssen wir zwei Callback-Funktionen hinzufügen. Der erste Callback startet, wenn ein Bildwechsel stattfindet, der zweite immer dann, wenn ein Bild geladen ist und sich nicht mehr bewegt. Im start-Callback werden wir eine Regel hinzufügen, die dafür sorgt, dass alle Slider-Content-Boxen ausgeblendet werden, wenn ein Bildwechsel stattfindet. Denn im Moment des Bildwechsels soll natürlich keine Box zu sehen sein. Im complete-Callback müssen wir dafür sorgen, dass die korrekte Slider-Content-Box erscheint. Wenn also Bild 2 gezeigt wird, soll auch „slider_content2“ erscheinen. Damit das funktioniert, müssen wir eine Variable in der complete-Funktion einfügen, die uns die aktuelle Bildnummer gibt.

$(function() {$('#slides').slidesjs({height: 235, navigation: false, pagination: false, effect: { fade: {speed: 400}},callback: {start: function(number) {$("#slider_content1,#slider_content2,#slider_content3").fadeOut(500);}, complete: function(number) {$("#slider_content" + number).delay(500).fadeIn(1000);}}, play: {active: false, auto: true, interval: 6000, pauseOnHover: false}});});

Entwickeln des JavaScripts – Kodieren des alternativen Menüs

Wie eben erwähnt, wollen wir jetzt den jQuery-Code für unser alternatives Menü hinzufügen. Das alternative Menü erscheint, sobald die Browser-Breite unter 500px fällt. Wenn wir einen Eintrag in der Auswahlbox auswählen, möchten wir zu der ausgewählten Seite weitergeleitet werden. Deshalb werden wir einfach den folgenden Code im $(document).ready-Teil unserer script.js-Datei einfügen.

$("#alternative_menu").change(function() {$selected = $("#alternative_menu option:selected"); window.location.href = "http://www.lingulo.com/" + $selected.val();});

In der ersten Zeile definieren wir einen change-Handler für unser alternatives Menü. Im change-Handler setzen wir die Variable “$selected”, die das ausgewählte Element im Menü auswählt. Im letzten Schritt setzen wir window.location.href zu unserer Domain und ergänzen das value-Attribut hinter dem Domain-Namen. Schließlich wird noch die Seite, zu der wir weitergeleitet werden wollen, im value-Attribut unseres HTML-Codes aufgeführt. Um beispielsweise zur Seite http://www.lingulo.com/contact zu kommen, würde das im alternativen Menü so aussehen:

<option value="contact" >Contact</option>

Unser alternatives Menü sollte jetzt funktionieren. Trotzdem ist die Wahl einer einfachen Auswahlbox natürlich nicht die beste Lösung für ein mobiles Menü. Deshalb möchte ich euch jetzt zeigen, wie man eine bessere Navigation für kleine Bildschirmgrößen integriert.

Die mobile Navigation, die wir gerade entwickelt haben, ist einfach zu bauen und arbeitet vernünftig. Trotzdem: Aus Sicht eines Nutzers ist die Auswahlbox sicher nicht die beste Lösung. Beginnen wir also damit, eine mobile Navigation zu entwickeln, die – wie in der Vorschau – umschaltet, wenn auf das Symbol in der linken, oberen Ecke geklickt wird. Zunächst einmal müssen wir den HTML-Code für die mobile Navigation hinzufügen. Wir könnten natürlich ganz einfach die bereits bestehende Navigation benutzen und sie an die Smartphone-Bildschirme anpassen. Stattdessen fügen wir aber ein separates Menü hinzu, weil wir unterschiedliche Einträge in den Menüs auf mobile Endgeräten und Desktop-Rechnern wählen wollen.

Zu Beginn entfernen wir das vorherige zusätzliche Menü aus dem HTML-Code und fügen stattdessen ein div mit der ID “mobileMenu” ein. In das div kommt eine ungeordnete Liste mit allen Menü-Einträgen als li-Elemente. Das ist schon alles für das Menü. Jetzt können wir den HTML-Code für das Symbol in der oberen, linken Ecke (drei Balken übereinander) einfügen. Die Balken stellen wir her, indem wir drei span-Elemente in einem div-Element aufführen und sie übereinander anordnen. Der gesamte HTML-Code sollte jetzt so aussehen:

<div class="toggleMobile"> <span class="menu1"></span> <span class="menu2"></span> <span class="menu3"></span></div> <div id="mobileMenu"> <ul> <li><a href="javascript:void(0)">Home</a></li> <li><a href="javascript:void(0)">Porfolio</a></li> <li><a href="javascript:void(0)">About</a></li></ul></div>

Jetzt kommen wir zum jQuery-Teil unserer mobile Navigation. Wenn die Seite geladen ist, soll die mobile Navigation zunächst standardmäßig verborgen sein (sie soll ja nur zu sehen sein, wenn das Symbol angeklickt wird). Beim Anklicken von .toggleMobile möchten wir, dass das #mobileMenu auf- oder zuklappt, je nachdem, ob es bereits geöffnet ist oder nicht (das geschieht durch die jQuery slideToggle-Funktion). Außerdem wollen wir das .toggleMobile-Symbol animieren – so, wie es in der Vorschau zu sehen ist. Das können wir mit den bereits bekannten CSS3-Übergängen (transition) machen. Deshalb ist alles, was wir dafür tun müssen, die Klasse active unserem Symbol hinzuzufügen. Wenn jemand die Größe seines Browserfensters über eine Breite von 500px hinaus vergrößert, soll die mobile Navigation nicht mehr angezeigt werden. Deshalb nutzen wir das resize-Event, das zur Wirkung kommt, wenn der Nutzer die Browser-Breite ändert und prüfen darin, ob die aktuelle Browser-Breite größer als 500px ist. Wenn ja verbergen wir das mobile Menü und entfernen die active-Klass von unserem .toggleMobile. Der gesamte jQuery-Code sollte so aussehen:

(function ($, window, document, undefined) {'use strict';$(function () {$("#mobileMenu").hide(); $(".toggleMobile").click(function() {$(this).toggleClass("active"); $("#mobileMenu").slideToggle(500);});}); $(window).on("resize", function() {if($(this).width() > 500) {$("#mobileMenu").hide(); $(".toggleMobile").removeClass("active"); }});})(jQuery, window, document);

Somit kommen wir zum CSS-Code für unsere mobile Navigation. Wir wollen, dass die Navigation am obersten Rand unserer Seite positioniert wird. Das Menü sollte so breit wie das Browserfenster (100 Prozent) sein und standardmäßig nicht dargestellt werden.

#mobileMenu {position: fixed; top: 0; left: 0; width: 100%; display: none;}

Die Listenpunkte unserer Navigation (sie entsprechen den Menü-Einträgen) sollten als Block-Elemente angezeigt werden. Du kannst sie natürlich gestalten wie Du möchtest. In unserem Fall verwenden wir orange als Hintergrundfarbe, eine weiße Schrift, etwas Innenabstand und letter-spacing sowie eine dünne Grenzlinie. Außerdem möchten wir, dass der Text zentriert und in Großbuchstaben erscheint.

#mobileMenu ul li {display:block; background-color: #E56038; color: #fff; padding: 12px 0; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; border-bottom: 1px solid #CC5836;}

Der Button für die mobile Navigation in der linken, oberen Ecke soll standardmäßig nicht angezeigt werden. Wir wollen diesen erst auf Bildschirmen erscheinen lassen, die kleiner als 500px sind und dafür Media Queries nutzen.

.toggleMobile {display:none;}

Weiter geht’s zum Bereich der Media Queries in unserer CSS-Datei. Wir fügen hier den Code für Bildschirmgrößen unterhalb von 500px hinzu. Wir möchten, dass unser mobiles Menü auf schmalen Bildschirmen sichtbar ist und dann über allen anderen Elementen liegt. Deshalb definieren wir einen z-index. Der sollte hoch genug definiert sein, um über allen anderen Inhalten zu liegen.

#mobileMenu {display: block; z-index: 99;}

Als nächstes positionieren wir den Navigations-Button fest in der linken, oberen Ecke. Wir geben ihm eine Breite von 40px und eine Höhe von 36px. Wir stellen den z-index höher als den für das mobile Menü, weil wir wollen, dass der Button über dem Menü liegt, wenn es geöffnet ist.

.toggleMobile {position: fixed; top: 10px; left: 10px; display: block; width: 40px; height: 36px; cursor: pointer; z-index: 999;}

Jetzt kommen wir zum spannenden Teil. Wir möchten gern die drei Balken unseres Umschalters i .toggleMobile absolut positionieren. Außerdem sollen sie 40px breit und 8px hoch sein, eine Hintergrundfarbe und einen transition-Effekt mit einer benutzerfreundlichen Bézier-Kurve haben. Wie bereits früher in diesem Tutorial erwähnt, beschreibt das dritte Argument des transition-Attributs den Weg, wie eine Animation ablaufen soll. Du kannst dieses Werkzeug benutzen, um deine eigenen Bézier-Kurven zu entwickeln oder du nutzt bereits bestehende wie ease oder linear. Außerdem wollen wir, dass die transition alle Eigenschaften, die animiert werden können, adressiert und die Dauer der transition 0,35 Sekunden beträgt.

.toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3 {display: block; position: absolute; width: 40px; height: 8px; left: 0; background: #EDA28C; -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);}

Weil wir möchten, dass die Balken alle übereinander liegen, ändern wir jetzt den top-Wert für jeden der Balken.

.toggleMobile span.menu1 {top: 0;} .toggleMobile span.menu2 {top: 14px;} .toggleMobile span.menu3 {top: 28px;}

Schließlich müssen wir noch die aktive Klasse unseres Umschalters definieren. Wenn der Umschalter angeklickt und das Menü geöffnet ist, soll der unterste der drei Balken verschwinden, die anderen sollen übereinander liegen und gegenläufig rotieren.

.toggleMobile.active span.menu1 {top: 14px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);} .toggleMobile.active span.menu2 {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);} .toggleMobile.active span.menu3 {opacity: 0; -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);}

Zusätzliche Features – Skiplinks entwickeln

Wenn du eine Menge Inhalt auf deiner Webseite hast, kann es für deine Besucher hilfreich sein, ihnen einen Skiplink anzubieten. Mit einem Skiplink können sie zum Seitenanfang zurückkehren, indem sie einfach einen Button anklicken. Wenn du auf unserer Website in der Vorschau runterscrollst, siehst du, dass ein kleiner Button in der Ecke unten rechts erscheint. Wenn du auf den Button klickst, scrollt die Seite automatisch wieder zum Seitenanfang. Um diesen Skiplink zu bauen, downloaden wir die Quelldateien von diesem Quick Tip. Von der „index.html“-Datei kopieren wir den jQuery-Code. Der Code bewirkt, dass der Button erscheint, wenn wir uns mehr als 200 px vom Kopfende nach unten bewegen, und wieder verschwindet, wenn wir uns näher als 200 px zum Kopfende hin bewegen. In der Klick-Funktion definieren wir, dass die Seite innerhalb von 300ms zum Kopfende scrollt, wenn der Button geklickt wird.

Zusätzlich müssen wir unseren Button im HTML-Code einfügen. Dazu schreiben wir einen Anker in den Footer unserer Website und ergänzen ihn um die Klasse “go-top”. Jetzt kannst du den Button entweder nach eigenem Gusto stylen oder einfach das Styling aus der CSS-Datei kopieren, die wir eben heruntergeladen haben.

Die Performance unserer Seite verbessern

Unsere Seite ist fertig. Lass uns nun noch überprüfen, ob die Ladegeschwindigkeit unserer Seite speziell auf mobilen Endgeräten akzeptabel ist. Das einfachste Mittel die Ladezeiten zu beschleunigen ist, die Breiten- und Höhen-Attribute aller Bilder zu überprüfen. Wenn der Browser eine Seite lädt, versucht er, den übrigen Inhalt anzuzeigen, bevor er alle Bilder heruntergeladen hat. Der Browser lässt Lücken für jedes Bild und füllt diese Lücken erst auf, wenn die Bilder geladen sind. Wenn du also die Größe eines Bildes nicht definiert hast, weiß der Browser nicht, wie viel Platz er dafür reservieren muss. So muss er am Ende des Ladevorgangs alle Elemente noch einmal neu positionieren, um die Bilder wie gewünscht einzufügen. Daher macht es Sinn, die Breiten- und Höhen-Attribute all unserer Bilder festzulegen – mit Ausnahme der drei Slider-Bilder (weil deren Dimensionen ja bereits in der SlidesJS fixiert sind). Beachte bitte, dass wir „px“ den Attributen nicht mehr hinzuzufügen brauchen.
<img src="img/Buzz-Private-icon.png" width="64" height="64" alt="alt text about the private icon"/> Abgesehen davon, die Dimensionen unserer Bilder zu bestimmen, müssen wir auch darauf achten, dass die Bilder eine angemessene Datengröße haben. Bild-Optimierer wie Kraken.io können dir helfen, die Datengrößen zu reduzieren.
Was wir auch machen können: Wir können CSS-Sprites benutzen. Wenn du sehr verschiedene Bilder und Icons auf deiner Seite hast, musst du sicherstellen, dass die Summe der http-Anfragen so gering wie möglich ist. Dazu kannst du alle Bilder in ein einziges Bild umwandeln. Weil es eher schwierig ist, die eigenen Sprites zu schreiben, gibt es einige nützliche Werkzeuge wie SpriteMe, die automatisch die Bilder auf deiner Website entdecken, die zu einem Sprite kombiniert werden können.

Ein anderer wichtiger Weg, die Performance zu verbessern, ist, die Daten der Seite zu „cachen”. Jedes Mal, wenn ein Nutzer deine Website besucht, muss der Browser alle Dateien herunterladen, um die Seite korrekt darzustellen. Das betrifft jedes Element einer Seite, egal, ob Bild, JavaScript-Datei oder CSS-Datei. Wenn wir die Summe der http-Anfragen reduzieren wollen, müssen wir einen Weg finden zu definieren, welche Dateien jedes Mal heruntergeladen werden und welche Dateien im Cache zwischengelagert werden können, weil sie nicht jedes Mal erneuert werden müssen. Ein Weg, das zu erreichen, ist die .htaccess-Datei anzupassen. Bevor du den folgenden Code einfügst, solltest du sicher sein, dass dein Server das Modul mod_expires unterstützt (das tun jedoch die meisten Webserver).

<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" ExpiresByType text/html "access plus 1 month" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month 1 week" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType text/xml "access plus 1 seconds" </IfModule>

Jede Zeile definiert die Dauer, die dein Browser-Cache für einen bestimmten Dateityp reserviert. Die Zeile ExpiresDefault “access plus 1 month” definiert die Zeit für alle Dateien, für die keine Expire-Regel definiert wurde. In unserem Beispiel haben wir einen Cache für die Dauer eines Monats für unseren HTML-Code und für ein Jahr für unsere Bilder definiert. Da man ab und zu Änderungen am HTML macht, ist es sinnvoll den Cache für HTML auf einen Monat zu setzen. Weil deine Bilder sich möglicherweise für eine lange Zeit nicht ändern, setzen wir den Cache für alle Bilder auf ein Jahr.

Wenn du WordPress oder ein anderes Content Management System benutzt, solltest du Cache-Plugins wie W3 Total Cache nutzen, die dir eine Menge Möglichkeiten eröffnen, den Cache deiner Website festzulegen.

Die nächste Möglichkeit, die Ladezeit zu reduzieren, ist, die CSS- und JS-Dateien zu kombinieren und damit zu reduzieren. Das kannst du entweder manuell erledigen, indem du die CSS-Styles in einer Datei zusammenstellst. Oder du benutzt ein Online-Tool wie CSS Minifier oder einen Task Runner wie Grunt. Genau so kannst du mit den JS-Dateien verfahren. Das Online-Tool dazu heißt JS Compress. Oder du benutzt Minify, das automatisch alle JS- und CSS-Dateien zusammenfasst. Wenn du das WordPress-plugin W3 Total Cache benutzt, beinhaltet es Minify standardmäßig.

Neben der Minimierung von JS-Dateien können wir auch versuchen, sie asynchron zu laden. Das bedeutet, dass das Skript erst dann geladen wird, wenn die Website geladen ist. So erscheint die Seite schneller und die dahinter liegenden Skripts werden erst später geladen. Natürlich gibt es Skripts, die sofort geladen werden müssen, zum Beispiel Modernizr oder jQuery. In unserem Beispiel können wir beispielsweise das Skript für die Lightbox asynchron laden. Wenn wir diesen Weg gehen wollen, müssen wir das Attribut async in den Skripts setzen, die wir laden wollen, wenn das Dokument fertig geladen ist. Hier das Beispiel für das Lightbox-Skript:

<script async src="lightbox/js/lightbox.js"></script>

Die letzte und vermutlich wichtigste Möglichkeit, die Ladegeschwindigkeit auf mobile Endgeräten zu überprüfen, ist, Bilder in verschiedenen Größen zu laden. Bis jetzt haben wir tatsächlich drei riesige Slider-Bilder, die auf Smartphones geladen werden müssen. Eine andere Möglichkeit ist das picture-Element.

<picture width="300" height="300"> <source media="(min-width: 35em)" src="large.jpg"> <source media="(min-width: 16em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture>

Zwar wird das picture-Element bis heute in den größeren Browsern nicht unterstützt, aber es gibt eine Lösung, die sich picturefill.js nennt. Sie spiegelt dem Browser das Bild-Element vor, indem sie span-Elemente nutzt. Wenn du mehr über den Gebrauch von Bildern auf responsiven Webseiten möchtest, kannst du in Chris Coyiers Blog mehr darüber lesen.

Gut gemacht. Wir haben jetzt eine wunderbare responsive Webseite gebaut. Lies mein nächstes Step-to-Step-Tutorial, um herauszufinden, wie wir ein WordPress-Template aus der HTML5-Website erstellen, die wir gerade gebaut haben.

Wie man eine HTML5 Webseite aufbaut – Teil 2