Responsive Webdesign – Grundlagen

Mobile First zum Zweiten

Testen Sie unsere 1983 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
An sich ist es bei Layouts für kleine Viewports besser, wenn der Inhalt vor der Navigation übertragen wird. Sehen Sie hier, wie man das realisiert – und welche weiteren Vorteile diese Anordnung mit sich bringt.

Transkript

An sich ist es besser bei Layouts für kleine Viewports, wenn der Inhalt vor der Navigation kommt. Sehen Sie hier, wie man das realisiert und was für weitere Vorteile die geänderte Anordnung mit sich bringt. Wenn man wissen möchte, wie ein Layout auf, sagen wir, wirklich nur Feature Phones dargestellt wird, also, recht schlechten Geräten, dann bringt es auch einmal, dass man sich anschaut, wie schaut das Ganze denn aus beispielsweise ohne Style Sheets. Das können Sie im Firefox ja sehr komfortabel machen, dass Sie einfach mal den Stil ausschalten. Dann sehen Sie sozusagen die Minimal-Variante, was da ist, wenn es sozusagen sonst überhaupt nichts funktioniert. Ich schalte mal die Styles auch wieder ein. Wenn man das so anschaut und sich vielleicht auch überlegt, dass es sein könnte, dass wir mehr Navigationspunkte haben, als diese drei. Dann stellt sich natürlich die Frage: ist es denn wirklich sinnvoll, dass die Navigation im Quellcode vor dem Inhaltsbereich steht. Bei der Layout-Variante in diesem Fall hier ist die Navigation vor dem Inhaltsbereich. Wenn man wirklich ausgeht von der Darstellung für kleine Viewports, dann wäre es eigentlich umgekehrt besser, das heißt der Inhalt soll nach oben. Und dann soll die Navigation kommen. Was aber dann auch nützlich wäre, wäre an diesem Beispiel also recht wenig Inhalt. Aber es könnte auch sein, dass mehr Inhalt ist. Wenn man oben im Kopfbereich oder direkt darunter einen Link macht, wodurch der Benutzer direkt immer zur Navigation gelangt. Und dafür versehe ich die Navigation mal mit einer ID. Und dann mache ich hier einen Link, wodurch man direkt zu diesem Punkt hier springen kann. Und gebe dem schon auch noch mal eine Klasse, damit wir das nachher auch formatieren können. Und da schreibe ich den Text Menü. Das heißt, man kann jetzt hier mit einem Klick auf diesen Link zur Navigation springen. Können das hier bei kleinem Bildschirm schon mal anschauen. Bei großem Bildschirm zerhaut es das derzeit. Müssen wir uns gleich darum kümmern. Sie sehen hier: springt man nach unten. Das funktioniert soweit. Ok, wir haben eben die Quellcode- Anordnung in diesem Beispiel geändert. Dadurch gibt es keinerlei Probleme bei der Darstellung, bei kleinen Viewports. Weil wir da ja alles einfach untereinander anzeigen und das funktioniert. Wenn wir das hingegen anschauen, wie es bei großen Viewports anschaut, dann sieht es so etwas komisch aus. Wenn wir einfach die Navigation hier schon wieder im linken Bereich haben. Und außerdem ist es auch so, dass diese Menü-Button... Den brauchen wir natürlich nicht in dieser großen Ansicht. Es heißt, hier müssen wir ein bisschen modifizieren. Wo stehen die Formatierungen für große Viewports? Also, erst folgen dem Beispiel: die Formatierung für die kleinen Viewports. Und dann gibt es die Angaben mit min-width für die großen Viewports. Derzeit wird die Navigation links gefloatet, auch der Inhalt wird links gefloatet. Damit sind die, wenn man zwei Elemente links floatet, dann stehen die in der Reihenfolge, wie sie im Quellcode sind. Deswegen ist der, der Inhalt derzeit an der falschen Stelle. Weil der ja jetzt zuerst kommt, deswegen ist der links davon. Das heißt, den Inhalt wollen wir jetzt hier einmal rechts floaten. Und dann können wir schon sagen: dieses Sprungmenü hier, das brauchen wir bei großem Viewport nicht, weil da ist ja alles direkt zu sehen. Das heißt, dem geben wir ein display: none, damit es ausgeblendet ist. Dann können wir schon mal schauen was die Änderungen soweit bewirkt haben. Und Sie sehen hier jetzt ganz normale Darstellung für große Viewports. Und bei kleinen Viewports haben wir hier einen Link und kommen hier unten zu der Navigation. Dann kann man natürlich hingehen und weitere Verbesserungen durchführen. Wir können sagen: dieser Punkt, das Menü, wo man hinspringen kann, das sollte ein bisschen mehr Padding haben. Damit das komfortabler zu erreichen ist. Jetzt mache ich mal 3% für rechts und links. Und 0,5 em für oben und unten. Wenn man das dann anschaut, dann ist das schon ein bisschen größer geworden. Kann man natürlich dann noch weiter anpassen. Außerdem können wir uns natürlich überlegen. Wir haben ja das dadurch sozusagen hier oben Platz gespart, hier unten, wenn man runterspringt zum Menü. Und wir stellen uns jetzt vor, wir haben mehr Menüpunkte, dann wäre es natürlich praktisch, wenn die Menüpunkte hier gar nicht nebeneinander sind, sondern untereinander. Hier haben wir unsere Darstellung für kleine Viewports, dass die Menüpunkte nebeneinander sind. Das können wir hier ändern, dass die untereinander dargestellt werden mit display: block. display: none passt soweit. Padding, könnten wir natürlich überlegen, dass dann die ein bisschen Padding auch bekommen. Und wir können natürlich auch einen kleinen Schatten unten hinfügen, um den ein bisschen voneinander zu trennen. Diesem Beispiel habe ich jetzt einen Schatten definiert, der eine schwarze Farbe hat. Das ist das hier. Und hier definiere ich die Position der Schatten. Der erste Wert ist ja immer die x-Achse. Das heißt, die Verschiebung von links-rechts. Das ist 0. Verschiebung von oben 5 Pixel. Dann habe ich als Blur Radius 5 Pixel angegeben und als Spread Radius den selben Wert mit Negativ. Dadurch habe ich einen Schatten nur an einer Seite. Und im Zweifelsfall sollte ich das auch mit dem Präfix für ältere Webkit-Browser ergänzen, damit es dort auch funktioniert. Dann haben wir schon erste kleine Verbesserung hier durchgeführt. Sie sehen hier, es sind die Punkte jetzt untereinander dargestellt. Bei größeren Bildschirmen ist natürlich der Schatten jetzt auch da. Das kann man natürlich sich überlegen, was man da möchte. Ob man den entfernen möchte oder sonst was. Das sind jetzt alles Detailarbeiten, die man jetzt noch durchführen kann. Und besonders können wir natürlich auch mehr Aufmerksamkeit diesem Menü-Punkt hier widmen. Erstmal ist es natürlich auch besser den zu einem Block-Element zu machen, damit das Padding nach oben auch wirkt. Und dann könnte man natürlich hingehen und den auch wirklich in Form eines Buttons gestalten. Man könnte auch überlegen den hier zu platzieren. Also, da gibt es dann ganz viele Möglichkeiten. Aber erster schöner Ansatz hat jetzt hier gezeigt, wie man den Inhalt ganz nach oben tun kann, was man dafür machen kann. Und das Schöne an diesem Ansatz ist natürlich, dass das Ganze jetzt auch funktioniert, wenn ich 6 Menü-Punkte habe oder 8 Menü-Punkte, oder eben mehr, als die 3 Menü-Punkte. Und je nachdem wie groß dann auch hier dieser Inhaltsbereich ist, könnte man sich natürlich auch überlegen hier noch einen Button zu ergänzen, durch den man wieder nach oben springen kann.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!