Responsive design

[Norbert.O]

Hallo,

Ik had vandaag wat tijd over en nu wilde ik me eens gaan verdiepen in responsive design. Ik liep direct tegen een probleem op, media queries. Tot een aantal jaar geleden was dat waarschijnlijk dé manier om apparaten van elkaar te onderscheiden, nu niet echt meer. De meeste telefoons en tablets hebben tegenwoordig een full hd resolutie, of zoals de nieuwste generatie nog groter!

Nu is mijn vraag, hoe onderscheiden jullie de verschillende apparaten van elkaar?

Ik heb al veel gegoogled en ik kom er maar niet uit. Het zijn mediaqueries of javascript oplossingen met geen tot weinig uitleg. (Geen ervaring met Javascript)

Bij voorbaat dank.

[Merethil]

Als je zo'n apparaat hebt, check deze pagina dan eens met zo'n telefoon/tablet:
http://purecss.io/grids/

Ik heb gemerkt dat op veel apparaten deze website nog steeds responsive is, maar heb geen FullHD tablet met Android, alleen iOS...

Edit: Check ook deze pagina voor een aantal voorbeelden waarmee gewerkt kan worden: http://stephen.io/mediaqueries/

[ Voor 19% gewijzigd door Merethil op 16-06-2014 22:40 ]

[Mavamaarten]

Is het niet zo dat bij media queries er geen hardware pixels gebruikt worden (de 1080p waar jij het over hebt) maar pixels in verhouding tot de pixeldichtheid? Er wordt dus eigenlijk alleen rekening gehouden met de grootte van het scherm.

[Merethil]

Mavamaarten schreef op maandag 16 juni 2014 @ 22:44:
Is het niet zo dat bij media queries er geen hardware pixels gebruikt worden (de 1080p waar jij het over hebt) maar pixels in verhouding tot de pixeldichtheid? Er wordt dus eigenlijk alleen rekening gehouden met de grootte van het scherm.

Volgens mij is dit wat ze doen met Purecss (en vast ook andere CSS frameworks die responsive design vergemakkelijken). Bij Purecss doen ze het door te werken met alle sizes in "em" ipv "px" waardoor je browser doorgeeft op welke schaal dingen moeten worden aangepast.
Ik weet niet zeker of het op elk apparaat zo werkt, maar out of the box werkt het op pc's, linux en iOS/OSX voor zover ik heb gezien.

[Norbert.O]

@Merethil: Ik heb even gekeken naar die site en ik krijg inderdaad een mobiele site te zien.

@Mavamaarten: Zoiets kwam ik inderdaad ook al tegen maar dat werd in de reacties weer tegengesproken...

[Merethil]

Norbert.O schreef op maandag 16 juni 2014 @ 23:01:
@Merethil: Ik heb even gekeken naar die site en ik krijg inderdaad een mobiele site te zien.

@Mavamaarten: Zoiets kwam ik inderdaad ook al tegen maar dat werd in de reacties weer tegengesproken...

Purecss gebruik alleen media queries, er zijn geen JavaScript-truukjes in meegenomen. Dus ik gok dat je dan wel oké zit met de andere apparaten als je media queries juist gebruikt

[Barryvdh]

Media queries is niet wat 'tot een aantal jaar geleden' de manier voor responsive design was, maar wordt juist de laatste tijd/jaren meer gebruikt. Het hele idee is juist dat je niet verschillende apparaten wil onderscheiden, maar dat je website op elk apparaat goed werkt.
Kijk bijvoorbeeld ook wat er gebeurt op http://getbootstrap.com/css/ als je je scherm breder/minder breed maakt.
Met media queries maak je een aantal breakpoints, en een deel kan je vaste breedte of fluid maken zodat het altijd past.

[Bosmonster]

Tot een aantal jaar geleden was dat waarschijnlijk dé manier om apparaten van elkaar te onderscheiden, nu niet echt meer.

Zonder media queries geen responsive...

MQ's zijn ook niet om apparaten te onderscheiden (denk dat dat de misvatting is waar je bovenstaande op baseert), maar om te configureren op welk moment je UI alternatieve CSS voorgeschoteld krijgt en daarmee dus responsive wordt aan de grootte van je device screen.

De meeste telefoons en tablets hebben tegenwoordig een full hd resolutie, of zoals de nieuwste generatie nog groter!

Er is een groot verschil tussen pixel ratio en weergaveresolutie. Dat je telefoontje een full HD scherm heeft, wil niet zeggen dat dat ook de weergaveresolutie is. Meestal wordt er tegenwoordig een pixel ratio van 2 aangehouden (ook wel gewoon Retina genoemd). En het neigt tegenwoordig naar nog hoger met de idiote pixeldichtheid die sommige fabrikanten in telefoons stoppen.

Het zijn mediaqueries of javascript oplossingen met geen tot weinig uitleg. (Geen ervaring met Javascript)

Voor responsive heb je ook geen javascript nodig gelukkig. Het is, net als altijd, een extra hulpmiddel om bepaalde effecten te bereiken. (Al wordt het ook in responsive helaas regelmatig nodeloos misbruikt)

Ga er gewoon eens mee aan de slag zou ik zeggen, zodat je minder aannames hoeft te doen.

[ Voor 17% gewijzigd door Bosmonster op 17-06-2014 10:09 ]

[JJ93]

Mobiele browsers geven een andere resolutie door dan telefoons/tablets daadwerkelijk hebben. Mijn HTC One met een 1920x1080 resolutie op 4,7" geeft bijvoorbeeld een resolutie van 960x540 door. Hierdoor schaalt een website gewoon mee.

Een simpel voorbeeld: (resultaat minder breed maken)
http://jsfiddle.net/6ZdL2/

Het is ook mogelijk om via de user-agent en andere methodes te bepalen of het om een mobile device gaat.
Bv: http://detectmobilebrowsers.com/

[ Voor 24% gewijzigd door JJ93 op 17-06-2014 14:21 ]

[kaassouffle]

Hier een topic van niet al te lang geleden (met dezelfde titel), bevat enkele goede links volgens mij: Responsive design

[gitaarwerk]

Wat Bosmonster eigenlijk zegt.

Er zijn wat meta tags wat er voor zorgt dat je gewoon ratio herkent als bijvoorbeeld 320x480 (and up).

Verder is em inderdaad wat gebruikelijker, maar wordt je project groot, is soms em wat slecht onderhoudbaar. Wij werken met rems, maar heeft ook wat nadelen hier en daar (sowieso je fallbacks).

Persoonlijk ben ik ook wel fan van punten, maar ook dat heeft zijn nadelen.

Probeer zo min mogelijk met javascript te werken voor responsive. En kijk voor de grap eens naar de mobile first methode.