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
Verwacht geen nieuwe Wolverine-beelden in de State of Play vanavond
Huis

Verwacht geen nieuwe Wolverine-beelden in de State of Play vanavond

In de State of Play-presentatie die vanavond wordt uitgezonden zullen zeer waarschijnlijk geen nieuwe beelden zitten van het langverwachte spel Marvel's Wolverine.

Ontwikkelaar Insomniac Games gaf vorig jaar al aan dat het pas aankomend voorjaar meer uit de doeken zou doen over Wolverine. Toen eerder deze week de nieuwe State of Play werd aangekondigd, hoopten veel fans echter dat de ontwikkelaar zijn plannen gewijzigd had en toch wat meer van de nieuwe Marvel-game zou tonen.

Dat lijkt echter zeer onwaarschijnlijk. Een fan vroeg deze week op social media aan Insomniac Games wanneer er meer info over de game zal verschijnen, waarop Insomniac wederom antwoordde met "lente 2026". Dat maakt het dus zo goed als bevestigd dat de game vanavond tijdens de State of Play niet getoond gaat worden.

View post on X

Over Marvel's Wolverine

Insomniac Games, de ontwikkelaar van de moderne Spider-Man-spellen, werkt al een aantal jaar aan Wolverine, een game rondom de Marvel-anti-held. Hoewel vroege beelden van de game al geruime tijd op internet stonden, werd afgelopen najaar de eerste volledige trailer van het spel getoond. Die is hieronder nog eens te zien.

Wolverine - oftewel Logan - zal gespeeld worden door Liam McIntyre, die eerder onder andere in Spartacus speelde. De game doet diverse exotische locaties aan, waaronder Japan en Canada, en uit de eerste beelden blijkt dat er veel geweld en bloed in de game zit. Wolverine maakt daarbij logischerwijs gebruik van de iconische messen die uit zijn handen komen.

Watch on YouTube

De aankomende State of Play

Zoals gezegd werd eerder deze week de nieuwe State of Play aangekondigd, die vanavond om 23:00 uur wordt uitgezonden. De livestream kan dan hier bekeken worden.

Op PlayStation Blog schrijft Sony dat de presentatie meer dan zestig minuten beslaat en "nieuws, gameplay-updates en aankondigingen van gamestudio's verspreid over de wereld" bevat voor aankomende PlayStation 5-games. Daarbij zullen er zowel games van PlayStation Studios zelf als andere bedrijven de revue passeren.

Sony brengt dit jaar in ieder geval Saros, Marathon en Marvel's Wolverine uit. Van die laatste game weten we nu dus dat hij waarschijnlijk niet getoond gaat worden. Verder werd vorige week een nieuwe Horizon-game met een focus op multiplayergameplay aangekondigd, genaamd Horizon Hunters Gathering. We weten ook dat The Last of Us-ontwikkelaar Naughty Dog aan hun nieuwe game Intergalactic: The Heretic Prophet werkt, en volgens geruchten wordt er bij PlayStation Studios ook een nieuwe God of War-game ontwikkeld met metroidvania-elementen.

▼ Volgende artikel
Zo vervaag je je huis in Google Maps
© ID.nl
Huis

Zo vervaag je je huis in Google Maps

Wie je adres intikt, kan je huis open en bloot bekijken in Street View van Google Maps. Dat voelt niet bepaald privacyvriendelijk. Vind je het geen prettig idee dat iedereen zomaar een blik op je woning kan werpen? Dan kun je Google vragen om je huis permanent te laten vervagen.

Wat gaan we doen?

We laten zien hoe je je woning in Street View nauwkeurig in beeld brengt, hoe je bij Google meldt dat je die wil laten vervagen en hoe je de aanvraag hiervoor indient.

Lees ook: 5 handige (en misschien onbekende) functies van Google Maps

Sleep het poppetje voor de deur

Google Maps biedt een functie waarmee je specifieke beelden – zoals nummerplaten, objecten of zelfs hele huizen – kunt laten blurren om privacyredenen. Je moet hiervoor een aanvraag indienen en zodra Google die goedkeurt, is de vervaging definitief en zelfs niet meer terug te draaien. Open Google Maps bij voorkeur op je computer, want op mobiele apparaten is deze optie voorlopig nog niet beschikbaar. Zoek vervolgens je adres via de zoekbalk bovenaan en druk op Enter om de woning vanuit de lucht in beeld te brengen. Klik op het Pegman-pictogram, het gele poppetje rechtsonder in het scherm. Sleep het poppetje naar de straat waar je huis staat. De straten die langs deze weg beschikbaar zijn in Street View, lichten blauw op.

Sleep het gele poppetje in de straat zo dicht mogelijk bij je huis.

Probleem melden

Zodra je dit doet, verschijnt het bekende 360°-beeld van jouw straat. Navigeer door de beelden totdat je woning volledig in beeld is. Zet het huis zo centraal mogelijk in het scherm; dat maakt de volgende stap eenvoudiger. Onderaan het beeld zie je in een dunne, donkere strook de opnamedatum, maar ook de knop waar het ons om te doen is: Probleem melden.

In deze weergave vind je de knop Probleem melden in de rechterhoek van de strook onderaan.

Aanvraag

Je komt nu op de Google-pagina Ongepaste Street View melden. Versleep eerst de weergave zodat je woning netjes binnen het rode kader past. Vervolgens geef je aan waarom je de vervaging aanvraagt. Er zijn drie opties: een gezicht, mijn huis of mijn voertuig/een kentekenplaat. Kies uiteraard de tweede mogelijkheid. Het is ook mogelijk om vervaging aan te vragen voor een privéweg of een oprit. Vul zeker je e-mailadres in en klik op Versturen. Na het verzenden ontvang je een e-mail van Google over je aanvraag. Als alles duidelijk is, wordt de vervaging binnen enkele dagen tot weken doorgevoerd. Houd er rekening mee dat je de aanvraag soms meerdere keren moet indienen als je woning vanuit verschillende hoeken zichtbaar is.

Plaats de woning netjes binnen het rode kader.


Ook fijn, qua privacy:

View post on TikTok

Blur, maar dan anders

(en toch ook weer niet)