Algemene info over het responsive design

[Misha]

Op 7 januari 2013 heeft Tweakers haar responsive design gelanceerd. In deze post kun je het een en ander qua achtergrond informatie lezen. De .plan voor de launch kun je hier vinden: plan: Tweakers introduceert responsive design

Wat is zo'n responsive design nou eigenlijk?

Een Responsive Design (of kort: RWD) is simpel en kort gezegd een methode van web design waarbij de content (c.q. het ontwerp) van de website zich aanpast aan het apparaat waarmee het bezocht wordt en waarbij het liefst geen concessie wordt gedaan op de gebruikerservaring. Dit betekent dat er maar 1 webadres is, en er dus geen apart (sub)domein met een aangepast ontwerp bestaat waar de gebruiker naar toe wordt gestuurd (zie bijvoorbeeld bol.com, dat smartphone-bezoekers leidt naar m.bol.com).

Een Responsive Design zorgt er uiteindelijk voor dat al onze content en al onze functies (voor zover het redelijk is) goed toegankelijk wordt via een breder aanbod aan apparaten dan enkel desktops en laptops.

Algemene uitleg

Om ons responsive design te gaan testen hoef je niet naar een aparte plek of webadres te navigeren. We hebben het voor jullie mogelijk gemaakt om in jullie profielvoorkeuren aan te geven of jullie de bèta willen draaien. Zodra je deze inschakelt, zul je op de responsive versie van Tweakers zitten. Let er echter wel op dat het inschakelen volledig op eigen risico is en het gevolgen kan hebben voor pagina's die we nog niet responsive hebben gemaakt! Enkele pagina's zijn nog niet responsive. Deze pagina's hoef je voorlopig niet te melden.

Voor het RWD hebben we bepaald dat we vier verschillende punten hebben waarop we de content opnieuw gaan rangschikken. Intern noemen we deze 'Device grades'. In de volksmond wordt gebruikt gemaak van zogeheten 'breakpoints'. In principe is het hetzelfde, maar wij noemen het beestje net anders omdat het vaak wat eenvoudiger is om uit te leggen aan de noobsminder-technisch onderlegde personen.

A: (bijvoorbeeld desktops, laptops en de grotere tablets in landscape). Vanaf 980px en hoger
B: (bijvoorbeeld grote tablets in portrait en middelgrote tablets in landscape, momenteel nog niet geimplementeerd) 767px - 979px
C: (bijvoorbeeld middelgrote tablets in portrait en sommige high-reso telefoons in landscape) 500px - 766px
D: (bijvoorbeeld (high & low-reso) smartphones in potrait & landscape) 499px en kleiner

Wat is de huidige status van het Responsive Design?

We leggen momenteel de focus voornamelijk op smartphones en kleine tablets. We kiezen hier bewust voor, omdat het voor ons niet mogelijk is om ook grote tablets in bijvoorbeeld portrait mee te pakken. We zouden dit natuurlijk het liefste ook doen, maar we moeten roeien met de riemen die we hebben. De gebruikerservaring op smartphones en kleine tablets was van groter belang om te verbeteren. Vandaar dat hier de focus op heeft gelegen.

Net als bij ieder project van ons letten we scherp op de scope. We moeten immers ooit eens gaan lanceren en we willen ten alle tijden een Duke Nukem Forever voorkomen. We hopen de komende tijd nog de rest responsive te kunnen maken, maar kijken tegelijkertijd kritisch naar hoeveel waarde het toevoegt aan Tweakers.

Zaken die out of scope zijn:

• Geheel vraag & Aanbod
• Profielen (en foto-album, private storage etc)
• Over Tweakers
• Whitepapers
• Benchmarks
• Menig formulier, zoals nieuwstip insturen, review schrijven etc.
• Poll listing
• Poll detailpagina
• Specificaties vergelijken
• Shopreviews
• Product toevoegen
• Merklisting
• Serielisting
• Geheel unsorted
• DM beheer, detailpagina (zit er wel in, maar heel erg simpel geïmplementeerd)
• Tweakblogs
• Moderatiequeue

Mis je iets? Even zeggen aub!

Out of scope? Maar waarom is mijn favoriete onderdeel niet in de scope?

Heel simpel: we kunnen niet alles direct responsive gaan maken. Daar balen wij net als jij enorm van, maar het is wel de realiteit. Wat we echter wel voor zover mogelijk gaan proberen is de pagina's die niet responsive zijn, gewoon nog normaal aan bieden. Dit betekent dus dat je gewoon grade A gaat krijgen op je smartphone als je naar Vraag & Aanbod gaat, bijvoorbeeld. Dit betekent dus dat er in responsive nooit bestemmingen zullen ontbreken.

Wat wordt er van mij verwacht?

Wat ik graag zou willen dat jullie doen, is heel simpel: gebruik de website op verschillende soorten apparaten dat je hebt liggen. Gebruik het op je smartphone, op je kleine tablet en dergelijke. Lees wat nieuwsberichten, wat reviewberichten, modereer reacties, schrijf een reactie; eigenlijk alles wat je normaliter ook zou doen op Tweakers. Vertel ons vervolgens wat je van het responsive design vindt; wat je fijn en minder fijn vindt werken. Mocht je een goede suggestie hebben wat het RWD zou verbeteren; schroom niet en open er een topic voor. Geef voorbeelden hoe je het graag zou willen zien. Dergelijke voorbeelden helpen ons enorm in de ontwikkeling. Wees hierbij zo volledig mogelijk. Vergeet niet om even de zoekfunctie te gebruiken om te kijken of het niet al besproken is! Het is zonde om het dubbel te moeten doen.

Er is een centraal topic waar je met anderen in zijn algemeenheid kan discussieren over het responsive design. In dit forum gelden dezelfde regels als elders; slow-chat is niet toegestaan.

Als je een bug tegenkomt en je weet zeker dat dit al een pagina is die 'af' is, dan wil ik je vragen hier een apart topic voor aan te maken met [bug] ervoor. Check echter wel altijd of de pagina niet out of scope zit.

Ok, gelezen, akkoord, ik wil het checken!

Je kunt het responsive design eenvoudig aanzitten bij je voorkeuren: https://secure.tweakers.net/my.tnet/preferences
Let op! Het inschakelen van het responsive design is geheel op eigen risico en je custom css kan stuk gaan!

FAQ:

Is dit niet dubbel met de apps/wat is de toekomst van de apps?

De huidige apps zullen we in de toekomst gaan uitfaseren. Omdat we snappen dat niet iedereen direct zal overschakelen op het responsive design houden we ze nog even in de lucht. Ik ben er zelf van overtuigd dat indien we een goed responsive design hebben, het de waarde van de huidige apps flink overtreft. Apps kunnen we echter nog wel voor andere zaken gaan inzetten (branding, single purpose-doelen etcetera), maar daar zijn nog geen concrete plannen over.

Kan het ook uit?!

Niet iedereen wil een aangepast ontwerp of prefereert een ander ontwerp op een bepaald apparaat. Het kan ook zomaar voorkomen dat wij de gebruiker per ongeluk een verkeerde versie van het RWD aanbieden. Daarom bieden we middels weergaveopties de gebruiker de mogelijkheid om zelf een device grade in te stellen. Mocht je de A-variant op grade D willen hebben, dan kun je dit instellen. Andersom kan overigens natuurlijk ook. Deze functie werkt op sessiebasis. Je kunt dus, terwijl je ingelogd bent, een andere weergave op andere devices instellen.

Waarom maken jullie niet gebruik van een fixed navigatie (een navigatie die altijd in beeld is)

Erg goede vraag. Toen we begonnen met het responsive design project wilden we dit graag hebben. We willen het zelfs voor de normale website op den duur hebben. Omdat we een nieuwe navigatie voor responsive nodig hadden, leek dit een goed moment om het te gaan ontwikkelen. In het begin hadden we bijvoorbeeld een fixed navigatie, maar al snel bleek dat op heel veel devices dit niet goed werkte. Omdat we hidden sidebars gebruiken voor de rest van de navigatie, bleef op menig device onze fixed navigatie gewoon staan en werd de rest van de navigatie onbruikbaar. We hebben gekeken naar implementaties van derden (bijvoorbeeld die van David Bushell, maar ook daar waren complicaties mee. Vandaar dat we het voor nu even hebben laten liggen. We hopen dat, naarmate de browsers op mobile devices meer volwassen worden en mensen gaan upgraden naar nieuwere devices, we dit alsnog kunnen gaan ontwikkelen.

Waarom maken jullie geen gebruik van animaties bij de navigatie?

Hetzelfde als hiervoor: er waren teveel complicaties met menig device. David Bushell heeft een prachtig voorbeeld, maar toen wij er mee gingen experimenteren liepen we tegen teveel obstakels aan. Op dat moment kun je twee dingen doen: door experimenteren en hopen dat het wel gaat werken of het even laten voor nu en werken aan de rest, zodat het af komt. We hebben voor het laatste gekozen. Liever iets af en functioneels dat door iedereen gebruikt kan worden, dan iets dat werkt voor een beperkt aantal mensen.

Zijn jullie mobile first gegaan?

Nee, en dat is een bewuste keuze. Mobile first is een prima strategie voor velen; voor ons is het minder praktisch. Tweakers blijft (voor nu) een desktop-georiënteerde website. Het overgrote merendeel van onze bezoekers gebruikt zijn desktop. De enorme groei in traffic die andere websites rapporteren is bij ons een stuk minder (gek genoeg ). Daarnaast zijn er nog een tal van andere redenen waarom dit nu niet voor ons de beste strategie is (denk er bijvoorbeeld aan dat we onze hele site van de grond af aan opnieuw hebben moeten bouwen, en dat gaat ons niet lukken in een klein jaartje ). We zijn daarom de website gaan retrofitten. Kortgezegd betekent dit dat we de bestaande website hebben gepakt, en middels CSS en Javascript de site hebben laten schalen.

De navigatie reageert traag. Kan dat sneller?

Mobile vendors bouwen hun devices zo dat er altijd een vertraging van 300ms zit tussen een touchstart en een klik. Dit doen ze expres omdat ze op die manier achterhalen of je een enkele of een dubbele klik doet. Om dit op te lossen hebben we gekeken naar implementaties van derden, bijvoorbeeld Fastclick. Deze haalt als het ware de vertraging weg, wat op heel veel devices erg goed werkte. Echter bleek dat de Android Stockbrowser en IE op Windows Phone hier niet goed mee om te kunnen gaan. We kregen een bug dat wij hebben gedoopt tot 'de dubbeltapbug'. Dit zorgde feitelijk ervoor dat als een gebruiker 1 keer ergens op klikte, de browser 2 kliks registreerde. Hij keek eerst naar de touchstart (het moment dat je vinger de touchscreen aanraakt) en initieerde een klik. Vervolgens trad de vertraging van 300ms in. Aan het einde van de vertraging registreerde het systeem nog een klik, omdat het zo immers ontwikkeld was. Dat resulteerde er vervolgens in dat er nogmaals ergens op het scherm werd geklikt, en je daar automatisch naar toe werd verwezen. Als je op een Galaxy Nexus bijvoorbeeld op de sluitknop voor het profiel klikte, klikte je ook meteen op het zoekicon en kreeg je een zoekveld. Niet ideaal. We willen hier echter nog wel in de toekomst naar gaan kijken om uit te vogelen of we geen eigen implementatie kunnen maken.

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.

Misha wijzigde deze reactie 09-01-2014 08:58 (255%)