Responsive website, schalen of breakpoints?

[_Brake_]

Hallo Tweakers,

We zijn bezig met het ontwikkelen van een responsive website, waarbij een aantal vragen zijn ontstaan gedurende het project.

1. Ga je schalen tot een bepaalde resolutie, waarnaar je een breakpoint instelt en een nieuwe layout geladen wordt, zoals op www.responsivegridsystem.com?
2. Ga je niet schalen (en dus laat je scrollbalken ontstaan), maar stel je meerdere breakpoints in die een andere layout laden, zoals de website die het meest bij ons bekend is: www.tweakers.net.
3. Of ga je niet schalen, breakpoints instellen, en vervolgens wel schalen zoals op www.dtg.nl.

Daarnaast heb je natuurlijk de vraag op welke resoluties je de breakpoints instelt. De 'pixel-war' bij mobile devices is on, het zal niet lang meer duren dat een 5" telefoon een Full HD resolutie weergeeft, terwijl een (oudere) tablet van 7" of 10" slechts een HD resolutie weergeeft. Zodra Full HD op alle devices (ongeacht de schermgrootte) gangbaar is, hebben de breakpoints niet meer zoveel zin. Wat is dus nog de levensduur van breakpoints (of zelfs responsive websites als je dit doortrekt!).

En dan het laatste punt. Zelfs al stel je het schalen niet in, en maak je een website op bijv. 1200 pixels breed, dan zal een mobile device zelf gaan schalen en de site volledig weergeven op zijn (bij benadering) 780 pixels brede scherm. Of mensen al dan niet in kunnen zoomen op de site, stel je dan zelf natuurlijk in.

Kort samengevat eigenlijk de stelling: wat is het nut van een responsive websites die schaalt (dus met percentages werken ipv pixels) daar waar de mobile devices dit zelf al doen en al dan niet gebruik maakt van breakpoints (met de pixel-war in gedachten)?

[crisp]

Resolutie maakt niet zoveel uit voor breakpoints aangezien binnen webdesign dat gecorrigeerd wordt door de device pixel ratio.

Hier op Tweakers missen we eigenlijk simpelweg nog een breakpoint tussen 768 en 1024 pixels, maar die gaat er nog wel komen

Eigenlijk heb je een paar keuzes:

- volledig fluid
- breakpoints, fluid per breakpoint
- breakpoints, fixed per breakpoint

(die laatse 2 kan je eigenlijk ook weer mixen )

Breakpoints stellen je beter in staat om bepaalde content anders in te delen. Het ligt dus een beetje aan de soort content van de site wat de meest geschikte methode is

[ Voor 41% gewijzigd door crisp op 13-02-2014 15:51 ]

[_Brake_]

crisp schreef op donderdag 13 februari 2014 @ 15:47:
Resolutie maakt niet zoveel uit voor breakpoints aangezien binnen webdesign dat gecorrigeerd wordt door de device pixel ratio.

En daarmee zul je dan alleen mobiele apparaten afvangen? Bijvoorbeeld bij het instellen van een ratio van 2, waardoor je de fysieke hoeveelheid pixels deelt door 2, zal hij eerder een CSS bestand met een breakpoint van bijv. 480px pakken?

Of is aan die ratio van 2 een hele rits devices gekoppeld? Klopt een 5s bij de site aan met een pixel-ratio van 2, waardoor hij dat specifieke stukje CSS code voorgeschoteld krijgt?

[ Voor 10% gewijzigd door _Brake_ op 13-02-2014 16:14 ]

[crisp]

Pixel ratio is iets wat het device zelf bepaalt; dat is niet iets wat je zelf 'instelt' oid. Zie bijvoorbeeld Wikipedia: List of displays by pixel density (een iPhone 5S heeft dus inderdaad een pixel ratio van 2).

[ Voor 52% gewijzigd door crisp op 13-02-2014 16:28 ]

[Zoefff]

Zoals crisp al zegt staat de pixel density eigenlijk los van de discussie welke responsive methode (schalen, schalen met breakpoints of alleen breakpoints) je gebruikt. Welke keuze je hier ook in maakt, als je het goed wilt doen zul je ook moeten zorgen dat je alles in een hoge(re) resolutie aanbiedt. Dat kan je doen door goed gebruik te maken van bijvoorbeeld fonts voor je iconen, vectorafbeeldingen en een x2 variant van al je rasterafbeeldingen. Ongeacht van de pixel density van het apparaat dat gebruikt wordt, ziet alles er dan -met de aanname dat een pixel ratio van 2 momenteel de max is- er goed scherp uit.

De discussie of je voor een fluid, adaptive of responsive layout gaat (http://liquidapsive.com/ geeft een mooi voorbeeld van de verschillen) kan je vervolgens laten afhangen van je design; of omgedraaid natuurlijk het design op de keuze aanpassen.

Kies je bijvoorbeeld voor een design waarbij je 100% controle over de weergave wilt houden (denk aan een pixelprecies ontwerp) dan ligt het voor de hand om voor een oplossing te kiezen waarbij je vaste breakpoints hebt - adaptive dus. Bij alles wat tussen die breakpoints ligt heb je immers geen 100% controle over hoe de weergave is omdat je niet voor iedere resolutie een ontwerp kan maken.

Met de liquid (of fluid, what's in a name) oplossing laat je deze controle los en zal de inhoud van je site altijd passend op het scherm gerenderd worden, met het voor danwel nadeel dat je geen volledige controle over de uiteindelijke weergave hebt.

De responsive oplossing biedt een combinatie van beide. Je ontwerp biedt de ruimte om te schalen tussen de breakpoints, maar je houdt tevens de mogelijkheid om het ontwerp op verschillende breakpoints te variëren of te optimaliseren. Denk dan bijvoorbeeld aan een header die je kleiner kan maken, kolommen die je op een andere plek rendert of design elementen die je op kleinere schermen helemaal weg laat.

Je leest het wellicht al tussen de regels door, maar de laatste oplossing verdient mijn voorkeur omdat het in mijn ogen een goede mix is tussen controle over het ontwerp en het loslaten van deze controle zodat je niet wakker hoeft te liggen over de plethora van verschillende resoluties van apparaten. Je ontwerp A ziet er goed uit op resoluties van 1280+ tot 1024, ontwerp B voor resoluties van 1024 tot 768, ontwerp C voor 768 tot 480, enzovoort.

De stelling die je geeft is dus eigenlijk niet correct omdat je hierin de twee vraagstukken (#1 pixel density en #2 adaptive vs. responsive vs. liquid) onterecht bij elkaar voegt. Als je beide vragen los van elkaar stelt is het waarschijnlijk eenvoudiger hier een keuze in te maken

[crisp]

Mooie uitleg over device pixel density: http://stackoverflow.com/...i/21767407?stw=2#21767407

[gitaarwerk]

Iets waar je overigens nog goed moet over nadenken voordat je begint...

1. Ga je nog IE7 / IE8 ondersteunen? Zo ja, deze kennen geen breakpoints (en javascript fallback is erg traag).

2. Hoe ga je te werk? Wil je desktop first? of mobile first?
2a. Als je desktop first gaat, houdt er rekening mee dat je op mobiel hoogstwaarschijnlijk niet alles gaat tonen en je de bezoeker meer data geeft dan nodig.
2b. Ga je mobile first, houdt rekening met oudere browsers die geen media queries ondersteunen.

3. Ga je in een grid werken? Percentage prima, maar hoe zit het met je tussenruimte? Wil je deze vast doen? of ook in percentages? Tussenruimte in percentages zijn makkelijker te berekeken zonder teveel foefjes, maar wil je vaste tussenruimte wat consistenter is; heb je hoogstwaarschijnlijk padding/borderbox nodig. Hiervoor is een fallback in javacript voor IE7. Wederom, traag . Je kan overigens de browser in quirksmode laten functioneren.. dan geeft de boxsizing standaard border of paddingbox (weet even niet uit mijn hoofd welke exact.

4. Ga je een compiler gebruiken als Sass/Compass? Deze kunnen je behoorlijk helpen met breakpoints.

5. last but not least; een tip. style niet op ID's


Verder.. om nog in te gaan op je vraag; buiten de device/pixelratio kan het zijn dat je meerdere devices hebt met een andere breete. Iphone/android toestellen geven bijvoorbeeld een hoop 320xXXX mee. die breedte is vrij normaal voor mobiele devices. Maar een iPad mini heeft ineens een andere. Nu zijn er nog veel meer devices op komst en je wilt eigenlijk tussen een bepaald formaat gewoon de website anders laten zien. Vooral om de belangrijkste informatie voor die resoltuie, maar net zo hard de interactie mogelijk. Op zo een moment wil je dat eigenlijk de website meeschaalt totdat het fijn is om meer te tonen (of minder).

Verder sluit ik mij aan bij Zoeff en Crisp

Edit: Oh ja; nog een ding... ga je met een grid werken, dan kan je bijvoorbeeld inhoudelijk modules volledig fluid maken met hier een daar een uitzondering, en laat je het grid je breedtes, volgorde etc bepalen. Dit zou mooi samen kunnen werken met bijvoorbeeld AngularJS; maar da's nog een stap verder =). Houdt vooral goed in de gaten hoe je de styling van al je elementen over de verschillende breakpoints verdeeld.

[ Voor 9% gewijzigd door gitaarwerk op 15-02-2014 11:56 ]