Responsive design

Het grid van het vorige hoofdstuk heeft een vaste breedte- 960px - en is daarom alleen geschikt voor een laptop of pc. Het grid is niet geschikt voor andere devices. Met het toenemend aantal smartphones en tablets is het ontwikkelen van een 'responsive of adaptive websites/apps een must.

‘Responsive’ betekent vrij vertaald ‘reactief’, maar waar reageert zo’n reactieve website nu eigenlijk op? Of je een responsive website nu bekijkt op een pc, tablet of smartphone; de website past zich aan het type apparaat en met name het schermformaat waarmee je de site bezoekt.

Informatie wordt zo ingedeeld dat voor iedere bezoeker de optimale gebruikservaring wordt gecreëerd. Teksten, afbeeldingen en video’s worden geschaald en zijn hierdoor altijd goed zichtbaar. Zelfs knoppen en navigatie-elementen passen zich aan, waardoor deze optimaal te bedienen zijn. 

Een responsive webdesign heeft de volgende kenmerken:

1. Een flexibele (op een grid gebaseerde) layout
2. Flexibele content (afbeeldingen, tekst en andere media)
3. Media queries

Een responsive webdesign past zich niet alleen aan de schermgrootte aan, maar gebruikt ook scripts om te herkennen met welk apparaat de site bezocht wordt. De inhoud en en de functionaliteit wordt bepaalt door bijvoorbeeld de schermresolutie (retina) en/of de snelheid van de internetverbinding.

Om een website echt responsive te maken, kijk je niet alleen naar het schermformaat. Belangrijk is ook te kijken naar welke devices, hoe en waar de mensen de devices gebruiken.

Staat de bezoeker met een smartphone in een winkel? Dan is de kans groot dat hij concrete productinformatie zoekt, zoals de prijs. Of zit hij ontspannen op de bank met een iPad? Of is hij actief op zoek met z'n laptop?

Een responsive design zorgt ervoor dat je website optimaal gebruik maakt van de kenmerken van het desbetreffende device.

Oefeningen 1

Touchscreens bedien je met vingers. Die zijn groter en minder precies dan een cursor. Een smart-tv bedien je met een afstandsbediening. Voor een laptop en pc gebruik je een toetsenbord en een muis.

Mobiele apparaten hebben vaak tragere verbindingen. Een smartphone kent verschillende toetsenborden voor het invullen van e-mailadressen en telefoonnummers.

1. Bespreek met een andere student het verschil in de gebruikerservaring van het invullen van een formulier op een smart-tv, een Sony PlayStation, een smart-phone en een laptop.
2. Kun je verschillende eigenschappen van een formulier bedenken zodat deze optimaal gebruikt kunnen worden vanuit deze verschillende devices.

Fluid-, adaptive-, responsive- en mobiele sites

Er zijn verschillende methodes waarop je een app of website geschikt kan maken voor de verschillende devices:

• Door gebruik van fluid grid.
  De breedtes van de verschillende kolommen passen zich aan aan de schermbreedte van de device.
  
  
• Door gebruik van mediaqueries.
  Het aantal kolommen en de content van de pagina past zich aan aan de schermbreedte van de device. Dit noem je adaptive design.
  
  
• Door een combinatie van fluid en adaptive design
  De kolommen passen zich vloeiend aan de paginabreedte aanen er zijn breekpunten toegepast. Hiermee maak je de pagina responsive.
  
  
• Door gebruik van meerdere varianten van de app of website die geschikt zijn voor smartphones en tablet.
  Hierbij worden 2 sites gemaakt, één voor mobile en één voor breedbeeld.

Fluid grid

Bij gebruik van een fluid grid past de kolombreedte zich automatisch aan aan het schermformaat van het device. Hierbij zijn de kolommen van het grid niet een vast aantal pixels breed, maar zijn een percentage van het scherm.

Oefeningen 2

1. Download dit css-bestand en koppel deze aan het html-bestand dat je hebt gemaakt in het vorige hoofdstuk. Verwijder de link naar het andere 12 grids-css. Wat zie je wanneer je het browser-scherm vergroot en verkleint?
2. Plaats in één van de <div>s een afbeelding en vul een ander <div> met dummy tekst.
3. Wat gebeurt er wanneer je het scherm verkleint tot aan mobile-formaat? Is deze css-geschikt voor weergave op mobile?

Adaptive design= mediaqueries

De vorige css zorgt voor een fluid design. De kolommen passen zich aan, het aantal kolommen niet. Bij een adaptive design maak je breekpunten. Bij een bepaalde schermgrootte worden er minder kolommen weergegeven en soms ook andere content.

Hiervoor gebruik je mediaqueries. Met mediaqueries koppel je verschillende css-regels en bestanden aan een pagina. Welke css-regels er aangesproken worden, is afhankelijk van de schermgrootte.

Oefeningen 3

1. Maak een map aan voor een test-website. Maak hierin een map voor de afbeeldingen en voor de css-bestanden.
2. Maak een index-bestand aan met de inhoud zoals in de afbeelding hiernaast.
   

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>responsive design</title>
<link href="css/basis.css" rel="stylesheet" type="text/css">
<link href="mediaquery.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="kleur">Andere kleurtjes</div>
</body>
</html>

 

4. Maak een css-bestand met de volgende inhoud:
   
   @media screen {
   #kleur{
   background-color:#6FF;
   }
   }
   

   Met de code @media screen geef je aan dat deze stijlregels gelden voor weergave op het scherm. Je kunt zo ook een stijl maken die geldt voor weergave voor de printer door gebruik te maken van de code @media print.

5. Test het geheel.

Tabel mediaquery's

6. Pas nu het css-bestand aan:
   
   @media screen and (min-width:860px){
   #kleur{
   background-color:#6FF;
   font-size:36px;
   }
   }
   
   Met de regel @media screen and (min-width:860px) geef je aan dat de regels alleen gelden voor een scherm met een minimale breedte van 860px.
   
   
7. Test het geheel door het browserscherm groter en kleiner te maken.
   
   
8. Voeg de volgende regels toe aan het css-bestand:
   
   @media screen and (min-width:400px) and (max-width:859px){
   #kleur{
   background-color:#6F6;
   font-size:24px;
   }
   }

Met deze regels geef je aan dat de stijlregels gelden voor een schermbreedte tussen de 400 en de 859px.

9. Maak nu zelf een media-query voor een scherm kleiner dan 400px.

Oefeningen 4

1. Maak een nieuwe mapstructuur met een map voor afbeeldingen en css-bestanden.
2. Plaats 2 afbeeldingen in de juiste map en maak een nieuw html- en css-document.
3. Koppel het css-document op de juiste manier aan het html-document.
4. Maak in de <body> een container-<div>, een <div> voor de kop, een <div> voor een kolom rechts en een <div> voor een kolom links. Plaats in de rechter en linker <div> de foto met een korte en een lange toelichting.
   
5. Maak een media-query voor de maximale schermbreedte in het ccs-bestand aan zodat alle <div>'s mooi op het scherm gerangschikt zijn. Zie onderstaande voorbeeld.

6. Maak andere media-queries voor de verschillende schermbreedtes. Bij de kleinste schermbreedte zorg je ervoor dat de lange tekst niet meer weergegeven wordt door de volgende stijlregel:
   
   .lang {
   display : none;
   }
   
   De twee div's worden onder elkaar weergegeven.
   
   
7. Je kunt ook voor de verschillende devices aparte css-bestanden maken. Dit heeft als voordeel dat de laadtijd kleiner wordt, vooral wanneer je een achtergrondafbeelding gebruikt. Je kunt dan de afbeeldingen in verschillende formaten opslaan. In het html-bestand laad je de juiste css op de volgende manier:
   
   <link rel="stylesheet" href="css/groot.css" type="text/css" media="screen and (min-width:860px)"/>
   <link rel="stylesheet" href="css/tablet.css" type="text/css" media="screen and (min-width:400px) and (max-width:859px))"/>
   
   Voor elke css maak je een link. In de css laat je de media-regel weg.
   
   
8. Maak verschillende css-bestanden en koppel deze aan het html-bestand.

Responsive frameworks

Responsive design is een design waarbij vloeiend schalende kolommen gebruikt worden met breekpunten gemaakt met mediaquery's.

Je kunt dit zelf bouwen, maar je kunt ook gebruik amken van een kant- en klare framework. Er zijn veel handige frameworks te vinden voor een responsive grid die allemaal gebaseerd zijn op het 12 koloms 960 grid. Op deze website staat de top 10 frameworks. De bekendste frameworks zijn:

• bootstrap
• skeleton
• foundation

Ook voor Wordpress zijn responsive templates te dowloaden.

Deze frameworks bieden naast een responsive grid, ook veel css-regels/bestanden voor navigatie, containers, enz. Dit betekent wel dat je veel code krijgt die je niet gebruikt. Hierdoor worden je bestanden groter. Dit is een bezwaar bij mobile devices. De frameworks zijn wel heel geschikt wanneer je snel een aanklikbaar prototype wilt maken.

Oefeningen 5

1. Ga naar http://996grid.com en bekijk de demo site.
2. Bekijk het css-bestand. Is het een fluid-, adaptive-, of responsive template?
3. Bekijk de sites van de verschillende frameworks die hierboven zijn genoemd. Lees de uitleg die ze geven.
4. Welke spreekt je het meeste aan? Waarom?
5. Maak een keuze tussen Skeleton en Foundation en zoek op YouTube goede tutorials.
6. Maak een eenvoudige site over je favoriete muziek waarbij je een eigen vormgeving toepast op het framework.

Mobile sites

Een mobiele website is een aparte website voor smartphones op een los subdomein, waarnaar de mobiele gebruikers verwezen worden. Je kunt een mobiele website maken en plaatsen op een subdomein (m.voorbeeld.nl, mobiel.voorbeeld.nl) of een directory (www.voorbeeld.nl/m/).

De desktop- én mobiele site beginnen met het uitlezen van de schermgrootte van de gebruiker en verwijzen dan naar de desktopversie of de mobiele versie.

Bij een mobile versie heb je veel dubbele content. Dit betekent dat een verandering soms op 2 plaatsen doorgevoerd moet worden. Het voordeel is een goede gebruikerservaring voor smartphones omdat deze helemaal afgesteld is op de smartphonegebruiker.

Oefeningen 6

1. Ga naar de site http://www.sijtsema.eu.
2. Open dezelfde stie ook op een smartphone. Wat is nu de url?
3. Maak een lijst met alle functionaliteiten van beide home-pagina's en geef aan wel op welke devices ze zichtbaar zijn. Geef hierbij aan waarom jij denkt dat bepaalde functies wel of juist niet op de mobile versie opgenomen zijn.

Responsive afbeeldingen

Tekst in een responsive website is eenvoudig te schalen en vloeit mooi in ieder schermformaat. Voor een responsive afbeelding moet je iets meer doen. De makkelijkste manier is met een code in de stylesheet van de website een variabele breedte van de afbeelding in stellen, bijvoorbeeld: img { width: 100%; height: auto; }.

Toch ben je hiermee niet klaar. Je moet ook rekening houden met:

• laadtijd mobiele netwerk
• de vertaling van een afbeelding naar kleinere schermen.

Eén van de grote uitdagingen bij het schalen van afbeeldingen voor kleinere schermen is de laadtijd van websites via mobiele datanetwerken. In de oplossingen hierboven verschijnt de fullscreen afbeelding heel snel op je desktopversie , maar heeft veel langer nodig op je smartphone met 3G en zelfs op 4G. Zorg daarom voor kleinere afbeeldingen bij kleinere schermen.

Bij websites die veel gebruik maken van grote, brede afbeeldingen of visual storytelling is het belangrijk dat de boodschap ook overkomt op een kleiner scherm. Het automatisch verkleinen is dan niet genoeg. De afbeelding op het voorbeeld hiernaast is op mobiel nauwelijks te zien.

Een oplossing hiervoor is een uitsnede maken van de afbeelding of het aanbieden van een andere afbeelding die beter overkomt op een klein scherm.

Met behulp van mediaquery's laad je dan de juiste afbeeldingen in voor verschillende schermformaten.

Oefeningen 7

Er zijn een aantal technieken die je kunt gebruiken voor mobile afbeeldingen:

• Picturefill
• Adaptive Images
• Focal Point

Welke oplossing het meest geschikt is voor jouw situatie hangt af van de techniek van het cms en hoeveel afbeeldingen je gebruikt.

1. Bekijk de verschillende technieken en beschrijf per techniek waarvoor je deze kunt gebruiken en wat de voor- en nadelen zijn.
2. Op een groot en breed scherm ziet de onderstaande afbeelding er prachtig uit. Maar hoe vertaal jij deze afbeeldingen naar kleinere en smallere mobiele schermen?
3. Er zijn verschillende tools op Internet waarmee je kunt testen hoe je website er uit ziet op meerdere schermen. Een voorbeeld hiervan is ami.responsivedesign.is. Test een website die je zelf heb gemaakt.