Responsive Webdesign – Grundlagen

Breakpoints wählen, Viewport-Größe testen

Testen Sie unsere 1958 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Wie wählt man die Breakpoints, d.h. die Stellen, an denen es Veränderungen bei Layouts geben soll? Früher hat man hier die Geräte herangezogen, heute heißt die Empfehlung deutlich: Entscheiden Sie nach den Inhalten. Dabei hilft eine Reihe von Tools.

Transkript

Wie wählt man die Breakpoints? Das heißt die Stellen, an denen es Veränderungen bei Layouts geben soll. Früher hat man hier die Geräte herangezogen. Heute heißt die Empfehlung deutlich: entscheiden Sie nach Ihren Inhalten. Und dabei helfen eine Reihe von Tools. Ich möchte erstmal zeigen, welche Media Queries Snippets zur Anfangszeit des Responsive Web Design sehr populär waren. Das sind diese Angaben hier. Sie sehen also genaue Vorgaben, wie ein Smartphone auszusehen hat. 320x480 - das ist natürlich nicht ein Smartphone, sondern das ist das iPhone. Andere Smartphones sind hier anders. Und deswegen funktionieren diese fixen Media Queries in dieser Form nicht, weil die Geräte zu unterschiedlich sind. Als die Leute dann gemerkt haben, es gibt mehr als diese Standardgeräte. Dann fand man plötzlich Dinge, wie folgendes. Das hier ist ein Ausschnitt aus einem Style Sheet, was ich mal gefunden habe. Und Sie sehen eigentlich dahinter eine große große Verzweiflung, anders kann man das nicht sagen. Also, hier gibt es Opera Mini on Android zwischen 267 und 279. Dann nochmal ein Opera Mini. Dann gibt es das oversize phone mit 360 und 368, nochmal ein oversize phone, Galaxy Wave, Galaxy Nexus, der Opera Mini dadrauf. Dann irgendwelchen Landscape-Modus und so weiter, Opera Mini, Nexus Landscape. Sie sehen, man hat keine Chance in dem Moment, wo man versucht sich an den Geräten zu orientieren, denn genau genommen sehen die unterschiedlichen Viewport-Größen von Geräten genauso aus, wie das hier gezeigt wird. Also es ist nichts, woran wir uns irgendwie orientieren können. Wir brauchen aber natürlich etwas, woran wir uns orientieren können. Wir brauchen irgendeine Größe und die Größe, an der wir uns orientieren können, das sind unsere Inhalte. Das heißt, wir müssen anschauen bei einem konkreten Layout, bei konkreten Inhalten, wann ist es notwendig, dass Layout- Änderungen stattfinden müssen. Weil sonst beispielsweise das nicht mehr gut lesbar ist oder etwas nicht mehr nebeneinander Platz hat. Und um das zu ermitteln, wann der richtige Zeitpunkt gegeben ist, gibt es jetzt eine Reihe von Tools. Ich öffne hier mal ein Beispiel-Layout. Und im Firefox haben Sie jetzt ein erstes Tool. Das finden Sie unter Extras Web-Entwickler. Und dann gibt es hier Bildschirmgrößen testen. Und da können Sie das hier verschieben und sehen hier immer oben, wie schaut das denn aus und wie verändert sich das. Das ist also ein erstes ganz schönes Tool und Sie können immer ablesen und überlegen: wann, wann muss ich was ändern, wann muss ich was ändern? Und haben dann hier oben den Wert. Sie sehen hier auch ein paar gängige Größen, die Sie auch nutzen können. Das ist also die erste Möglichkeit. Wie gesagt, finden Sie es bei Extras Web-Entwickler Bildschirmgrößen testen. Und ich deaktiviere das einmal. Dann gibt es auch verschiedene Bookmarklets, die Sie dafür verwenden können. Zum Beispiel, Responsive Design Bookmarklet. So ein Bookmarklet installieren Sie, indem Sie es einfach in Ihre Lesezeichen-Leiste ziehen. Das habe ich jetzt hier schon gemacht. Schauen wir da einfach mal dieses Beispiel nochmal an mit dem Bookmarklet. Dann sehen Sie hier verschiedene Größen und können das hier immer anpassen. Wie gesagt, es sind keine Standardgrößen, es gibt Ihnen nur ein erstes Gespür dafür, wie das auf verschiedenen Größen aussehen kann. Und was ich hieran ganz schön finde: Sie können auch sich anzeigen lassen, wie viel Platz ist denn noch da, wenn so eine On Screen-Tastatur... Beispielsweise ist jetzt hier die vom iPhone. ...wie viel Platz habe ich dann noch zur Verfügung. Das ist aber nicht, dass es dann in echt auf einem iPhone beispielsweise so aussehen wird, weil die Tastatur beispielsweise sich auch überhaupt nicht ändert. Und das andere, was hier überhaupt nicht berücksichtigt ist, ist die Viewport Meta-Angabe. Also, Sie sehen da keinen Unterschied, ob Sie die Viewport Meta- Angabe machen oder nicht. Beim echten Smartphone sehen Sie sehr wohl einen Unterschied, weil sonst ja wenn Sie die Angabe nicht machen, alles ganz klein gezoomt ist. Also, das hier ein nützliches Bookmarklet. Dann gibt es ein weiteres Bookmarklet. Das ist dieses... dieser Viewport Resizer. Den kann man genauso auch installieren. Und wenn wir den hier einmal anschauen, dann sehen Sie, dass Sie hier auch verschiedene Größen haben. Sie können die hier aber auch editieren, was ich ganz gut finde, und dadurch auch verändern. Also, mal anschauen, hier statt 800 mache ich mal 700. Und so können Sie das verändern und das ist natürlich ganz gut. Also, ein weiteres Bookmarklet, was Sie verwenden können. Und dann gibt es natürlich eine Reihe von Online-Diensten mit einer ähnlichen Funktionalität. Hier können Sie Ihre Adresse angeben und sehen dann verschiedene Größen, wie gesagt, aber nicht zu sehr auf diese Größen schauen. Das sind einfach nur Beispielgrößen, weil es ja einfach viel mehr gibt, als diese. Ein weiteres Tool ist dieses hier. Was mir daran gefällt ist, dass Sie Größe und Breite selber angeben können und dann so mal austesten, wie schaut das Ganze aus. Und wenn Sie das dann machen, dann erhalten Sie hier, wenn Sie das bei einer Adresse machen, die bereits im Internet ist, eine Url, die Sie beispielsweise auch verschicken können. Ein weiteres Tool ist dieser Responsinator. Und Sie sehen, dass sind dann Tools, die machen Ihnen so ganz hübsche Bildchen drumrum, dass man so das Gefühl hätte, dass wären echte Geräte. Aber das ist natürlich nur gefaket, es ist nicht wirklich auf echten Geräten, sondern einfach nur mit dem typischen Viewport. Und was eben nicht berücksichtigt ist, ist diese besondere Meta-Angaben, die Smartphones immer brauchen. Also, wichtiger Punkt, wenn Sie sich überlegen wie Sie Ihre Breakpoints definieren, dann sollten Sie von Ihren Inhalten ausgehend einfach austesten, wann muss eine Änderung im Layout stattfinden. Und dafür ist beispielsweise ja sehr schön geeignet. Wenn ich das hier nochmal zeige: das Tool von Firefox hier, wo ich die Bildschirmgrößen testen kann, das auch selber hier verschieben kann und sehe immer genau, welche Größe es hier oben gibt. Es gibt weitere Tools, die eine ähnliche und ein bisschen andere Funktionalität zur Verfügung stellen. Oft haben Sie dort bestimmte Standardgrößen, die Sie nicht absolut nehmen sollten, sondern einfach nur, um so ein bisschen Gespür zu kriegen wie das unterschiedlich aussehen kann. Aber bei diesen ganzen Tools ist es nie ein Test auf echten Geräten, weil beispielsweise diese Meta Viewport-Angabe überhaupt nicht berücksichtigt wird. Und wenn Sie so eine Funktionalität haben, dass man so eine On Screen-Tastatur einblendet, dann ist es nicht die On Screen- Tastatur wie sie echt aussehen würde, sondern es ist einfach nur ein Platzhalter, der Ihnen zeigt, wie viel Platz da noch zur Verfügung steht, wenn so eine Tastatur dazukommt.

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!