Hvordan fungerer et "grid" design?

[minimax]

Jeg prøver å finne ut hva slags grunnlayout jeg skal ha på nettsiden min og har kommet frem til en 2 kolonners (evt. 1 kolonne om jeg har navigasjonen i headeren og ikke i høyre kolonne) med header og footer med fast bredde. Den skal selvsagt styles med CSS.

 

Men så har jeg også lyst til at siden skal fungere bra med iPad, iPhone, Android, mobiltelefoner og andre mobile enheter. Jeg har lest litt om dette og ser at det finnes ulike løsninger som bla. å skrive en egen CSS fil for hver enhet, men så har jeg kommet over sider som automatisk omrokkerer innholdet basert på skjermstørrelsen. Et eksempel er følgende side der man ser forandringer om man gjør nettleservinduet mindre/større: http://www.webdesignyorkshire.com/

 

Videre har jeg lest at veien å gå disse dager, og da spesielt med tanke på "responsive" sider som jeg har nevnt er å bruke en type layout som heter "grid" eller "960 pixel grid". Kan noen forklare hvordan disse sidene er bygget og fungerer? Jeg har laget flere nettsider med grunnleggende HTML og har begynt å lære meg CSS, så er dette kanskje for de med litt mer kunnskap på området?

[agm]

Sider som den du nevner bruker det vi kaller responsive webdesign og media queries. Det er en teknikk for å sjekke bredde (og/eller høyde), og sette nye regler som gjelder med den nye bredden. Da kan du f.eks. ha to kolonner ved siden av hverandre når skjermen er bred, og så vise disse under hverandre på mindre skjermer (og mobile enheter).

 

Da slipper du å lage egne sider/filer, og har i mine øyne mye bedre kontroll.

 

Et veldig kort eksempel:

 

/*
Her er bakgrunnen rød ved små oppløsninger.
Når bredden på nettleseren overstiger 480 pixler, endres bakgrunnsfargen.
*/
body {
background:red
}
@media all and (min-width:480px) { /* <-- Dette er en media query */
body {
	background:green
}
}

 

Et litt mer komplekst eksempel: http://jsfiddle.net/ztepg/

 

Ellers kan du google "responsive webdesign" eller "media queries", så får du mer om dette - det ligger mye bra på nettet. Anbefaler deg også å ta en titt på Skeleton hvis du trenger et grid-system.

 

Håper du finner ut av det!

Endret 27. april 2012 av agm

[thinkdifferent]

Grei artikkel å skumme gjennom:

http://www.alistapart.com/articles/responsive-web-design/

 

Anbefaler også boka Responsive Web Design:

http://www.abookapart.com/products/responsive-web-design

[minimax]

Takk for tips og lenker som jeg har lest gjennom.

Det med å ha to kolonner som flytter seg under hverandre virker nyttig. Her er det altså viktig å plassere CSS koden i riktig rekkefølge? Altså, i den øverste biten påvirker CSS koden kun det som skal vises på en bred (desktop) skjerm mens alt under "@media all and (min-width:480px)" kun påvirker mobile enheter?

 

Når det gjelder "grid" design har ikke (selv etter å ha lest lenkene ovenfor og søkt en del videre) funnet en nybegynnerguide for hvordan dette fungerer. Det dreier seg visstnok om et prinsipp der innholdet deles opp innenfor vertikale og horizontale linjer slik at alt blir veldig ryddige, men hvor hen i koden (ved å bruke f.eks. Skeleton, 960 grid system, 1140 CSS grid og en rekke andre) legger jeg inn tekst/bilde innholdet og hvor hen plasseres disse individuelle CSS boksene oppå/ved siden av hverandre slik at jeg kan planlegge et design?

Er det også slik at et grid layout er samtidig et responsivt design som passer for alle type enheter (mobile etc.), eller er det ikke nødvendigvis noen sammenheng?

Grid design virker ganske komplisert og noe mer passende for "avislignende" nettsider med ørten tekstkolonner ved siden av hverandre og ikke mindre, mer tradisjonelle nettsider (f.eks. 1 eller 2 kolonner med header/footer), men virker som dette er veien å gå og jeg har lest at man ikke nødvendigvis må lage slike "avis" type sider ved hjelp av en grid...

Lettere forvirret

Endret 4. mai 2012 av minimax

[gather]

Når jeg har gjort responsive sider i det siste har jeg brukt et rammeverk som er gitt ut av Twitter. Twitter bootstrap. Det har ulike gridvariasjoner for både responsive og ikke responsive sider. Mer info her: http://twitter.github.com/bootstrap/

 

Et enkelt tokolonne oppsett med bootstrap ser omtrent slikt ut.

 

<div class="container-fluid">
<div class="row-fluid">
 <div class="span2">
  <p>Venstrekolonne</p>
 </div>
 <div class="span10">
  <p>Hovedkolonne med innhold</p>
 </div>
</div>
</div>

 

Du kan i tillegg bruke en ny

<div class="row-fluid">

 

inne i en div med class spanX for å posisjonere ting inne i den.

 

 

 

Jeg er uenig i påstanden over. Å bruke en grid fungerer helt fint selv om du ikke skal lage "avislignende sider". Når du gjør det får du en enkel måte å passe på at elementer er fint alignet med hverandre uten at du trenger å tenke nevneverdig over det.

 

Når det gjelder responsivitet er det noen ting du bør tenke på. Når brukeren er på en mobil-enhet, har da brukeren samme informasjonsbehov som når han er på en desktopmaskin med stor skjerm? Kanskje du bør vise innhold på andre måter eller mindre innhold på mobile plattformer?

 

Kan forøvrig også varmt anbefale boka som ble lenket til over her. Burde nesten vært obligatorisk lesning for alle som utvikler web i dag.

[minimax]

Takk for tips Gather -Twitter sin virker bra og med mange finesser. Skal ta den med i vurderingen av hvilken gridmal jeg skal bruke når jeg har forstått litt mer.

 

Godt tips med boka "Responsive web design" -glimrende klar og tydelig lesing så langt og kan absolutt anbefales (også for de som er relativt ferske på å lage nettsider).

Jeg forstår mer omkring dette med responsive nettsider, men begriper fortsatt ikke hvordan en grid layout fungerer. Ser på f.eks. Twitter Bootstrap at det er en grafisk illustrasjon av de ulike DIV boksene som også viser hvordan de forflytter seg om man endrer nettleservindusbredden. Skeleton har også en slik illustrasjon. Men det ser jo ikke ut som en horisontal/vertikal oppdeling i mange ulike kolonner, og hva er sammenhengen med de ulike DIV boksene? Er alle sammen "containers" på samme måte som i enklere layout der man videre fyller disse opp med DIV bokser som er plassert ulike steder inni?

Gather; I eksempelkoden din bruker du "Span2" og "Span10" klassene, men hvorfor akkurat disse, og hva gjør alle de andre DIVene i gridet?

Endret 23. mai 2012 av minimax

[minimax]

Håper noen fortsatt følger tråden

Jeg tror jeg forstår litt mer...

 

Grid Framework (rammeverk)

Dette er en mal i HTML/CSS brukt for å lage en nettside, men ulik en vanlig mal man laster ned (en komplett ferdiglaget nettside der man bare skifter ut eksempelteksten/-bildene med sitt eget innhold) får man kun "byggeblokkene" for en nettside som man videre må sette sammen (man må dermed kunne forstå en del HTML/CSS) for at det skal begynne å ligne på en nettside.

 

Grid

Jeg forstår det slik at som en "gammeldags" 2- eller 3-kolonners layout er ikke en grid mer mystisk enn at den også bygger på CSS "box model" prinsippet (en firkantet boks som plasseres ved siden av andre tilsvarende bokser).

Det som forvirret meg var disse grafiske demonstrasjonene som bla. vist hos Skeleton. Jeg antar nå at dette ikke er et eksempel på utseendet til en gridbasert nettside men heller en oversikt over alle de ulike DIV boksene som Skeleton kan tilby.

 

De ulike DIV boksene har alle en bestemt bredde. For å lage en nettside bestemmer man hvor mange kolonner man skal ha (og velger da samme antall DIVer fra Skeleton). Videre må man velge riktig kombinasjon av DIVer (summen av disse DIV boksenes bredde skal stemme med totalbredden på nettsiden). Je går ut fra at den bredeste DIVen på 960px skal være "container" (hovedrammen rundt hele nettsiden, der alt annet ligger innenfor).

 

Den andre forvirringen gjelder hva som skjer når man gjør om bredden på nettleseren mens man ser på bla. Skeleton demonstrasjonen. Jeg ser at DIV boksene faller sammen ("collapse") men gjetter på at heller ikke dette har noe med en virkelig nettside å gjøre. På en virkelig nettside går det hele ut på at man bestemmer hvor hen hver DIV boks skal plasseres i forhold til de andre (f.eks. ved siden av hverandre) og når man resizer nettleservinduet har man definert en annen plassering av boksene i forhold til hverandre (f.eks. under hverandre).

 

Har jeg forstått alt dette riktig?

[agm]

Gridsystemer er ikke noe banebrytende. Ideen er at de skal hjelpe deg å skape/opprettholde en konsekvens hva gjelder bredde på- og plassering av innhold.

 

Se for deg Aftenposten. Her er det tydelig at tekstspalter holder en bevisst definert bredde. Marginer er konsekvente, og det er (antakelig) en tanke bak bilders bredde og bruken av whitespace.

 

På nett ser vi ofte det motsatte. Tekst og bilder har tilfeldig bredde og er tilfeldig plassert alt etter hvordan det passer seg (eller hvordan det "plutselig" endte opp).

 

Ved å bruke et gridsystem blir en hjulpet/tvunget inn i rammer og definerte bredder som hjelper til med å opprettholde en viss fast struktur. Men du oppnår det samme med et ryddig hode og bevisst planlegging av layout.

 

Når det gjelder ditt andre spørsmål, så er det Skeletons responsive CSS som gjør dette.

 

 

Men gridsystemer er i mine øyne ikke noe å strebe etter å forstå. Det blir isåfall liten effekt av mye innsats. Lær deg HTML og CSS, les litt om typografi, les om bruken av white-space og marginer og vær bevisst og konsekvent når du syr dette sammen til en nettside.

[minimax]

Takk igjen for svar.

Jeg venter på en bok som heter "whitespace is not your enemy" og håper å lære en ting eller to om det du nevner.

 

Men jeg prøver fortsatt å få en forståelse av hvordan et grid fungerer og forstår nok lettere visuelt enn noe annet. Følgende CSS kode som lager en rød ramme rundt hver DIV ville hjulpet:

 

* {
  border: 1px solid red !important;
}

 

Men da trenger jeg en helt grunnleggende responsiv grid med kun de grunnleggende DIV boksene for å ikke skape ekstra forvirring. Finnes det noe slikt å laste ned?

Endret 18. juni 2012 av minimax

[Zepticon]

Grid er på tur ut. Om du skal designe en nettisde i dag er det så mye forskjellige størrelser og diverse på telefoner, tablets, laptops og desktops, at feks 960grid er ubrukelig.

Mesteparten av skjermene som selges nå er i HD, og da har du 1920 i bredden, Alstå nesten 1000px ubrukt plass.

 

Det finnes andre typer layout som er mer modulær og tilpasser seg browseren din mye bedre. slik at mobil og highres desktop begge er optimale.

[minimax]

Da har jeg misforstått -jeg trodde responsive grids "var greia" for å kunne lage nettsider som fungerer bra på alle enheter ettersom de tilpasser seg skjermstørrelsen og ikke type/modell av telefon/tablet osv.

 

Du nevner at det finnes andre layout som er bedre til dette -hva konkret sikter du til?

[Zepticon]

Da har jeg misforstått -jeg trodde responsive grids "var greia" for å kunne lage nettsider som fungerer bra på alle enheter ettersom de tilpasser seg skjermstørrelsen og ikke type/modell av telefon/tablet osv.

 

Du nevner at det finnes andre layout som er bedre til dette -hva konkret sikter du til?

Responsive web design er noe annet så vidt jeg veit. Når du sier 960 grid så tenker jeg et design som er optimalisert for 960, og dermed statisk, og at det da vises likt på en 1920 og en 640 px bred skjerm. Denne ble vell i hovedsak tenkt opp før mobile enheter ble populært, og var beregnet på desktop only.

 

Men jo, Responsive web design, og mobile first er ting du burde se på og vurdere.

 

EDIT: var bare jeg som hengte med opp i 960 grid, da jeg nettopp har drevet med design for en side laget etter 960 systemet. Jeg syntes det var veldig statisk og ikke særlig optimalt for noe som hellst egentlig. Men dersom du gjør det responsivt, med forskjelllige layouter etter vindusstørrelse, så blir det bedre.

 

feks denne siden gjør dette: http://www.getskeleton.com/

Endret 18. juni 2012 av Zepticon

[Zepticon]

Kom over denne i dag, og tnekte på deg

http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

[minimax]

Takk, flott demo og setter pris på det, men det er grids jeg sliter med

Responsivitet mener jeg å ha forstått (iallefall i prinsippet) etter å ha lest Ethan Marcotte sin "Responsive web design" bok.

 

I tråd #7 skrev jeg hva jeg tror det dreier seg om -har jeg fått en nogenlunde forståelse av dette?