De responsive website is een onderdeel van mobiel vriendelijk webdesign en het is niet hetzelfde als een adaptive website
Een responsive website per definitie betekent dat de website zich vloeiend aanpast aan alle soorten en maten van onze gebruiksvoorwerpen, zoals de mobiel, desktop of Ipad. Een adaptive website gebruikt vaste omslagpunten om je website aan een gebruiksvoorwerp aan te passen. In praktijk worden de adaptive en responsive type tegelijkertijd toegepast.
Mobiel vriendelijk webdesign is een responsive website (of adaptive..) die tevens boven de vouw snel genoeg laadt.
Alle termen worden min of meer door elkaar gebruikt, maar zoals je ziet is het niet hetzelfde. Het uiteindelijke doel is om je lezer te plezieren. En je lezer heeft een mobiel waar hij of zij tegenwoordig vaker opzoekt dan op de desktop. Als eigenaar van een website, wil je meestal dat je website gelezen wordt. Responsive webdesign is dan het eerste waar je mee moet beginnen.
Mocht je een oude website hebben, die nog niet responsive is, dan kun je een nieuwe website nemen of de website om laten zetten naar responsive / adaptive. Ik kan dit als webdeveloper in je CSS file coderen. Mocht je echter een WordPress website hebben, dan kun je ook eventueel aan een nieuw thema die al responsive is, denken. Dit is tenslotte de kracht van WordPress.
CSS zorgt voor een responsive website
Voor degenen die niet weten waar je een website wel of niet responsive kunt maken, dit is in je CSS file. Dus elke website, wel of geen WordPress kan dus responsive gemaakt worden in deze CSS file. Hierbij wordt voornamelijk naar de width van de elementen gekeken.
Omdat het responsive maken van een website ontwerp enig tijd vergt, wordt er vaak een CSS framework tijdens het ontwerp gebruikt.
Welk CSS framework heb ik nodig?
Er zijn tientallen CSS frameworks en welke je gebruikt is natuurlijk afhankelijk van je ontwerp. In WordPress zie je veel websites die Bootstrap gebruiken. In het webdesigner maandblad lees je vaak over Foundation en als je het Google Material Design wilt volgen dan kun je voor het Material Framework kiezen.
Je begrijpt natuurlijk dat als je voor een bepaalt CSS framework kiest, dan kies je ook voor een bepaalde stijl (omdat CSS nou eenmaal de stijl genereert). Je kunt dus niet zeggen dat het één beter is dan de ander. Als ontwerper kun je moeilijk alle frameworks uit je hoofd kennen, maar uiteindelijk is het gewoon CSS wat verpakt is. Dus van framework wisselen is niet echt een hoogstandje.
Uiteindelijk zul je zien dat een uitgewerkt ontwerp in b.v. een WordPress thema toch nog wel eens een extra CSS file nodig heeft om hier en daar wat oneffenheden weg te halen.
Google en responsive websites
Google bepaalt de markt in het zoekverkeer en Google heeft voor het mobiele zoekverkeer aparte SERP’s ofwel zoek machine resultaat pagina’s. Daarnaast heeft heeft het in 2015 aangekondigt dat responsive websites de voorkeur hebben in deze zoekresultaten en heeft in 2016 dit statement nog eens herhaalt. Als je daarnaast het AMP (Accelerated Mobile Pages) project van Google legt (gelanceerd eind 2015), dan kun je maar 1 conclusie trekken: Google laat binnenkort alleen maar pagina’s zien in de mobiele zoekresultaten die dan ook te lezen zijn op een mobiel. Google heeft speciale tools om pagina’s te testen. Hierbij hanteren zij de term mobiel vriendelijk en niet zo zeer responsive.
Nu is de tendens dat meer en meer mensen de mobiel gebruiken om iets op te zoeken, dus waarom zou je geen responsive website bouwen?
Wat is het verschil tussen mobiel vriendelijk en responsive?
Responsive of een addative website is dus leesbaar op de mobiel. Dat wil nog niets zeggen over de snelheid van laden. Een webpagina zou onder de 3 seconden geladen moeten zijn. Veel van deze laadtijd wordt door de reponse tijd van je host opgeslokt. Daarnaast zijn er zaken als javascripts en veel te grote foto’s een grote bottleneck. Dus nu is er het opensource project AMP (accelerated mobile pages).
Heeft AMP iets met CSS te maken?
Nee, sorry. AMP (Accelerated Mobile Pages) is ontwikkelt om een pagina zo snel mogelijk te laden in een mobiel, niet om deze pagina responsive te maken Op dit moment kun je voor WordPress hiervoor een plugin activeren (b.v. van Automattic). Zo’n plugin stript dan allerlei javascript en extra code van een article. . Hierbij gaan ook de widget gebieden (zoals b.v. zijbars) verloren.
Mocht je een AMP plugin zien die ook je pagina’s aanpakt, kijk dan uit omdat veel hoofdpagina’s opgebouwt zijn met widgetgebieden. Deze widgetgebieden verdwijnen dan en heb je opeeens een zeer vreemde hoofdpagina. Het gebruik van de AMP plugin voor je berichten, dus je blog, zal wel de zijbar weghalen. Als je hier dus advertenties hebt staan die jouw blog sponseren, dan moet je daar wel even over nadenken.
Wat is dan Mobile First Design?
Mobile first heeft wel met CSS te maken. Hierbij begin je eerst voor een mobiel te ontwerpen, dus de CSS die bovenin je stylesheet staat, gaat over een mobiel en daarna laat je op de breekpunten je website groeien. Het is iets van de laatste 2 jaar en voor het laden van een pagina zou mobile first natuurlijk iets sneller kunnen zijn. (al denk ik niet dat je daarmee de oorlog wint).
Bij het standaard ontwerp, waarbij je vanuit een desktop denkt, wordt eerst de CSS genoteerd die voor de desktop van belang zijn. Bij de breekpunten wordt de CSS dan herschreven naar een kleinere scherm. Dit herschrijven is natuurlijk supersnel, maar we optimaliseren ook CSS bestanden, dus elk klein beetje helpt.
Optimaliseren van CSS?
Hier bij wordt alle wit ruimte weggehaald, zodat de file kleiner wordt en dus sneller geladen wordt. Voor WordPress kun je hier een plugin installeren. De vraag is of dit voor zoveel extra tijdwinst zorgt.
Alle CSS in 1 file?
In 2011 schreef ik nog 3 verschillende CSS files en plaatste de links in de head van de website. De browser kan dan zelf uitzoeken welke file hij nodig heeft. Het lijkt er een beetje op dat uiteindelijk dat toch de beste manier was. Dit is natuurlijk niet meer van deze tijd en alle CSS wordt fijn in 1 file geschreven, waardoor deze file natuurlijk wel langer is dan de 3 aparte files.
We hebben dus door gebruikersgemak en tijdwinst van de ontwerper langere files geproduceerd en proberen dan tactieken als het weghalen van de witruimten om dit te verhelpen.
Websites met maar 1 of 2 files, zijn uiteindlijk wel beter dan voor elk wissewasje een nieuwe file te schrijven. Dit gebeurt dus als je meerder plugins gebruikt om je website op te vrolijken.
Of toch maar weer een aparte mobiel websites?
Wel dit fenomeen is een tijdje uit geweest, maar het lijkt erop dat dit toch weer terug keert. Voor de gemiddelde website lijkt me dit niet nodig, maar ik kan me voorstellen dat je als groot verkoper voor de mobiel gewoon een aparte website opzet.
