Tehnologija razvoja spletnih strani je zelo večplasten proces. Še vedno pa lahko vse njegove faze razdelimo na dve glavni komponenti - funkcionalno in zunanjo lupino. Ali, kot je običajno med spletnimi skrbniki, back-end in front-end. Ljudje, ki svoje spletne strani naročajo pri spletnih razvojnih studiih, pogosto naivno verjamejo, da se je vredno osredotočiti le na funkcionalnost, in to bo prava odločitev. Toda to velja v zelo, zelo redkih primerih, običajno za zagonske projekte v fazi beta testiranja. V nasprotnem primeru morata grafični dizajn in uporabniški vmesnik preprosto ustrezati standardom spletnega razvoja in biti priročen.
Prvi temelj, s katerim se sooča oblikovalec vmesnika ali oblikovalec, je širina postavitve spletnega mesta. Konec koncev je za to potrebno narisati vmesnike. Povsem intuitivno se pojavita dva pristopa - bodisi naredite ločene postavitve za vsako priljubljeno ločljivost zaslona ali ustvarite eno različico spletnega mesta za vse zaslone. In obe možnosti bosta napačni, vendar najprej.
Standardna širina spletnega mesta v slikovnih pikahza Runet
Pred razvojem prilagodljive postavitve je bil razvoj strani s širino tisoč slikovnih pik množičen pojav. Ta številka je bila izbrana iz enega preprostega razloga - tako, da se spletno mesto prilega vsakemu zaslonu. In to ima svojo logiko, a predpostavimo, da ima človek še vedno vsaj HD monitor na namizju. V tem primeru se bo vaša postavitev zdela kot majhen trak na sredini zaslona, kjer je vse zlepljeno v en kup, ob straneh pa je ogromno neizkoriščenega prostora. Zdaj pa predpostavimo, da oseba dostopa do vašega spletnega mesta na tablici s širokim zaslonom 800 slikovnih pik in je v nastavitvah označeno »Pokaži celotno spletno mesto«. V tem primeru bo tudi vaše spletno mesto prikazano napačno, saj se preprosto ne bo prilegalo zaslonu.
Iz teh premislekov lahko sklepamo, da fiksna širina za postavitev za nas vsekakor ni primerna in moramo iskati drugo pot. Analizirajmo zamisel o ločeni postavitvi za vsako širino zaslona.
Postavitve za vse priložnosti
Če ste kot strategijo izbrali ustvarjanje postavitev za vse velikosti zaslonov na trgu, bo vaše spletno mesto najbolj edinstveno na celotnem internetu. Navsezadnje je danes preprosto nemogoče pokriti celotno paleto naprav in poskušati natančno prilagoditi vsako možnost. Če pa se osredotočite na najbolj priljubljene ločljivosti monitorjev in zaslonov naprav, potem ideja ni slaba. Njegova edina pomanjkljivost so finančni stroški. Konec koncev, ko bodo oblikovalec vmesnika, oblikovalec in koder prisiljeni opravljati isto delo 5 ali 6-krat, bo projekt stalnesorazmerno višja od prvotno predvidene cene.
Zato se lahko samo enostranska spletna mesta pohvalijo z obilico različic za različne zaslone, katerih namen je prodajati en izdelek in se prepričati, da ga dobro izpeljejo. No, če nimate enega od teh ciljev, ampak spletno mesto z več stranmi, potem bi morali razmisliti še naprej.
Najbolj priljubljene velikosti spletnega mesta
Kompromis med obema ekstremoma je upodabljanje postavitve za tri ali štiri velikosti zaslona. Med njimi mora biti ena postavitev za mobilne naprave. Ostalo naj bo prilagojeno malim, srednjim in velikim namiznim zaslonom. Kako izbrati širino spletnega mesta? Spodaj predstavljamo statistiko storitve HotLog za maj 2017, ki nam prikazuje porazdelitev priljubljenosti različnih ločljivosti zaslona naprave, pa tudi dinamiko tega kazalnika.
Iz tabele lahko ugotovite, kako določiti velikost spletnega mesta, ki ga želite uporabiti. Poleg tega lahko sklepamo, da je danes najpogostejši format zaslon z ločljivostjo 1366 x 768 slikovnih pik. Takšni zasloni so nameščeni v proračunskih prenosnih računalnikih, zato je njihova priljubljenost naravna. Naslednji najbolj priljubljen je monitor Full HD, ki je zlati standard za videoposnetke, igre in s tem za ustvarjanje postavitev spletnih strani. Nadalje v tabeli vidimo ločljivost mobilnih naprav 360 x 640 slikovnih pik, pa tudi različne možnosti za namizne in mobilne zaslone za njo.
Oblikovanje postavitve
TorejPo analizi statistike lahko sklepamo, da ima optimalna širina spletnega mesta 4 različice:
- Prenosna različica s širino 1366 slikovnih pik.
- različica Full HD.
- Široka postavitev 800 slikovnih pik za prikaz na majhnih namiznih monitorjih.
- Mobilna različica spletnega mesta - široka 360 slikovnih pik.
Recimo, da smo se odločili, katero velikost bomo uporabili za ustvarjeni vir za spletno mesto. Toda tak projekt bi bil še vedno drag. Poglejmo si več možnosti, tokrat brez uporabe fiksne širine.
Naredite postavitev prilagodljiva
Obstaja alternativni pristop, ko se je vredno prilagoditi le minimalni velikosti zaslona, same velikosti strani pa bodo določene v odstotkih. Hkrati je mogoče elemente vmesnika, kot so meniji, gumbi in logotip, nastaviti v absolutnih vrednostih, s poudarkom na najmanjši velikosti širine zaslona v slikovnih pikah. Nasprotno, bloki z vsebino bodo raztegnjeni glede na določen odstotek širine površine zaslona. Ta pristop vam omogoča, da prenehate dojemati velikost spletnih mest kot omejitev za oblikovalca in spretno premagate ta odtenek.
Kaj je zlati rez in kako ga lahko uporabimo za postavitev spletne strani?
Tudi v renesansi so mnogi arhitekti in umetniki poskušali dati svojim stvaritvam popolno obliko in razmerje. Za odgovore na vprašanja o vrednostih takšnega deleža so se obrnili na kraljico vseh znanosti - matematiko.
Že od antike so izumili razmerje, ki ga naše oko dojema kot najbolj naravno in elegantno,ker je v naravi vseprisoten. Odkritelj formule za takšno razmerje je bil nadarjen starogrški arhitekt po imenu Phidias. Izračunal je, da če je večji del deleža povezan z manjšim, kot je celota povezana z večjim, potem bo takšen delež videti najbolje. Toda to velja, če želite predmet razdeliti asimetrično. Ta delež so kasneje poimenovali zlati rez, kar še vedno ne precenjuje njegovega pomena za svetovno zgodovino kulture.
Nazaj na spletno oblikovanje
Je zelo preprosto - z zlatim rezom lahko oblikujete strani, ki bodo čim bolj prijetne človeškemu očesu. Če izračunamo po definiciji formule zlatega reza, dobimo iracionalno število 1, 6180339887 …, za udobje pa lahko uporabimo zaokroženo vrednost 1, 62. To bo pomenilo, da morajo biti bloki naše strani 62 % in 38 % celote, ne glede na velikost ustvarjenega vira za spletno mesto, ki ga uporabljate. Primer si lahko ogledate na tem diagramu:
Uporabite nove tehnologije
Sodobne tehnologije postavitve spletnih mest omogočajo natančno prenesti idejo načrtovalca in oblikovalca, tako da si zdaj lahko privoščite izvedbo bolj drznih idej kot na zori internetnih tehnologij. Ni vam treba več razmišljati o velikosti spletnega mesta. S pojavom stvari, kot so blokovska prilagodljiva postavitev, dinamično nalaganje vsebine in pisav, je razvoj spletnih strani postal veliko bolj prijeten. Navsezadnje so te tehnologijemanj omejitev, čeprav še vedno obstajajo. Toda kot veste, brez omejitev ne bi bilo umetnosti. Predlagamo, da uporabite en resnično kreativen pristop k oblikovanju – zlati rez. Z njim lahko učinkovito in lepo zapolnite delovni prostor, ne glede na velikost spletnega mesta, ki ste ga nastavili v svojih predlogah.
Kako povečati delovni prostor spletnega mesta
Velika je verjetnost, da ne boste imeli dovolj prostora za namestitev vseh elementov uporabniškega vmesnika v majhno postavitev. V tem primeru boste morali začeti razmišljati ustvarjalno ali celo bolj ustvarjalno kot prej.
Maksimalno sprostite prostor na spletnem mestu tako, da skrijete navigacijo v pojavnem meniju. Ta pristop je logično uporabiti ne samo na mobilnih napravah, ampak tudi na namiznih računalnikih. Navsezadnje uporabniku ni treba ves čas gledati, kateri naslovi so na vašem spletnem mestu - prišel je po vsebino. In želje uporabnika je treba spoštovati.
Primer dobrega načina za skrivanje menija je naslednja postavitev (fotografija spodaj).
V zgornjem kotu rdečega območja lahko vidite križec, s klikom na katerega se meni skrije v majhno ikono, uporabnik pa ostane sam z vsebino spletne strani.
Vendar je to neobvezno, lahko zapustite navigacijo, ki bo vedno na vidiku. Lahko pa ga naredite za čudovit oblikovalski element in ne le za seznam priljubljenih povezav na spletnem mestu. Uporabite intuitivne ikone poleg besedilnih povezav ali celo namesto njih. je enakobo vašemu mestu omogočil učinkovitejšo uporabo prostora na zaslonu uporabnika.
Najboljše spletno mesto je odzivno
Če ne veste, katero postavitev izbrati za spletno mesto, je za vas vse preprosto. Če želite prihraniti pri stroških razvoja in hkrati ne izgubiti občinstva zaradi slabe postavitve za nekatere naprave, uporabite odzivno zasnovo.
Odziven dizajn je dizajn, ki je videti enako dobro na različnih napravah. Ta pristop bo omogočil, da bo vaše spletno mesto razumljivo in priročno tudi na prenosnem računalniku, celo na tablici, celo na pametnem telefonu. Ta učinek se doseže s samodejnim spreminjanjem širine delovnega območja zaslona. Z uporabo odzivnih slogovnih listov za svoje spletno mesto sprejemate najboljšo možno odločitev.
Kakšna je razlika med odzivnim dizajnom in različicami spletnih mest
Odzivna zasnova se od mobilne različice strani razlikuje po tem, da v slednjem primeru uporabnik prejme html kodo, ki se razlikuje od namizne. To je slabost tako v smislu optimizacije delovanja strežnika kot tudi optimizacije iskalnikov. Poleg tega postane težje izračunati statistiko za različne različice spletnega mesta. Prilagodljivi pristop nima teh pomanjkljivosti.
Odzivnost za različne naprave se doseže s postavitvijo z določenim odstotkom širine ali s prenosom blokov na razpoložljivi prostor (v navpični ravnini na pametnem telefonu namestovodoravno na namizju) ali ustvarjanje posameznih postavitev za različne zaslone.
Več o odzivnem oblikovanju in razvoju izvedite v naših vadnicah.
