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

responsive webdesign breaking points statistic

Zoom von Smartphones in die verhindern

Normalerweise zeigt das Smartphone die besuchte Webseite in rausgezoomten Zustand. Das ist natürlich nicht benutzerfreundlich, denn der Besucher muss erst in die Seite manuell zoomen und hin und her navigieren. Um das zu verhindern kommt der folgende Meta-Tag in den header. Damit reagiert das Smartphone auf die Breaking Points.

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.