Content editen van een responsive webshop - Blog
Gepubliceerd op: donderdag 14 december 2017
Tegenwoordig zijn heel veel websites en webshops responsive, wat betekent dat ze meeschalen naar de grootte van het scherm waar ze op getoond worden. Dit betekent dus dat de ontwerpen van websites, en ook de content daarin, geschikt moeten zijn voor meerdere apparaten en schermgroottes. Hierdoor moet er met een responsive webshop anders om worden gegaan dan met een statische webshop. In deze blog bespreek ik waar u rekening mee moet houden bij het onderhouden van een responsive website of webshop.
Eén website, verschillende weergaven
Waarschijnlijk weet u al lang wat responsive webdesign inhoudt, maar om dit verhaal compleet te maken leg ik het toch even kort uit.
Een statische website die ontworpen is op desktop grootte, wordt op een smartphone meestal in het klein weergegeven. Om deze website goed te kunnen gebruiken zou daarbij ingezoomd en/of horizontaal gescrollt moeten worden. Een responsive website past zich in tegenstelling tot een statische website, aan aan het scherm waarop het getoond wordt. Hierdoor hoeft nooit horizontaal gescrollt te worden, en is de website op alle schermgroottes optimaal te bekijken.
Dankzij responsive webdesign (RWD) hoeft niet meer voor meerdere apparaten, browsers, of beeldschermen ontworpen te worden, maar is één ontwerp voldoende om alle apparaten en afmetingen te bedienen.
Afbeelding via <https://www.stephaniewalter.fr/portfolio/content-is-like-water-illustration/>
Hoe wordt een statische website responsive?
Wanneer we de overgang maken van statisch naar responsive, is allereerst belangrijk om niet meer te denken in vaste afmetingen. In plaats van statische breedtes en hoogtes, bijvoorbeeld in pixels, worden voor responsive websites namelijk relatieve maten gebruikt. Zo kunnen elementen schalen naar een percentage van het scherm waarop ze worden getoond. Dus bijvoorbeeld 50% van de maximale schermgrootte.
Een website maakt gebruik van een grid, een raster waarin grafische elementen vallen. Voor responsive websites wordt gebruik gemaakt van een flexibel grid. In plaats van een statisch raster waarbij de afmetingen van de elementen worden aangegeven in pixels, wordt dit in een flexibel grid dus aangegeven met procenten.
Breakpoints
Om een website op alle schermen passend te maken wordt de content niet alleen kleiner weergegeven op kleinere schermen; er wordt ook gebruik gemaakt van breakpoints. Met breakpoints worden punten bepaald waarop de content niet naast elkaar, maar onder elkaar wordt weergegeven.
Een responsive grid heeft een raster met een bepaald aantal kolommen, vaak 12 of 24. Er wordt vaak gekozen voor 12 omdat dit een goed deelbaar getal is. Wanneer een website met een grid van 12 dan 3 kolommen nodig heeft, krijgen deze kolommen allemaal een breedte van “4”.
Wanneer een grid op een groot scherm bijvoorbeeld verdeeld is in 4 kolommen, kan het zijn dat de weergave van deze kolommen op kleinere schermen niet optimaal is. Hierdoor wordt er gekozen om breakpoints in te stellen. Zo kan men ervoor kiezen de website op een groot scherm 4 kolommen naast elkaar te geven, met allemaal breedte 3. De 4 kolommen zouden op tablet formaat te klein worden als zij naast elkaar worden weergegeven, daarom wordt een breakpoint ingesteld. Als een beeldscherm zo klein wordt als een tablet, dan worden de 4 kolommen niet naast elkaar weergegeven, maar per 2 naast elkaar. De vier kolommen worden nu dus verdeeld over 2 rijen, en hebben op tablet een breedte van “6”. Op smartphone beeldschermen kan dit nog steeds te klein worden, daarom wordt een tweede breakpoint ingesteld. Wanneer het smartphone formaat wordt bereikt, dan worden alle kolommen onder elkaar weergegeven. Alle kolommen hebben dan breedte “12”.
Responsive webshop vullen, waar moet ik rekening mee houden?
Wanneer u uw webshop gaat vullen en onderhouden, zult u op een aantal punten rekening moeten houden met het responsive ontwerp van de webshop. Met betrekking tot de productinformatie zal dit wel meevallen, de tekst en productafbeeldingen vallen in een netjes responsive ontworpen design. Wanneer we naar de homepage, nieuwssectie, blog en vrije pagina’s kijken, zijn er echter wel een aantal punten waar u op moet letten.
Tekstuele content: het gebruiken van tekst op een responsive website hoeft niet heel spannend te zijn. Wel moet u er rekening mee houden dat als u wilt dat het in kolommen valt, deze kolommen of in het template moeten zitten, of u moet deze zelf definiëren. Omdat de tekst van een website meeschaalt met de beeldschermgrootte, ziet deze er niet op ieder scherm hetzelfde uit. Bekijkt u de website op een smal scherm, dan zal de tekst dus in een smallere en langre kolom weer worden gegeven dan wanneer u het op een breed scherm bekijkt.
Afbeeldingen: afbeeldingen op een responsive website hebben geen vaste afmetingen. U moet er dus rekening houden dat u ook geen vaste afmetingen geeft aan de afbeelding, om deze niet statisch te maken. Daarnaast moet u een afbeelding uploaden die groot genoeg is voor de grootste/breedste weergave van de website. Altijd een grote afbeelding uploaden zorgt ervoor dat u zeker bent dat de afbeelding er altijd goed uit ziet. Let hierbij wel op dat u niet overdrijft met de grootte van de afbeelding, anders kan dit drukken op de laadtijd van de pagina, en wordt de pagespeed van uw webshop minder. Afbeeldingen op websites die gebruik maken van het Bootstrap framework worden responsive door aan de HTML-tag van de afbeelding de volgende class toe te voegen: class=”img-reponsive”. Bij Shoxl wordt dit automatisch bij iedere afbeelding al gedaan, u hoeft dit dus niet zelf te doen.
Tabellen: hoewel de tabel bij statische websites een zeer handig een veelgebruikt element was, zijn ze voor responsive websites een stuk minder handig. Dat komt omdat een normale tabel statisch is. Wordt de tabel te breed voor het beeldscherm, dan krijgen we een horizontale scrollbalk, en dat is nou precies wat we met responsive design willen voorkomen! Het verdelen van content over een pagina kunt u in plaats van met een tabel doen met rijen en kolommen (rows en cols). Wanneer u content heeft dat écht in een tabel moet, dan kunt u dat doen met een responsive tabel. Deze tabel schaalt wat meer mee met de schermgrootte, en wanneer nodig wordt een horizontale scrollbalk toegevoegd aan de tabel zelf, en dus niet aan de pagina.
Menu-items: bij veel responsive webshop wordt gekozen om het menu op tablet-formaat kleiner te maken en op smartphone-formaat in een hamburgermenu te plaatsen. Het is handig om hier rekening mee te houden bij de keuze voor het aantal menu items, en de lengte hiervan. Lange menu-items kunnen op een tablet-formaat namelijk lastig meeschalen. Natuurlijk is het uiteindelijk helemaal aan u hoe u uw menu wilt indelen. Het beste advies dat we kunnen geven is om het menu te bekijken op verschillende schermen en zo te bepalen wat voor uw menu het mooiste uitkomt.
Testen
Eén van de belangrijkste onderdelen van het werken met responsive websites is toch wel het testen van de pagina’s op verschillende devices en in verschillende browsers. Dit is de beste manier om een beeld te krijgen van de verschillende weergaven van uw content, en zo controleert u ook of er geen fouten in staan die u op uw desktop niet heeft gezien.
Het testen kan uiteraard door de webshop op verschillende apparaten en in verschillende browsers te openen, dit is altijd de meest zekere manier om responsive design te testen. Als u snel wilt zien hoe de webshop eruit ziet op kleinere schermen kunt u ook uw beeldscherm op uw desktop verkleinen. Verder kunt u als u de toets F12 gebruikt met de knop "Toggle device toolbar" de weergave op verschillende apparaten bekijken.