Standardne dimenzije lokacijama: karakteristike, zahtjevi i preporuke

tehnološki razvoj web stranica - vrlo višestrani proces. Ipak, sve njegove faze mogu se podijeliti u dvije glavne komponente - funkcionalnu i vanjske ovojnice. Ili, kako je u srednjem webmaster Beg End i Front End respektivno. Ljudi koji su kupili svoje web stranice u web razvoju studija, često naivno vjeruju da je neophodno da se fokusira samo na funkcionalan, a to će biti prava odluka. Ali, 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 dužni da se pridržavaju web razvoj standarda i udobno.

Prvi kamen temeljac suočavanja dizajnera sučelje, ili dizajner - je širina rasporeda stranice. Na kraju krajeva, to je potrebno da bi privukli interfejsa za nju. Intuitivno postoje dva pristupa - bilo da se zasebne rasporede za svaki od popularnih rezolucije ekrana, ili možete kreirati jednu verziju sajta za sve mape. Obe opcije bi bilo pogrešno, ali prvih stvari prvi.

Standardne širine u pikselima za lokaciju ćete ikada trebati

Prije razvoj adaptivnih rasporeda masovna pojava je razvoj stranice s tisućama piksela širine. Ova brojka je izabran iz jednog jednostavnog razloga - da je site je postavljen na bilo kojem zaslonu. I postoji određena logika, ali pretpostavimo da je osoba još uvijek barem HD monitora na radnoj površini. U tom slučaju, vaš raspored će izgledati sitne traka u sredini ekrana, gdje se sve oblikovana u jednu gomilu, a na strane ogroman ne-prostoru. Sada pretpostavimo da je osoba došla na svoje web stranice iz tablet sa ekranom od 800 piksela širine, a provjerava se u postavkama "Pokaži web stranice pune verzije." U ovom slučaju, vaše web stranice će se prikazati pogrešno, jer jednostavno ne uklapaju u ekran.

Iz ovih razmatranja, možemo zaključiti da fiksnu širinu za raspored, mi jednostavno ne uklapaju i želite pronaći drugi način. Hajde da analiziramo ideju posebnog rasporeda za svaki širine ekrana.

Rasporede za sve prigode

Ako ste izabrali kao strategija za stvaranje rasporeda za dimenzije dostupne sve ekran na tržištu, a zatim vaše stranice će biti najviše jedinstveni na Internetu. Na kraju krajeva, danas je nemoguće pokriti cijeli spektar uređaja u pokušaju da napravi tačne postavke za svaku opciju. Ali, ako se fokusirate na najpopularnijim uređajima rezoluciju monitora i ekrana, ideja je dobra. Njegova jedina mana - finansijskih troškova. Uostalom, kada će dizajner dizajner sučelje i koder biti prisiljeni na 5 ili 6 puta da obavlja isti posao, projekt će koštati neproporcionalno prvobitno zasađeni na proračun cijene.

Zbog toga se mogu pohvaliti obilje verzije za različite ekrane može biti osim što stranicama-odnostranichniki čija je svrha - prodati jedan proizvod i budite sigurni da to dobro. Pa, ako niste jedan od onih Landing, multi-site, stoji dalje razloga.

Najpopularnije veličine stranicama

Kompromis između dvije krajnosti je crtež raspored za tri ili četiri veličine ekrana. Među njima, jedan mora biti raspored za mobilne uređaje. Ostatak treba prilagoditi za male, srednje i velike radne površine ekrana. Kako odabrati širinu sajta? U nastavku ćemo predstaviti Copyright statistiku usluga u maju 2017. godine, što nam pokazuje distribuciju popularnosti različitih rezolucija ekrana uređaja, kao i dinamika promjena u ovom pokazatelju.

Iz tabele je moguće naučiti kako odrediti veličinu stranice koju želite koristiti. Osim toga, može se zaključiti da je danas najčešći format je ekran u 1366 768 poena. Ovi ekrani su instalirani u budžet laptop, tako da je njihova popularnost je prirodno. većina narednih popularan je Full HD monitor, što je zlatni standard za filmove, igre i, stoga, da se stvori rasporeda stranice. Dalje u tabeli vidimo dopustiti mobilnih uređaja 360 x 640 piksela, kao i razne oličenje desktop i mobilne ekrane nakon toga.

dizajn layout

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

1. Verzija laptopi 1366 piksela širine.
2. Full HD verziji.
3. 800 piksela širine raspored veličina za prikaz na malim desktop monitora.
4. Mobilna verzija sajta - 360 piksela širine.

Pretpostavimo da smo odlučili što želite da koristite veličinu generira izvorni kod za stranice. Ali takav projekat bi i dalje biti skupa. Dakle, uzeti u obzir više opcija, ovaj put bez upotrebe fiksnu širinu.

Napravite fleksibilan raspored

Postoji alternativni pristup koji nam je potreban samo da se prilagodi za minimalnu veličinu ekrana, a sama veličina stranicama će se tražiti posto. U ovom slučaju, elementi interfejsa, kao što su meniji, dugmad i logotipa, može se definirati u apsolutnom smislu, fokusirajući se na minimalne veličine širine ekrana u pikselima. Blokovi sa sadržajem, naprotiv, bit će protezala prema određenom posto širine područje ekrana. Ovakav pristup omogućava da otkrije veličinu lokacije kao ograničenja za projektanta i talenta da pobijediti ovu nijansu.

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

Čak iu renesanse mnogi arhitekti i umjetnici pokušali da njegove kreacije savršen oblik i proporcije. Za odgovore na pitanja o implikacijama takvih razmjera, okrenuli su se kraljica svih znanosti - matematike.

Još od vremena antike je izmislio proporcije koje naše oko percipira kao najprirodniji i elegantan, jer je sveprisutan u prirodi. Otkrio formulu taj odnos bio talentovan grčki arhitekta po imenu Phidias. Izračunato je da ako većina proporcije odnosi do najniže u cjelini daje veći, onda taj odnos će dobro izgledati. Ali u ovom slučaju, ako želite podijeliti asimetrično objekta. Ovaj procenat je kasnije postao nazvan zlatni omjer, to i dalje ne precijeniti svoju važnost za svjetsku kulturnu povijest.

Vratimo se na web dizajn

To je vrlo jednostavan - pomoću zlatni omjer, možete dizajnirati stranice koje će biti najviše ugodan za ljudsko oko. Izračunava prema formuli zlatnog sekcija, nalazimo je iracionalan broj 1.6180339887 ..., ali za praktičnost možete koristiti zaobljeni vrijednosti od 1,62. To će značiti da našu stranicu blokova treba da bude 62% i 38% u svemu, bez obzira na veličinu generira izvorni kod za stranice koje koristite. Primjer možete vidjeti na sljedećoj shemi:

Korištenje novih tehnologija

Moderni raspored tehnologija web stranice vam omogućuju da precizno prenese ideje dizajnera i dizajnera, tako da sada možete priuštiti provođenje hrabriji ideja nego na početku Internet tehnologije. Više ne treba puno da zbunjuje nad onim što bi trebalo da bude veličine stranice. Pojavom stvari kao što su blok adaptivnog rasporeda, dinamičko opterećenje sadržaja i fontova, razvoj web stranice 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 dizajniranju - zlatnog preseka. Uz to, od vas će biti u stanju da efikasno i lijepo popuni radnog prostora, bez obzira na veličinu ili stranicama pitao u predlošcima.

Kako povećati radni prostor stranice

Šanse su da nećete imati dovoljno prostora da primi sve elemente interfejsa u raspored male veličine. U tom slučaju, morat ćete početi razmišljati kreativno, ili čak i više kreativne nego što ranije.

Maksimalna slobodan prostor na sajtu je moguće, krije navigaciju u pop-up izbornika. Ovaj pristup je logično da se koristi ne samo mobilnih, ali i na radnoj površini. Na kraju krajeva, korisnik ne treba sve vreme da pogledam šta ima naslova na svom mjestu - to je došao za sadržaj. A korisnik želi da se poštuju.

Primjer dobar način da se sakrije meni je sljedeći raspored (na slici dolje).

U gornjem kutu crveno područje, možete vidjeti krst, kliknite na meni koja skriva u malom ikona, ostavljajući korisnik sama sa sadržajem web stranice.

Međutim, to je opcionalno, možete ostaviti navigaciju koja je uvijek na vidiku. Ali možete napraviti je prekrasan dizajn element, a ne samo popis linkova na popularnom sajtu. Koristiti intuitivne ikone uz tekst linkove ili ih čak i zamijeniti. To će također omogućiti da Vaš sajt efikasnije korištenje prostora na ekranu na uređaju.

Najboljih web stranica - adaptivni

Ako ne znate koji odabrati raspored za sajt, sve samo za vas. Da biste smanjili troškove razvoja i istovremeno ne izgubiti publiku zbog lošeg rasporeda za neke uređaja, koristite responsive web dizajn.

Adaptive zove dizajn koji izgleda na različitim uređajima jednako dobro. Ovaj pristup će omogućiti vaš sajt biti jasna i lako čak i za laptop, barem na tabletu, čak i na pametnom telefonu. Postigao je ovaj efekat zahvaljujući automatskom promjene radnog prostora širine ekrana. Koristeći adaptivni stil listova za sajt, uzimate ispravnu odluku moguće.

Ono što razlikuje adaptivni dizajn dostupnost različitih verzija vaše web stranice

Odgovarajući dizajn se razlikuje od mobilnog sajta, tako da u tom slučaju, korisnik dobija HTML-koda, koja se razlikuje od desktop. To je mana s aspekta optimizaciju performansi servera, kao i tražilice optimizacija. Osim toga, teže postaje uzeti u obzir statistike prema različitim verzijama stranice. Adaptivnog pristup je lišen nedostataka.

Prilagodljivost za različite uređaje se postiže zbog širine izgled ili Postotci preko transporta blokova u raspoloživog prostora (u vertikalnoj ravni umjesto horizontalne pametnog telefona na desktop) ili pojedinačne rasporede stvaranjem različitim ekranima.

Možete naučiti više o responsive dizajn i razvoj možeš iz knjiga.