CSS responsives Design

[mixmastertobsi]

Hallo,

ich möchte meine Desktop-Seite mit responsiven Design anpassen.

Nun habe ich mich etwas eingelesen, allerdings keine wirkliche Lösung gefunden, weil es ja schon Probleme mit der Pixeldichte gibt.

Auf welche Breite würde ich hier nun idealerweise optimieren, um damit die meisten Smartphones anzusprechen? Ich möchte nicht noch für die verschiedensten Smartphones auch nicht unterschiedliche Versionen machen.

@media (min-width: XXXpx) {

}

[Matthias Scharwies]

Auf welche Breite würde ich hier nun idealerweise optimieren, um damit die meisten Smartphones anzusprechen?

Ich würde nur einige wenige Breakpoints machen

<600 <!---für ganz alte Modelle --->

@media (min-width: 600px) { <!---für Smartphones ---> ... }

@media (min-width: 980px) { <!---für Desktops ---> ... }

Evtl. solltest du noch größere Tablets berücksichtigen; bei den Touchscreen sollten die Navigationselemente größer als normal sein.

LG Matthias

[mixmastertobsi]

Hallo,

ich habe nun mal folgendes probiert - es funktioniert zwar teilweise. Das "geänderte" css wird auf dem iPhone 6 angezeigt, allerdings scrollt dieser noch immer horizontal. Aufgrund meine Desktop-Seite, würde eine Breite von 520px Sinn machen.

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>

@media only screen and (max-width: 520px) { #site { width: 520px; min-width: 520px; } ...

[Auge]

Hallo

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>

Warum willst du das Zoomen verbieten?

> @media only screen and (max-width: 520px) {
>     #site {
>       width: 520px;
>       min-width: 520px;
>     }

Du sagst: Bei einer maximalen Viewportbreite von 520px soll das Element mit der ID „site“ mindestens 520px breit sein. Das beißt sich. Wenn dein Telefon eine Breite von 500px haben sollte (fiktiv gewählt), schreibst du eine Minimalbreite von 520px vor, was natürlich zum Querscrollen führt.

Tschö, Auge

[mixmastertobsi]

Hallo und Danke!

Hast Du mir dann ggf. einen Tipp.

Also ich möchte für ALLE Mobilen Geräte die Seite mit einer Breite von 520 px gestalten. Wenn zu Beispiel das Gerät nur 480px Breite hat, soll es die Seite entsprechend verkleinern. Geht das?

[Auge]

Hallo

Also ich möchte für ALLE Mobilen Geräte die Seite mit einer Breite von 520 px gestalten. Wenn zu Beispiel das Gerät nur 480px Breite hat, soll es die Seite entsprechend verkleinern. Geht das?

So nicht. 520px sind 520px, da beißt die Maus keinen Faden ab. Auf einem Display mit 480px Breite wird der Benutzer also quer scrollen müssen, wenn die Inhalte bis an beide Ränder reichen. Pixel (px) sind nun einmal eine absolute Maßeinheit.

Genau deshalb ist die Konstruktion mit em zu empfehlen. Wenn eine Seite bis zur Breite von (willkürlich gewählten) 32em auf eine Art und darüber auf eine andere Art aufgeteilt werden soll, passt das bei einem 480-er und bei einem 520-er Display. Natürlich sind die Inhalte nicht pixelgleich dargestellt, aber die Seite wird auf beiden Geräten les- und benutzbar sein.

Im Übrigen (bin jetzt im Grübelmodus) sollte ein 480-er Display dein 520-Layout doch eher vergrößert darstellen, oder? …

Tschö, Auge

[Matthias Scharwies]

Also ich möchte für ALLE Mobilen Geräte die Seite mit einer Breite von 520 px gestalten. Wenn zu Beispiel das Gerät nur 480px Breite hat, soll es die Seite entsprechend verkleinern. Geht das?

Nimm die media query Breakpoints in Pixel, gerne auch in em.

Die Breite der Seite und die Breiten aller Kindelemente sollten idelaerweise in Prozent angegeben werden, so dass sie sich an die verfügbare Seitenbreite anpassen.

LG Matthias

[Jnnbo]

Hallo Matthias,

Nimm die media query Breakpoints in Pixel, gerne auch in em.

ich höre jetzt schon ein gestampfe von einer gewissen Person, die gleich sagen wird "px" haben im Web überhaupt nichts mehr zu suchen xD

[Gunnar Bittersmann]

@@Jnnbo

ich höre jetzt schon ein gestampfe von einer gewissen Person, die gleich sagen wird "px" haben im Web überhaupt nichts mehr zu suchen xD

Du meinst Brad Frost?

LLAP

[Gunnar Bittersmann]

@@Matthias Scharwies

Ich würde nur einige wenige Breakpoints machen <600 <!---für ganz alte Modelle ---> @media (min-width: 600px) { <!---für Smartphones ---> @media (min-width: 980px) { <!---für Desktops --->

Löblich: Der Mobile-first-Ansatz.

Aber nein! Breakpoints immer nach Inhalt wählen, nicht nach Geräten!

Und nicht in px, sondern in em angeben.

LLAP

[Auge]

Hallo

ich möchte meine Desktop-Seite mit responsiven Design anpassen.

Auf welche Breite würde ich hier nun idealerweise optimieren, um damit die meisten Smartphones anzusprechen? Ich möchte nicht noch für die verschiedensten Smartphones auch nicht unterschiedliche Versionen machen.

Wegen des Pixeldichtenheckmecks ist es sinnvoll, die Breakpoints über die Einheit em statt px festzulegen. Wo der Breakpoint hingehört oder nicht hingehört, kannst du mit dem/den eigenen Gerät(en) testen. Bei einem Gerät hast du schon auf zwei Größen Zugriff (Hoch- und Querformat).

/* Mobilregeln */

@media (min-width: XXem) {
	/* Desktopregeln */
}

Es kann auch sinnvoll sein, das grundsätzliche Layout über ein oder zwei Breakpoints zu regeln, gewisse Teile des Layouts aber an andere Breakpoints zu binden.

Tschö, Auge

[Gunnar Bittersmann]

@@mixmastertobsi

Nun habe ich mich etwas eingelesen, allerdings keine wirkliche Lösung gefunden, weil es ja schon Probleme mit der Pixeldichte gibt.

Nein, die macht keine Probleme. Auf hochauflösenden Displays sieht’s einfach schärfer aus, das ist es. CSS-Pixel sind auf allen Geräten etwa gleich groß. Und was anderes als Device-Pixel.

Auf welche Breite würde ich hier nun idealerweise optimieren, um damit die meisten Smartphones anzusprechen?

Auf gar keine!!

Von Cheatahs Kalauer abgesehen, geht das gar nicht. Bei iOS-Geräten mag die Landschaft hinsichtlich unterschiedlicher Viewportgrößen ja noch übersichtlich sein; bei Android-Geräten ist sie das nicht.

Und selbst wenn du heute Geräte mit dreiundzwölfzig Pixeln häufig antriffst, sieht die Landschaft morgen schon wieder ganz anders aus. Willst du dann dein Stylesheet umschreiben?

Gestalte dein Layout so, dass bei allen Breiten vernünftig aussieht! Setze Breakpoints dort, wo es der Inhalt erfordert …

@media (min-width: XXXpx) {

… und nicht in px, sondern in em!

LLAP

[mixmastertobsi]

Sorry, wenn ich nun so frage, aber ich habe keine Ahnung von "em".

Aktuell ist meine Desktopseite 1024px breit. Nun möchte ich eine Seite für möbile Geräte mit 520px getalten, weil es von den Spalten passen würde. 520px ist FIX, weil die Artikelbilder auch eine Feste Größe haben.

Wie würde ich nun zum Beispiel 1024px in em schreiben

#site { width: 1024px; }

wen es interessiert - es geht um die Seite <a href='www.slewo.com'>www.slewo.com</a>

[Matthias Apsel]

Hallo mixmastertobsi,

Sorry, wenn ich nun so frage, aber ich habe keine Ahnung von "em".

Das solltest du ändern

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@mixmastertobsi

Sorry, wenn ich nun so frage, aber ich habe keine Ahnung von "em".

“Equal to the computed value of the ‘font-size’ property of the element on which it is used.” (Spec)

Für das html-Wurzelelement ist 1em die Default-Schriftgröße im jeweiligen Browser. Das sind meist so um die 16 Pixel.

Aktuell ist meine Desktopseite 1024px breit. Nun möchte ich eine Seite für möbile Geräte mit 520px getalten, weil es von den Spalten passen würde. 520px ist FIX, weil die Artikelbilder auch eine Feste Größe haben.

Beim responsive design ist nichts fix. “Accept the ebb and flow of things.” (John Allsopp, A Dao of Web Design)

wen es interessiert - es geht um die Seite <a href='www.slewo.com'>www.slewo.com</a>

Ziemlich unübersichtlich, finde ich. Da täte ein Relaunch wirklich gut.

Wenn du das neu und responsive entwicklen willst, gehe den Mobile-first-Ansatz: Überlege, was wirklich wichtig ist und auf die Seiten muss. Den Rest lässt du weg. Das kommt dann auch der Übersichtlichkeit auf größeren Geräte zugute.

LLAP

[mixmastertobsi]

wen es interessiert - es geht um die Seite <a href='www.slewo.com'>www.slewo.com</a>

Ziemlich unübersichtlich, finde ich. Da täte ein Relaunch wirklich gut.

Wenn du das neu und responsive entwicklen willst, gehe den Mobile-first-Ansatz: Überlege, was wirklich wichtig ist und auf die Seiten muss. Den Rest lässt du weg. Das kommt dann auch der Übersichtlichkeit auf größeren Geräte zugute.

Danke Dir! Was findest Du denn unübersichtlich - eigentlich sollte das Design sehr schlicht sein.