Fluid in plaats van responsive

Het is noodzakelijk om via mediaqueries breakpoints op te nemen in je site. Maar… zeker wanneer het om smartphones gaat dan zijn er zeer veel schermmaten mogelijk. Met een mediaquery kun je een algemene richtlijn opzetten maar fijner en gebruiksvriendelijker is het wanneer de site rekening houdt met alle schermen. In deze oefening staan daarom werken met procenten als maten en het gebruiken van de viewport metatag centraal.

Opdracht

Opdracht ABC uit SOFTI2-11

Opdracht ABC uit SOFTI2-11. Maak deze site fluid.

  1. Maak de opdracht ABC uit de reader SOFTI2-11.
  2. Maak vervolgens de opdracht nog een keer maar maak deze nu fluid.
    • Werk in procenten, em-waarden of viewport maten.
    • Gebruik nog wel de breakpoints om aan te geven dat er op bepaalde punten iets moet veranderen; bijvoorbeeld 2 boxen naast elkaar in plaats van 3 wanneer je breedte van de browser minder dan 768px wordt.
    • Gebruik een viewport metatag.

 

Tutorial doen?

Een goede start:

 

Leer werken met viewport maten (vw en vh) in plaats van pixels of procenten:

 

Een tutorial zonder video:

http://www.webdesignermagazine.nl/workshop/tutorial-een-bestaande-site-responsive-maken/

 

Theorie

Responsive of fluid layout?

Indien je het beheerst, werk dan fluid. Op die manier wordt een scherm in de breedte optimaal benut. Let er wel op dat je bij een bepaalde maximale breedte je site toch pixels geeft. Het ziet er niet fraai uit wanneer je website 1440 pixels breed wordt. Dan zullen zinnen te lang zijn en is een ontwerp wel erg uit zijn verband getrokken.

Wat is responsive layout?

Je geeft aan wat er met een ontwerp moet gebeuren bij een bepaalde breedte. Dit is wat je in de reader SOFTI2-11 leert. Met behulp van media queries verander je het ontwerp. Breedtes van div-elementen worden aangepast. Sommige elementen zul je wellicht op display:none zetten.

Wat is fluid layout?

Bij fluid layout is je ontwerp schaalbaar. Je maakt dan geen container div die uit een bepaalde breedte pixels bestaat maar een container die altijd (bijvoorbeeld) 100% breed is. HET grote nadeel is dat je ontwerp dus nooit vaststaat! Dit is zeer lastig ontwerpen en de huidige mode op het gebied van flat design helpt webdesigners om dit netjes voor elkaar te krijgen. Fluid layout wordt ook wel liquid layout genoemd.
 
Hoe begin je met werken met procenten?
Heel kort door bocht: het werkt hetzelfde als met pixels maar nu vul je overal procenten in. Je hebt 100% te verdelen dus tellen maar!
 
Wat is er lastig aan?
Tekst. Indien je werkt met procenten maar je test blijft gewoon 12 pixels dan loop je kans dat je regellengte onacceptabel lang wordt (stel, iemand bekijkt je site op een scherm van 1800 pixels breed). Let hierop in je ontwerp en gebruik anders een max-width in je CSS om op een bepaald moment de breedte van de site vast te zetten.

Wat is elastic layout?

Lijkt op fluid layout waarbij je ontwerp schaalbaar is. Echter, bij fluid layout gebruik je procenten om je site mee te stijlen en bij elastic layout gebruik je em-waarden. Em-waarden zijn je font-grootte. De breedte van je site schaalt dan mee met je font-grootte. Voordeel: onderlinge samenhang van je ontwerp blijft hetzelfde. Zowel je lijnbreedte als regelafstand etc. Het is alsof je inzoomt.

 

Viewport metatag

Bij bijna alle responsive sites zie je in de HTML een metatag staan met iets als:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Dit is een viewport metatag en deze geeft aan wat de browser als basis moet gebruiken om je site op te berekenen. Een soortement nulpunt als het ware. Je kunt hierin echt een waarde aangeven bijvoorbeeld:

<meta name=”viewport” content=”width=320, initial-scale=1″>

zodat je site altijd 320px breed is. Echter, wanneer je voor meerdere schermen ontwerpt kun je beter gebruik maken van width=device-width. Dan kan de browser als het ware zelf bepalen hoe het goed uitkomt.

 

De initial-scale=1 zorgt er voor dat je site meteen 1:1 weer wordt gegeven. Eventueel kun je aangeven dat een gebruiker mag inzoomen (300% in dit geval):

<meta name=”viewport” content=”width=320, initial-scale=1, maximum-scale=3″>

Door bijvoorbeeld maximum-scale=1 in te stellen kan een gebruiker niet inzoomen. Iets wat ik zelf razend irritant vind; ik heb niet altijd een leesbril bij de hand en heb het echt nodig om in te zoomen!

Er zijn de volgende waarden in te voegen:

 

LET OP:

Internet Explorer kent de viewport metatag niet maar gebruikt de @viewport rule in CSS. Dit zal in de toekomst voor alle browsers gaan gelden maar is nu nog niet volledig ondersteund:

at-viewport

Internet Explorer kent de viewport metatag niet maar gebruikt de @viewport rule


 

Handigheidjes

Kolommen

Een tutorial over werken met columns in je CSS. Hierbij hoef je niet afzonderlijk divjes te maken en die te floaten maar geef je aan dat er binnen een bepaald element (een div of een nav) de content in kolommen verdeeld moet worden.

https://egghead.io/lessons/css-introduction-to-css-columns

Calc()

Met de calc() functie in CSS kun je procenten en pixels combineren in je code. Heeeeel handig wanneer je bijvoorbeeld 3 div-elementen naast elkaar hebt en alleen de middelste fluid wilt laten zijn.

https://egghead.io/lessons/css-create-a-fixed-fluid-fixed-layout-using-css-calc