Recentelijk heb ik ictscripters.com omgezet naar een responsive design.
Op zich dacht ik dat dit moeilijk zou zijn, maar het viel heel goed mee.
Op een weekendje tijd was de site omgezet.
Heel belangrijk is om eerst te weten wat je wilt gaan verbergen in het geval van responsive design.
Je hebt maar een klein scherm en je kan niet alles tonen.
Een klein design levert sowieso ook een beperkt aantal dingen op dat je nog maar kan tonen.
Hoe ga je te werk?
1) zorg er zeker voor dat je website niet in comptabiliteitsmodus draait.
Verwijder dus code zoals
Of vervang ze door:
Om de laatste versie te verplichten.
2) Nu dien je de bezoeker zijn browser te laten weten dat je site responsive is.
De bovenste regel stelt het standaard zoom level in op 1 en geeft aan dat je browser niet automatisch meer moet inzoomen.
Dit voorkomt vervormingen later.
De 2de regel gebruiken niet veel browsers, maar wordt aangeraden om desondanks toch te gebruiken.
3) Nu is het alleen nog maar kwestie om de browser te vertellen wat hij dient te tonen en wat niet op elke scherm grootte.
Dit kun je doen door in je css:
Zo geef je aan dat het linkermenu (genaamd leftmenu) niet moet getoond worden, tenzij de scherm breedte groter is dan 480 pixels.
En zo simpel is het.
Je kan niet alleen kiezen voor display:none; je kan ook elementen kleiner maken, zoals de font-size verkleinen etc.
Heb je vragen? Start gerust een topic, stuur me een pb met de link naar je topic en dan kijk ik of ik je kan helpen
Op zich dacht ik dat dit moeilijk zou zijn, maar het viel heel goed mee.
Op een weekendje tijd was de site omgezet.
Heel belangrijk is om eerst te weten wat je wilt gaan verbergen in het geval van responsive design.
Je hebt maar een klein scherm en je kan niet alles tonen.
Een klein design levert sowieso ook een beperkt aantal dingen op dat je nog maar kan tonen.
Hoe ga je te werk?
1) zorg er zeker voor dat je website niet in comptabiliteitsmodus draait.
Verwijder dus code zoals
Of vervang ze door:
Om de laatste versie te verplichten.
2) Nu dien je de bezoeker zijn browser te laten weten dat je site responsive is.
De bovenste regel stelt het standaard zoom level in op 1 en geeft aan dat je browser niet automatisch meer moet inzoomen.
Dit voorkomt vervormingen later.
De 2de regel gebruiken niet veel browsers, maar wordt aangeraden om desondanks toch te gebruiken.
3) Nu is het alleen nog maar kwestie om de browser te vertellen wat hij dient te tonen en wat niet op elke scherm grootte.
Dit kun je doen door in je css:
Zo geef je aan dat het linkermenu (genaamd leftmenu) niet moet getoond worden, tenzij de scherm breedte groter is dan 480 pixels.
En zo simpel is het.
Je kan niet alleen kiezen voor display:none; je kan ook elementen kleiner maken, zoals de font-size verkleinen etc.
Heb je vragen? Start gerust een topic, stuur me een pb met de link naar je topic en dan kijk ik of ik je kan helpen
K.Rens -
Bedankt Thjeu, goede aanvulling!