Tehnologija razvoja spletnih strani je zelo vsestranski proces. Ampak še vedno, lahko vse njene faze razdelimo na dve glavni komponenti - funkcionalno in zunanjo lupino. Ali, kot je običajno med webmasters, backend in spredaj in konec oz. Ljudje, ki urejajo svoje spletne strani v studiih za razvoj spletnih strani, pogosto naivno verjamejo, da je vredno osredotočiti se samo na funkcionalnost in to je prava odločitev. Toda to velja v zelo redkih primerih, običajno za začetne projekte v fazi testiranja beta. V drugem grafičnem oblikovanju in uporabniškem vmesniku se je treba le prilagoditi standardom razvoja spletnih strani in biti udobna.


Prvi temeljni kamen, s katerim se ukvarja oblikovalec vmesnika ali oblikovalec, je širina postavitve spletnega mesta. Konec koncev, za to je potrebno pretvoriti vmesnike. Obstajata povsem intuitivna dva pristopa - izdelava ločenih postavitev za vsako priljubljeno ločljivost zaslona ali ustvarjanje ene različice mesta za vse zaslone. In obe možnosti bosta nepravilni, vendar je vse v redu.

Standardna širina mesta v pikslih za runet

Do razvoja prilagodljive postavitve je bil masovni pojav razvoj spletnega mesta s tisoč piksli. Ta številka je bila izbrana iz enega preprostega razloga - tako da je bilo mesto postavljeno na kateri koli zaslon. In to ima svojo logiko, vendar predpostavimo, da ima oseba še vedno vsaj HD monitor na namizju. V tem primeru bo vaša postavitev videti kot majhen trak na sredini zaslona, ​​kjer je vse obrezano v en kup, inna straneh ogromen neizkoriščen prostor. Zdaj pa predpostavimo, da je oseba prišla na vašo spletno stran z zaslonom širine 800 slikovnih pik in v nastavitvah je potrditveno polje »Prikaži celotno različico spletne strani«. V tem primeru bo vaše spletno mesto prikazano tudi nepravilno, saj se preprosto ne drži zaslona.


Iz teh premislekov lahko sklepamo, da fiksna širina za postavitev ni ravno primerna za nas in moramo poiskati drug način. Analizirajmo idejo ločene postavitve za vsako širino zaslona.

Postavitve za vse priložnosti

Če se odločite ustvariti postavitev za vse velikosti zaslonov, ki so prisotni na trgu, bo vaše spletno mesto postalo najbolj edinstveno na internetu. Danes je preprosto nemogoče doseči celotno paleto naprav, poskušati natančno prilagoditi vsako možnost. Toda, če se osredotočite na najbolj priljubljeno ločljivost monitorjev in zaslonov naprav, potem ideja ni slaba. Edini minus so finančni stroški. Konec koncev, ko bo oblikovalec vmesnikov, oblikovalec in monter prisiljen opraviti isto delo 5 ali 6-krat, bo projekt stalo veliko več, kot je bilo sprva določeno v proračunu. Zato se lahko ponaša z velikim številom različic pod različnimi zasloni kot spletna mesta z eno stranjo, katerih namen je prodati en izdelek in ga nujno narediti dobro. No, če nimate ene od teh ciljnih strani in spletnega mesta z več strani, potem razmislite še naprej.

Najbolj priljubljena spletna mesta

Kompromis med obema skrajnostma je zgraditi postavitevtri ali štiri velikosti zaslona. Med njimi je nujno mobilna postavitev. Ostalo je treba prilagoditi malim, srednjim in velikim namiznim zaslonom. Kako izbrati širino spletnega mesta? V nadaljevanju boste našli statistiko storitev HotLog za maj 2017, ki nam kaže razporeditev priljubljenosti različnih resolucij zaslona naprav in dinamiko spremembe tega kazalnika.
Iz tabele se lahko naučite, kako določiti velikost spletnega mesta, ki ga želite uporabiti. Poleg tega lahko sklepamo, da je najpogostejša današnja oblika zaslon 1366 s 768 točkami. Takšni zasloni so nameščeni v proračunskih prenosnih računalnikih, zato je njihova priljubljenost naravna. Naslednja priljubljenost je monitor Full HD, ki je zlati standard za videoposnetke, igre in s tem ustvarjanje postavitev spletnih mest. Naslednjo v tabeli vidimo ločljivost mobilnih naprav 360 na 640 točkah, kot tudi različne različice namiznih in mobilnih zaslonov po njem.

Oblikovanje postavitve

Torej, po analizi statistike, lahko sklepamo, da ima optimalna širina spletnega mesta štiri različice:

Različica za prenosnike s širino 1366 slikovnih pik.

Različica Full HD.

Velikost postavitve 800 slikovnih pik, ki se prikaže na malih namiznih monitorjih.

Mobilna različica spletnega mesta je široka 360 slikovnih pik.

Recimo, da smo določili, kateri je treba uporabiti velikost ustvarjenega vira za spletno mesto. Toda tak projekt bo še vedno drag. Oglejmo si druge možnosti, tokrat brez fiksne širine.

Izdelujemo fleksibilno postavitev

Obstaja alternativni pristop, ko je prilagajanje samo pod minimalno velikostjo zaslona, ​​velikost strani pa bo vprašana kot odstotek. Hkrati se lahko takšni elementi vmesnika, menija, gumbov in logotipa nastavijo v absolutnih vrednostih, s poudarkom na najmanjši velikosti zaslona v pikslih. Bloki vsebine, nasprotno, se raztezajo v skladu z določenimi odstotki od širine zaslona. Ta pristop vam omogoča, da prenehate zaznavati velikost območij kot omejitev za oblikovalca in nadarjene, da premaga to nianso.

Kaj je zlati razdelek in kako ga uporabim za postavitev spletne strani?

Tudi v renesansi so mnogi arhitekti in umetniki poskušali svojim delom dati idealno obliko in razmerje. Na vprašanje o pomenu takega deleža so se obrnili na kraljico vseh znanosti - matematiko. Od antike je izumljen delež, ki ga naše oko dojema kot najbolj naravnega in prefinjenega, ker ga najdemo povsod v naravi. Odkritje formule za takšno razmerje je bil nadarjeni francoski arhitekt po imenu Fidium. Izračunal je, da če je večji delež manj pomemben od celotne velja za večje, potem bo ta delež videti najboljši. To pa velja, če želite objekt asimetrično razdeliti. Ta delež je pozneje postal znan kot "zlati odsek, ki še vedno ne precenjuje njegovega pomena za svetovno kulturno zgodovino."

Vrnitev na spletno oblikovanje

Vse je zelo preprosto - z uporabozlati del, lahko oblikovate strani, ki bodo čim bolj prijetne za človeško oko. Če izračunamo formulo zlatega razdelka, dobimo iracionalno številko 16180339887, vendar za lažjo uporabo lahko uporabimo zaokroženo vrednost 162. To pomeni, da morajo biti bloki naše strani 62% in 38% celote, ne glede na velikost ustvarjenega vira za spletno mesto uporabljate Primer je prikazan v naslednji shemi:

Uporaba novih tehnologij

Sodobne tehnologije spletnega oblikovanja vam omogočajo natančno posredovanje oblikovalčevega in oblikovalskega oblikovanja, tako da si lahko zdaj privoščite bolj drzne zamisli kot na začetku internetnih tehnologij. Nič več ne traja veliko, da bi zlomili glavo nad velikostjo mesta. S prihodom stvari, kot so blok adaptivne postavitve, dinamične vsebine prenosa in pisave, je razvoj spletne strani postal bolj prijeten čas. Navsezadnje imajo take tehnologije manj omejitev, čeprav še vedno obstajajo. Ampak kot veste, ne bi bilo nobenih omejitev glede umetnosti. Predlagamo, da uporabite en resnično ustvarjalni pristop k oblikovanju - zlati del. S svojo pomočjo lahko učinkovito in lepo izpolnite delovni prostor, katere velikosti strani niste vnesli v svoje predloge.

Kako povečati delovni prostor spletnega mesta

Zelo verjetno ne boste imeli dovolj prostora za namestitev vseh elementov vmesnika v majhni postavitvi. V tem primeru morate začeti razmišljati ustvarjalno ali celo bolj ustvarjalno kot prejtega. Prostor na spletnem mestu lahko sprostite tako, da skrijete navigacijo v pojavnem meniju. Ta pristop je logičen za uporabo ne le na mobilnih napravah, ampak tudi na namiznih računalnikih. Konec koncev, uporabniku ni treba vedno gledati, katere odseke na vašem spletnem mestu je prišel za vsebino. In željo uporabnika je treba spoštovati. Primer dobrega načina skrivanja menija je naslednja postavitev (slika spodaj). V zgornjem kotu rdečega območja lahko vidite križ, na katerem kliknete meni v majhni ikoni, tako da uporabnik sam z vsebino spletnega mesta. Če tega ne storite, lahko pustite navigacijo, ki bo vedno na vidiku. Vendar pa lahko naredite lep element oblikovanja, ne le seznam priljubljenih povezav na spletnem mestu. Uporabite intuitivne ikone poleg ali celo namesto besedilnih povezav. Prav tako bo vašemu spletnemu mestu omogočilo, da učinkoviteje uporabi prostor zaslona na uporabniški napravi.

Najboljša spletna stran - Prilagodljiva

Če ne veste, katera postavitev spletnega mesta je za vas preprosta. Če želite prihraniti stroške razvoja, ne da bi izgubili občinstvo zaradi slabe postavitve naprave, uporabite prilagodljivo zasnovo. Prilagodljiv je dizajn, ki enako dobro izgleda na različnih napravah. Ta pristop bo omogočil, da bo vaše spletno mesto jasno in udobno tudi na prenosnem računalniku, čeprav na tabličnem računalniku, tudi na pametnem telefonu. Ta učinek se doseže s samodejnim spreminjanjem širine delovnega prostorana zaslonu. Z uporabo prilagodljivih slogov strani sprejemate pravilno rešitev od možnega.