Mobile First

Auteur: Jelmer Portegijs

Wie gaat er tegenwoordig nog zonder mobiele telefoon naar buiten?

Je raadt het al; een mobiele telefoon is niet meer te missen in onze samenleving! Wat in eerste instantie werd gebruikt om mee te bellen en te sms’en neemt nu een grote rol in het browsen van internet. Sterker nog, de grootste rol, want meer dan de helft van de browser bezoeken zijn afkomstig van een mobiele telefoon. 

Het mobiele verkeer is in de afgelopen vijf jaar (zoals je ziet in de afbeelding) zelfs met 222% gestegen! Een stijging waar je, als je het mij vraagt, “u” tegen zegt. Deze stijging in het mobiele verkeer brengt veel teweeg zo ook binnen webdesign. “Mobile first”? Onthoud dat woord!

Mobiel Gebruik

Bron: https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics

Werken volgens “mobile first”

Nu hoor ik je denken: “allemaal leuk en aardig, maar wat houdt ‘mobile first’ precies in?” Nou dat ga ik je nu vertellen! ‘Mobile first’ kan je zien als een mindset of strategie om een website mee te bouwen. Het wil zeggen dat je een website ontwikkelt met een focus op de doelgroep mobiele telefoongebruikers. 

Het is belangrijk dat ontwerpers en ontwikkelaars bekend zijn met dezelfde betekenis van het begrip. Zo voorkom je verwarring en behoud je consistentie in het werk. In dit artikel zal ik niet ingaan op het ontwerpen, maar op de techniek: hoe wij als ontwikkelaars ‘mobile first’ gebruiken in ons dagelijks werk.

Nut van ‘mobile first”

Een opdrachtgever denkt vaak: “Mijn website werkt prima op desktop, waarom dan mobile first?”. Toch is het belangrijk hen te informeren over ‘mobile first’. In de introductie werd bijvoorbeeld al verteld hoe het gebruik van mobiele telefoons radicaal is toegenomen in de afgelopen jaren. In die tijd heeft de techniek van mobiele browsers ook niet stil gezeten. Dus ‘mobile first’ is ook voor een klant een goede investering. Een mobiele website, mits goed gebouwd, is tenslotte net zo te gebruiken als een website op je desktop.

Er zijn ook verschillen tussen een mobiele en desktopbrowser. Naast schermgroottes, verschilt ook het gebruik van internet. Met een mobiele telefoon kan je namelijk gebruik maken van mobiel internet als je geen desktopformaat afbeeldingen wil inladen, anders ben je zo door je databundel heen. Een klant wil graag inspelen op gebruiksvriendelijkheid, daar helpt mobiel internet bij.

Mobile first en CSS

Om ‘mobile first” te werken, gebruiken de meeste bedrijven en front-end developers zogenoemde “CSS Frameworks”. Hiermee kan je eenvoudiger een webdesign programmeren. Een paar bekende frameworks zijn Bootstrap, Bulma en Foundation. Het voordeel van dit soort frameworks is dat een groot deel van het front-end werk al voor ons is gedaan!

CSS Frameworks

Binnen OrangeTalent gebruiken wij voornamelijk Bootstrap versie 4. Dit is niet zonder reden. Want Bootstrap 4 heeft naast een handig kolommen systeem ook utility classes. Dankzij deze “helper classes” schaalt de content van een website mee met de schermwijdte van het device van een gebruiker. Waar een afbeelding op desktop 1000 pixels breed is, is deze op mobiel nooit breder dan het scherm en schaalt, het dankzij Bootstrap, dus mee.

Media queries

Een media query wordt vaak op basis van populaire schermbreedtes toegepast. Een mooi overzicht van verschillende apparaten en schermafmetingen vind je hier: http://screensiz.es/. Deze stukken codes kunnen de gegevens van het gebruikte apparaat opvragen en daarmee regels uitvoeren voor het desbetreffende apparaat.

Om jouw CSS goed te laten aansluiten op je CSS Framework, is het een goed idee om te kijken welke media query vaak gebruikt wordt. In de meeste gevallen zal dat “min-width” zijn. In tegenstelling tot “max-width” worden de CSS-regels niet gelimiteerd tot een maximum breedte.

@media not|only|niets mediatype and (selectiecriteria) {
  // CSS-regels voor de media query
}

Een media query bevat normaliter het volgende:

  • @media: hiermee geef je het begin aan van de media query
  • not, only of niets: hiermee kan je condities opstellen voor je media query
  • mediatype: er zijn op dit moment 4 mediatypes:
    • all: voor alle apparaten
    • print: voor pagina’s bestemd voor het printen
    • screen: voor het gebruik op schermen
    • speech: voor het gebruik waar de pagina voorgelezen kan worden\
  • and: geeft het begin aan van de criterialijst
  • selectiecriteria: deze staan altijd tussen haakjes en wordt veelal gevuld met CSS properties zoals “min-width”, “max-width”, “min-height” en/of “max-height”.

Een paar voorbeelden van media queries:

@media (min-width: 768px) {

}

@media screen and (min-width: 768px) and (max-width: 991px) {

}

@media screen and (min-height: 568px) {

}


@media screen and (min-width: 768px) NOT (orientation: landscape) {

}

Voorbeeld breakpoints

Bron: https://robinroelofsen.nl/responsive-websites-media-queries

Google

Sinds 2018 indexeert Google de mobiele versie van een website. Websites die volgens Google goed werken op mobiele apparaten scoren dan ook hoger in de ranking lijst. Dit bewijst maar weer waarom ‘mobile first’ echt nut heeft. Je website wordt, ongeacht of deze wel of niet responsive is, toch geïndexeerd. Een niet-responsive website scoort alleen lager.

Time To Interactive (TTI)

Time To Interactive is de laadtijd in seconden die nodig is om een pagina volledig te kunnen gebruiken is. Hoe sneller de laadtijd is, hoe beter en hoe hoger je website scoort in de ranking lijst van Google.

Binnen OrangeTalent gebruiken wij deze tool om onze websites te testen op snelheden: https://developers.google.com/speed/pagespeed/insights/. Deze tool geeft ook gelijk aan wat verbeterd kan worden. Wij streven altijd naar de hoogste score en nemen geen genoegen met een score die lager is dan 75.

Progressive enhancement

Bij OrangeTalent maken wij alle projecten volgens de moderne technologie, maar oudere browsers ondersteunen deze technieken niet altijd. Daarom werken wij met progressive enhancement. Progressive enhancement werd in 2003 geïntroduceerd en is, net als mobile first, een strategie binnen web development die je vaak tegenkomt.

Met progressive enhancement maak je de content van een verouderde website leesbaar wanneer moderne technieken zoals JavaScript niet ondersteund worden. Zo zorgen we dat oude websites ook in deze tijd haar kracht behouden, ook op mobiel.

Conclusie

Een website die in 2019 niet goed werkt op mobiel is een absolute no-go. Het is mogelijk om van een bestaande website een responsive website te bouwen, de vraag is alleen of de klant daar tijd in wil steken.

Het is belangrijk om bij het begin van een project al te starten met het gebruik van de mobile first strategie. Een goed werkende website op mobiel zal dan hoger scoren in zoekmachines zoals Google.