Tehnologija razvoja web stranica vrlo je 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. Ljudi koji svoje web stranice naručuju od studija za izradu web stranica često naivno vjeruju da se isplati fokusirati samo na funkcionalnost i to će biti prava odluka. Ali to vrijedi 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 jednostavno moraju biti u skladu sa standardima web razvoja i biti praktični.
Prvi kamen temeljac s kojim se dizajner sučelja, ili dizajner, suočava je širina izgleda stranice. Uostalom, za to je potrebno nacrtati sučelja. Čisto intuitivno, pojavljuju se dva pristupa - ili napravite zasebne izglede za svaku popularnu razlučivost zaslona ili napravite jednu verziju web-mjesta za sve zaslone. I obje opcije će biti pogrešne, ali prvo.
Standardna širina web stranice u pikselimaza Runet
Prije razvoja adaptivnog izgleda, razvoj stranice širine tisuću piksela bio je masovna pojava. Ova brojka je odabrana iz jednog jednostavnog razloga - tako da stranica stane u bilo koji zaslon. I to ima svoju logiku, ali pretpostavimo da čovjek ipak ima barem HD monitor na desktopu. U ovom slučaju, vaš će se raspored činiti kao sićušna traka na sredini ekrana, gdje je sve zaglavljeno u jednu hrpu, a sa strane je ogroman neiskorišteni prostor. Sada pretpostavimo da osoba pristupa vašoj web stranici na tabletu sa širokim zaslonom od 800px i u postavkama je označeno "Prikaži cijelu web stranicu". U tom slučaju, vaša će stranica 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. Analizirajmo ideju zasebnog izgleda za svaku širinu zaslona.
Izgledi za sve prilike
Ako ste kao strategiju odabrali izradu izgleda za sve veličine zaslona na tržištu, tada će vaša stranica biti najjedinstvenija na cijelom Internetu. Uostalom, danas je jednostavno nemoguće pokriti cijeli niz uređaja, pokušavajući fino podesiti svaku opciju. Ali ako se usredotočite na najpopularnije rezolucije monitora i zaslona uređaja, onda ideja nije loša. Jedini nedostatak su mu financijski troškovi. Uostalom, kada su dizajner sučelja, dizajner i koder prisiljeni raditi isti posao 5 ili 6 puta, projekt će koštatineproporcionalno viša od izvorno predviđene cijene.
Stoga, samo jednostrane stranice mogu se pohvaliti obiljem verzija za različite zaslone, čija je svrha prodati jedan proizvod i to dobro odraditi. Pa, ako nemate jedno od ovih odredišta, već web-lokaciju s više stranica, razmislite dalje.
Najpopularnije veličine web-lokacije
Kompromis između dva ekstrema je renderiranje izgleda za tri ili četiri veličine zaslona. Među njima mora biti i izgled za mobilne uređaje. Ostalo bi trebalo prilagoditi malim, srednjim i velikim desktop ekranima. Kako odabrati širinu stranice? U nastavku donosimo statistiku usluge HotLog za svibanj 2017. koja nam pokazuje distribuciju popularnosti različitih rezolucija zaslona uređaja, kao i dinamiku ovog pokazatelja.
Iz tablice 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 zasloni ugrađeni u proračunska prijenosna računala, pa je njihova popularnost prirodna. Sljedeći najpopularniji je Full HD monitor, koji je zlatni standard za videozapise, igre, a time i za izradu izgleda web stranica. Dalje u tablici 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.
- Izgled širine 800px za prikaz na malim stolnim monitorima.
- Mobilna verzija stranice - širina od 360 piksela.
Recimo da smo odlučili koju veličinu koristiti za generirani izvor za stranicu. Ali takav bi projekt i dalje bio skup. Pogledajmo više opcija, ovaj put bez upotrebe fiksne širine.
Učiniti izgled fleksibilnim
Postoji alternativni pristup, kada se isplati prilagoditi samo minimalnoj veličini zaslona, a same veličine stranice bit će postavljene u postocima. Istodobno, elementi sučelja kao što su izbornici, gumbi i logotip mogu se postaviti u apsolutne vrijednosti, usredotočujući se na minimalnu veličinu širine zaslona u pikselima. Blokovi sa sadržajem, naprotiv, bit će rastegnuti prema navedenom postotku širine područja zaslona. Ovaj pristup vam omogućuje da prestanete doživljavati veličinu web-mjesta kao ograničenje za dizajnera i vješto pobijedite ovu nijansu.
Što 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 znanosti - matematici.
Od antike je izmišljena proporcija koju naše oko percipira 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 omjera povezan s manjim kao što je cjelina povezana s većim, onda će takav omjer izgledati najbolje. Ali to je slučaj ako želite podijeliti objekt asimetrično. Taj je omjer kasnije nazvan zlatnim presjekom, što još uvijek ne precjenjuje njegovu važnost za svjetsku povijest kulture.
Natrag na web dizajn
Vrlo je jednostavno - pomoću zlatnog omjera možete dizajnirati stranice koje će biti što ugodnije ljudskom oku. Računajući prema definiciji formule zlatnog omjera, dobivamo iracionalni broj 1, 6180339887 …, ali zbog praktičnosti možemo koristiti zaokruženu vrijednost od 1, 62. To će značiti da blokovi naše stranice trebaju biti 62 % i 38% 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 stranice omogućuju precizno prenošenje ideje planera i dizajnera, pa si sada možete priuštiti implementaciju odvažnijih ideja nego u zoru internetskih tehnologija. Ne morate više razmišljati o veličini stranice. S pojavom takvih stvari kao što su blok adaptivni izgled, dinamičko učitavanje sadržaja i fontova, razvoj web stranice postao je mnogo ugodniji. Uostalom, te tehnologije jesumanje ograničenja, iako još uvijek postoje. Ali, kao što znate, bez ograničenja ne bi bilo umjetnosti. Predlažemo da koristite jedan uistinu kreativan pristup dizajnu - zlatni omjer. Pomoću njega možete učinkovito i lijepo ispuniti radni prostor, bez obzira na veličinu web-mjesta koju ste postavili u svojim predlošcima.
Kako povećati radni prostor stranice
Postoji velika šansa da nećete imati dovoljno prostora da sve elemente korisničkog sučelja smjestite u mali izgled. U ovom slučaju, morat ćete početi razmišljati kreativno ili čak kreativnije nego prije.
Maksimalno oslobodite prostor na stranici skrivanjem navigacije u skočnom izborniku. Logično je koristiti ovaj pristup ne samo na mobilnim uređajima, već i na stolnim računalima. Uostalom, korisnik ne mora cijelo vrijeme gledati koji su naslovi na vašoj stranici - došao je po sadržaj. I želje korisnika se moraju poštivati.
Primjer dobrog načina za skrivanje izbornika je sljedeći izgled (fotografija ispod).
U gornjem kutu crvenog područja možete vidjeti križić, klikom na koji će se sakriti izbornik u malu ikonu, ostavljajući korisnika na miru sa sadržajem web stranice.
Međutim, ovo nije obavezno, možete napustiti navigaciju koja će uvijek biti na vidiku. Ali možete ga učiniti lijepim elementom dizajna, a ne samo popisom popularnih poveznica na web mjestu. Koristite intuitivne ikone uz ili čak umjesto tekstualnih veza. to je istoomogućit će vašoj web-lokaciji učinkovitije korištenje prostora na ekranu na korisnikovom uređaju.
Najbolja web stranica je responzivna
Ako ne znate koji izgled odabrati za stranicu, onda je sve jednostavno za vas. Da biste uštedjeli na troškovima razvoja i istovremeno ne izgubili svoju publiku zbog lošeg izgleda za neki uređaj, koristite responzivni dizajn.
Responzivni dizajn je dizajn koji izgleda jednako dobro na različitim uređajima. Ovaj pristup omogućit će da vaša stranica bude razumljiva i prikladna čak i na prijenosnom računalu, čak i na tabletu, čak i na pametnom telefonu. Ovaj učinak postiže se automatskim promjenom širine radnog područja zaslona. Korištenjem responzivnih tablica stilova za svoju web-lokaciju, donosite najbolju moguću odluku.
Koja je razlika između responzivnog dizajna i verzija web stranice
Responzivni dizajn razlikuje se od mobilne verzije stranice po tome što u potonjem slučaju korisnik dobiva html kod koji se razlikuje od desktopa. To je nedostatak u smislu optimizacije performansi poslužitelja, kao i optimizacije tražilice. Osim toga, postaje teže izračunati statistiku za različite verzije stranice. Prilagodljivi pristup nema ove nedostatke.
Odzivnost za različite uređaje postiže se rasporedom s postotkom navedene širine ili prijenosom blokova na raspoloživi prostor (u okomitoj ravnini na pametnom telefonu umjestohorizontalno na radnoj površini) ili stvaranje pojedinačnih izgleda za različite zaslone.
Saznajte više o responzivnom dizajnu i razvoju u našim tutorijalima.
