Hvordan man designer nettsteder i 960-nettet - dummier

En nyttig vinkel hvorfra man skal skille seg ut i utfordringen ved å designe nettsider den skal starte med hvorfor nettsidene er 960 px brede. Men er de? Nei, ikke alle av dem. Men det er kraftige overbevisende grunner til at webdesignere graviterer mot å lage sider med en standardbredde på 960 px: funksjon og form.

Først av alt kan et veldig, veldig bredt utvalg av visningsporte vise en 960 px side. Hvordan kan både en fullskjerm monitor og en iPhone vise en 960 px side? Det spørsmålet har et todelt svar:

• En 960 px side vil ikke fylle hele bredden på en fullskjermskjermer - men det er bra. En nettside som fyller hele bredden på en storskjermskjár, vil være for vanskelig å fordøye. Tekstlinjer ville være for lange å lese. Sidens innhold vil være for strukket ut for besøkende å absorbere som en samlet helhet.

• Mobil enheter har flere piksler per tomme enn fullstørrelses skjermer. Så selv Androids, iPhones og andre små enheter kan vise 960 px sider.

Den andre attraksjonen ved å bruke et 960-nett er at "960" lett kan deles. Det betyr at du kan bryte ned (dele) siden din i håndterbare biter - kolonner - for å hjelpe plottet ditt. For eksempel, si at du baserer et design på en tre-kolonne tilnærming, hver 320 px bred.

Figuren viser bare slik design: et 960-grid delt inn i tre samme bredde kolonner, ved hjelp av Adobe Illustrator som et designverktøy. I denne illustrasjonen fyller en topptekst (i hvitt) toppen av skjermen, og de tre kolonnene er plassert under overskriften.

Eller et 960-grid kan enkelt deles i åtte kolonner (120 px bred) eller 16 kolonner (60 px bred). Denne eiendomsnedbrytingen gjør det enkelt for en designer (som kan være deg!) For å lage passende størrelse kunstverk for annonser, bannere og annet innhold.

Faktisk, hvis tekniske problemer var det eneste problemet, kunne webdesignere ha standardiserte websidestørrelser litt større enn 960 px, og beholderne vil fortsatt passe inn i mobile enheter. De fleste viewports, inkludert mobil, hevder å være minst 1024 px brede - men verdien av å bruke 960 ligger i evnen til å bruke "delbarheten" av det nummeret i arbeidsflyten.

Det viktigste er at designere - ved hjelp av programmer som Adobe Illustrator, Adobe Photoshop eller til og med et ark med grafpapir - kan opprette så mange som 16 jevnt dimensjonerte kolonner (60 px).

Og ved å lage design på toppen av det 16-kolonne gridet, setter de deretter kunstverket over til en webdesigner som oversetter siden til HTML og CSS ved hjelp av en 960 px bred beholder og flere kolonner som passer dem i det opprinnelige kunstverket.