HTML/CSS Responsive webdesign basis

HTML/CSS Responsive webdesign basis

Webdesign | 22-05-2014 | Pascal Merks | Reacties


Tegenwoordig kan je bijna niet meer aankomen met een statische website als webdesigner. Op een desktop/laptop ziet je website er super uit maar als je hem dan op een mobiel of tablet opent moet je 400x zoomen voordat je wat kan lezen. Nu kan je er naast nog een mobiele website maken speciaal voor dat soort apparaten maar dan moet je ook nog eens een mobiele website gaan bijhouden en dat ik alleen maar dubbel werk. Daar hebben ze wat op gevonden! Responsive webdesign. Een responsive website is eigelijk een website die mee schaalt met het formaat van het scherm. Hoe kleiner het scherm word hoe meer informatie onder elkaar word gezet. Zo blijft een website overzichtelijk op elk scherm formaat.

Ik wil jullie in deze blog laten zien hoe responsive nou eigelijk werkt met wat uitleg erbij. Hier onder zie je een voorbeeld van een simple responsive layout. Ik ga julllie laten zien wat alle onderdelen doen.

Link naar een voorbeeld: http://pmkmedia.nl/uploads/demos/responsive-basis.html

Aller eerst kijken we in de HEAD van de website. Opzich ziet het er het zelfde uit als op een normale HTML5 website alleen er is een regeltje bij gekomen. Er zit een "ViewPort metatag" bij.

Code:

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

 

Wat is een ViewPort metatag

Bron: http://www.metatags.nl/mobiele_metatags_voor_de_smartphone

Veel smartphone browsers schalen webpagina's tot een breed "viewport width", deze is geschikt voor het weergeven van desktop-geoptimaliseerde opmaak.

Met deze browsers kan de gebruiker in-en uitzoomen van geschaalde webpagina's. Bijvoorbeeld, Opera Mobile maakt gebruik van een standaard viewport breedte van 850 pixels, de iPhone maakt gebruik van een standaard breedte van 980 pixels.

De Viewport META-tag regelt de logische afmetingen en het schalen van de browser viewport venster in vele smartphone browsers, waaronder Safari Mobile voor de iPhone, Android-browser, de browser webOS in Palm Pre en Pixi apparaten, Opera Mini, Opera Mobile en BlackBerry browsers.

Het plaatsen van de Viewport metatag geeft aan dat de document opmaak is geoptimaliseerd voor mobiele apparaten.

 

Nu je weet wat de viewport doet gaan we verder naar het HTML gedeelte. Zoals je ziet bestaat de demo uit een "content" div met daar in 5 divs die elk een deel van de website invullen. een header, menu, main, sidebar en niet te vergeten de footer.

Code:

<div id="content">
        
<div id="div0">Header</div>
        
<div id="div1">Menu</div>
            
<div id="div2">Main</div>
            
<div id="div3">Sidebar</div>
            
<div id="div4">Footer</div>
        
</div>

 

Voor zover het HTML verhaal en verder met de CSS. De "content" div geven we in de CSS een maximaal breedte van 960 pixels en we zorgen er voor dat hij netjes in het midden blijft staan. Zo ziet de website er op een desktop/laptop uit als een normale website van 960 pixels breed. We geven een maximum aan omdat hij als het scherm kleiner word moet mee schalen.

Code:

body {
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
        
#content {
max-width: 960px;
margin: 0 auto;
text-align:left;
}

Daarna stijlen we alle divs in de "content" div naar hoe we ze willen hebben als ze op 960 pixels staan. Dit geven we aan met percentages. We hebben een maximum breedte aangegeven voor de "content" div en als we de andere divs een pixel breedte geven dan schaalt de website alsnog niet mee.

Code:

#div0 {
background: #000;
color: #FFF;
float:left;
width: 96%;
height: 100px;
margin: 1%;
padding: 1%;
}
        
#div1 {
background: #999;
color: #FFF;
float:left;
width: 96%;
margin: 1%;
padding: 1%;
}
        
#div2 {
background: #CCC;
color: #FFF;
float:left;
width: 66%;
height: 200px;
margin: 1%;
padding: 1%;
}
        
#div3 {
background: #000;
color: #FFF;
float:left;
width: 26%;
height: 200px;
margin: 1%;
padding: 1%;
}
        
#div4 {
background: #999;
color: #FFF;
float:left;
width: 96%;
margin: 1%;
padding: 1%;
}

 

Let op! De CSS neemt de margin en padding ook mee in zijn percentages berekening. Dus als je een padding en margin hebt van 1% moet je dat aan bijde zijde er af trekken. Dus als je wilt dat je div 100% breed is met een padding en margin van 1% moet je van de linker en rechter zijde 2% er af halen. Dan hou je 96% over en past alles netjes in het venster.

 

Als je nu de demo in je browser bekijkt zul je zien dat als je website onder de 960 pixels komt hij alle content netjes binnen het venster houd. alleen de main en sidebar worden wel heel smal. Hier komen Media Queries om de hoek kijken! In het voorbeeld geef ik aan als het scherm onder de 600 pixels komt dan moeten alle divs 100% van de breedte van het venster worden (met margin en padding 92%).

 

Wat is Media Querie

bron: http://www.websonic.nl/tutorials/websitecss/css_breedtehoogtevoorwaarde.php

Media Queries, in het kort komt het er op neer dat een query bestaat uit een bepaald media type en een aantal voorwaarden om zodoende specifiek bepaalde opmaak te kunnen toepassen. Dit wordt bijvoorbeeld gebruikt voor het maken van een responsive website waarbij ongedacht de afmetingen van een apparaat een website altijd goed getoond kan worden. Het gaat dan om voorwaardes die waar of niet waar zijn.

Mobiele telefoons
Op deze manier kun je dan een website aanpassen op basis van de breedte of hoogte van het venster, bijvoorbeeld handig als je een website optimaliseert voor mobiele telefoons en tablets. Je plaatst dan in het CSS bestand een voorwaarde waarmee je bijvoorbeeld aangeeft dat bepaalde opmaak toegepast moet worden als een venster kleiner is dan 600px maar groter dan 200px. Anders zal de opmaak niet worden toegepast.

 

Voorbeeld media querie CSS

Code:

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

 

Tussen de { } geef je de veranderende CSS aan.

Je hoeft in de media queries alleen maar aan te geven wat er moet veranderen aan de div en niet de hele CSS over te nemen.

Code:

@media screen and (max-width: 600px) {
            
 #div0, #div1, #div2, #div3, #div4 {
width: 92%;
margin: 2%;
padding: 2%;
}
            
}

 

Als je de demo nu ziet in je browser zul je zien dat hij netjes als hij onder de 600 pixels komt alle divs naar 100% schaalt en alles netjes onder elkaar staat.

Dat was het. Best simpel toch! Ik hoop dat jullie wat wijzer zijn geworden een een hoop mooie responsive websites gaan maken! Mochten er vragen zijn of wil je gewoon reageren dat kan hier onder!

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets