Responsive webdevelopment:

de basics

Diverse devices

De afgelopen jaren is er een hoop veranderd aan de manier waarop gebruikers een website bezoeken. Vroeger bekeek je websites alleen via een desktop pc, tegenwoordig kan je dat met elk apparaat dat internet heeft. Bijvoorbeeld ook met: mobiele telefoons, tablets, televisies, fotocamera’s en zelfs sommige koelkasten hebben toegang tot internet.

Koelkasten met internet - the Internet of Things

In het begin..

Met de introductie van de eerste iPhone’s gingen steeds meer websites een mobiele versie van hun website aanbieden. Dit was een versie die volledig gedesigned en geoptimaliseerd was voor het scherm van een iPhone. Omdat het formaat van een iPhone-scherm jaren gelijk is gebleven, was dit een goede oplossing. Tot .... de introductie van Android en Windows Mobile en apparaten zoals tablets met allemaal andere resoluties en schermen. Toen werd het onmogelijk om een website te maken voor ieder specifiek device.

Beginnen met een responsive webpagina doe je zo

De oplossing voor dit probleem was: responsive webdesign en -development. Daarmee werd er niet langer gebouwd voor een specifiek apparaat, maar zodat de website er goed uitzag op ieder device. 

Om dit artikel toe te lichten hebben we een voorbeeld gemaakt waarin wordt uitgelegd hoe je kan beginnen met het maken van een responsive webpagina. Alle code in dit voorbeeld staat ook op jsfiddle

HTML-code met afbeelding en pararaaf

Hierboven zie een voorbeeld van een beperkte HTML-structuur, bestaande uit een element voor een grote afbeelding (brandbox), een titel en een paragraph-tekst.

CSS met oplossingen om de pagina op ieder scherm netjes weer te geven.

Hierboven zie je de bijbehorende CSS met daarin een aantal oplossingen om de pagina altijd netjes weer te geven. 

De hoogte van het element met de class-brandbox wordt dynamisch ingesteld door de hoogte in te stellen met een padding van 25% aan de boven- en onderkant van het element. Aangezien de padding altijd wordt berekend vanuit de breedte van een element krijg je hierdoor een element van 2 bij 1. Of je nou op een heel klein of heel groot scherm zit.

Tevens wordt de breedte van de koptekst en gewone tekst ingesteld, zodat hij de volledige breedte van de het scherm gebruikt. Hiermee hebben we een goede basis gelegd voor een schaalbare pagina.

Media Query

Er ontstaat alleen een probleem zodra er gebruik wordt gemaakt van een groter beeldscherm, de tekst zou dan zo breed worden dat het lezen van deze tekst niet meer prettig is. Hier hebben we een oplossing voor genaamd een media query in het voorbeeld zichtbaar met @media.

De media query in het voorbeeld geeft aan dat er andere styling-regels gelden, zodra het venster meer dan 800 pixels breed wordt. In dit geval wordt het brandbox-element vastgezet zodat hij niet hoger wordt dan 400 pixels (de helft van de 800px voor een soepele overgang). Ook de tekst van de pagina wordt vastgezet op 800 pixels en door de "margin: 20px auto" blijft dit blok in het midden van het scherm staan.