Inhoud & mobiel eerst!

Door John van Hulsen, front-end developer - @johnvanhulsen
30 april 2014 - 1610 x bekeken - Categorieën: Kennis

"Nee joh, ik hoef geen smartphone. Als ik kan bellen en sms'en dan vind ik het goed". Ik riep het zelf ooit (tien jaar geleden) en het is een zin die je vast wel ooit hebt gehoord. Misschien recentelijk nog. Of heel misschien ben je zelf standvastig en doet je oude Nokia het nog goed.

Prima.

Tenzij je dit bericht zojuist via Facebook op je smartphone tegenkwam en je de tekst nu op je mobiele schermpje leest. Dan behoor jij tot de groep mensen die surft over het internet met een mobiel apparaat. En behoor jij tot de groep mensen waarover deze blogpost gaat.

Ruim twee jaar geleden schreef ik een artikel over responsive design. Iets wat toen nieuw was en in de kinderschoenen stond. Inmiddels zijn we twee jaar ervarener en wil ik je er graag meer over vertellen. Want in twee jaar tijd hebben wij niet stil gezeten. En het internet al helemaal niet.

Repsonsive design?

Even in een notendop. Responsive design wil zeggen dat een website geoptimaliseerd is voor diverse apparaten en schermresoluties. De precieze technieken zal ik je besparen, maar het idee is simpel. Wij, front-end developers, zorgen ervoor dat een website er goed uitziet op je desktop of laptop. Heb je een tablet? Dan laten we wat rekenkracht los en voeren een paar veranderingen door bij diverse elementen op de site. Tot slot, met nog wat aanpassingen, laten we een website er ook op je mobiele telefoon goed uitzien. Vaak verbergen we hiervoor het menu. Dat stellen we beschikbaar met bijvoorbeeld een tik op het scherm. Eigenlijk staat meestal alleen de content nog overeind bij mobiele sites.

De omschakeling naar mobile first

De techniek is in twee jaar weinig veranderd. Het idee is echter volledig omgedraaid. Opeens stelden we onszelf de vraag: ‘Is het niet gek dat we een website voor desktops maken en die voor mobiele telefoons volledig uitkleden?’ Het antwoord was al snel: ‘Ja!’

In de lijn laptop/desktop > tablet > mobiele telefoon is je telefoon nog altijd het minst krachtige apparaat met de kleinste accu en het minst zekere netwerk. Zelfs als je het meest recente iPhone of Android toestel hebt. Want hoewel ik tegenwoordig zelfs in Breda over een snelle 4G verbinding surf, is die verbinding lang niet zeker. Probeer maar eens stabiel te internetten in het openbaar vervoer, in een gebouw zonder Wifi, in een veel te drukke stad tijdens een evenement (afgelopen zaterdag tijdens Koningsdag nog), of in het buitengebied waar je met je kapotte auto gestrand bent. En dan mag ik je feliciteren als je een ruim data-abonnement op je telefoon hebt. Want ook dat is tegenwoordig alles behalve standaard. En bovendien behoorlijk duur.

Nee. Bij het ontwerpen en ontwikkelen van een website moeten onze gedachten als eerste uitgaan naar de mobiele telefoon en de content. Want daar gaat het om.  Vroeger laadden we een volledige website in op mobiel, om die vervolgens weer uit te kleden. Nu laden we een basisversie in, geoptimaliseerd voor mobiel, en voegen we achteraf voor grotere schermen extra elementen of wijzigingen in de positionering toe.

Het is logischer: de inhoud van de website is namelijk het verhaal dat je wilt vertellen, dat is de bestaansreden van je website. En die inhoud is op je mobiele telefoon minstens zo belangrijk als op je desktop of laptop, toch? Zeker nu steeds meer mensen via hun telefoon internetten en soms zelfs niet eens een computer hebben.
De kleinste versie van de website, zowel in schermformaat als in bestandsformaat, moet in no time op je scherm kunnen staan. En dat is waar we de laatste tijd hard mee bezig zijn. Want we willen je website zo snel mogelijk tonen, zelfs als er geen 3G of 4G verbinding is.

Mooi vs. snel

Een leuk visueel element op een website is bijvoorbeeld een slider met grote afbeeldingen die op je scherm voorbij komen en clicks naar andere pagina's triggeren. Maar wat veel mensen niet weten, is dat dát juist kilobytevreters zijn. Ik zou dit soort elementen graag alleen op tablet of desktop willen tonen. En dan liever ook alleen aan mensen die met een snelle Wifi verbinding surfen. Om zo te voorkomen dat iemands databundel eraan gaat, of de website langzaam laadt dankzij het slechte netwerk. Of wat dacht je van hoge resolutie afbeeldingen voor de prachtige Retinaschermen van tegenwoordig? Het ziet er visueel allemaal schitterend uit, veel beter dan vroeger. En dat komt volledig ten goede aan de beleving van je merk. Maar dit soort dingen wil je eigenlijk niet via je GPRS of EDGE verbinding met een slakkengang binnenslurpen. Dan werkt de beleving van je merk plots de andere kant op.

Helaas kunnen we nu nog enkel met een aan zekerheid grenzende waarschijnlijkheid raden op wat voor apparaat je een website opent, maar van je internetsnelheid weten we niets. Weten we het wel en stemmen we de website daarop af? Dan weten we nog steeds niet zeker of je die snelle verbinding over vijf minuten in de door de polder razende trein blijft houden. Maar we proberen het wel te ondersteunen. Een gevecht waar wij front-end developers dagelijks mee bezig zijn. Een mogelijke oplossing is bijvoorbeeld om onderdelen pas te laten laden op het moment dat ze ook echt nodig zijn. Of bepaalde features, zoals die slider met afbeeldingen, alleen voor grotere schermen aanbieden.
Tja, zo serveren we de op-Wifi-surfende,-bankzittende mobiele internetter een nét iets minder complete website. Maar we zorgen er wel voor dat de content perfect leesbaar is én zo snel mogelijk op het scherm staat. En daar gaat het tenslotte om.

Voor iedereen de beste internetervaring

Het is te hopen dat ik over twee jaar wederom een blogartikel over dit item mag schrijven waarin ik fijn nieuws kan melden m.b.t. het meten van iemand's internetverbinding. Om voor iedereen de beste ervaring te bieden. Wie weet. :)

En de desktop? Daarvan worden er dit jaar weer minder verkocht dan vorig jaar. Maar bel of sms jij nog op een oude Nokia? Niks aan de hand, dan zorgen wij ervoor dat ook nog op je desktop computer je website er keurig uitziet! ;)

Online video als communicatiemiddel

Door Wendy de Kort

Ik had er zin in. Achter mijn computerscherm vandaan gekropen en zintuigen op scherp gezet. Voor een dagje filmen! Met ons E-sites kantoor in Breda… - Lees meer

Lees verder