[bug] Zoomen is disabled

[Verwijderd]

Het volgende is een berucht stukje code, helaas ook te vinden op tweakers:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0;" />

Hiermee voorkom je dat gebruikers (of browsers) de pagina zoomen. Vanuit ontwikkelaar perspectief begrijpelijk, je houdt immers controle over je design. Echter, dit is een worst practice. Je ontneemt gebruikers namelijk een essentiele interactie op touch devices: zoomen. Dit is een feature, en geen constaint.

Een goed compromis is dit:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0;" />

Je start dus met een 1 op 1 layout, maar ontneemt gebruikers niet de mogelijkheid tot zoomen. Dat gebruikers door te zoomen soms de layout verknallen, dat zijn ze gewend, ze zoomen dan weer uit en alles snapped weer terug.

Motto: Gebruikers voor design.

[Misha]

Heb je hier een voorbeeld van? Ik ben het zelf wel eens her en der tegengekomen, maar de layout snapte niet direct goed terug. Enkel wanneer ik pietje precies het juiste zoomniveau had bereikt snapte hij weer terug

Ik ben overigens van mening dat als een gebruiker ergens pinch-to-zoom wil gaan gebruiken om iets te doen, we wellicht eerder naar de oorzaak daar van moeten kijken. Mocht het veel gebruikt worden om bijvoorbeeld details van foto's te kunnen zien, dan valt daar wellicht wat op te verzinnen

[ormagon]

Ik snap het probleem dat Fledder heeft, maar denk inderdaad (zoals Misha eigenlijk zegt) dat je gaat zoomen omdat de presentatie van de site op dat moment niet toereikend is. Het idee van responsive design is juist dat zoomen niet meer nodig is.

Maar ik kan me ook voorstellen dat je graag een A versie van de website op je mobiel ziet en dan inzoomt op het gedeelte dat je wilt uitlichten. Dat is makkelijk op te lossen door ingelogde gebruikers de mogelijkheid te geven om standaard een bepaalde 'versie' van de website te weergeven.

[Bosmonster]

ormagon schreef op woensdag 03 april 2013 @ 02:53: Het idee van responsive design is juist dat zoomen niet meer nodig is.

Hier heb je gelijk in, maar een telefoon blijft een klein schermpje. Bijvoorbeeld afbeeldingen (bij T.NET bijvoorbeeld veel screenshots) kunnen netjes meeschalen, maar worden daardoor ook juist erg klein. En ze zijn niet altijd aanklikbaar voor een volledige versie.

Dus of zoomen een oplossing is of niet (persoonlijk ben ik het met hem eens in dit geval), hij stipt wel een goed punt aan.

[Verwijderd]

Mijn punt is dat zoomen een keuze van de gebruiker moet zijn, en niet van de designer. Een voorbeeld is zowel tekst als foto's inzoomen. Het is een illusie om te denken dat responsive design een rendering oplevert die voor alle soorten gebruikers ideaal is. Denk bijvoorbeeld aan mensen die tekst liever groter lezen dan 12 pixels, maar bijvoorbeeld ook het inzoomen van produktfoto's.

Even los van de voorbeelden: zoomen is een standard capability, het is vrij cru om dit eenzijdig uit te zetten. Er is ook niks mis met een initiale 1 op 1 zoom, waarna de gebruiker kan zoomen. Het heeft niet echt nadelen en wel veel voordelen.

[Misha]

Verwijderd schreef op woensdag 03 april 2013 @ 08:52:
Mijn punt is dat zoomen een keuze van de gebruiker moet zijn, en niet van de designer.

Heel goed punt. Zoomen mag. Het is uiteindelijk een zeer slechte gebruikerservaring als een gebruiker een standaard functionaliteit wil gebruiken en er van wordt weerhouden

[JoostBaksteen]

We zijn hiermee bezig en hebben als test het zoomen op onze ontwikkelserver weer ingeschakeld.

Wel moeten we dit nog even iets beter testen voordat we het echt committen, maar het komt er, als alles goed verloopt, binnenkort aan

[ Voor 6% gewijzigd door JoostBaksteen op 03-04-2013 16:26 ]

[Verwijderd]

Cool, leuk om dev feedback te krijgen.

[Hooglander1]

Als het in een echte mobiele layout niet werkt kan ik het begrijpen, maar in de B-grade is het wel echt vervelend, aangezien die niet wezenlijk anders is dan A.

[JoostBaksteen]

Ik kan melden dat het zoomen inmiddels ook weer ingeschakeld is

[Xenvius]

Bump

Ik kon verder nergens iets terugvinden over zoomen, maar uit de laatste reactie blijkt dat het zou moeten werken. Op mijn ipad mini werkt het niet in Chrome, maar ook op mijn HTC One X met Cyanogenmod werkt het niet in Chrome. Wanneer ik een artikel lees zoom ik graag in op de kolom met tekst, waardoor de tekst op een klein scherm voor mij beter leesbaar wordt. Wanneer ik klaar ben met lezen zoom ik weer uit, zodat ook de tracker weer zichtbaar wordt. Dat lukt nu niet, wat voor mij onprettig lezen is.

[ Voor 8% gewijzigd door Xenvius op 01-09-2013 19:32 . Reden: aanvulling ]

[Elfjes]

Volgens mij is met de laatste iteratie zoomen juist weer uitgeschakeld. Dit kwam omdat sommige browsers (chrome) automatisch inzoomden bij het invullen van een typ-veld (reactie plaatsen) en vervolgens het reactieveld deels buiten scherm viel, wat vrij irritant was.

[crisp]

Elfjes schreef op zondag 01 september 2013 @ 20:18:
Volgens mij is met de laatste iteratie zoomen juist weer uitgeschakeld. Dit kwam omdat sommige browsers (chrome) automatisch inzoomden bij het invullen van een typ-veld (reactie plaatsen) en vervolgens het reactieveld deels buiten scherm viel, wat vrij irritant was.

Hmm ja inderdaad, maar volgens mij heeft c.williams1987 het hier over grade A of B. Ik heb geen idee of je zoomen alleen voor C/D uit kunt schakelen.

[ Voor 16% gewijzigd door crisp op 01-09-2013 21:05 ]

[Misha]

We hebben het inderdaad weer ingeschakeld, waarbij wat Elfjes zegt een van de redenen was. Ik merkte echter wel laatst dat ik nu op mijn iPad (A) ook niet meer kan inzoomen, wat dan weer niet de bedoeling was A zou mogen inzoomen, gezien je op dergelijke devices geen verschrikkelijke auto-zoom hebt

[Elfjes]

Hmm daar zit natuurlijk wel wat in. Ik kan bevestigen dat op mijn Nexus 7 in landscape (B ) zoomen inderdaad niet werkt, al stoort het me niet. Alles is groot genoeg om goed te kunnen lezen en navigeren. Het enige is dat de website qua breedte niet helemaal op m'n device past (pixel of 30) en er dus altijd een horizontale scroll is (maar volgens mij valt dat buiten de scope van TRD).

[Xenvius]

Ik heb nog even zitten lezen op zowel mijn telefoon als op mijn tablet en ik moet zeggen dat het me op me op mijn One X niet zo stoort dat ik niet kan zoomen. De tekst is duidelijk leesbaar en alles binnen de artikelen is voor zover ik kan zien goed op schaal. Op de ipad mini daarentegen is de tekst voor mij echt slecht leesbaar doordat ik niet kan zoomen.

[Misha]

Elfjes schreef op zondag 01 september 2013 @ 22:10:
Hmm daar zit natuurlijk wel wat in. Ik kan bevestigen dat op mijn Nexus 7 in landscape (B ) zoomen inderdaad niet werkt, al stoort het me niet. Alles is groot genoeg om goed te kunnen lezen en navigeren. Het enige is dat de website qua breedte niet helemaal op m'n device past (pixel of 30) en er dus altijd een horizontale scroll is (maar volgens mij valt dat buiten de scope van TRD).

Dan zou hij gewoon A moeten tonen, en het liefst heb ik dat als A getoond wordt, de zoom is ingeschakeld

c.williams1987 schreef op zondag 01 september 2013 @ 23:35:
Ik heb nog even zitten lezen op zowel mijn telefoon als op mijn tablet en ik moet zeggen dat het me op me op mijn One X niet zo stoort dat ik niet kan zoomen. De tekst is duidelijk leesbaar en alles binnen de artikelen is voor zover ik kan zien goed op schaal. Op de ipad mini daarentegen is de tekst voor mij echt slecht leesbaar doordat ik niet kan zoomen.

Het lastige aan de iPad Mini is dat het zich niet laat identificeren als een kleine tablet, maar gewoon als een grotere tablet. Daar is vziw nog geen workaround voor bedacht door iemand

[JoostBaksteen]

Misha schreef op woensdag 04 september 2013 @ 10:10:
[...]

Het lastige aan de iPad Mini is dat het zich niet laat identificeren als een kleine tablet, maar gewoon als een grotere tablet. Daar is vziw nog geen workaround voor bedacht door iemand

Naja, geen goede in ieder geval, je zou aan de hand van de device pixel density iets af kunnen lezen, maar dan ga je specifiek voor de ipad mini uitzonderingen maken. Maar moet je dat dan ook doen voor de nexus 7, samsung galaxy tab? Smart phones met HD resolutie?

Uiteindelijk ga je dan veel te veel uitzonderingen maken waardoor de oplossing niet onderhoudbaar meer is en op die paar speciale devices niet lekker werkt en toch weer voor problemen gaat zorgen. Dat zie je nu ook met de devicegrade detectie, soms krijgen/kregen mensen met een HTC One een grade 'F' waardoor ze geen javascript kregen, ten onrechte, maar dat zijn wel de moeilijkheden als er elke dag 32 nieuwe (android) devices uitkomen.

Je moet de code generiek houden, er is geen goede andere manier.

[Misha]

Kun je naar DPI kijken? De mini heeft 163, de iPad 2 132, maar webkit based browsers beschikken dacht ik niet over een resolutie attribute, waardoor je dat niet kan gebruiken

[Xenvius]

Misha schreef op woensdag 04 september 2013 @ 10:10:
Het lastige aan de iPad Mini is dat het zich niet laat identificeren als een kleine tablet, maar gewoon als een grotere tablet. Daar is vziw nog geen workaround voor bedacht door iemand

Maar is het dan zo dat ook bij de iPad op normaal formaat niet gezoomd kan worden? Het lijkt me prettig om de beslissing wel of niet te zoomen bij de gebruiker te laten. Ook op een grotere tablet vind ik het prettig om te zoomen op wat ik op dat moment lees.

[Misha]

Misha schreef op woensdag 04 september 2013 @ 10:10:
[...]


Dan zou hij gewoon A moeten tonen, en het liefst heb ik dat als A getoond wordt, de zoom is ingeschakeld

Dat zeg ik hier We zouden moeten kijken of we het mogelijk kunnen maken dat je op A kan blijven inzoomen

[_David_]

Kan zoomen weer worden ingeschakeled totdat Responsive af is? Er zijn nu pagina's waarbij het menu etc wel schaalt maar de inhoud niet

[Misha]

Over welke pagina's heb je het dan?

[CodeCaster]

Kan het uitschakelen van zoomen sowieso verwijderd of optioneel worden? Ik wil kunnen uitzoomen bij de forumlijst en in topics.

Android 4.1.2, Chrome 31.0.1650.59.

[ Voor 13% gewijzigd door CodeCaster op 10-12-2013 21:20 ]

[Hooglander1]

Uitzoomen kan je sowieso niet, aangezien de pagina simpelweg niet breder is.

[CodeCaster]

Dat is toch net het idee van responsive design? Als je uitzoomt wórdt de pagina breder. Of bedoel je dat je niet kunt uitzoomen omdat responsive site net zo breed is als je scherm? Andere sites kunnen dat ook, ik weet niet hoe.

De huidige tekstdichtheid is te laag. "Met de oude layout"™ kon ik met gemak 15-20 topics in beeld hebben (en dus een vergelijkbaar zoomniveau om posts te lezen), nu is dat gereduceerd tot 6, met bijbehorend zoomniveau in de posts. Ik scroll me een RSI-duim; ik wil graag zelf kunnen zoomen.

[ Voor 19% gewijzigd door CodeCaster op 10-12-2013 21:38 ]

[_David_]

Waarom kan ik niet zoomen?
Het zoomen hebben we helaas moeten uitschakelen. Omdat er nog een vendor is (I'm looking at you, Apple) die het nodig vindt om automatisch voor jou te gaan inzoomen als je op een native element klikt (bijv. een tekst veld), bracht dit complicaties met zich mee op alle iOS devices. Op al die devices kon je hierdoor bijvoorbeeld niet je volledige reactie zien als je die aan het typen was, wat zoals je kunt begrijpen ontzettend irritant is. Je volledige reactie kunnen lezen ten opzichte van het kunnen inzoomen vinden wij waardevoller, vandaar dat we hiervoor hebben gekozen. Wij balen hier waarschijnlijk net zo hard van als jij, maar het is voor nu nodig. We zijn zelf namelijk van mening dat de mogelijkheid tot inzoomen bij jou moet liggen als gebruiker, niet bij ons als website. We hopen dat Apple hopelijk het licht gaat zien, en deze massieve 'bug' repareert feature uitfaseert.

En uitzoomen kan zowizo niet omdat de pagina niet breder is dan je scherm, dat is het hele idee van RWD

[Whatson]

Het hele idee van een responsive design is dat je geen apps meer nodig hebt, de website is je app. Kun je in een willekeurige app zoomen op de content? Nee. (Wat wel een oplossing zou kunnen zijn is een font grootte instellen zodat het wat beter leesbaarder wordt voor mensen die nu klagen dat het te klein/groot is)

[CodeCaster]

Ah, die had ik niet helemaal gelezen, bedankt.

Daar zijn workarounds voor, maar die zullen vast zijn overwogen.

Whatson schreef op dinsdag 10 december 2013 @ 21:45:
Het hele idee van een responsive design is dat je geen apps meer nodig hebt, de website is je app. Kun je in een willekeurige app zoomen op de content? Nee.

Is dat dan goed? Ik bepaal zelf wel welke tekstgrootte ik prettig vind lezen en op welke afmetingen ik afbeeldingen bekijk.

[ Voor 43% gewijzigd door CodeCaster op 10-12-2013 21:49 ]

[_David_]

Whatson schreef op dinsdag 10 december 2013 @ 21:45:
Het hele idee van een responsive design is dat je geen apps meer nodig hebt, de website is je app. Kun je in een willekeurige app zoomen op de content? Nee. (Wat wel een oplossing zou kunnen zijn is een font grootte instellen zodat het wat beter leesbaarder wordt voor mensen die nu klagen dat het te klein/groot is)

Nog meer layout instellingen er staan wat custom CSS stukjes in het discussie topic die spelen met fontgrootte

[ Voor 65% gewijzigd door _David_ op 10-12-2013 21:49 ]

[Whatson]

_David_ schreef op dinsdag 10 december 2013 @ 21:48:
Nog meer layout instellingen er staan wat custom CSS stukjes in het discussie topic die spelen met fontgrootte

De NOS app (native, niet de website versie) heeft instelbare fontgrootte, dus waarom zou tweakers dat niet kunnen maken?

(Niet dat ik me stoor aan de fontgrootte zoals hij nu is )

[Misha]

CodeCaster schreef op dinsdag 10 december 2013 @ 21:47:
Ah, die had ik niet helemaal gelezen, bedankt.

Daar zijn workarounds voor, maar die zullen vast zijn overwogen.


[...]

Is dat dan goed? Ik bepaal zelf wel welke tekstgrootte ik prettig vind lezen en op welke afmetingen ik afbeeldingen bekijk.

Ik durf niet te zeggen of deze workaround ook overwogen is. Ik speel hem even door!

[crisp]

Misha schreef op dinsdag 10 december 2013 @ 22:07:
[...]


Ik durf niet te zeggen of deze workaround ook overwogen is. Ik speel hem even door!

De vraag is of je een font-size van 16px voor inputs en textareas wel acceptabel vind (als de rest standaard 13px heeft)