Archief - Responsive design

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
F

Fransz

Legacy Member
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? :eek:

:wtf:
F

Fransz

Legacy Member
Ik ben hiervan op de hoogte.
Alleen werkt een site zonder die speciale zaken ook op iPad en iPhone.

Hoe komt dit aub?
W

W0utR

Legacy Member
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.
X

XowntrusX

Legacy Member
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.
p

passero

Legacy Member
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.
B

BleKKie

Legacy Member
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), ...
S

Shigato

Legacy Member
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.
m

mike.orez

Legacy Member
Shigato zei:
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.
Klik om te vergroten...

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 ;)
F

Fransz

Legacy Member
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.
F

Fransz

Legacy Member
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.
f

felixdraait

Legacy Member
Fransz zei:
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.
Klik om te vergroten...

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?
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan