Thread: Responsive design
-
25-10-2013, 09:25 #1Banned
- 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
-
-
25-10-2013, 10:01 #2Approved 9-lifer
- Registered
- 08/01/05
- Location
- Turnhout
- Posts
- 1,182
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 9/9
Lees dit artikel eens door: Quick Tip: Don?t Forget the Viewport Meta Tag | Webdesigntuts+
-no votes
-
25-10-2013, 11:02 #3Banned
- 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
-
25-10-2013, 11:13 #4Member
- 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
-
25-10-2013, 11:21 #5Banned
- 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
-
25-10-2013, 11:38 #6Approved 9liver
- 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
-
27-10-2013, 11:24 #7Banned
- 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
-
27-10-2013, 11:31 #8Approved 9liver
- 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
-
27-10-2013, 13:57 #9Member
- 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
-
28-10-2013, 22:53 #10
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
-
01-11-2013, 20:38 #11Banned
- 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
-
02-11-2013, 13:13 #12
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-Tricksno votes
-
02-11-2013, 14:18 #13Banned
- 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
-
02-11-2013, 21:50 #14Member
- Registered
- 29/03/07
- Location
- blijkbaar
- Posts
- 1,573
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/16
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
-
03-11-2013, 09:23 #15Banned
- Registered
- 27/10/12
- Location
- Oost-Vlaanderen
- Posts
- 4,212
- iTrader
- 12 (93%)
- Mentioned
- 8 Post(s)
- Reputation
- 4/50
Inderdaad.
no votes

