Responsive info

Op een responsive website ziet de site er op mobiel anders uit dan op een desktop. Grofweg bijna de helft bekijkt jouw website op een telefoon. Zo’n website scoort ook beter in Google.

Maak je scherm smaller, of bekijk je site via een online service zoals thwock.com of 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.

Google heeft een online tool om te testen of je website mobiel-vriendelijk is. Alhoewel dat niet alles zegt, moet een website deze test wel doorstaan om nog hoog in Google-resultaten te kunnen komen. Wordpress templates zijn vaak al responsive. Je kan zelf ook  responsive CSS maken:

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 toe aan de head in de HTML:

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

Responsive CSS

Responsive css wordt aan het einde toegevoegd voor bepaalde schermgroottes:

@media only screen and (max-width: 680px) 
{
    /* Voor schermen kleiner dan 680. 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 dan 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 260 x 260 pixels). Zet onderstaande code in de <head> en verander “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 (plus een favicon voor oude Androids):

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

<link rel="shortcut icon" href="favicon.png">   <!--oude android-->
<link rel="apple-touch-icon" href="favicon.png" />
<link rel="icon" type="image/png" href="favicon.png" />
Web App

Een web app is een website die eruitziet en zich gedraagt als een App: hier een aantal tipsEen 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.
Zet het script in de <head>.

<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 in veel thema’s al. 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 *