Bij het ontwerpen van uw website is het belangrijk ervoor te zorgen dat deze er op elk apparaat goed uitziet, ongeacht de grootte en vorm van het scherm. Responsieve websites zijn ontworpen om er goed uit te zien op allerlei moderne apparaten zoals computers, telefoons, tablets, tv's, wearables en zelfs autoschermen. Om een website responsief te maken, moet u uw CSS- en HTML-code aanpassen om automatisch de grootte van de elementen aan te passen, afhankelijk van specifieke omstandigheden. Deze wikiHow leert je hoe je een basis responsive webdesign plant en implementeert.
Stappen
Methode 1 van 3: Responsief ontwerp plannen
Stap 1. Ontdek hoe uw publiek uw website gebruikt
Tegenwoordig doen de meeste mensen die op internet surfen dit vanaf mobiele telefoons en tablets. Om een site responsief te maken, moet u ervoor zorgen dat deze correct wordt weergegeven, ongeacht waar deze wordt bekeken. Als tijd en geld van essentieel belang zijn, richt u dan op de typen apparaten die het populairst zijn bij uw gebruikers (als deze informatie beschikbaar is) en hoe ze uw site gebruiken. Ontdek met behulp van uw analysesoftware of een andere vorm van onderzoek:
- Welke soorten apparaten ze het meest gebruiken om de website te bekijken, met speciale aandacht voor merken van mobiele telefoons/tablets/computers en scherm-/resolutieformaten.
- Welke browsers het populairst zijn bij uw gebruikers. Wat de wereldwijde statistieken betreft, is Google Chrome de populairste webbrowser ter wereld, maar Safari komt op de tweede plaats.
- Hoe uw bezoekers uw website gebruiken, zoals hoeveel tijd ze eraan besteden, waar ze deze bekijken en welke inhoud het populairst is. Dit kan u helpen bepalen welk type inhoud belangrijk is om op te nemen en welke kunnen worden weggelaten.
Stap 2. Ontwerp verschillende lay-outs voor verschillende apparaten
U kunt een combinatie van CSS en JavaScript gebruiken om het apparaat van een gebruiker te detecteren, evenals zijn mogelijkheden (of het Java, Flash, enz. ondersteunt) en dienovereenkomstig een bepaalde versie van uw site weer te geven. CSS-mediaquery's zijn met name handig voor het bepalen van de grootte/resolutie van het apparaat.
Stap 3. Houd rekening met verschillende soorten interacties
Uw bezoeker kan interactie hebben met uw website met behulp van een muis, een toetsenbord, een touchscreen of zelfs een schermlezer voor slechtzienden. Als u dit in overweging neemt, moet uw website reageren op muisklikken, toetsenbordtoetsen (Tab, Enter, Return, enz.) en vingeraanrakingen op het scherm.
Hover-over-effecten werken met niets behalve een muis. In plaats van deze effecten te gebruiken, zou u kunnen eisen dat de bezoeker op een knop of pictogram klikt om weer te geven wat eerder werd weergegeven met een muisaanwijzer
Stap 4. Overweeg het gebruik van een Content Management Systeem (CMS)
Een eenvoudige manier om ervoor te zorgen dat uw site-ontwerp responsief is, is door een CMS te gebruiken met een vooraf gebouwd responsief thema. Door een CMS zoals Joomla, Drupal of Wordpress te gebruiken, kunt u ervoor zorgen dat uw website er op alle apparaten goed uitziet zonder dat u zelf de responsieve elementen hoeft te coderen. Informeer bij uw webhostingprovider welke CMS-tools er bij uw dienst beschikbaar zijn.
Stap 5. Gebruik online tools om uw website te testen
Nu responsief webdesign in populariteit is toegenomen, zijn er verschillende gratis tools die u kunt gebruiken om uw website te testen. Als je je website al hebt gecodeerd, gebruik dan deze tools om te testen hoe deze eruitziet in verschillende omstandigheden, zodat je weet waar je de responsiviteit moet verbeteren:
- Mobielvriendelijke test door Google: laat u weten of uw site net zo goed werkt op mobiele apparaten als op computerschermen.
- resizeMyBrowser: Hiermee kunt u uw site in verschillende resoluties bekijken.
- Responsiator: geeft uw site weer op verschillende apparaatschermen in verschillende lay-outs (zijwaarts of rechtsboven).
Methode 2 van 3: De pagina-indeling responsief maken
Stap 1. Overweeg een gratis responsive stylesheet-framework
Een framework is een vooraf geschreven set HTML, CSS en/of JavaScript die je als basis voor je site kunt gebruiken. Frameworks zijn allemaal getest en geoptimaliseerd om met alle browsers te werken, dus u hoeft alleen maar uw inhoud in te voegen, uw media- en kleurvoorkeuren toe te voegen en uw site te publiceren. Enkele populaire frameworks zijn:
- Bootstrap
- Skelet
- fundering
Stap 2. Stel de viewport in met een metatag
Als u geen framework gebruikt, wilt u beginnen met het belangrijkste aspect van het coderen van een responsieve website: de Viewport. De viewport is het deel van de website dat zichtbaar is voor de gebruiker. De sleutel tot het correct weergeven van uw site, ongeacht de schermgrootte, is om de viewport-grootte in de META-tag te schalen. Om dit te doen, plaatst u deze tag bovenaan elke pagina op de site:
Stap 3. Specificeer de tekstgrootte in relatie tot de viewport
Zodra uw kijkvenster is ingesteld, wordt de tekst op uw pagina geschaald om op het scherm te passen. Lettertypen kunnen echter te groot of te klein worden weergegeven als hun grootte niet is opgegeven in relatie tot de viewport. U kunt dit doen door de lettergrootte te definiëren als een specifiek percentage van de viewport met de vw-eenheid. Dit voorbeeld vertelt de H1-headers om te worden weergegeven op 10% van de breedte van de viewport, ongeacht de grootte:
wikiHoe
Stap 4. Gebruik mediaquery's om verschillende stijlen voor verschillende schermformaten weer te geven
Met mediaquery's kunt u kiezen of u bepaalde CSS-elementen wilt weergeven, afhankelijk van de schermgrootte. U kunt de details van uw mediaquery specificeren in uw CSS-bestand. In dit voorbeeld wordt de achtergrondkleur van de body rood als de schermgrootte van de gebruiker 480px of groter is:
wikiHoe
@media scherm en (min-breedte: 480px) { body { background-color: aqua; } }
Methode 3 van 3: Afbeeldingen responsief maken
Stap 1. Gebruik de CSS width eigenschap om afbeeldingen te schalen
In plaats van de breedte van de afbeelding in te stellen op een specifiek aantal pixels (bijv. 500px), gebruikt u een percentage (bijv. 100%) zodat de afbeelding naar de breedte van de bovenliggende afbeelding kijkt en dienovereenkomstig aanpast. Als u de breedte van een afbeelding instelt op 100%, wordt de afbeelding gedwongen op en neer te schalen, afhankelijk van de grootte van het scherm van de kijker. Om dit in-line te doen:
Stap 2. Gebruik de eigenschap max-width om het schalen van de werkelijke grootte van de afbeelding te beperken
Als u de eigenschap width in de vorige stap gebruikt om een afbeelding naar 100% te schalen, zal de afbeelding groeien of krimpen zodat deze in 100% van de container past, ongeacht de grootte. Dit betekent dat als de afbeelding aan de kleine kant is, deze groter wordt geschaald dan de oorspronkelijke grootte en er van mindere kwaliteit uitziet. Om dit te voorkomen, gebruikt u max-width om de maximale schaalgrootte van de afbeelding in te stellen op 100% (de werkelijke grootte). Hier is hoe:
Stap 3. Gebruik het HTML-afbeeldingselement om verschillende afbeeldingen op verschillende schermformaten weer te geven
Als u afbeeldingen op maat wilt maken voor weergave op schermen van verschillende formaten, kunt u opgeven welke foto's in uw HTML-code moeten worden weergegeven. Maak afbeeldingen van verschillende formaten en gebruik deze code als voorbeeld om op te geven welke afbeelding moet worden gebruikt op schermen met een breedte van 600 px en 1500 px:
