Sadržaj
Mobiteli, tableti i računalni monitori imaju različite načine korištenja, korisnike i dimenzije koji ostavljaju pitanje o tome koja je najbolja veličina izgleda web-lokacije određena potrebama primarnih korisnika te web-lokacije. Ako je web-mjesto namijenjeno za gledanje od strane standardnih korisnika na širokom zaslonu s razlučivošću od 1680x1040 piksela, veličina web-lokacije mora se prilagoditi glavnom zaslonu preglednika. Ako je web-lokacija namijenjena za upotrebu na mobilnim uređajima, trebala bi biti napravljena za mnogo manji zaslon.
Statički izgled VS tekućine
Prvo razmatranje je li web-lokacija zahtijeva dimenziju definiranu u pikselima. Koristeći postotke, možete stvoriti "fluidni" raspored, koji dinamički mijenja površine, ovisno o veličini prozora preglednika. Kada se koristi u kombinaciji s tekstom, izgled fluida može biti najbolji izbor pri izradi web-lokacije za standardnu razlučivost zaslona, kao i za mobilne preglednike. Fluidni izgledi postižu se korištenjem "width = 100%" u CSS deklaraciji sadržaja, umjesto "width = 960x", na primjer.
Filtriranje standardnih veličina zaslona
Da biste stvorili "fiksne" ili fluidne izglede, širina divova, omotača ili glavnih tablica sadržaja treba stati u prozor preglednika korisnika, uzimajući u obzir i traku za pomicanje i alatnu traku. Također biste trebali razmisliti o tome da radite za većinu. Više od 80% preglednika danas koristi razlučivost zaslona od preko 1024x768 piksela. To znači da možete to učiniti za 1680x1024 piksela, ali je dobra ideja projektirati na sredinu. Širina od 960 ili 980 piksela su dvije pouzdane mjere za udobno prikazivanje sadržaja u pregledniku koji koristi netko tko koristi razlučivost 1024x768 ili višu. Sustav se također dobro uklapa u mobilne uređaje koji mogu prikazivati cijele web-lokacije. Ako je suviše zbijeno, 1080 je sljedeća najbolja širina. Zapamtite visinu standardnog preglednika pri svakoj razlučivosti da biste držali najvažnije informacije iznad "fold" -a ili točke, gdje je pomicanje potrebno.
Pokretni zasloni
Ako želite da vaša web-lokacija izgleda dobro na različitim mobilnim uređajima, morat ćete to učiniti posebno za uređaj ili stvoriti poseban stil koji koriste mobilni preglednici za prikaz "mobilne" verzije vaše web-lokacije. Razlučivost 240x320 je trenutni standard za većinu pametnih telefona i internetskih uređaja, kao što je iPhone. Dobro je koristiti "tečan" postotak ili raspored, budući da mnogi uređaji podržavaju i portretne i pejzažne načine. ako stvorite web-lokaciju koja je postavljena na širinu od 320 piksela, može se pojaviti odrezana za korisnika pristupanjem u portretnom načinu.
Zlatna rešetka
Možda je najbolji sustav za određivanje dimenzija rasporeda korištenjem mrežnog sustava. Mreže izračunavaju savršeno uravnotežene regije unutar zadane širine kako bi pružile osjećaj za mjerenje elemenata unutar glavnog rasporeda ili područja sadržaja. Ti elementi uključuju promotivne okvire, trake, razmak oglasa ili paragrafe. Primjerice, raspored koji koristi širinu od 1080 piksela i podijeljen pomoću zlatne mreže ostavio bi područje za blogove široke 739 piksela i desnu traku širine 780 piksela, pri čemu bi oboje koristili marginu od 10 piksela. Krajnji rezultat je savršeno usklađen i uravnotežen raspored. Možete eksperimentirati s nekoliko različitih mreža posjetom sustavu generatora rešetki (vidi Resources).