ID.nl logo
Wat is een responsieve website en waarom gebruiken we ze?
© Reshift Digital
Huis

Wat is een responsieve website en waarom gebruiken we ze?

Responsieve websites zijn sites die zo ontworpen zijn dat ze rekening houden met het schermformaat van het apparaat waarop ze bekeken worden. Hier leggen we uit hoe dit werkt.

Vroeger bezocht je een website alleen vanaf je desktopcomputer of laptop, maar tegenwoordig gebruiken we verschillende apparaten in allerlei soorten en maten om mee te browsen. Lees ook: Alleen de tekst van een webpagina mailen? Dat kan!

Traditionele websites zijn daar niet op berekend, en zien er daarom op de meeste smartphones en tablets vaak niet mooi uit of zijn niet handig te gebruiken omdat er problemen zijn met de lay-out en het tekstformaat. Leesbaarheid en bruikbaarheid is heel erg belangrijk voor het succes van een website.

Mobiele versies van websites

We kennen dan ook allemaal wel één of meer websites die een mobiele versie aanbieden als de pagina detecteert dat je een mobiel apparaat gebruikt om mee te browsen. Dat is een verbetering ten opzichte van het aanbieden van een gewone (en daarom vaak vrijwel onleesbare of onbruikbare) website op mobiele apparaten, maar het is nog altijd een tussenoplossing.

Zo zijn er dan namelijk ineens twee websites die bijgehouden moeten worden in plaats van één. Bovendien gaat de mobiele versie van een website meestal uit van een gemiddelde, terwijl een smartphone natuurlijk een heel ander schermformaat heeft dan een tablet. Daarom kan het dus zo zijn dat de pagina er op jouw apparaat nog altijd niet optimaal uitziet.

Responsieve websites

Daarom maken steeds meer ontwerpers gebruik van responsief webdesign, waarbij de webpagina's dynamisch hun lay-out en uiterlijk kunnen veranderen op basis van de kenmerken van het apparaat van de bezoeker.

Responsief webdesign werd in 2010 geïntroduceerd door Ethan Marcotte. In zijn boek "Responsive Web Design" noemde hij drie hoofdkenmerken: Een flexibele lay-out met rasters; flexibele afbeeldingen en media; en mediaquery's.

Lay-out gebieden (zoals bijvoorbeeld kolommen die content bevatten) worden gedefinieerd in percentages in plaats van een vast formaat in pixels. Hierdoor blijft alles in proportie wanneer het formaat verandert.

Flexibele afbeeldingen en media worden qua formaat gedefinieerd in percentages in plaats van een vaste breedte in pixels, zodat ze schaalbaar zijn voor verschillende schermformaten.

Mediaquery's maken deel uit van de CSS3 specificatie. Het zijn eenvoudige filters die kunnen worden toegepast op CSS-stijlen waardoor deze kunnen veranderen op basis van de kenmerken van het apparaat waarop de webpagina wordt bekeken. Hierdoor kan bijvoorbeeld content die in kolommen naast elkaar wordt weergegeven gepresenteerd worden als één enkele kolom met alle content als de schermresolutie onder een bepaalde drempelwaarde valt.

Met responsief webdesign kan één enkele website gebouwd worden die geschikt is voor allerlei soorten apparaten omdat de pagina's zichzelf automatisch aanpassen aan het apparaat waarop ze bekeken worden. Deze vorm van webdesign is zelfs zo alomtegenwoordig geworden dat Google responsieve websites een hogere ranking geeft.

Problemen met responsief webdesign

Op traditionele websites bevindt de navigatie zich meestal bovenaan de webpagina of aan de linkerkant. Als je een responsieve website bouwt, moet je goed nadenken over de manier waarop je de navigatie implementeert omdat je deze consistent wilt houden, ook al verandert de oriëntatie of het formaat van het scherm. De navigatiemethode die je uiteindelijk kiest moet goed passen bij het soort website en consequent blijven op verschillende apparaten.

Afbeeldingen vormen ook vaak een probleem, omdat er nog geen specificatie is voor de manier waarop ze behandeld worden. Bovendien moet er rekening gehouden worden met apparaten met een hoge pixeldichtheid, zodat iconen en andere afbeeldingen er niet onscherp uit komen te zien omdat ze op een slechte manier geschaald worden.

Het converteren van traditionele websites naar een responsief ontwerp is vaak problematisch en onwenselijk. Omdat traditionele websites op een heel andere manier werken en minder flexibel geschreven zijn is het vaak beter om gewoon opnieuw te beginnen. Het kost vaak minder tijd en het resultaat is meestal ook nog eens beter.

▼ Volgende artikel
De Highlander-reboot komt er aan: check de eerste foto's
Huis

De Highlander-reboot komt er aan: check de eerste foto's

Er wordt al enige tijd gewerkt aan een nieuwe Highlander-film. Hoofdrolspeler Henry Cavill heeft nu de eerste foto's gedeeld van de aankomende reboot.

Op social media deelde Cavill, die de hoofdrol gaat spelen in de nieuwe Highlander, de eerste twee foto's. Het zijn sfeervolle shots - eentje met een kleurrijke achtergrond en de andere in een gotische omgeving - met Cavill zelf in het middelpunt.

"Een fijne eerste blik op Highlander!", zo schrijft Cavill, die bekend is van zijn rollen in Superman en The Witcher. "Het is een flinke reis voor mij geweest, waar ik alles over vertel wanneer de tijd rijp is, maar het is een speciaal moment nu ik dit kan delen. Hopelijk genieten jullie ervan."

View post on Instagram
 

Productieproblemen

De nieuwe Highlander-film werd al vele jaren geleden aangekondigd, maar sinds 2008 kwam de film maar niet van de grond. Ook kwam er uiteindelijk flinke vertraging in de opnames. Tijdens de opnames raakte Cavill namelijk gewond, en moesten deze uitgesteld worden.

Verder bestaat de cast uit grote namen als Russell Crowe, Dave Bautista, Karen Gillan, marisa Abela, Jeremy Irons en Djimon Hounsou. De regie is in handen van Chad Stahelski, bekend van de John Wick-franchise. Het is niet bekend wanneer de film precies in de bioscoop zal draaien.

Over de Highlander-franchise

De eerste Highlander-film verscheen in 1986 en combineert fantasy met actie. De franchise draait om Connor MacLeod, een Schotse 'Highlander' die onsterfelijk is. Alleen door onthoofd te worden kunnen Highlanders sterven, en de bedoeling is dat er maar één Highlander op aarde overblijft.

Nieuw op ID: het complete plaatje

Misschien valt het je op dat er vanaf nu ook berichten over games, films en series op onze site verschijnen. Dat is een bewuste stap. Wij geloven dat technologie niet stopt bij hardware; het gaat uiteindelijk om wat je ermee beleeft. Daarom combineren we onze expertise in tech nu met het laatste nieuws over entertainment. Dat doen we met de gezichten die mensen kennen van Power Unlimited, dé experts op het gebied van gaming en streaming. Zo helpen we je niet alleen aan de beste tv, smartphone of laptop, maar vertellen we je ook direct wat je erop moet kijken of spelen. Je vindt hier dus voortaan de ideale mix van hardware én content.

▼ Volgende artikel
Google's Project Genie genereert 3D-gamewerelden met AI
Huis

Google's Project Genie genereert 3D-gamewerelden met AI

Google heeft een nieuwe versie van zijn AI-model Project Genie uitgebracht in de Verenigde Staten, waarmee spelers driedimensionale spelwerelden voor games kunnen genereren.

Project Genie is deze week uitgekomen voor AI Ultra-abonnees (dat 250 dollar per maand kost) in de Verenigde Staten. Hiervoor was Project Genie alleen nog maar voor een selecte groep te gebruiken. Het is niet bekend wanneer de tool in Nederland beschikbaar komt.

Zo werkt Project Genie

Project Genie combineert diverse AI-tools, zoals AI-chatprogramma Gemini en de videotool Nano Banana Pro, om complete, interactieve spelwerelden te creëren. Spelers bepalen eerst het perspectief dat het personage in de spelwereld gebruikt en de manier waarop men interactie kan hebben met de spelwereld. Vervolgens kan men in realtime de spelwereld verkennen en wordt meer van de wereld automatisch gegenereerd. Daarbij kan men het uiterlijk van personages of de spelwereld aanpassen door zelf foto's te uploaden, bijvoorbeeld van mensen die men kent.

De tool is nog niet in staat om complete games te creëren. Er zitten namelijk diverse limieten aan Project Genie. Zo kan er maar zestig seconden gegenereerd worden en is er een maximum van 24 frames per seconde en een resolutie van 720p. Dat is niet afdoende om projecten als serieuze concurrentie van games te laten bestaan. In die zin is het meer een 'proof of concept' en moet het tonen hoe de toekomst van game-ontwikkeling er in combinatie met het gebruik van AI uit kan zien.

Watch on YouTube

AI in combinatie met games

Generatieve AI wordt sowieso steeds vaker ingezet bij game-ontwikkeling, bijvoorbeeld bij het creëren van artwork, in-game assets of het creëren van stemmen. Steeds meer bedrijven zetten AI in bij de dagelijkse werkzaamheden die komen kijken bij game-ontwikkeling.

Dit zorgt echter ook voor veel controverse, omdat veel gamers hier principieel tegen zijn. Zij zien liever dat games geheel door mensen worden ontwikkeld. Daarbij is werk van AI in principe gebaseerd op werk van anderen, aangezien het daar van leert. Dat zorgt er voor dat veel gamers een afkeer hebben van het gebruik van AI bij game-ontwikkeling. Wanneer gamers ontdekken dat AI is ingezet bij het maken van games, worden deze spellen dan ook vaak hevig bekritiseerd, bijvoorbeeld via gebruikersrecensies op online gamewinkels.

Hieronder zijn enkele voorbeelden te zijn van beelden die met Project Genie zijn gecreëerd, waaronder projecten die wel erg op games van andere bedrijven lijken.

View post on X
View post on X
View post on X
View post on X
Nieuw op ID: het complete plaatje

Misschien valt het je op dat er vanaf nu ook berichten over games, films en series op onze site verschijnen. Dat is een bewuste stap. Wij geloven dat technologie niet stopt bij hardware; het gaat uiteindelijk om wat je ermee beleeft. Daarom combineren we onze expertise in tech nu met het laatste nieuws over entertainment. Dat doen we met de gezichten die mensen kennen van Power Unlimited, dé experts op het gebied van gaming en streaming. Zo helpen we je niet alleen aan de beste tv, smartphone of laptop, maar vertellen we je ook direct wat je erop moet kijken of spelen. Je vindt hier dus voortaan de ideale mix van hardware én content.