Standardne dimenzije stranice: značajke, zahtjeve i preporuke

Razvoj tehnologije web stranica - vrlo višestranog proces. Ipak, svi njegovi stupnjevi mogu se podijeliti u dvije glavne komponente - funkcionalna i vanjskog omotača. Ili, kao u srednjem webmaster Beg End i Front End respektivno. Ljudi koji su kupili svoje web stranice u web development studiju, često naivno vjeruju da je potrebno da se usredotočite samo na funkcionalan, i to će biti pravo rješenje. No, to je istina u vrlo, vrlo rijetkim slučajevima, obično za start-up projekata u fazi beta testiranja. Ostatak grafički dizajn i korisničko sučelje jednostavno su dužni pridržavati s web standardima razvoja i biti udoban.

Prvi kamen okrenut sučelja dizajner ili dizajner - širina izgled stranice. Uostalom, to je potrebno izvući sučelja za nju. Intuitivno postoje dva pristupa - bilo napraviti zasebne rasporede za svaki od popularnih razlučivosti zaslona, ili možete stvoriti jednu verziju web-stranice za sve kartama. Obje opcije će biti u redu, ali prvi stvari prvi.

Standardna širina u pikselima za web stranice koje ćete ikada trebati

Prije razvoja prilagodljiva izgleda masovni fenomen je razvoj stranice s tisućama piksela širine. Ova brojka je izabran za jednog jednostavnog razloga - da je site je stavljen na bilo kojem zaslonu. I postoji određena logika, ali pretpostavimo da je osoba još barem HD monitora na radnoj površini. U tom slučaju, vaš izgled će činiti majušni u sredini ekrana, gdje je sve lijevanim u jednu hrpu, a na strane ogromnog ne-prostoru. Sada pretpostavimo da osoba dođe na svoje web stranice iz tableta sa zaslonom od 800 piksela širine, a provjerava se u postavkama „Prikaži web-mjestu punu verziju”. U tom slučaju, vaše web stranice će također biti prikazan na pogrešan način, što jednostavno ne stane u ekran.

Iz ovih razmatranja, možemo zaključiti da je fiksna širina za raspored, mi jednostavno ne stane i želite pronaći neki drugi način. Idemo analizirati ideju odvojenog izgleda za svaku širinu zaslona.

Izgledi za sve prigode

Ako ste izabrali kao strategija za stvaranje izgleda za veličine dostupne sve ekran na tržištu, tada je vaša stranica će biti najviše jedinstvena na Internetu. Uostalom, danas je jednostavno nemoguće pokriti cijelu paletu uređaja u pokušaju da točno postavke za svaku opciju. No, ako se usredotočite na najpopularnijim rezolucije monitora i ekrana uređaja, ideja je dobra. Njegova jedina mana - financijski troškovi. Uostalom, kada je dizajner sučelja dizajner i koder će biti prisiljena na 5 ili 6 puta obavljati isti posao, projekt će koštati neproporcionalno prvobitno zasađeni na proračun cijene.

Stoga se pohvaliti obiljem verzije za različite zaslone može biti osim što je web-odnostranichniki čiji je cilj - prodati jedan proizvod i biti sigurni da to dobro. Pa, ako niste jedan od onih slijetanja, multi-stranicu, to stoji na razlog dalje.

Najpopularniji veličine stranice

Kompromis između dvije krajnosti je crtež izgled za tri ili četiri veličine zaslona. Među njima, mora biti raspored za mobilne uređaje. Ostatak treba prilagoditi za male, srednje i velike radne površine zaslona. Kako odabrati širinu stranice? U nastavku ćemo predstaviti HotLog statistiku usluga za svibanj 2017., koja nam prikazuje distribuciju popularnosti različitih razlučivosti zaslona uređaja, kao i dinamiku promjene ovog pokazatelja.

Iz tablice je moguće naučiti kako odrediti veličinu stranice koju želite koristiti. Osim toga, može se zaključiti da je najčešći oblik danas je ekran u 1366 sa 768 bodova. Ovi zasloni su instalirani u proračun laptop, tako da njihova popularnost je prirodno. Sljedeći najpopularniji je Full HD-monitor, koji je zlatni standard za filmove, igre, i, dakle, stvoriti stranice izgleda. Dalje u tablici vidimo dopustiti mobilnih uređaja 360 x 640 piksela, kao i različite izvedbe desktop i mobilne zaslone nakon toga.

izgled dizajna

Dakle, nakon analize statistike, možemo zaključiti da je optimalna širina stranice ima 4 varijacije:

1. Verzija laptop s 1366 piksela.
2. Full HD-verzija.
3. 800 piksela širine veličine izgled za prikaz na malim stolnim monitorima.
4. Mobilna verzija stranice - 360 piksela širine.

Pretpostavimo da smo odlučili što želite upotrebljavati veličinu generiranog koda za web stranice. No, takav projekt i dalje će biti skupo. Dakle, uzeti u obzir više opcija, ovaj put bez korištenja fiksne širine.

Napravite fleksibilan raspored

Tu je alternativni pristup koji trebamo samo podesiti za minimalnu veličinu zaslona, a sama veličina stranice će se tražiti posto. U tom slučaju, elemenata sučelja kao što su izbornici, gumbi i logotipe, može se definirati u apsolutnom smislu, s naglaskom na minimalnoj veličini širine ekrana u pikselima. Blokovi sa sadržajem, naprotiv, ona se rasteže prema navedeni posto širine područja zaslona. Ovaj pristup ne omogućuje otkriti veličinu stranice kao ograničenja za projektanta i talent pobijediti ovu nijansu.

Što je zlatni omjer, i kako koristiti web stranice na izgled?

Čak iu doba renesanse mnogi arhitekti i umjetnici pokušali dati svoje kreacije savršen oblik i proporcije. Za odgovore na pitanja o implikacijama takve razmjere, okrenuli su se kraljica svih znanosti - matematike.

Otkad su dani antike je izumio omjeru koji naše oko percipira kao najprirodniji i elegantan, jer je sveprisutan u prirodi. Otkrivač formule iz tog omjera je bio talentirani grčki arhitekt po imenu Phidias. On je izračunao da ako većina razmjera odnosi na nisko kao cjelina pruža veći, tada udio će izgledati dobro. No, u tom slučaju, ako želite podijeliti asimetrično objekt. Ovaj dio je kasnije postao zove zlatni omjer, to još uvijek ne precjenjuje svoju važnost za svjetsku kulturnu povijest.

Vratimo se na web dizajnu

To je vrlo jednostavan - pomoću zlatni omjer, možete dizajnirati stranice koje će biti najviše ugodan ljudskom oku. Izračunava se prema formuli iz zlatnog reza, nalazimo iracionalni broj 1,6180339887 ..., ali za praktičnost možete koristiti zaobljeni vrijednost 1,62. To će značiti da su naši stranica blokovi trebaju biti 62% i 38% od cjeline, bez obzira na veličinu generira izvorni kod za web stranice koje koristite. Primjer možete vidjeti na sljedećoj shemi:

Primjena novih tehnologija

Moderna tehnologija izgleda web stranice omogućuju vam da točno prenijeti ideje dizajnera i dizajnera, tako da sada možete priuštiti provedbu izražene ideje nego na početku Internet tehnologije. Nema više toliko trebati zagonetka oko toga što bi trebao biti veličine stranice. S pojavom takve stvari kao blok adaptivnog rasporeda, dinamičkim opterećenjem sadržaja i fontova, web razvoj je postao mnogo puta ugodnijim. Uostalom, ove tehnologije imaju manje ograničenja, iako su. Ali, kao što znate, bez ograničenja, ne bi bilo ni umjetnosti. Predlažemo da koristite istinski kreativan pristup projektiranju - zlatni rez. Uz to, od vas će biti u mogućnosti da učinkovito i lijepo popuni radni prostor, bez obzira na veličinu ili web stranice koje si tražio u svojim predlošcima.

Kako povećati radni prostor stranice

Šanse su da nećete imati dovoljno prostora za smještaj svih sučelja elemente u izgled male veličine. U tom slučaju, morat ćete početi razmišljati kreativno, ili još kreativniji nego što je prije.

Maksimalni osloboditi prostor na mjestu što je više moguće, skrivajući navigaciju u pop-up izbornika. Ovaj pristup je logično koristiti ne samo mobitel, ali i na radnoj površini. Uostalom, korisnik ne mora cijelo vrijeme gledati na ono što je naslove na svoje stranice - on je došao za sadržaj. Korisnik želi da se poštuje.

Primjer dobar način za skrivanje izbornika je sljedeći raspored (na slici dolje).

U gornjem uglu crvenog područja, možete vidjeti s lijeve strane kliknite na izborniku koji se skriva u malom ikonom, ostavljajući korisniku sama sa sadržajem web stranice.

Međutim, to je opcionalno, možete ostaviti navigaciju koji je uvijek u očima. No, možete to učiniti lijep dizajnerski element, a ne samo popis linkova na popularne stranice. Koristite intuitivne ikone osim tekstualnih linkova ili čak ih zamijeniti. Također će omogućiti vaše stranice za učinkovitije korištenje prostora na zaslonu na uređaju.

Best Web - adaptivni

Ako ne znate što neki to izabrati izgled za web stranice, sve samo za vas. Kako uštedjeti na troškovima razvoja i istodobno ne izgubiti publiku zbog lošeg rasporeda za neki uređaj, upotrijebiti responzivni web-dizajn.

Prilagodljiva zove dizajn koji izgleda na različitim uređajima jednako dobro. Ovaj pristup će omogućiti da vaše stranice biti jasan i jednostavan čak i za laptop, barem na ploči, pa čak i na smartphone. To postiže taj učinak je zbog automatske promjene radnog prostora širine zaslona. Korištenje adaptivne stilova za web stranice, vi uzimate ispravnu odluku moguće.

Ono što razlikuje adaptivni dizajn dostupnosti različitih verzija Vaše web stranice

Osjetljivi dizajn je drugačiji od mobilnog stranice, tako da je u tom slučaju, korisnik prima HTML-kod, koji se razlikuje od radne površine. To je nedostatak s aspekta optimiziranja performansi poslužitelja, kao i tražilice optimizacija. Osim toga, to će biti teže u obzir statističke podatke prema različitim verzijama stranice. Adaptivni pristup je lišen nedostataka.

Prilagodljivost za različite uređaje postiže zahvaljujući širini izgleda ili postocima preko transporta blokova u slobodnom prostoru (u vertikalnoj ravnini umjesto vodoravne smartphone na radnoj površini), odnosno pojedine izgleda stvaranjem raznih ekrana.

Možete saznati više o optimiziranom dizajnu i razvijati možete iz knjiga.