Hilfe, Media Queries für mobile devices

mia_aim · 25.08.2012

hallo leute,
ich bitte euch um support. ich möchte eine website gestalten, die auf responsive webdesign basiert und auf tablet und smartphones laufen soll.
ich arbeite mit dreamweaver und fluid grid, also boilerplate und respondjs. das problem ist, dass die voreinstellungen für die endgeräte fix im stylesheet sind und ich mich nicht traue diese zu ändern, weil ich nicht sicher bin, ob das ganze layout zerschossen wird, weil vielleicht irgendwas in boilerplate oder respondjs. verankert ist...

ich bräuchte eine konkrete media querie anweisung, die ich ins stylesheet einsetzen kann (am besten 3 verschiedene css oder gehts in einem?), damit es auf iphone (320x480px - portrait und 480x320px landscape) entsprechend angezeigt wird, sowie auf ipad (786x1024, auch portrait und landscape) und desktop (980x670 z.b.).
>> im moment steht dort die fixe dreamweaver-einstellung:

- Layout für Mobilgeräte: 480 px oder weniger
- Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte.
- Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs.

Habe auch schon viel über die media queries gelesen aber bin jetzt nur komplett durcheinander, ob device-width oder min-device-width, min-scale oder max-scale..., etc.! Das Layout soll in 3 verschiedenen designs erscheinen und sich an die 3 geräte anpassen, und wenn sie kippsensoren haben mitrutschen in landscape.

vielen dank schonmal!

randacek_pro · 25.08.2012

AW: Hilfe, Media Queries für mobile devices

Hallo,

ich möchte dich hierzu gern auf einen ähnlich gelagerten Thread hinweisen.

Häufig wird "Responsive Design" dahingehend missverstanden, dass man eine Version pro Client-Device machen will...
Das ist halt aber nicht das Ziel von responsive design

Es geht eher darum, dass das Design auf allen Ausgabemedien möglichst problemlos funktioniert.

Natürlich kannst du zB sowas machen:

Code:

@media only screen and (min-device-width: 768px)
and (orientation : portrait)

oder

Code:

@media only screen and (min-device-width: 768px)
and (orientation : landscape)

Diese Anweisungen für spezielle Endgeräte (Viewport größer als 768px und Lagesensor gibt Orientation "portrait", oder "landscape" zurück) kann man auch in einem einzigen CSS notieren und die Werte lassen sich natürlich komplett an deine Bedürfnisse anpassen - es sind nur Beispiele.

Gern möchte ich an dieser Stelle auch noch mal auf das Tutorials von Pascal hinweisen Video-Training » Responsive Webdesign » Teil 4 » Media Queries (ACHTUNG: kostet Punkte!)

Selbstverständlich kannst du auch

HTML:

<link rel="stylesheet" type="text/css" href="deinCSS.css" 
media="only screen and (min-device-width: 768px) and (orientation : landscape)" />

machen.
Das bewirkt das gleiche, wird aber in deinem HTML <head> referenziert, statt in deinem CSS-Dokument...

Welchen Code hast du denn bisher?
Könntest du diesen mal posten? (HTML und CSS)

So schlecht klingen die Angaben doch gar nicht - es sind ja immerhin aufeinander aufbauende Einstellungen. Wie gesagt, man sollte auch darauf verzichten, für jedes Gerät eine explizite eigene CSS-Datei zu referenzieren, da dies eigentlich am Sinn des Responsive Design vorbei geht.
In deinem Beispiel geht er ja schon mit 3 Styles für Geräte ≤ 480px, dann 481 - 768px und dann > 768px bis 1232px...
Also es sind ja "fließende" Werte - "zerschießen" solltest du da mit nix

Kannst du derzeit eigentlich dein Design mal selber testen? Oder hast du es online?
Sonst können die Forenmember nämlich auch mal schauen, auf ihren diversen Geräten und dir Rückmeldung geben...

Lieber Gruß

mia_aim · 25.08.2012

Herzlichen Dank für die schnelle, hilfreiche Antwort!
Okay, wenn ich dann die Angaben ändere von ursprünglich von DW festgelegt:

(wiso steht hier kein @media only screen-Befehl für Angaben < 480px??)

Code:

/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
    }
#LayoutDiv1 {            (kann das eigentlich gelöscht werden? hab einen post gelesen, der dann aber ein problem mit dem layout hatte...)
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#header...
#...}
–––––––––––––––––––––––––––––––––––––
@media only screen and (min-width: 481px) {
.gridContainer {
#header...
#...}                                                            
–––––––––––––––––––––––––––––––––––––
@media only screen and (min-width: 769px) {
#header......
#...}

@media only screen and (min-width: 481px) {
.gridContainer {
#...
#...}

@media only screen and (min-width: 769px) {
#...
#...}

–––––––––––––––––––––––––––––––––––––

wenn ich nun die oben genannten Angaben ändere in die Breakpoints 320,480,768,1024,980,1200 (damit ich es am desktop kontrollieren kann, nein, hab noch nicht online)

@media only screen and (min-width: 320px)
@media only screen and (max-width: 480px)
@media only screen and (min-width: 768px)
@media only screen and (max-width: 1024px)
@media only screen and (min-width: 980px)
@media only screen and (max-width: 1200px)

läuft das dann auf den mobile devices auch oder brauch ich extra feste definitionen zusätzlich wie min-device-width...portrait...

Dankeschön

.... Frage: Wenn ich dann neue Breakpoints setze wie

@media only screen and (min-width: 1024px) and (max-width: 1200)
@media only screen and (min-width: 320px)
@media only screen and (min-width: 480px)
@media only screen and (min-width: 768px)

>> brauch ich doch zusätzlich noch die ...min-device-width and landscape..Angaben für Iphone und Tablet?

das empfohlene video war echt hilfreich.

mit dem viewport-tag..width=device-width..user-scalable... entfällt die device-angabe in z.b.: @media only screen and (max-width:768px){...}

nur wird nicht auf die landscape-betrachtung eingegangen. kann man die einfach anfügen mit: @media only screen and (max-width:768px) and (orientation:landscape) {
...} ??

mia_aim · 26.08.2012

AW: Hilfe, Media Queries für mobile devices

heißt die anweisung für landscape modus:
- (min-width:320px) and (max-width:480px) and (orientation: landscape)
- (max-width:480px) and (orientation: landscape)
oder mit min-device-width??

es gibt so viele schreibweisen und jeder behauptet was anderes. i go crazy.

mia_aim · 26.08.2012

AW: Hilfe, Media Queries für mobile devices

und was passiert, wenn bestimmte größen definiert werden aber mobile devices, die nicht darin berücksichtigt wurden (durch das raster fallen)? wie werden die dann angezeigt?? ist hier jemand, haaaallooo!!

randacek_pro · 26.08.2012

AW: Hilfe, Media Queries für mobile devices

Hallo mia,

bei diesen Media-Queries handelt es sich nicht um exklusive Angaben, also du entwickelst kein Design nur für 480px, 768px und 1024px, sondern hier bedeutet es halt: alle Viewports unter (einschließlich bis) 480px werden vom ersten Fall angesprochen, darauf baut dann der zweite Fall auf (der alle von 481 bis einschließlich 768px) anspricht und alle von 769 bis 1024px werden vom dritten Fall angesprochen, obwohl da auch eine Begrenzung auf 1200px angibst.
Das heißt: diese Styles, so sollte es ja auch sein, funktionieren fließend - es ist ein fließendes (floating) Layout, weshalb man eben auch nicht für jede Auflösung eine eigene Versionen designen müssen sollte

Nur eben die jeweils relevanten Unterschiede, die sich aus der Größenänderung ergeben werden überschrieben. Genau das ist das CSS = Cascading Style Sheet - es arbeitet also kaskadierend.
Daher brauchst du nicht immer alles neu zu definieren, sondern änderst quasi nur das, was sich auch wirklich verändert (Bsp: ein Bild kann bei einer Gesamtbreite von 480px im Layout nicht ganz so groß dargestellt werden, als wenn dir insgesamt 1024px zur Verfügung stehen, dann kann das Bild auch mehr Platz einnehmen) - was aber genau der Gedanke responsiven Designs ist, nämlich, dass sich die Größe "dynamisch" an den vorhandenen Platz anpasst und du damit gar nicht so oft unterscheiden brauchst, da es sehr unpraktisch wäre, wenn nehmen wir mal an, dir halt keine 480px zur Verfügung stehen, sondern nur 390px... oder 520, usw...

Genau deswegen meine ich ja, es greift fließend, ein gutes, stabiles Design braucht keine x-zig-fachen Unterscheidungen, sondern passt sich dynamisch an. Daher greift es halt für zB alle Größen zwischen 1 und 480px in der Breite (wobei 1px jetzt nur zur Veranschaulichung der Funktionsweise dienen soll - das ist natürlich in der Praxis Quatsch

).
Es gibt immer Elemente, die in ihrem Verhalten und ihrer Funktion gleich bleiben - daher das "Grund-"CSS, kaskadierend, je nach Fallunterscheidung, bauen die anderen darauf auf, und nur, wenn sich etwas wirklich signifikant dahingehend ändern muss, dass die Größenverhältnisse sonst nicht mehr mit dem Grundlayout vom Konzept her übereinstimmen würden, werden die Einstellungen überschrieben.
Deswegen "erben" diese folgenden Fälle immer die Eigenschaften des "bis-480px-CSS" und ergänzen sie aufeinander aufbauend, kaskadenhaft, wie bei einem Springbrunnen, der in Stufen/Treppen "feuert", nur das, was jeweils angepasst werden muss.
Dann rutscht da auch nix durch.
Eher noch ein Problem ist, dass du eine Begrenzung nach oben angibst

HTML:

@media only screen and (min-width: 1024px) and (max-width: 1200)

was soll also mit Viewports größer als 1200px geschehen?

Bspw. da du ja versuchst, dich an alle denkbaren Situationen anzupassen, wenn jemand einen Widescreen mit 2650x1600 hat, und die Fläche, die deine Website in seinem Browser auf dem Screen einnehmen kann dann vielleicht so 2600px wäre (nur mal als Gedankenspiel)? Dann würdest du genau genommen ja keine Anweisung für diesen Fall definieren

Also, es geht hier nicht darum, für jeden Viewport eine eigene Version zu schaffen, sondern das Layout so zu gestalten, dass es immer ordentlich funktioniert.
Daher wäre hier eine Größenbeschränkung eher kontraproduktiv, da du sie am oberen Ende der Fallunterscheidungen ansetzt. Sinn machen würde das nur, wenn du einen speziellen Fall herauspicken willst, wo dein Design an einen genau definierten Viewport angepasst werden soll. Zwar bieten die Media Queries diese Möglichkeit, aber wie gesagt, es ist nicht sehr produktiv grundsätzlich so heranzugehen, dass du wirklich für jedes Gerät, jeden Bildschirm, usw. eine eigene Version anfertigst - denn erstens ist das ein riesiger Aufwand (auch von der Wartung) und zweitens kann es dann immer Fälle geben, die man nicht bedacht hat.
Also es geht darum, das Aussehen möglichst überall konsistent gleich zu halten - und dazu sollten maximal ein paar Fallunterscheidungen "genügen".

Was für eine Seite soll es denn genau werden?

Lieber Gruß

mia_aim · 27.08.2012

AW: Hilfe, Media Queries für mobile devices

Ich danke dir sehr für deine wohlwollende und informative Antwort. Es geht um eine Webseite für meine Schwester, sie hat eine Boutique eröffnet. Die Seite soll möglichst auf allen Endgeräten schön angezeigt werden und entsprechend qualitativ schöne Fotos enthalten.
Daher hab ich mir auch die Begrenzung von 1200px (später dann em) für Desktopgröße überlegt, weil die Fotos ab einer bestimmten Browsergröße irgendwann nur noch schlecht aufgelöst aussehen, irgendwann muss mal ein Stop eingesetzt werden, sonst liegt unnötig Dateigröße auf der Seite. Werde für die verschiedenen Größen unterschiedlich aufgelöste Fotos einsetzen, damit eben nicht zu viel Balast mit den fluid Images geladen werden muss. Javascript hat auch ne Lösung aber weiß nicht so recht, ob das echt läuft..

LG

randacek_pro · 28.08.2012

AW: Hilfe, Media Queries für mobile devices

Jetzt bin ich aber ganz neugierig: was wird denn in dieser Boutique verkauft?

Ja, das mit der Maximalgröße der Bilder verstehe ich - aber dazu brauchst/solltest du nicht eine Maximalgröße für die Gültigkeit des CSS angeben - das wäre eher kontraproduktiv, weil, wie gesagt: was machst du, wenn der Viewport doch mal noch breiter ist?
es würde doch zureichen, für die Bilder selbst im CSS eine Maximalgröße anzugeben, bzw an ihrer Größe nix zu skalieren, so dass sie halt nur in der maximal möglichen Pixel-Auflösung angezeigt werden (wenn eine 800px breite Grafik nicht skaliert wird, wird sie auch nur max. 800px breit angezeigt), oder du gibst eben eine feste Größe an, oder eine maximale Größe, so dass sie im Layout nie größer als (im Beispiel) 800px werden...

Viele Grüße

mia_aim · 29.08.2012

AW: Hilfe, Media Queries für mobile devices

hallo randacek_pro, es handelt sich um eine schmuckboutique. brauch dafür auch eine fotogalerie, kannst du mir eine css3 lösung empfehlen, in der man eine übersicht in form von kleinen bildausschnitten für die produktpalette hat + einen großen bildausschnitt zum vor-zurück weiterklicken?
LG

patrick_l · 29.08.2012

AW: Hilfe, Media Queries für mobile devices

mia_aim schrieb:
brauch dafür auch eine fotogalerie, kannst du mir eine css3 lösung empfehlen,

Mit CSS3 ist zwar allerlei Spielerei möglich, ich würde aber hier eher eine Slideshow oder Content-Overlay-Box nutzen. Du kannst zwar mit Hilfe von Hacks und Scripten (z.B. modernizr) einiges anstellen, ob das immer so sinnvoll ist stelle ich mal in Frage.

Ich bin zwar selber ein Fan von den neuen HTML5/CSS3-Features. Mache aber auch (noch) nicht alles was möglich ist. Wie gesagt, ich würde vielleicht eher einen Slider (mit jQuery) oder ähnlichem nutzen. Falls du es unbedingt mit CSS3 umsetzen möchtest, hier mal ein Link.

CSS3 Lightbox

Was nun das HTML5 Boilerplate und andere Vorlagen angeht, ist hier ja nichts strickt vorgegeben. Es soll einem nur die Arbeit erleichtern. Unter anderem ist ja das modernizer ja auch beim HTML5 Boilerplate dabei.

Grüße Patrick

randacek_pro · 29.08.2012

AW: Hilfe, Media Queries für mobile devices

Hallo Mia,

ich würde auch vorschlagen, genau wie Patrick das schon angesprochen hat, dass du für die Übersicht der Produkte erst mal einen"klassischen" Slider nimmst - oder ganz "old school" wäre da auch noch die normale Galerie mit Thumbnails der einzelnen Bilder - hat den Vorteil (gerade bei mobilen Geräten), dass die Bandbreite nicht so strapaziert wird (also die Ladegeschwindigkeit genauso wie das Volumen, speziell bei Volumen basierten Mobiltarifen).
Und dann bei Klick auf ein Bild könnte sich die Lightbox öffnen - der Link von Patrick zeigt eine ebenfalls leichte und gleichsam schöne Variante.

Lieber Gruß