Responsive info

Een responsive website heeft een aangepast design voor verschillende schermformaten. Op mobiel ziet het er dan anders uit dan op een desktop. Vanaf 2016 wordt er net zo veel op mobiel bekeken als op desktops. Een responsive website scoort ook beter in Google.

Maak je scherm smaller, of bekijk je site via een online service als mobiletest.me of quirktools.com/screenfly. Kan ook direct in Safari, bij Ontwikkelmenu > Adaptieve Ontwerpmodus (⌘-Alt-R). In Chrome: ⌘-Alt-i en dan het mobiel-ikoon linksboven.

Bekijk aartjan.nl/responsive. Klik daar op Responsive in het menu. Als je het venster smaller maakt zie je het ontwerp veranderen. Dat is gedaan met responsive CSS. Maar eerst: de viewport. Bij smartphones zie je vaak dat een website te klein is. Dat kan je met de viewport meta tag oplossen. Voeg dit ALTIJD toe aan de head in de HTML:

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

Dit is volgens Google nu verplicht. Wil je ingezoomd op een bepaalde breedte starten, bijvoorbeeld 520, dan zou je dit kunnen doen:

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

Je mobiel zoomt dan altijd in op 520 pixels, het maakt niet uit wat de resolutie van het schermpje is. Helaas herkent Google dit niet als responsive. Hier meer info over de viewport.

Responsive CSS

Responsive css wordt aan het einde van de css toegevoegd en geldt alleen voor bepaalde schermgroottes:

@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 @media is een media query.  Voor elk apparaat of schermgrootte kan je een code vinden. Je kunt meerdere media queries gebruiken en onder elkaar zetten. Plak deze code aan het eind van je css, dan overrulet dat alle vorige css. Verander hier datgene wat je op kleine schermen anders wil, zoals de body margin, de body font-size en het menu.

Web app en touch icon

Deze meta-tags voor web app maken de site fullscreen nadat je het hebt toegevoegd aan het homescreen (werkt op IOS en op Android):

<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">

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. Je kan voor favicon en touch-icon hetzelfde plaatje gebruiken (een .png van 196 x 196 pixels). Zet onderstaande code in de <head> en geef de App een naam bij content=”Naam“:

<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">

Hier meer info en voorbeelden wat betreft responsive technieken. En hier 9 gifjes die het nog eens goed uitleggen. Tenslotte alle responsive code achter elkaar zodat je die makkelijk kan inplakken (inclusief de gewone favicon en een tweede voor oude Android, zie de laatste regel)

<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">
<meta name="apple-mobile-web-app-title" content="Naam">

<link rel="apple-touch-icon" href="favicon.png" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="shortcut icon" href="favicon.png">
Mobiel-vriendelijke test bij Google

Google heeft een online tool om te testen of je website mobiel-vriendelijk is. Alhoewel dat niet alles zegt voor de gebruikers-ervaring, moet een website deze test wel doorstaan om nog hoog in Google-resultaten te kunnen komen.

Web App

Een web app is een website die eruitziet en zich gedraagt als een App: hier een aantal tipsEen voorbeeld is de web app ResearchNow voor brinka.nl (Marije ten Brink, HvA). 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.

Web App fullscreen houden na klikken op interne links

Onderstaand script zorgt ervoor dat je binnen de Web App het fullscreen-scherm niet verlaat. Zonder dat script opent elke interne link namelijk in een nieuw venster. Externe links openen met dit script nog steeds wel in een nieuw venster.

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
Zet in Beginscherm (add to Homescreen)

Op mobiel kan je een website in je Beginscherm zetten, zodat het eruitziet en werkt als een echte App (het is dan een Web App). Op IOS zit die knop middenonder, op Android in de opties. Je kunt de gebruiker daarmee helpen door een script toe te voegen. In WordPress zijn daar plugins voor.

Hamburger menu

Op mobiel zie je tegenwoordig vaak een hamburger menu, ofwel een off-screen menu. Die kan je met pure CSS maken, of met Javascript. Hier nog een. Meer uitleg in het Nederlands hier.


 

Gratis HTML5 Responsive templates

Er zijn veel responsive templates beschikbaar, voor WordPress of in HTML. Zoek 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 nog meer responsive maken, bijvoorbeeld door een responsive menu (hamburger menu) te gebruiken. In WordPress zit dat vaak al, in veel moderne thema’s. Hier een lijst met 10 plugins. Hier 10 tips om je website mobiel-vriendelijk te maken.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *