Responsive Webdesign – die richtigen Breaking Points und Meta Queries
Responsive Webdesign ist die einfachste Form Webseiten für den Desktop, Tablets und Smartphones. Doch was sind die besten Breaking Points und welche Meta Queries verwendet man dafür?
Was bedeuten Breaking Points beim responsive Webdesign?
Der Breaking Point beim Responsive Webdesign gibt an, ab wie vielen Pixel die Ansicht umbricht, sprich sich verändern soll. Wer beispielsweise das Browserfenster meiner Seite langsam zusammenschiebt, der wird sehen, dass es einige unterschiedliche Breaking Points gibt. Jeder Breaking Point soll die Elemente meiner Webseite am optimal darstellen. Dabei soll es egal sein ob der Besucher mit einem riesigen Bildschirm meine Seite besucht oder mit einem Smartphone. Durch Breaking Points versuche ich meinen Inhalt den Besuchern immer optimal zugänglich zu machen. Das ist das Prinzip hinter Breaking Points.
Welche sind die besten Breaking Points?
Man kann nicht sagen welches die besten Breaking Points sind, denn wenn man damit anfängt für jede Breite eine neue Ansicht zu machen, dann wird man damit nie fertig. Es gibt einfach zu viele unterschiedliche Auflösungen. Es gibt aber einige Breaking Points die sich mit der Zeit ein wenig durchgesetzt haben.
Breaking Point für Laptop
@media (max-width: 1200px) {
}Breaking Point für iPad Quer
@media (max-width: 1024px) {
}Breaking Point für iPad Hoch
@media (max-width: 768px) {
}Breaking Point für iPhone Quer
@media (max-width: 480px) {
}Breaking Point für iPhone Hoch
@media (max-width: 320px) {
}Nun kann man sich die Mühe machen und für jeden einzelnen Breaking Point die Ansicht anders darstellen oder man versucht ab einen gewissen Punkt alle Größen gleichzeitig zu gestalten. Beispielsweise ab der @media (max-width: 768px) {}. Ab diesem Breaking Point bietet es sich an die darunterliegenden Auflösungen gleich mit einem Abwasch zu stylen.
Wer sich dennoch die Mühe machen möchte, der findet bei StatCounter eine Liste der gängigsten Displayauflösungen.
Statistik: die häufigsten Bildschirmauflösungen Weltweit – Dez‘ 17
Zoom von Smartphones verhindern – Breaking Points aktivieren
Standardmäßig zeigt das Smartphone die geöffnete Webseite in voller Größe und reagiert nicht auf die definierten Breaking Points. Das ist natürlich nicht benutzerfreundlich, denn der Besucher muss erst in die Seite manuell zoomen um hin und her zu navigieren. Um dies zu verhindern kommt der folgende Meta-Tag in den head. Damit reagiert das Smartphone auf die Breaking Points.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Hinterlasse doch ein Kommentar
Schreibe ein Kommentar zu Responsive Webdesign – die richtigen Breaking Points und Meta Queries
Wenn dir der Beitrag Responsive Webdesign – die richtigen Breaking Points und Meta Queries gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.