Tehnologija razvoja web stranica je vrlo višestruki proces. Ali ipak, sve njegove faze mogu se podijeliti u dvije glavne komponente - funkcionalnu i vanjsku ljusku. Ili, kao što je uobičajeno među webmasterima, back-end i front-end, respektivno. Ljudi koji svoje web stranice naručuju od studija za web razvoj često naivno vjeruju da se vrijedi fokusirati samo na funkcionalnost i to će biti prava odluka. Ali to je istina u vrlo, vrlo rijetkim slučajevima, obično za startup projekte u fazi beta testiranja. Inače, grafički dizajn i korisničko sučelje su jednostavno potrebni da budu u skladu sa standardima web razvoja i da budu praktični.
Prvi kamen temeljac sa kojim se suočava dizajner interfejsa, ili dizajner, je širina izgleda sajta. Uostalom, za to je potrebno nacrtati interfejse. Čisto intuitivno, pojavljuju se dva pristupa - ili napravite odvojene izglede za svaku popularnu rezoluciju ekrana ili napravite jednu verziju stranice za sve ekrane. I obje opcije će biti pogrešne, ali prije svega.
Standardna širina web stranice u pikselimaza Runet
Pre razvoja adaptivnog izgleda, razvoj sajta širine hiljadu piksela bio je masovna pojava. Ova brojka je odabrana iz jednog jednostavnog razloga - tako da se stranica uklapa u bilo koji ekran. I ovo ima svoju logiku, ali pretpostavimo da osoba još uvijek ima barem HD monitor na desktopu. U ovom slučaju, vaš raspored će izgledati kao sićušna traka na sredini ekrana, gde je sve zaglavljeno u jednu gomilu, a sa strane je ogroman neiskorišćen prostor. Sada pretpostavimo da osoba pristupa vašoj web stranici na tabletu sa širokim ekranom od 800px i u postavkama je označeno "Prikaži cijelu web stranicu". U ovom slučaju, vaša stranica će također biti pogrešno prikazana, jer jednostavno neće stati na ekran.
Iz ovih razmatranja možemo zaključiti da nam fiksna širina za izgled definitivno nije prikladna i da moramo potražiti drugi način. Hajde da analiziramo ideju zasebnog izgleda za svaku širinu ekrana.
Izgledi za sve prilike
Ako ste kao strategiju odabrali kreiranje izgleda za sve veličine ekrana na tržištu, tada će vaša stranica biti najjedinstvenija na cijelom Internetu. Uostalom, danas je jednostavno nemoguće pokriti čitav niz uređaja, pokušavajući fino podesiti svaku opciju. Ali ako se fokusirate na najpopularnije rezolucije monitora i ekrana uređaja, onda ideja nije loša. Jedini nedostatak su finansijski troškovi. Na kraju krajeva, kada su dizajner interfejsa, dizajner i koder prisiljeni da rade isti posao 5 ili 6 puta, projekat će koštatineproporcionalno veća od prvobitno planirane cijene.
Stoga, samo jednostrani sajtovi mogu se pohvaliti obiljem verzija za različite ekrane, čija je svrha da prodaju jedan proizvod i da to dobro urade. Pa, ako nemate jedan od ovih landinga, već sajt sa više stranica, onda biste trebali razmisliti dalje.
Najpopularnije veličine web-lokacije
Kompromis između dva ekstrema je prikazivanje izgleda za tri ili četiri veličine ekrana. Među njima, jedan mora biti izgled za mobilne uređaje. Ostalo bi trebalo prilagoditi malim, srednjim i velikim desktop ekranima. Kako odabrati širinu stranice? U nastavku predstavljamo statistiku usluge HotLog za maj 2017. koja nam pokazuje distribuciju popularnosti različitih rezolucija ekrana uređaja, kao i dinamiku ovog indikatora.
Iz tabele možete saznati kako odrediti veličinu stranice koju želite koristiti. Osim toga, možemo zaključiti da je danas najčešći format ekran od 1366 x 768 piksela. Takvi su ekrani ugrađeni u jeftine laptope, pa je njihova popularnost prirodna. Sljedeći najpopularniji je Full HD monitor, koji je zlatni standard za video zapise, igre, a samim tim i za kreiranje izgleda web stranice. Dalje u tabeli vidimo rezoluciju mobilnih uređaja 360 x 640 piksela, kao i razne opcije za desktop i mobilne ekrane nakon nje.
Dizajniranje izgleda
DakleNakon analize statistike, možemo zaključiti da optimalna širina stranice ima 4 varijacije:
- Laptop verzija sa širinom od 1366px.
- Full HD verzija.
- Raspored širine 800px za prikaz na malim desktop monitorima.
- Mobilna verzija stranice - širina od 360 piksela.
Recimo da smo odlučili koju veličinu ćemo koristiti za generirani izvor za stranicu. Ali takav projekat bi i dalje bio skup. Dakle, pogledajmo više opcija, ovaj put bez korištenja fiksne širine.
Učiniti izgled fleksibilnim
Postoji alternativni pristup, kada se isplati prilagoditi samo minimalnoj veličini ekrana, a same veličine sajta će biti određene u procentima. Istovremeno, elementi interfejsa kao što su meniji, dugmad i logotip mogu se postaviti u apsolutnim vrednostima, fokusirajući se na minimalnu veličinu širine ekrana u pikselima. Blokovi sa sadržajem, naprotiv, bit će rastegnuti prema navedenom postotku širine površine ekrana. Ovaj pristup vam omogućava da prestanete da doživljavate veličinu sajtova kao ograničenje za dizajnera i da vešto pobedite ovu nijansu.
Šta je zlatni omjer i kako se može primijeniti na izgled web stranice?
Čak iu renesansi, mnogi arhitekti i umjetnici pokušavali su svojim kreacijama dati savršen oblik i proporcije. Za odgovore na pitanja o vrijednostima takve proporcije, obratili su se kraljici svih nauka - matematici.
Od antike je izmišljena proporcija koju naše oko doživljava kao najprirodniju i najelegantniju,jer je u prirodi sveprisutan. Otkrivač formule za takav omjer bio je talentirani starogrčki arhitekt po imenu Phidias. Izračunao je da ako je veći dio proporcije povezan s manjim, kao što je cjelina povezana s većim, onda će takva proporcija izgledati najbolje. Ali to je slučaj ako želite asimetrično podijeliti objekt. Ova proporcija je kasnije nazvana zlatnim presekom, što još uvek ne precenjuje njen značaj za svetsku istoriju kulture.
Nazad na web dizajn
Vrlo je jednostavno - koristeći zlatni omjer, možete dizajnirati stranice koje će biti što ugodnije ljudskom oku. Računajući prema definiciji formule zlatnog omjera, dobijamo iracionalni broj 1, 6180339887 …, ali zbog pogodnosti možemo koristiti zaokruženu vrijednost od 1, 62. To će značiti da blokovi naše stranice trebaju biti 62 % i 38% od cjeline, bez obzira na veličinu generiranog izvora za stranicu koju koristite. Možete vidjeti primjer na ovom dijagramu:
Koristite nove tehnologije
Moderne tehnologije izgleda web stranica omogućavaju precizno prenošenje ideje planera i dizajnera, tako da si sada možete priuštiti implementaciju odvažnijih ideja nego u zoru internet tehnologija. Više ne morate da razmišljate o tome kolika bi veličina sajta trebala biti. S pojavom stvari kao što su blok adaptivni izgled, dinamičko učitavanje sadržaja i fontova, razvoj web stranice postao je mnogo ugodniji. Na kraju krajeva, ove tehnologije jesumanje ograničenja, iako još uvijek postoje. Ali, kao što znate, bez ograničenja ne bi bilo umjetnosti. Predlažemo da koristite jedan istinski kreativan pristup dizajnu - zlatni omjer. Pomoću njega možete efikasno i lijepo ispuniti radni prostor, bez obzira na veličinu stranice koju postavite u svojim predlošcima.
Kako povećati radni prostor stranice
Postoji velika šansa da nećete imati dovoljno prostora da sve UI elemente uklopite u mali raspored. U ovom slučaju, morat ćete početi razmišljati kreativno ili čak kreativnije nego prije.
Maksimalno oslobodite prostor na stranici skrivanjem navigacije u iskačućem meniju. Logično je koristiti ovaj pristup ne samo na mobilnim uređajima, već i na desktopima. Na kraju krajeva, korisnik ne mora stalno da gleda koji su naslovi na vašem sajtu - došao je po sadržaj. I želje korisnika se moraju poštovati.
Primjer dobrog načina da se sakrijete meni je sljedeći izgled (fotografija ispod).
U gornjem uglu crvenog područja možete vidjeti križić, klikom na koji će se meni sakriti u malu ikonu, ostavljajući korisnika nasamo sa sadržajem web stranice.
Međutim, ovo je opciono, možete napustiti navigaciju, koja će vam uvijek biti na vidiku. Ali možete ga učiniti prekrasnim elementom dizajna, a ne samo listom popularnih veza na web stranici. Koristite intuitivne ikone uz ili čak umjesto tekstualnih veza. to je istoomogućit će vašoj web stranici da efikasnije koristi prostor na ekranu na korisnikovom uređaju.
Najbolja web stranica je responzivna
Ako ne znate koji izgled da odaberete za stranicu, onda je sve jednostavno za vas. Da uštedite na troškovima razvoja i istovremeno ne izgubite publiku zbog lošeg izgleda za neki uređaj, koristite responsive dizajn.
Responzivni dizajn je dizajn koji izgleda podjednako dobro na različitim uređajima. Ovaj pristup će omogućiti da vaša stranica bude razumljiva i praktična čak i na laptopu, čak i na tabletu, čak i na pametnom telefonu. Ovaj efekat se postiže automatskim promjenom širine radne površine ekrana. Koristeći responzivne tablice stilova za vašu web lokaciju, donosite najbolju moguću odluku.
Koja je razlika između responsive dizajna i verzije web stranice
Responzivni dizajn razlikuje se od mobilne verzije sajta po tome što u drugom slučaju korisnik dobija html kod koji se razlikuje od desktopa. Ovo je nedostatak u smislu optimizacije performansi servera, kao i optimizacije pretraživača. Osim toga, postaje teže izračunati statistiku za različite verzije stranice. Adaptivni pristup nema ove nedostatke.
Odziv za različite uređaje se postiže kroz raspored sa procentom specificirane širine ili prenošenjem blokova na raspoloživi prostor (u vertikalnoj ravni na pametnom telefonu umjestohorizontalno na radnoj površini) ili kreiranje pojedinačnih izgleda za različite ekrane.
Saznajte više o responzivnom dizajnu i razvoju u našim tutorijalima.
