Dit is Responsive.
Klik Adaptief in het menu.

Versmal het scherm om het te testen.

Een responsive website ziet er op mobiel en tablet ook goed uit, dankzij een aangepast design voor verschillende schermformaten. Bekijk je site op een mobiel, eventueel via een online service als mobiletest.me of quirktools.com/screenfly.

Kijk op ajsites.nl/responsive voor de nieuwste versie van dit artikel.

Bekijk ook deze pagina. Als je het venster smaller maakt zie je het ontwerp veranderen. Dat is gedaan met responsive CSS. Verderop meer daarover. Maar eerst: de viewport.

Bij smartphones zie je vaak dat een website er te klein uitziet. Dat kan je met de viewport meta tag oplossen. Voeg dit toe aan de head in de HTML:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Meer info over de viewport. Tips: met initial-scale=1 zet je ook de liggende inzoom uit. Wil je dat niet, en/of wil je ingezoomd op een bepaalde breedte starten, bijv 520, doe dan dit (dan heb je misschien niet eens meer responisive css nodig!):

<meta name="viewport" content="width=520" />

Nu de Responsive css: Er is extra code aan het einde van de css toegevoegd, speciaal voor bepaalde schermgroottes, waarmee alle voorgaande css-code wordt overruled:

@media only screen and (max-width: 680px) 
{
/* Hier de css voor schermen kleiner dan 680.
Dit overrulet alle vorige css */
body {margin:20px; font-size:200%;}
}

Die eerste regel, met @media, is een voorbeeld van een media query. Klik die link voor meer info en voorbeelden. Voor elk apparaat of schermgrootte kan je een code vinden. Je kunt meerdere media queries gebruiken en onder elkaar zetten.

Plak de code aan het eind van je css en verander bijvoorbeeld de body margin en het menu. Op deze pagina is bijvoorbeeld alleen maar de body, het menu en de koptekst veranderd.

Verder zijn er een meta-tags voor web app, zodat de site fullscreen is nadat je het hebt toegevoegd aan het homescreen:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Voeg dit ook toe aan de <head> in de HTML. Met die laatste regel kun je de statusbalk (de balk met o.a. je batterij-status) afstellen. Met black-translucent komt de statusbalk dwars door je website (voeg 20px extra margin-top aan de body toe), met white of black komt de site eronder.

En voor een web app wil je ook een touch-icon voor het homescreen, net als een favicon. Zet onderstaande code in de <head>. Je kan voor favicon en touch-icon hetzelfde plaatje gebruiken (een .png van 260 x 260 pixels):

<link rel="icon" type="image/png" href="favicon.png" />
<link rel="apple-touch-icon" href="favicon.png" />
<meta name="apple-mobile-web-app-title" content="Naam">

Vul bij "Naam" de titel of naam van jouw App in (dat komt onder je touch icon).

Hier meer info en voorbeelden over responsive code.En hier 9 gifjes die het nog eens goed uitleggen.

Tenslotte alle responsive code achter elkaar (incl. de gewone favicon):

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="favicon.png" />
<meta name="apple-mobile-web-app-title" content="Naam">
<link rel="icon" type="image/png" href="favicon.png" />

 

Gratis HTML5 Responsive templates

Er zijn veel responsive templates te vinden, voor Wordpress of in HTML. Google op "free HTML5 responsive templates" of kijk op html5up.net of dit artikel op smashfreakz. Er zijn ook veel gratis templates met Bootstrap te vinden, dat is een systeem voor mobile first websites.

Mobile Friendly Website

Met Javascript en dan specifiek jQuery Mobile (of Bootstrap, zie hierboven) kan je een website meer responsive te maken, bijvoorbeeld door een responsive menu (hamburger menu) te gebruiken. Hier een lijst met 10 plugins. Hier 10 tips om je website mobiel-vriendelijk te maken.

Web App

Een web app is een website die eruitziet en zich gedraagt als een App: hier een aantal tips. Je hoeft die niet in de App Store of Google Play Store te zetten, het is gewoon een website. Een voorbeeld is de web app ResearchNow voor brinka.nl (Marije ten Brink, HvA). Je kan dit javascript toepassen zodat de gebruiker de App makkelijk toe kan voegen aan het homescreen. Een web app kan je met behulp van software zoals PhoneGap/Cordova converteren naar een echte App voor de Apple App Store en de Google Play store.