Introductie Media Queries

Bijna iedereen heeft wel eens een website op zijn mobiel of tablet bekeken. De ene website werkt heel goed op je mobiel en lijkt bijna op een App terwijl de andere geschaald is, de tekst niet is niet te lezen en je moet “Pinchen” / “Zoomen” om alle inhoud te zien.

Stelling

Als je website niet goed werkt op een mobile device dan is je website onbruikbaar.

Deze stelling is niet helemaal waar. Het internet is heel groot en soms heb je landing pages die speciaal voor grote schermen bedoeld zijn. Deze inhoud is vaak niet interessant voor de mobiele bezoeker of moeten we op een andere manier aan de bezoeker tonen.

De websites die wij wel bekijken op onze mobile devices en hier ook voor gemaakt zijn kunnen we in twee segmenten verdelen:

 

  • Een Responsive website.
  • Een Adaptive website.

Maar wat is nou het verschil?

Responsive

Een responsive website past zich voor wat betreft lay-out aan aan het scherm waarmee hij bekeken wordt. Op een desktop vind je bijvoorbeeld vier blokken naast elkaar, op de tablet wordt het een kwadrant van vier blokken en op een telefoon toont de website de vier blokken onder elkaar. Eigenlijk vinden we dat elke website vandaag de dag responsive moet zijn.

Adaptive

Een adaptive website past zich voor wat betreft content en/of functionaliteit aan. Als je weet dat mobiele gebruikers in veel gevallen adresgegevens raadplegen of dat bestellingen vrijwel altijd via desktop plaatsvinden, kun je de website daarop aanpassen. Een adaptive website behelst meer dan een responsive website. Het kan erop uitdraaien dat je twee of meer behoorlijk verschillende websites maakt omdat de behoeften van gebruikers per apparaat totaal anders zijn.

Ondernemers tip
opdrachtgevers verwachten soms dat we adaptive aanpassingen maken maar dat ze er niet voor willen betalen omdat ze immers een responsive website besteld hebben.

Pas hier dus goed voor op bij het binnen halen van een opdracht. Zorg dat hier duidelijke afspraken over zijn.

Als webdesign bureau, Freelancer en/of Ontwerper is het jou taak om je klant goed te informeren over deze verschillen.

Voor deze periode gaan wij ons vooral richten op het Responsive webdesign:

Handige dingen om te weten

  • Beeldformaten
  • Mobile first
  • Alle inhoud is op elk scherm te zien alleen aangepast aan het scherm en afgestemd op de ervaring.

 

We maken onderscheid in de volgende type beeldformaten

  • Mobiel staand
  • Mobiel landscape
  • Tablet staand
  • Tablet liggend/Laptop
  • Desktop
  • Desktop HD

 

In een ideale situatie zou dat betekenen dat op elk beeldscherm de bezoeker de beste ervaring krijgt zover mogelijk op een website.

Formaten

Om deze verschillende type beeldschermen te voorzien van een zo goed mogelijke responsive website verdelen we deze beeldschermen is de volgende afmetingen:

  • mobiel: kleiner dan 768px.
  • kleine devices zoals tablets: groter dan 768px.
  • medium devices zoals laptops en desktops: groter dan 992px.
  • large devices zoals HD desktops, retina display laptops en hd tv’s: groter dan 1200px.

Nu kan het zijn dat een tablet een hogere resolutie beeldscherm heeft en dus meer pixels aankan. In dat geval zou deze niet onder kleine devices vallen, maar onder medium devices.

Er zijn ook schermen met andere pixel verhouding. Normaal is deze 72DPI maar je hebt ook scherm die een hogere pixel dichtheid hebben denk bijvoorbeeld aan “retina” displays.

Werkwijze

Bij het maken van een responsive website werken we mobile first ook wel in de webwereld “Progressive Enhancement” genoemd.

Progressive enhancement

Het toevoegen van beeld en structuur op basis van je mobiele website: Mobiel>Tablet>Desktop
In het kort: Mobile first.

De gedachte is dat wanneer een website er goed uitziet op een mobiele telefoon elke goed doordachte toevoeging naar een groter scherm de website alleen maar sterker zal maken.

Het voordeel is dat een mobiele website veel sneller zichtbaar (loadingtime) is dan een desktop versie die zich aanpast naar mobiel. Dit laatste wordt ook wel Graceful Degradation genoemd.

Graceful Degradation

Door het weghalen van vorm en beeld en het aanpassen van de interface in een desktop site, een zo goed mogelijk toegankelijke website voor de mobiel te maken.
Desktop>Tablet>Mobiel

Hier moet je best veel code  en vorm gaan verbergen omdat je mobiel een “full HD background slider” niet leuk vind en een bezoeker op zijn mobiel een normaal menu niet echt zal waarderen.

Progressive enhancement heeft minder code nodig en is makkelijker te gebruiken als webdesigner.

Voor deze periode gebruiken we progressive enhancement.

Waar te beginnen?

Elke website heeft een doel. Bedenk goed wat je klant of jij zelf met de website wil bereiken en voor wie deze site wordt gemaakt

  • Bepaal je doel/boodschap (wat is het gewenste resultaat tijdens of na een bezoek van de website)
  • Bepaal je doelgroep (wie wil je met je doel/boodschap bereiken?)

 

Vormgeving

Als vormgever wordt er van je verwacht om de verschillende mogelijkheden van het responsive webdesign goed te benutten. Dit begint al bij het schetsen waar wij voor meerdere formaten ideeën creëeren.  Bij de wireframes maak je het interactie model voor elke categorie scherm.

Interactie

Bij de interactie hou je er rekening mee hoe de gebruiker zijn apparaat (device) gebruikt. Denk bijvoorbeeld aan “swipen” waar je met een veegbeweging een actie suggereert zoals bij een fotogallerij.

Het verkleinen en vergroten van je site doormiddel van “pinchen” is geen goede interactie en wordt ook als onprettig ervaren.

Als de interacties in kaart zijn gebracht kun je deze verwerken in je wireframes.

Design

Aan de hand van wireframes ga je het ontwerp maken waar je wireframes leidend zijn! je wijkt niet van je wireframes af als het gaat om layout. Plaats logo’s, afbeeldingen, invulling aan sliders, teksten (bij voorkeur geen lorem ipsum)

Let bij je ontwerpen wel op een logische overgang van mobiel naar desktop. Je site moet op elk device de zelfde stemming opwekken hou rekening met de huisstijl, navigatie elementen en positionering.

Veel bezoekers beginnen vaak op de mobiel op een website en schakelen later over naar een laptop of desktop voor bijvoorbeeld een aankoop! Als je site dan net meer hetzelfde doet in structuur, volgorde, huisstijl, etc. ben je een klant al snel kwijt.

Je maakt dus voor elk type scherm een ontwerp en vergelijkt ze ook of deze wel goed op elkaar aansluiten.

Ben je tevreden met je ontwerp en interactie? dan is het tijd om de site te gaan bouwen.

HTML/ CSS

HTML

De HTML blijft bij een responsive website voor elk type device hetzelfde.

Ga je de HTML ook aanpassen naar gelang het device? Dan is dit een “adaptive” functie.

CSS

Om een site responsive te maken hebben we hier een aantal speciale css regels voor nodig die afgesteld zijn per type beeldscherm.

Allereerst beginnen we met een reset. Een reset zorgt er voor dat een aantal standaard browser stijlen uitgeschakeld worden.

Voor meer info over browser resets en de code voor een goede reset:

http://meyerweb.com/eric/tools/css/reset/

Let op: Een browser reset is niet alleen nodig voor responsive sites maar is in het algemeen een goed gebruik bij het maken van websites.

In de css wordt dan ook gebruikt gemaakt van Media-Queries

Media-Queries

Media queries geven de webpagina een indicatie van de afmetingen van het apparaat waarop de website wordt geladen. Meestal wordt de breedte van het scherm als uitgangspunt genomen. Ook kan de website rekening houden met de pixeldichtheid van een scherm,  om bijvoorbeeld afbeeldingen op een hogere resolutie te laden.

Voorbeeld code media query in een css file

@media screen and (max-width: 300px) {

body {

background-color: lightblue;

}

}

voor meer informatie over media queries bekijk https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

 Opdracht 1

Ga op zoek naar 3 verschillende websites die responsive/adaptive zijn. Kijk vooral op thefwa.com of op awwwards.com voor goed vormgegeven sites

Onderzoek of de site responsive/adaptive is door deze te bekijken op je laptop en op je mobiel. als de website zich aanpast aan je apparaat noteer je de verschillen. Zo niet dan zoek je verder tot dat je er drie in totaal hebt omschreven.

Vermeld ook wat je juist wel of juist niet mooi vind aan de site. Noteer deze gegevens in een word document

 Opdracht 2

Je gaat een mini responsive website maken met de volgende code. Plaats deze code in je CSS

body {

background-color: lightgreen;

}

@media screen and (max-width: 500px) {

body {

background-color: lightblue;

}

}

Plaats de volgende in de body van de HTML (gebruik wel html5)

<p>Resize the browserwindow. When the width of this document is less than 500 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>

Koppel de CSS aan je HTML

Upload je Bestanden je ROC server doormiddel van FTP. (lees https://www.lucbrouns.nl/website-uploaden-met-cyberduck/ voor een handleiding)

Test de site op je mobiel en op je desktop.

Als deze werkt lever je de mini site en het word-document van opdracht 1 in als zip bestand op natschool bij de juiste inleveropdracht.