Standardne velikosti strani: funkcije, zahteve in priporočila

Tehnologija razvoja spletnega mesta

Prvi temelj, s katerim se sooča oblikovalec vmesnika ali oblikovalec, je širina postavitve spletnega mesta. Navsezadnje je treba za to izdelati vmesnike. Prepričljivo intuitivno obstajata dva pristopa - bodisi ločena postavitev za vsako priljubljeno ločljivost zaslona ali ustvarjanje ene različice mesta za vse preslikave. In obe možnosti bodo nepravilni, ampak o vsem, kar je v redu.

Standardna širina mesta v slikovnih pikah za RuNet

Pred razvojem prilagodljiva postavitev ogromen pojav je bil razvoj mesta s širino tisoč pik. Ta številka je bila izbrana iz enega preprostega razloga - da se mesto prilega kateremu koli zaslonu. In to ima svojo lastno logiko, a domnevamo, da ima oseba š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 skupaj v eni kopiči, na straneh pa je velik nezaseden prostor. Zdaj pa predpostavimo, da je oseba prišla na vašo spletno stran iz tabličnega računalnika s širokim zaslonom 800 pik, v nastavitvah pa označite »Pokaži polno različico spletnega mesta«. V tem primeru bo vaša stran prikazana nepravilno, ker se preprosto ne prilega zaslonu.

Iz teh razlogov lahko sklepamo, da fiksna širina za postavitev nas ne ustreza ravno tako, zato moramo iskati drug način. Analiziramo zamisel o ločeni postavitvi za vsako širino zaslona.

Postavitve za vse priložnosti

Če ste se odločili za strategijo ustvarjanja postavitev za vse velikosti zaslona, ​​prisotne na trgu, bo vaše spletno mesto postalo najbolj edinstveno na celotnem spletu. Navsezadnje je preprosto nemogoče pokriti celotno paleto naprav danes, poskušati natančno prilagoditi vsako možnost. Če pa se osredotočite na najbolj priljubljene resolucije monitorjev in zaslona naprav, potem ideja ni slaba. Edini minus je finančni strošek. Navsezadnje, ko so oblikovalci vmesnikov, oblikovalci in oblikovalci oblačil prisiljeni opravljati enako delo 5 ali 6-krat, bo projekt nezdruľljivo presegel ceno, ki je bila prvotno določena v proračunu.

Zato se ponaša z obilico različic za različne zaslone, razen tistih spletnih strani z enim stranem, katerih namen je prodati en izdelek in nujno dobro. No, če nimate enega od teh iztovarjanj in strani z več strani, potem je vredno razpravljati še naprej.

Najbolj priljubljene velikosti spletnega mesta

Kompromis med obema skrajnostima je risba za tri ali štiri velikosti zaslonov. Med njimi moramo biti mockup za mobilne naprave. Ostalo je treba prilagoditi za majhen, srednji in veliki namizni zaslon. Kako izbrati širino spletnega mesta? Spodaj je statistika storitve HotLog za maj 2017, ki nam pokaže razdelitev priljubljenosti različnih resolucij zaslona naprave, kot tudi dinamiko spremembe tega kazalnika.

V tabeli se lahko naučite, kako določiti velikost spletnega mesta, ki ga želite uporabiti. Poleg tega lahko sklepamo, da je danes najpogostejša oblika zaslona 1366 pri 768 točkah. Taki zasloni so nameščeni v proračunu prenosnih računalnikov, zato je njihova priljubljenost naravna. Naslednji najbolj priljubljen je Full HD monitor, ki je zlati standard za video posnetke, igre in s tem za izdelavo postavitev spletnih mest. Nadalje v tabeli vidimo ločljivost mobilnih naprav 360 s 640 točkami, kot tudi različne možnosti za namizne in mobilne zaslone po njej.

Oblikovanje postavitve

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

1. Različica za prenosnike s širino 1366 slikovnih pik.
2. Polna različica HD.
3. Razporeditev velikosti 800 pik za prikaz na majhnih namiznih monitorjih.
4. Mobilna različica spletnega mesta je širina 360 slikovnih pik.

Recimo, da smo se odločili, kako uporabiti velikost ustvarjenega vira za spletno mesto. Toda takšen projekt bo še vedno draga. Zato razmislimo o več možnostih, tokrat brez uporabe fiksne širine.

Izdelava prilagodljive postavitve

Obstaja alternativni pristop, ko ga je treba prilagoditi samo za najmanjšo velikost zaslona, ​​velikost mest pa bo določena za odstotke. V tem primeru so lahko takšni elementi vmesnika, kot so meniji, gumbi in logotipi, nastavljeni v absolutnih vrednostih, s poudarkom na najmanjši velikosti širine zaslona v slikovnih pikah. Nasprotno pa bodo bloki z vsebino raztegnjeni glede na določene odstotke širine območja zaslona. Ta pristop vam omogoča, da nehate zaznavati velikost spletnih strani kot omejitev za oblikovalca in nadarjene, da premagate ta odtenek.

Kakšno je zlato razmerje in kako ga uporabiti za postavitev spletnih strani?

Tudi v renesansi so številni arhitekti in umetniki poskušali ustvariti idealno obliko in sorazmernost. Ko so odgovorili na vprašanja o pomenu tega deleža, so se obrnili na kraljico vseh znanosti - matematike.

Od časa antike je izumil del, ki ga naše oko zaznava kot najbolj naravno in elegantno, saj je v splošnem v naravi. Raziskovalec formule takega razmerja je bil nadarjeni antični grški arhitekt Phidias. Izračunal je, da če se večji del deleža nanaša na manj, saj se celotno nanaša na večje, potem bo ta delež najbolje videti. Ampak to je slučaj, če želite predmet razdvojiti asimetrično. Ta delež je bil kasneje imenovan zlati del, ki še vedno ne precenjuje njenega pomena za svetovno zgodovino kulture.

Nazaj na spletno oblikovanje

Zelo preprosto - z zlatim odsekom lahko oblikujete strani, ki bodo čim bolj prijazne za človeško oko. Izračuna se po definiciji formule zlatega odseka, dobimo iracionalno številko 1.6180339887 ..., vendar lahko za udobje uporabimo zaokroženo vrednost 1.62. To pomeni, da morajo biti bloki naše strani 62% in 38% celotne, ne glede na velikost izvorne kode za spletno mesto, ki ga uporabljate. Primer, ki ga vidite na tej shemi:

Uporabite nove tehnologije

Sodobna tehnologija spletnega oblikovanja vam omogoča, da natančno predstavite idejo oblikovalca in oblikovalca, zato si zdaj lahko privoščite izvajanje bolj drznih idej kot na začetku internetnih tehnologij. Ni več potrebno resno uganiti, kakšna velikost naj bi bila lokacija. S prihodom takšnih stvari, kot so blok adaptivna postavitev, dinamično nalaganje vsebin in pisav, je razvoj mesta postal veliko več prijetnejši. Navsezadnje imajo takšne tehnologije manj omejitev, čeprav so. Ampak, kot veste, brez omejitev ne bi bilo umetnosti. Predlagamo, da uporabite en kreativen pristop k oblikovanju - zlati del. Z njim lahko učinkovito in lepo napolnite delovni prostor, ne glede na to, kakšne velikosti strani določite v svojih predlogah.

Kako povečati delovni prostor spletnega mesta

Obstaja velika verjetnost, da ne boste imeli dovolj prostora za prileganje vseh vmesnih elementov v majhno velikostno postavitev. V tem primeru morate začeti razmišljati ustvarjalno ali še bolj kreativno kot prej.

Povečajte prostor na spletnem mestu, tako da skrijete navigacijo v pojavnem meniju. Ta pristop je logično uporabljati ne le za mobilne naprave, temveč tudi za namizne računalnike. Navsezadnje uporabniku ni treba vedno gledati, katere kategorije so na vašem spletnem mestu - prišel je do vsebine. In želje 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žec, s klikom na katerega se bo skril meni v majhni ikoni, tako da bo uporabnik sam z vsebino spletnega mesta.

Vendar to ni potrebno, lahko pustite navigacijo, ki bo vedno vidna. Vendar lahko naredite lep dizajn in ne le seznam priljubljenih povezav na spletnem mestu. Poleg besedilnih povezav ali celo namesto njih uporabite intuitivne ikone. S tem bo vaše spletno mesto tudi učinkoviteje uporabilo zaslonski prostor na uporabniški napravi.

Najboljša spletna stran - prilagodljiva

Če ne veste, katero postavitev želite izbrati za spletno mesto, potem vam je vse enostavno. Če želite prihraniti pri stroških razvoja in še ne izgubite občinstva zaradi slabe postavitve za napravo, uporabite adaptivni dizajn.

Adaptive se imenuje dizajn, ki enakomerno gleda na različne naprave. Ta pristop bo vaše spletno mesto lahko razumljivo in priročno tudi na prenosnem računalniku, vsaj v tabličnem računalniku, tudi na pametnem telefonu. Ta učinek je dosežen zaradi samodejnih sprememb širine delovnega območja zaslona. Če uporabljate prilagodljive liste slogov za spletno mesto, naredite najbolj točno odločitev.

Kakšna je razlika med prilagodljivim oblikovanjem in razpoložljivostjo različnih različic spletnega mesta

Adaptivna oblika se razlikuje od mobilne različice spletnega mesta, v tem primeru uporabnik dobi html kodo, ki se razlikuje od namizne različice. To je pomanjkljivost glede optimizacije zmogljivosti strežnika in optimizacije iskalnika. Poleg tega je težje šteti statistične podatke o različnih različicah spletnega mesta. Adaptivni pristop je brez teh pomanjkljivosti.

Prilagodljivost za različne naprave se doseže zaradi širine postavitve ali odstotkih preko transportnih blokov v razpoložljivi prostor (v vertikalni ravnini namesto vodoravne pametni na namizju), bodisi posamezni postavitve z ustvarjanjem različnih zaslonih.

Več informacij o adaptivni zasnovi in ​​njegovem razvoju lahko pridobite iz učbenikov.