Responsive Webdesign

[Wirths Media]

Hallo,

ich versuche mich gerade an meinem ersten Responsive Webdesign, so weit, so gut.

Nur welche Größen verwendet ihr?

Soll ich wirklich jeden Smartphone / Tablet berücksichtigen?

Derzeit habe ich...

@media screen and (min-width: 481px) and (max-width: 1024px)
und
@media screen and (max-width: 480px)

sowie einen allgemeinen Teil in Verwendung.

Bin auf eure Meinung gespannt.

Gruß
Daniel

[gurken]

ich passe immer 4 max-width Größen an:

900
725
550
400

damit fahre ich sehr gut, ist zwar mehr Arbeit da ich jede Größe manuell anpasse, dafür habe ich kaum Probleme und geht auf fast allen Geräten

[elmex]

Also 1024 und 480 sind mir ja noch logisch (übliche Display Auflösungen) aber wie kommt man auf 900, 725, 550 und 400? Wieso ausgerechnet diese Werte?

[Melegrian]

Komme ich auch, nicht auf diese, jedoch auf ähnliche Werte, weil ich mich eigentlich nicht nach irgendwelchen häufig verwendeten Größen richte, sondern einfach nur schaue, was beim stufenlosen Verkleinern passiert und danach die Media Queries setze. Zum Beispiel unter einer gewissen Größe keine Blocksätze mehr oder Images mit verkleinern oder wenn die erste Sidebar nach unten springt, diese dann auf width 100% setze. Da das aber nur für den Eigenbedarf ist, könnte es sein, das ein richtiger Webdesigner das noch anders handhabt.

Unter 600 braucht eigentlich kaum noch etwas geändert werden, weil sich ab da eigentlich nur noch die Breite stufenlos mit width 100% anpasst. Also was bei 480 passt, passt auch bei 320, zumindest bei meinen Seiten.

[elmex]

@Melegrian

Das mit dem "stufenlosen verkleinern" (ich denke du meinst im Browser auf dem Desktop, oder?) reicht aber nicht wirklich aus, um plattformübegriefend optimierte Lösungen für die diversen Displays und Geräte zu erreichen. Ist zwar erstmal rein vom Optischen der richtige Ansatz, aber leider gibt es ja auch noch funktionale Unterschiede (insb. Touch oder Maus), die durchaus eine Rolle spielen. Und dann sind ja viele mobile Device auch noch drehbar und bieten an sich schon zwei unterschiedliche Ansichten.

Das ist halt die wirkliche Herausforderung an "Responsive Design". Manchmal denke ich wehmütig an die Zeiten zurück, wo man "nur" für IE, Mozilla und vielleicht noch Opera entwickeln brauchte

[Melegrian]

(ich denke du meinst im Browser auf dem Desktop, oder?)

Ja und mit diversen Vorschautools von FF und Chrome. Sicherlich, es gebe noch mehr zu beachten. Unter 600 vergrößere ich die Abstände (height) vom Menü, weil nur width in Prozent würde da nichts bringen, denke ich mir.
Die letzte Seite, die ich umstellte, hatte rechts und links eine Sidebar, die haben beide width in % und lassen sich erst einmal beide zusammenschieben bis min-width. Wird min-width erreicht, springen die halt nach unten, erst eine, dann die andere und es erfolgt jeweils eine Anpassung. Möchte nicht behaupten, dass alles optimal ist, möglicherweise kommen die auf einigen Endgeräten nicht wirklich gut.

[e-fee]

Manchmal denke ich wehmütig an die Zeiten zurück, wo man "nur" für IE, Mozilla und vielleicht noch Opera entwickeln brauchte

*seufz*

[dergoldbroiler]

Versuchs doch mal mit Bootstrap CSS.. Denn alle Geräte zu bedenken ist unmöglich und allein die Abfrage der Größen ist bald nicht mehr mobilefriendly. Bootstrap rechnet in Prozenten und hat letztlich ein Spaltenraster, so dass - z.B. 3 Spalten bei hohen Auflösungen in 1 Spalte und 3 Zeilen umbrechen für kleine Displays.
Schieb hier ..

Code: Alles auswählen

http://getbootstrap.com/css/

.. einfach mal das Fenster zusammen

[Can]

mobil first - sprich max-width wird nicht verwendet sondern min-width und das "default"-CSS ist für Mobile Geräte. Because of ... Reasons ? Keine Ahnung soll wohl schneller sein, hab es ehrlich gesagt nie hinterfragt.

Benutze auch in nicht-Bootstrap Projekten die Bootstrap Standard Viewport-Größen. Smartphone "Anzeige Pixel" sind in der Breite meist 320+.

Stufenlos verkleinern ist mMn. mist da mangelnde Kontrolle über umbrechen usw.

[Melegrian]

Stufenlos verkleinern ist mMn. mist da mangelnde Kontrolle über umbrechen usw.

Bin mir zwar nicht wirklich sicher, dachte mir nur, dass ich mit solchen Testreihen genug Kontrolle hätte. Irren meinerseits möchte ich nicht ausschließen.

<style>
.kunstwelt_738 {display:none}
.kunstwelt_739 {display:none}
.kunstwelt_740 {display:none}
.kunstwelt_741 {display:none}
.kunstwelt_742 {display:none}

.anders_738 {display:none}
.anders_739 {display:none}
.anders_740 {display:none}
.anders_741 {display:none}
.anders_742 {display:none}


@media (max-width:738px) { .kunstwelt_738 {display:inline} }
@media (max-width:739px) { .kunstwelt_739 {display:inline} }
@media (max-width:740px) { .kunstwelt_740 {display:inline} }
@media (max-width:741px) { .kunstwelt_741 {display:inline} }
@media (max-width:742px) { .kunstwelt_742 {display:inline} }

@media (min-width:738px) { .anders_738 {display:inline} }
@media (min-width:739px) { .anders_739 {display:inline} }
@media (min-width:740px) { .anders_740 {display:inline} }
@media (min-width:741px) { .anders_741 {display:inline} }
@media (min-width:742px) { .anders_742 {display:inline} }

</style>
</head>

<body>
<p>
<span class="kunstwelt_738">738</span> |
<span class="kunstwelt_739">739</span> |
<span class="kunstwelt_740">740</span> |
<span class="kunstwelt_741">741</span> |
<span class="kunstwelt_742">742</span>
</p>
<hr>
<p>
<span class="anders_738">738</span> |
<span class="anders_739">739</span> |
<span class="anders_740">740</span> |
<span class="anders_741">741</span> |
<span class="anders_742">742</span>
</p>

Und die ermittelten Werte stimmten letztendlich mit denen von window.innerWidth überein.

Code: Alles auswählen

<script type="text/javascript">
alert&#40;window.innerWidth&#41;;
</script>

Welche Kontrolle sollte besser sein?
Kenne keine bessere Lösung.

[nerd]

Bin mir zwar nicht wirklich sicher, dachte mir nur, dass ich mit solchen Testreihen genug Kontrolle hätte. Irren meinerseits möchte ich nicht ausschließen.

Also mir waere nicht bekannt, dass sich echtes "stufenlos verkleinern" mit nur css wirklich umsetzen laesst. Bei bildern ist es ja noch einfach, aber wie will man das bei fonts machen - die skalieren ja nicht mit der breite des elternelements runter, selbst wenn man %-angaben verwendet.
Wenn man bild (block) rechts und text (inline) links mit gleicher groesse hat, dann wird beim verkleinern das bild proportional kleiner, aber der text schmaler und laenger.
Kann man zwar mit max-height ein bischen korrigieren, ist aber keineswegs "stufenlos".

Keine ahnung was das kunstwelt beispiel sein soll. Ich will aber doch nicht fuer jede moegliche pixelgroesse ein eigenes css layout bereitstellen, testen und warten und dafuer noch megabyteweise css dateien bereitstellen muessen...

[Melegrian]

font-size wird nicht mit Prozent bis zur Unleserlichkeit verkleinert. Sicherlich wird der Text länger oder die Seite an sich, wenn drei DIVs untereinander statt nebeneinander angezeigt werden. Und das war nur ein Beispiel für eine Testreihe (eine andere fand ich nicht mehr, die werden ja wieder gelöscht), um die günstigsten Werte für Media Queries zu ermitteln, zum Beispiel (und nicht mehr als ein Beispiel) für eine Sidebar, bis wann float:none; width:100% und ab wann float:right; width:22%.