Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

Responsive web design

Inmiddels heeft bijna iedereen een mobiel of een tablet waarmee je het internet op kan. Daarnaast hebben veel mensen ook nog een laptop of een gewone desktop. Alle apparaten hebben verschillende beeldformaten. Dit maakt het ontwerpen van een site niet makkelijker. Hoe zorg je ervoor dat je site op zoveel mogelijk verschillende apparaten er nog goed uitziet? De term responsive web design ziet op de technieken die nodig zijn om jouw site te laten voldoen aan de verschillende formaten beeldschermen.

Responsive web design eerste kennismaking

De volgende zaken zijn van belang bij het ontwerpen van een responsive design:

  1. Hoogte en breedte van het apparaat
  2. Hoogte en breedte van de browser
  3. Resolutie van het scherm
  4. Landschap of portret weergave van de site

In CSS heb je de mogelijkheid om via media rekening te gaan houden met de diversiteit aan apparaten om mee te surfen op internet.

@media only screen and (max-device-width: 480px) {
/* geef de specificaties van dit deel aan */
}

Dit stukje code in CSS geeft de specifieke lay out aan voor als een bezoeker een apparaat heeft met een maximale breedte van 480 pixels. Heb je ergens een afbeelding gebruikt met een breedte van 550 pixels, dan kan de bezoeker deze afbeelding niet in een keer zien. Je kunt nu een aangepaste afbeelding opnemen.

#afbeelding { background: url(afb/logo.gif); width: 550px;}
@media only screen and (max-device-width: 480px) {
#afbeelding { background: url(afb/logo.gif); width: 400px;}
}

Op deze manier heb je een eerste stap gezet om je site responsive te maken. Dit kun je natuurlijk allemaal in één stylesheet gaan opnemen. Maar als je een beetje een site maakt, is de stylesheet al snel omvangrijk. Deze verschillende lay-outs binnen een stylesheet is niet handig. Denk alleen al aan latere onderhoudsbeurten. Iedere keer moet je dan door alle code heen. Daarom is het handiger om specifieke stylesheets te maken voor het beoogde doel.

<link rel=”stylesheet” type=”tekst/css”
media=”only screen and (max-device-width: 480px)” href=”mobiel-device.css” />

Op deze manier kun je alle specifieke opmaak voor een mobiele pagina in één apart stylesheet opnemen. Dit maakt de site vriendelijk in onderhoud en beter aan te passen.