CSS Media Queries

[Cool Master]

Moin,

ich wollte mal eure Meinung zu Media Queries und Responsive Design hören.

aktuell bin ich an einer Seite die umgebaut wird, nichts großartiges oder aufweniges, es soll einfach in HTML5 umgesetzt werden und eben ein Responsive Design her auf Basis des alten Layouts. Wie viele Media Queries macht ihr und vor allem bei welcher Größe?

Ich bin kein Fan von "auf Gerät X optimieren" also spare ich mir den Krempel mit iPhone und iPad Retina/Non Retina. Ich möchte einfach auf Smartphone, Tablet so wie Desktop "Klein", "Normal" und "Groß" optimieren. Für mich wären es also folgende Queries:

@media only screen and (min-width:0em) and (max-width:39.9375em) {/* Smartphone bis 639px */}
@media only screen and (min-width:40em) and (max-width:64em) {/* Tablet bis 1024px */}
@media only screen and (min-width:64.0625em) and (max-width:80em) {/* Desktop klein bis 1280px */}
@media only screen and (min-width:80.0625em) and (max-width:120em) {/* Desktop normal bis 1920px */}
@media only screen and (min-width:120.0625em) and (max-width:160em) {/* Desktop groß bis 2560px */}

Kann man das so nehmen oder würdet Ihr sagen das geht besser/anders?

 

[Tobey187]

Das kann man überhaupt nicht so allgemein sagen. Das ist von Fall zu Fall unterschiedlich und kommt vorallem auf den Content an.

 

[Cool Master]

Hmmm.

Also Layout sieht in etwa so aus:

Header: 3 Logos links, Suche rechts
Navigation
Content: 2 Spalten, links Content und rechts mini Infos in einer Box (https://jqueryui.com/tabs/)
Footer

 

[Daaron]

Wie viele Media Queries macht ihr und vor allem bei welcher Größe?

So viele, wie nötig. Hier gibts keine generelle Aussage. Es gibt ja 2 Herangehensweisen, Mobile First oder Desktop First, wobei ich MF bevorzuge. Du machst erst einmal alles für dein "First"-Device hübsch, und dann vergrößerst/verkleinerst du den Viewport, bis irgendwas kacke aussieht oder nicht mehr gut bedienbar sit. Da hast du deinen nächsten Break Point

@media only screen and (min-width:0em) and (max-width:39.9375em) {/* Smartphone bis 639px */}

Sowas ist ziemlicher Murks.
1.) 1 File für alles, nicht mehrere Files. Das kostet derb Ladezeit (zumindest ohne SPDY bzw. HTTP/2)
2.) kein min-max - Zeugs, sondern entweder nur min oder nur max, und dann additiv auf eine Basis aufbauen. Manchmal macht min-max zwar Sinn, aber das ist eher Ausnahme als Regel

 

[DHundt]

Ich schließe mich den anderen Wortmeldungen an:
Fang z.B. bei 320px (Smartphone) an und zieh den Viewport auf.
Wenn das 1-spaltige Layout ins 2-/3-/usw. spaltige übergeht, kommt schon stark auf deine Elemente an.

Vererbung/Überschreiben lässt sich z.B. gut mit SASS/SCSS lösen.

 

[Cool Master]

So viele, wie nötig. Hier gibts keine generelle Aussage. Es gibt ja 2 Herangehensweisen, Mobile First oder Desktop First, wobei ich MF bevorzuge. Du machst erst einmal alles für dein "First"-Device hübsch, und dann vergrößerst/verkleinerst du den Viewport, bis irgendwas kacke aussieht oder nicht mehr gut bedienbar sit. Da hast du deinen nächsten Break Point

Ok. Wie gesagt da ich auf Retina/Non Retina verzichte wäre Mobile bis 639px bzw. 640px oder?

1.) 1 File für alles, nicht mehrere Files. Das kostet derb Ladezeit (zumindest ohne SPDY bzw. HTTP/2)

Habe ich. Alles in einer CSS Datei drin. Macht es Sinn diese später zu minimieren ergo alles in eine Zeile?

2.) kein min-max - Zeugs, sondern entweder nur min oder nur max, und dann additiv auf eine Basis aufbauen. Manchmal macht min-max zwar Sinn, aber das ist eher Ausnahme als Regel

Ok. Was wäre so eine Ausnahme?

 

[Daaron]

Ok. Wie gesagt da ich auf Retina/Non Retina verzichte wäre Mobile bis 639px bzw. 640px oder?

Nö. Denk mal an ein horizontales Tablet, z.B. n großes Galaxy....

Habe ich. Alles in einer CSS Datei drin. Macht es Sinn diese später zu minimieren ergo alles in eine Zeile?

Nicht viel. CSS wird, von anständigen Servern, eh erst einmal durch gzip geschickt.

Ok. Was wäre so eine Ausnahme?

z.B. wenn du dutzende oder hunderte Regeln explizit zurücksetzen müsstest.

 

[Cool Master]

Nö. Denk mal an ein horizontales Tablet, z.B. n großes Galaxy....

Wollte ich eigentlich per:

(orientation: landscape)
(orientation: portrait)

lösen.

Oder sollte man das nicht machen?

 

[Daaron]

Nö, kann man schon, wenn es die gesamte Struktur nicht noch weiter verkompliziert.
Ein Telefon ist ja z.B. im Landscape immer noch schmaler als ein Tablet im Portrait.

 

[Midnight Sun]

Mobile (also auch ein kleines Tablet) wäre bei mir bis max. 600px, alles was danach kommst wäre Desktop.
Generell muss es zum Content passen und gut zu sehen/lesen sein.

Ich würde mit Mobile First und 240px anfangen.

 

[Daaron]

Mobile (also auch ein kleines Tablet) wäre bei mir bis max. 600px, alles was danach kommst wäre Desktop.

Tja, blöd nur, dass z.B. n iPad4 sich als "1024x768" anmeldet. Galaxy Tabs sind sogar noch größer... und trotzdem ist nichts davon Desktop.
Du musst IMMER fließend auf JEDE mögliche Auflösung reagieren.

Viel wichtiger (und problematischer) ist die Touch-Erkennung. Dafür gibts keinerlei standardisierte Schnittstelle. Blöd nur, dass du bei Touch/No-Touch eben teilweise große Layout- und Workflow-Unterschiede hast. Einfachstes Beispiel ist da ne Suckerfish-Navigation.

Ich würde mit Mobile First und 240px anfangen.

Wenns der Content her gibt, was selten ist... aber welche Device ist schon so klein? Selbst wirklich schlange Phones wie das LG Optimus sind immerhin 320px breit.

 

[Midnight Sun]

240px Da sollte 320px stehen

1024x? ist doch größer als 600px und wenn ich für/bei 600px und 767px ein Media Querie habe, muss ich, so fern es vom Content her passt nichts mehr extra anpassen.
Ob dann das iPad mit 1024px daher kommt oder nur 800px breite hat, ist doch dann relativ wurscht!?

 

[Smartass]

Aufgrund Deiner Layoutbeschreibung (#3) würd ich das prinzipiell so angehn:

header, nav {
max-width:1200px; min-width:320px}

footer {
max-width:100%; min-width:320px}

@media only screen and (max-width:1024px) {
/* Styles */}
@media only screen and (max-width:1024px) and (orientation:portrait) {
/* Styles */}
@media only screen and (max-width:480px) {
/* Styles */}

 

[Daaron]

Na ja, nur weil etwas so groß ist wie ein Desktop, verhält es sich noch nicht genauso. Denk nur an Convertible-Notebooks, wo du nicht einmal erraten kannst, obs nun Touch oder Maus ist.

 

[Smartass]

#14 Daaron

3-Col-Beispiel mit in #13 beschriebenen Media-Queries: Screenshot und im Fiddle-Fullscreen

@ others - einfach Browserfenster minimieren ;-)

[die unnötigen Scrollleisten sind fiddle-bedingt]

 

[thecain]

Das schwierige sind nicht die Spalten... Eher Fragen wie,

wann zeige ich die"mobile" Navigation, wann die "Desktop" Navi

 

[Smartass]

Stell Dir einfach vor, auf die in Beitrag #15 verwiesene Fiddleseite wäre eine Navigation ... und dann auf der Seite (oben rechts) per "Edit in JSFiddle" ein bisschen experimentieren ... vielleicht x

@media only screen and (max-width:480px) {
#content{height:1750px}

in

@media only screen and (max-width:480px) {
#content{height:1750px; background:silver}

abändern? "Run" klicken und das Fenster wieder minimieren/maximieren ... ich denke dies dürfte Deine Frage, -wie ich sie verstanden habe-, also das Du annimmst, man würde zwei Navigation benötigen, beantworten.

 

[Cool Master]

Ich nutze den FF zum Entwickeln gibt es da eine Möglichkeit die Rotation zu simulieren? Bzw. wie macht ihr es bzgl. Portrait/Landscape?

 

[ice-breaker]

Dann überleg dir mal lieber den Chrome auszuprobieren, ist für responsive design Entwicklung den anderen Browsern einfach Meilen überlegen.

 

[Foochan]

Ich nutze den FF zum Entwickeln gibt es da eine Möglichkeit die Rotation zu simulieren? Bzw. wie macht ihr es bzgl. Portrait/Landscape?

Hab hierfür bislang den "Responsive Design View" (Ctrl + Shift + M) verwendet. Siehe auch: https://developer.mozilla.org/de/docs/Tools/bildschirmgroessen-testen