1. #1

    Registered
    27/10/12
    Location
    Oost-Vlaanderen
    Posts
    4,212
    iTrader
    12 (93%)
    Mentioned
    8 Post(s)
    Reputation
    4/50

    Responsive design

    What's the fuzz about responsive design eigenlijk? Ik vraag dit omdat een simpele container div van 1000px breed automatisch wordt geresized op iPad (portrait and landscape) en iPhone (portrait and landscape). Vooral het woordje automatisch is hier belangrijk. Je zal misschien een aparte css nodig hebben om de foto's wat kleiner te maken, maar als je het goed aanpakt gebeurt er toch veel out-of-the-box niet waar? Of ben ik daar nu zo verkeerd in?

    no votes  

  2. #2
    Dieterg's Avatar
    Registered
    08/01/05
    Location
    Turnhout
    Posts
    1,182
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    9/9
    -
    no votes  

  3. #3

    Registered
    27/10/12
    Location
    Oost-Vlaanderen
    Posts
    4,212
    iTrader
    12 (93%)
    Mentioned
    8 Post(s)
    Reputation
    4/50
    Ik ben hiervan op de hoogte.
    Alleen werkt een site zonder die speciale zaken ook op iPad en iPhone.

    Hoe komt dit aub?
    Last edited by Fransz; 28-10-2013 at 09:12.
    no votes  

  4. #4
    W0utR's Avatar
    Registered
    16/04/08
    Location
    Hong Kong
    Posts
    1,989
    iTrader
    6 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/9
    Responsive design is meer dan enkel images scalen hoor, ik denk dat je dit om te beginnen al moet beseffen.

    Responsive design word gebruikt om sites optimaal aan te bieden of verschillende schermen, op een bijvoorbeeld je smartphone moet je niet dezelfde ervaringen hebben als op een desktop.

    Elke site dat een beetje deftig gemaakt word gaat gewoon werken op een tablet / smartphone, maar hij is daarvoor niet geoptimaliseerd waardoor je ofwel super hard moet inzoomen, oneindig moet scrollen om ergens te raken, of een site van 5MB moet inladen om je 3G netwerk.

    Dus met andere woorden, bekijk eerst eens even wat responsive design eigenlijk is, dan zou je moeten snappen wat er fout is in je vraagstelling.
    no votes  

  5. #5

    Registered
    10/12/12
    Location
    Limburg
    Posts
    228
    iTrader
    11 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Maak bijvoorbeeld deze website is minder breed in je webbrowser of open het op je Smartphone en dan zie je meteen verschil. http://lifehacker.com

    Het punt is niet dat je gewoon automatisch je Divs laat verbreden of versmallen bijvoorbeeld maar dat je hele site zich aanpast zodat de usability op elk platform nog goed in elkaar zit.
    no votes  

  6. #6
    passero's Avatar
    Registered
    28/11/03
    Location
    Drongen
    Posts
    6,665
    iTrader
    5 (100%)
    Mentioned
    0 Post(s)
    Reputation
    6/28
    Er is een verschil tussen responsive en adaptive design.
    Bij responsive ga je enkel maar met je css werken om het te optimaliseren maar adaptive gaat verder en kijkt niet enkel naar de browser maar ook naar de user experience om via verschillende JS/JQuery een andere UX aan te bieden op basis van platform/browser/orientatie.
    no votes  

  7. #7

    Registered
    27/10/12
    Location
    Oost-Vlaanderen
    Posts
    4,212
    iTrader
    12 (93%)
    Mentioned
    8 Post(s)
    Reputation
    4/50
    Bedankt, blijkbaar is het toch nog nodig die extra code
    Last edited by Fransz; 28-10-2013 at 09:13.
    no votes  

  8. #8
    BleKKie's Avatar
    Registered
    02/02/05
    Location
    W-VL
    Posts
    23,388
    iTrader
    9 (100%)
    Mentioned
    0 Post(s)
    Reputation
    1/134
    Maar is het allemaal leesbaar of moet je eerst inzoomen, is het menu nog volledig te gebruiken? Het lijk van niet want als ik mijn venster van mijn browser ga verkleinen krijg ik onderaan een scrollbar, ik moet scrollen om je banner volledig te kunnen zien, idem voor het menu. Dus dat is al geen goed teken.

    Webdesign & Online Marketing - Digital Agency Wijs is een vrij goed voorbeeld van een responsive design. Je moet je venster gewoon eens minder en minder breed maken, je ziet constant de wijzigingen ... er vallen zaken weg, banner wordt kleiner, menu wordt opeens gewijzigd zodat je het eerst moet klikken (is handiger op een smartphone omdat het dan niet zo veel plaats inneemt), ...
    ++ Winnaar 9lives JPL prono - seizoen 2012-2013 ++
    ++ Member of eXposed Catastrofal Gamers ++
    ++ ForZa FCB Blue Army ++ You'll Never Walk Alone ++ Liverpool FC ++
    no votes  

  9. #9
    Shigato's Avatar
    Registered
    20/10/10
    Location
    Sint-Lievens-Houtem
    Posts
    78
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    responsive design:

    je gebruikt de css property: min-width & max-width
    je stelt met deze hoe breed hij maximum mag worden en hoe smal hij juist mag worden.
    Vervolgens gebruik je de width property,
    deze stel je dan gewoon in op een percentage,
    bv. 50%.

    Je element is nu responsive en verkleint / vergroot naar gelang
    de grootte van het venster.

    Hopelijk helpt dit.
    no votes  

  10. #10

    Registered
    04/04/13
    Location
    Meulebeke
    Posts
    17
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by Shigato View Post
    This quote is hidden because you are ignoring this member. Show
    responsive design:

    je gebruikt de css property: min-width & max-width
    je stelt met deze hoe breed hij maximum mag worden en hoe smal hij juist mag worden.
    Vervolgens gebruik je de width property,
    deze stel je dan gewoon in op een percentage,
    bv. 50%.

    Je element is nu responsive en verkleint / vergroot naar gelang
    de grootte van het venster.

    Hopelijk helpt dit.
    Toch net iets te simplistisch weergegeven niet? Als je met containers werkt moet je ook al dan niet floats toevoegen / verwijderen. Uw font-size optimaliseren (best in em werken, aangezien dat nog redelijk scalable is. of rem) Margins/Paddings aanpassen of deze simpelweg ook met ems definiëren...

    Nadenken over hoe je al uw containers gebruikt etc...

    1 tip, als je een responsive website wenst te maken, begin dan altijd vanuit het principe "mobile first". Maak eerst uw code voor uw kleinste scherm (minste bandwidth) en bouw zo uw website op. Zodat je enkel maar in uw grotere media queries bepaalde images begint in te laden. (Zo laden deze images niet op een smartphone die maar via Edge of 3G werkt bv...)

    Allemaal dingen om rekening mee te houden
    no votes  

  11. #11

    Registered
    27/10/12
    Location
    Oost-Vlaanderen
    Posts
    4,212
    iTrader
    12 (93%)
    Mentioned
    8 Post(s)
    Reputation
    4/50
    Ik ben er eindelijk uit: voor google chrome op ipad moet ik blijkbaar niets speciaals doen, alles past zich automatisch aan. Als ik safari gebruik op ipad zie ik maar de helft van de site en heb ik een horizontale scrollbar. Het moet dus wel degelijk. Spijtig dat we anno 2013 nog steeds met die verschillen in browsers zitten.
    no votes  

  12. #12
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    Dit heeft echt bitter weinig te maken met verschillen in browsers, maar met bepaalde settings zoals "<meta name="viewport" content="width=device-width">" en dergelijke.

    Wat betreft het dynamisch laden van images: Which responsive images solution should you use? | CSS-Tricks
    no votes  

  13. #13

    Registered
    27/10/12
    Location
    Oost-Vlaanderen
    Posts
    4,212
    iTrader
    12 (93%)
    Mentioned
    8 Post(s)
    Reputation
    4/50
    Ik zie toch wat ik zie op de iPad? Test het anders zelf eens uit met segers-cv.be
    Deze site heeft niets van codering qua responsive design en toch wordt het automatisch rescaled in google chrome op iPad. Safari op iPad doet dit echter niet en toont een horizontale scrollbar.

    Als je mij nog steeds niet gelooft, zal ik volgende week eens een screenshot nemen van beide browsers.
    no votes  

  14. #14
    felixdraait's Avatar
    Registered
    29/03/07
    Location
    blijkbaar
    Posts
    1,573
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    1/16
    Quote Originally Posted by Fransz View Post
    This quote is hidden because you are ignoring this member. Show
    Ik ben er eindelijk uit: voor google chrome op ipad moet ik blijkbaar niets speciaals doen, alles past zich automatisch aan. Als ik safari gebruik op ipad zie ik maar de helft van de site en heb ik een horizontale scrollbar. Het moet dus wel degelijk. Spijtig dat we anno 2013 nog steeds met die verschillen in browsers zitten.
    Je bent blijkbaar toch niet volledig mee met het verhaal hoor.

    Voor beide browsers (Safari & Chrome op jouw iPad) is de website vermoedelijk te breed voor de website weer te geven. Alleen gaat de ene browser hem weergeven aan 100% (impliceert scrollbars wanneer hij te breed is), en de andere aan x% (zonder scrollbars). Dat heeft niets te maken met responsive design maar is een implementatie om niet-mobiele of niet-responsieve websites toch zo toegankelijk mogelijk te maken voor mobiele devices.

    Dat heeft ook niks te maken met wat developers renderverschillen tussen browsers noemen, ook al is het inderdaad een verschil.

    Je zegt het eigenlijk zelf he: 'voor google chrome op ipad moet ik blijkbaar niets speciaals doen, alles past zich automatisch aan': het is Google Chrome die je website hier rescaled naar je device, niet je website die zich herstructureert naar je device. Dat eerste is een accessibility feature (die uiteraard in elke browser anders is geïmplementeerd, want maakt geen deel uit van de standaardspecificatie), dat tweede is responsief design.

    Bon, er zijn hierboven al genoeg voorbeelden aangehaald. Als je die bekeken hebt, moet je het toch snappen?
    no votes  

  15. #15

    Registered
    27/10/12
    Location
    Oost-Vlaanderen
    Posts
    4,212
    iTrader
    12 (93%)
    Mentioned
    8 Post(s)
    Reputation
    4/50
    Inderdaad.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in