Responsive web design: Tweakers-rwd onder de loep

Gedurende het ontwikkelen van de rwd-versie van Tweakers zijn we diverse problemen tegengekomen. Hoe ga je bijvoorbeeld om met grote afbeeldingen? Hoe schaal je video's netjes voor een smartphone? Wat als een gebruiker geen responsive lay-out wil of simpelweg de verkeerde grade op een bepaalde device te zien krijgt? Waar laten we navigatie-elementen en wat heeft de hoogste prioriteit op een scherm waarop niet alles getoond kan worden wat er op een desktop te zien is? Een ding was zeker, een rwd mag een gebruiker nooit limiteren in wat hij wel en niet kan doen op een website. Simpelweg elementen verbergen of functionaliteit uitschakelen op een bepaalde grade is dan ook geen optie.

Een rwd mag een gebruiker nooit limiteren in wat hij wel en niet kan doen op een website

Het opzetten van rwd is uiteindelijk een groot onderzoek geworden naar wat het beste werkt op welke devicegrade. Zo hebben we er af en toe toch voor gekozen bepaalde elementen binnen het dom te verplaatsen, omdat het simpelweg de bruikbaarheid op die desbetreffende grade ten goede kwam. Gewoon alles een variabele width en float left geven levert wellicht een grotendeels functionelere responsive pagina op, maar is alles behalve gebruiksvriendelijk.

Afbeeldingen

Helaas is er nog geen geschikte manier om binnen een responsive website kleinere afbeeldingen te serveren dan in de desktopvariant. Naast het feit dat we hier aan het retrofitten zijn en de afbeeldingen dus al zijn geladen voor een desktopwebsite, heeft de server geen weet van de device en viewport van de eindgebruiker. Er zijn methodes om afbeeldingen afhankelijk van de devicegrade te laden, maar dit heeft weer als nadeel dat het een extra request kost en enkel werkt voor mensen die javascript hebben aanstaan. Downscalen is natuurlijk een optie, maar hierbij wordt nog steeds de volledige afbeelding gedownload en dat kost bandbreedte. Uiteindelijk is hier toch voor gekozen en worden image-galeries en losse afbeeldingen nu met een procentuele breedte weergegeven.

Video

Voor video's is grotendeels dezelfde keuze gemaakt als voor afbeeldingen. Helaas bleek hier een variabele breedte niet genoeg om tot het gewenste resultaat te komen. Browsers lieten wisselende resultaten zien, waarbij soms de hoogte van de video niet evenredig geschaald werd of waarbij zelfs de volledige verticale beschikbare ruimte gebruikt werd. Dit is uiteindelijk opgelost door een wrapper div met de volgende css:

.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.video- wrapper object,
.video- wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

Navigatie

Een belangrijk aspect van een goede rwd-ervaring is de navigatie. Er zijn hierover boeken volgeschreven en er zijn dan ook talloze voorbeelden, design patterns en best practices over dit specifieke onderwerp te vinden. Uiteindelijk is gekozen voor de bekende hamburger-buttons om de uitgebreide navigatie van Tweakers onder te huisvesten. Links de hoofdnavigatie en rechts de gebruikermenu's. Om alles optimaal te maken is er wel voor gekozen om de zoekfunctionaliteit, berichten en notificaties in de header te houden. Dit kan echter wisselen tussen grade C en grade D, waarbij in verband met de beschikbare ruimte wat concessies gedaan moesten worden en enkele elementen onder het gebruikersmenu geplaatst zijn.

Devicegrade forceren

In de weergaveopties wordt de mogelijkheid aangeboden om een gebruiker de reguliere mediaqueries te laten onderdrukken en zodoende zelf een voorkeursgrade in te stellen. Het is immers de gebruiker die bepaalt hoe hij zijn content het liefst wil consumeren. Alleen al hierom is een desbetreffende functionaliteit een must om goed te implementeren. De voorkeuren van een gebruiker worden opgeslagen in zijn sessie om bij het bootstrappen van de website uitgelezen te worden. Dit moet gebeuren voordat alle javascript en css is ingeladen, aangezien naderhand onderdrukken geen optie is. De mediaqueries worden dan ook dynamisch gegenereerd vanuit php.

<?php

// Skip when responsive is disabled otherwise
if( ! ResponsiveService::shouldServeResponsive())
    return;

// Check if we have a forced grade
$forcedGrade = ResponsiveService::getForcedResponsiveGrade();

// ignore 'auto' forced grade
if($forcedGrade == ResponsiveConfig::gradeAuto)
    $forcedGrade =null;

// Add CSS files
foreach(ResponsiveConfig::$cssFiles as $grade=>$cssFile)
{
    if($forcedGrade)
        $fg= AssetManager::cssMediaScreen;
    else
        $fg= ResponsiveUtil::getMediaQueryForGrade($grade);

    if($cssFile)
        $this->assetManager->addStyle($cssFile, $fg);

    // break when current grade is also a forced grade
    if($grade==$forcedGrade)
        break;
}

?>

Responsive web design

Gemaakte keuzes en afwegingen

Inhoudsopgave

Lees meer

IT-banen