Responsive maken design

ICTscripters maakt gebruik van cookies. Door het gebruiken en browsen naar onze site gaat je automatisch akkoord met het gebruik van cookies. Klik hier voor meer informatie

  • 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

    PHP Source Code

    1. <meta http-equiv="X-UA-Compatible" content="IE=8" />

    Of vervang ze door:

    PHP Source Code

    1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    Om de laatste versie te verplichten.

    2) Nu dien je de bezoeker zijn browser te laten weten dat je site responsive is.

    PHP Source Code

    1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    2. <meta name="HandheldFriendly" content="true">

    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:

    PHP Source Code

    1. @media screen and (max-width: 480px) {
    2. .leftmenu {
    3. display: none;
    4. }
    5. }

    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
    Zaakvoerder DiMoWeb
    dimoweb.com

    980x gelezen

Reacties 5

  • K.Rens -

    Bedankt Thjeu, goede aanvulling!

  • thjeu -

    Misschien dat dit nog een mooie aanvulling is op je blog :

    readwrite.com/files/html5_responsive_design.jpg

  • Reza -

    Mooi uitgelegd.
    Bij Dreamveawer heb je de optie om een responsive document te laten maken.

  • rdgweb -

    Ik ben toevallig bezig met een mobiele website, dus het doet me deugd dat het binnen een weekend is gebeurd haha!
    Hier kan ik dus wel wat mee!

  • Ferhat.Remory -

    Even over de mobiele versie. Deze is niet echt gebruiksvriendelijk. Misschien een idee om een aparte pagina met laatste 50 actieve topics te tonen ? Nu is het echt zoekwerk e.d.

    Voor de rest klopt nu wat je zegt en is super geschreven!