Responsive design in combinatie van 960GS
Momenteel ben ik me helemaal aan het verdiepen in reponsive webdesign. Ik heb al een boek van list apart gelezen en veel artikelen op het internet bestudeerd.
Als ik het goed begrijp moet je met ems (voor tekst), percentage gebaseerde px's voor je divs gebruiken en voor het topje van de ijsberg de mediaqueries.
Nu vraag ik me af, of dit nou allemaal echt nodig is om een echt goede stabiele responsive site op te zetten. De font groottes in ems begrijp ik. maar waarom moet je alles in percentages gaan zetten, die je vervolgens door media queries eigenlijk vervangt? Dan maakt het toch niet uit of je in gerelateerde pixels designed en codeert. Hij zal namelijk voor de specifieke max-width breedte de bijbehorende gedeelde van je css pakken toch?
Ik ben benieuwd naar jullie ervaring en kennis.
Tevens had ik eigenlijk nog een specifieke vraag. Hoe zit het eigenlijk met 960gs grid in combinatie van media queries.
Ik heb bijv. gebruik gemaakt van alpha en omega om de linker en rechter paddingen van de 1ste en laatste kolom te verwijderen. Maar als ik nu mijn breedte van de container zou veranderen, wordt de laatst gefloate div naar beneden geduwd waardoor het geen omega meer moet zijn, maar juist nu een alpha en voor de div die eerst in het midden stond (3 kolommen layout) zou nu eigenlijk de class omega met zich moeten dragen. Hoe los je dit nu op?
Hartelijk dank voor de moeite en ik kijk erg uit naar jullie bevindingen van de hierboven gestelde vragen!
Beste: fluid design.
Zodra dat niet past: via media-queries dingen weghalen of anders positioneren.
Werk je met pixels krijg je wel heel veel 'stappen' via media-queries. Niet erg, maar 't wordt een hoop werk om dat allemaal bij te houden.
Probeer maximaal 3 stappen te houden. En kijk dan niet naar breedte (in pixels) maar waar je ontwerp/design niet meer past.
Mijn (simpele) voorbeelden: www.hgbh.nl (3 stappen) en www.zunflappie.nl (laatste is heel simpel: 1 stap).
Dat van alpha en omega (eerste en laatste) vat ik niet.
Met min-width:; kan je kolommen een minimale-breedte geven.
Worden ze te smal, dan vallen ze onder elkaar (ipv naast elkaar).
Dit kan je ook met media-queries doen.
Ik vat het volgende niet geheel.
Quote:
Beste: fluid design.
Zodra dat niet past: via media-queries dingen weghalen of anders positioneren.
Werk je met pixels krijg je wel heel veel 'stappen' via media-queries. Niet erg, maar 't wordt een hoop werk om dat allemaal bij te houden.
Probeer maximaal 3 stappen te houden. En kijk dan niet naar breedte (in pixels) maar waar je ontwerp/design niet meer past.
Beste: fluid design.
Zodra dat niet past: via media-queries dingen weghalen of anders positioneren.
Werk je met pixels krijg je wel heel veel 'stappen' via media-queries. Niet erg, maar 't wordt een hoop werk om dat allemaal bij te houden.
Probeer maximaal 3 stappen te houden. En kijk dan niet naar breedte (in pixels) maar waar je ontwerp/design niet meer past.
Als ik het goed begrijp kun je dus het beste gebruik maken van een fluid design, en zodra er elementen van de site wegvallen en/ of niet goed komen te staan, kun je dit met de media queries in je css verhelpen.
Zodra ik met pixels zou werken zou dit dan veel regels bevatten (dat bedoel je denk ik met "stappen" toch?).
En wat bedoel je met maximaal 3 stappen, maximaal 3 media queries?
Wat ik zelf bedoelde met alpha en omega is het volgende.
Hieronder is een stuk van mijn HTML5 code te zien met 960gs.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<ul class="featuredbox">
<li class="grid_4 alpha">
<h3>What we do</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque. Donec tristique
bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus, fermentum aliquam
ante ipsum ut purus.
</p>
</li><!-- End li.grid_4 -->
<li class="grid_4">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque.
Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus,
fermentum aliquam ante ipsum ut purus.
</p>
</li><!-- End li.grid_4 -->
<li class="grid_4 omega">
<h3>Contact</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque.
Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus,
fermentum aliquam ante ipsum ut purus.
</p>
</li><!-- End li.grid_4 -->
</ul><!-- End ul -->
<li class="grid_4 alpha">
<h3>What we do</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque. Donec tristique
bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus, fermentum aliquam
ante ipsum ut purus.
</p>
</li><!-- End li.grid_4 -->
<li class="grid_4">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque.
Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus,
fermentum aliquam ante ipsum ut purus.
</p>
</li><!-- End li.grid_4 -->
<li class="grid_4 omega">
<h3>Contact</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque.
Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id.
<br>
<br>
Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus,
fermentum aliquam ante ipsum ut purus.
</p>
</li><!-- End li.grid_4 -->
</ul><!-- End ul -->
Zoals je ziet heb ik een 3 kolommen website grid genomen voor mijn featured text. Om te zorgen dat de eerste en laatste kolom geen linker margin (eerste kolom) en geen rechter margin (laatste kolom) meer hebben voeg ik er de classes "alpha" (eerste kolom) en "omega" (laatste kolom) aan toe. Dit staat er nu dus hard-coded in, waardoor die 2 kolommen deze class ten alle tijden blijven houden, dus ook wanneer er geen ruimte meer is. Wat er dan gebeurt is dat de laatste kolom met de class "omega" naar onder wordt geduwd. Aangezien de middelste kolom van de 3 geen "alpha" en "omega"met zich draagt, bijhoud deze kolom zijn linker en rechter margin.
Kortom mijn grid staat dan niet meer goed. De middelste moet dus eigenlijk de class "omega" hebben en de 3de kolom die naar onderen is geduwd moet in principe de class "alpha" krijgen.
Om een lang verhaal kort te maken, doordat de 2 classes "alpha" en "omega" hard-coded in de HTML staan geschreven, passen ze zicht niet aan, aan het grid.
Hoe is dit op te lossen?
Hopelijk is het nu wat duidelijker beschreven. Ik hoor graag van je!
je begint bij 100px breed tot 500px breed. Dat is een fluid-design, alles werkt netjes onder elkaar.
Nu wordt het te breed en wil je dingen naast elkaar: stap 1.
Dan ga je tussen 500 en 960px zitten: wederom fluid design. Dus schaalbaar.
Maar goed: bij 960px kan je best in 2 kolommen gaan werken.
Dus gaan we naar stap 2: van 960px tot 1400px bijvoorbeeld.
Boven de 1400 pixels wil je niet breder gaan: 't wordt te breed: stap 3.
Fixeren op 1400px (bijvoorbeeld).
Je begint bij de kleinste (mobile-first ;)) en gaat zo naar groter.
Toevoeging op 22/09/2012 18:29:32:
En over die alpha en omega:
kijk eens naar :first-child en :last-child ;)
Kan je ook 4, 5 of 2 kolommen nemen. Hoef je zelf niets hardcoded erin te zetten.
Toevoeging op 22/09/2012 18:30:46:
het responsive is... bij te weinig ruimte stap je dus af van het 960-grid met 3 kolommen en ga je over op 340px met 1 kolom ;).
PS: kolommen kan je ook met CSS maken. Dan is het 1 regel CSS aanpassen via de media-query ;).
En wil je dat niet: dan gooi je dus alle kolommen onder elkaar: 1 kolom ;).
Hoe pak ik dit op, wanneer ik dus meerdere items heb.
Als ik dus 3 kolommen heb, en dan 2 regels onder elkaar, dan zal de css natuurlijk de eerste van de eerste kolom pakken en de laatste van de laatste regel. Hoe los je dit dan het beste op?
Fluid design werkt niet echt handig. Je container wordt te klein op een mobiel en te groot op een TV. Je zult dus moeten gaan werken met min-* en max-* en al dat soort gezeur, terwijl je het gewoon in 3 stappen met media queries kan doen.
Voorbeelden van hoe ik het doe: http://staging.wouterj.nl/ en http://missionairhuizen.nl/ (beide bevatten nog wat foutjes erin, wordt opgelost)
Hoe ik werk in combinatie met grids? Ik ben meer fan van het 978gs. Het mooie daarvan is dat het een pakket is met meerdere gridsystemen voor verschillende window groottes. Kijk maar eens naar de demo en het overzicht.
Tevens ben ik nog bezig met het werken met verticale media queries.
Als laatste wil ik even 1 valkuil markeren:
1) Denk niet alleen dat responsive betekend geschikt zijn voor kleine websites, bedenk ook hoe je het gaat aanpassen met grote schermen (zoals een TV). Hou je dan alsnog zo'n kleine breedte aan als op een scherm, of maak je hem langer? Denk ook na over de typografie, hoe verder je van het scherm afzit hoe groter de tekst en hoe dichterbij hoe kleiner. Een mobiel is bijv. behoorlijk klein (ong. boekgrootte = 14px). Terwijl je op een browser graag de standaard 16px hebt en op een TV scherm nog een stuk groter (zeg 20px).
Wat handige links om wat meer te lezen:
- This is responsive - "Patterns, resources and news for creating responsive web experiences."
- Responsive typography: The basics
Even nog terugkomend op die :first-child en :last-child.
Is dat dus mogelijk om het volgende te kunnen oplossen:
Quote:
Als ik dus 3 kolommen heb, en dan 2 regels onder elkaar, dan zal de css natuurlijk de eerste van de eerste kolom pakken en de laatste van de laatste regel. Hoe los je dit dan het beste op?
Wouter J op 22/09/2012 22:37:45:
Eddy, beste fluid design? Ben meer voor responsive design met media queries. Je wilt niet dat je op een mobiel hetzelfde ziet als op een TV scherm. Het enige wat je fluit moet maken is de font size ten opzichte van de 100% voor je pagina, die 100% verschilt ook per device.
Fluid design werkt niet echt handig. Je container wordt te klein op een mobiel en te groot op een TV. Je zult dus moeten gaan werken met min-* en max-* en al dat soort gezeur, terwijl je het gewoon in 3 stappen met media queries kan doen.
Fluid design werkt niet echt handig. Je container wordt te klein op een mobiel en te groot op een TV. Je zult dus moeten gaan werken met min-* en max-* en al dat soort gezeur, terwijl je het gewoon in 3 stappen met media queries kan doen.
Je krijgt dus 3 (of 4 etc) verschillende fluid-designs.
Met behulp van die media-queries switch je tussen de verschillende designs.
Het ontwerp/opzet verandert gewoon van (bijvoorbeeld) 1 kolom naar 3 met het menu ernaast ipv eronder.
We spreken over hetzelfde hoor ;).
Toevoeging op 23/09/2012 14:43:14:
Casper B op 22/09/2012 23:43:42:
Even nog terugkomend op die :first-child en :last-child.
Even uit mijn hoofd:
Code (php)
1
div#container div:last-of-type{}
Hiermee selecteer je de laatste <DIV> in <DIV ID="container">.
Dit selecteer de laatste <input> in het form, meestal de submit-button:
Code (php)
1
form input:last-of-type {}
TS, over die kolommen. Ik weet niet precies wat je bedoelt, zomaar wat opties: http://jsbin.com/ewitad/1/edit
Met scale:; kan je ook heel wat bereiken voor TV's.
Dat je met 1 fluid-design niet toekomt is wel duidelijk.
Jouw voorbeeld is leuk... tot een ondergrens van 800px oid.
Ik heb zeg maar dus 3 items naast elkaar en daar 3 rijen van.
Wanneer ik gebruik zou maken van last en first child, zal deze natuurlijk de aller eerste pakken en de aller laatste en niet steeds de eerste en laatste van een rij.... Dat wil ik namelijk bereiken...
Maar jou laatste voorbeeld is van +1 dat hij steeds telkens de eerste pakt. Maar dan pakt hij toch de aller eerste niet, want hij kijkt dus eerst naar de 3de item en telt er dan 1 bij op, wat de eerste van de tweede rij als uitkomst heeft...?
Ik had je voorbeeld inderdaad al gezien, maar begrijp de +1 niet.
Toevoeging op 24/09/2012 18:05:18:
Ja, die pakt hij wel. Waarom? Omdat CSS een beetje nadenkt en dan ook weet dat jij het eerste element ook wil hebben: http://jsbin.com/ewitad/3/edit