Hi,
Tip / Suggestie
Zorg er voor dat de maten van je logo en andere belangrijke elementen in ‘relatieve maten’ wordt opgenomen.
— — –Bijv.
logo 200px bij 80px [=absoluut]
logo 80%
== == == uitleg
Zo vreemd is dat niet…
We gebruiken een website om veel info -in de ruimste zin- met elkaar te delen. Een site gebruikt HTML, CSS etc. om die info -relatief statisch- vorm te geven.
Tegenwoordig echter zijn de verwachtingen en hardware van gebruikers een stuk minder statisch.. 😉 We gebruiken een PC, smartphone, tablet, smartwatch om die info te bekijken.
De schermafmetingen en bijv. resolutie kan daarbij belangrijk afwijken van de opmaak van onze website…
Door gebruik te maken van zgn. ‘responsive themes’ proberen we zoveel mogelijk rekening te houden met ’t gebruik van PC, smartphone, tablet, smartwatch etc. Een responsive theme gebruikt waar mogelijk ‘relatieve maten’* en trucs om zicht aan te passen aan diverse schermgroottes etc.
Daarnaast kunnen we bij het bouwen van een site / lay-out een aparte opmaak maken voor diverse hardware-varianten. Op die manier proberen webbouwers de presentatie van de content van hun site te beheren, beheersen, ongeacht de gebruiker, hardware etc.
Die ‘responsive themes’ zijn niet altijd perfect… soms geeft het verrassingen op een type device. Gelukkig valt ook hier vaak wat aan te doen…
== == ==
voorbeeld relatieve maten vs absolute maten
`H1{font-size:18px; /*absoluut, ONGEACHT de standaard resolutie van het scherm van de gebruiker */}
H1{font-size:2em; /*relatief -tov de standaard resolutie van het scherm van de gebruiker */}
#content-area{ width:800px;/*absoluut, ONGEACHT de standaard resolutie van het scherm van de gebruiker */}
#content-area{ width: 65%;/*relatief -tov de standaard resolutie van het scherm van de gebruiker */}
Door steeds de relatieve maat als uitgangspunt te nemen, kan je de presentatie van je site beter ‘managen’ vwb de diverse devices.
== == == …en verder…
Je kan ook een blok in je CSS opnemen, speciaal gericht op mobiele devices.
Hierin kan je specifieke opmaakkenmerken voor deze devices op te nemen, gescheiden van de rest van de opmaak van je site…
