Veebisaitide arendamise tehnoloogia on väga mitmetahuline protsess. Kuid siiski saab kõik selle etapid jagada kaheks põhikomponendiks - funktsionaalseks ja väliskestaks. Või nagu veebihalduritel kombeks, vastav alt taga- ja esiotsa. Inimesed, kes tellivad oma kodulehti veebiarendusstuudiotest, usuvad sageli naiivselt, et tasub keskenduda ainult funktsionaalsusele ja see on õige otsus. Kuid see kehtib väga-väga harvadel juhtudel, tavaliselt beetatestimise etapis käivitusprojektide puhul. Vastasel juhul peavad graafiline disain ja kasutajaliides lihts alt vastama veebiarendusstandarditele ja olema mugavad.
Esimene nurgakivi, millega liidese kujundaja või kujundaja silmitsi seisab, on saidi paigutuse laius. Lõppude lõpuks on selleks vaja liideseid joonistada. Puht alt intuitiivselt tekib kaks lähenemisviisi – kas teha iga populaarse ekraani eraldusvõime jaoks eraldi paigutus või luua saidi üks versioon kõigi kuvarite jaoks. Ja mõlemad valikud on valed, kuid kõigepe alt asjad kõigepe alt.
Veebisaidi standardlaius pikslitesRuneti jaoks
Enne adaptiivse paigutuse väljatöötamist oli tuhande piksli laiuse saidi arendamine massiline nähtus. See kujund valiti ühel lihtsal põhjusel – et sait sobiks igale ekraanile. Ja sellel on oma loogika, aga oletame, et inimesel on töölaual siiski vähem alt HD monitor. Sel juhul tundub teie paigutus ekraani keskel pisikese ribana, kus kõik on ühte hunnikusse kokku kleebitud ja külgedel on tohutu kasutamata ruum. Oletame nüüd, et inimene siseneb teie veebisaidile 800px laiekraaniga tahvelarvutis ja seadetes on märgitud "Kuva kogu veebisait". Sel juhul kuvatakse ka teie saiti valesti, kuna see lihts alt ei mahu ekraanile.
Nende kaalutluste põhjal võime järeldada, et paigutuse fikseeritud laius meile kindlasti ei sobi ja me peame otsima teist võimalust. Analüüsime iga ekraanilaiuse jaoks eraldi paigutuse ideed.
Paigutusi igaks juhuks
Kui olete valinud strateegiana kõigi turul pakutavate ekraanisuuruste paigutuste loomise, on teie sait kogu Internetis kõige ainulaadsem. Lõppude lõpuks on tänapäeval lihts alt võimatu katta kogu seadmete valikut, püüdes iga valiku jaoks täpselt häälestada. Kui aga keskenduda kõige populaarsematele monitoride ja seadmete ekraanide eraldusvõimetele, siis pole idee paha. Selle ainus puudus on rahalised kulud. Lõppude lõpuks, kui liidese kujundaja, disainer ja kodeerija on sunnitud tegema sama tööd 5 või 6 korda, läheb projekt maksmaebaproportsionaalselt kõrgem kui algselt eelarvestatud hind.
Seetõttu saavad vaid üheleheküljelised saidid uhkustada erinevate ekraanide versioonide rohkusega, mille eesmärk on müüa ühte toodet ja teha seda kindlasti hästi. Noh, kui teil pole ühtki neist maandumistest, vaid mitmeleheline sait, siis peaksite edasi mõtlema.
Populaarseimad saidisuurused
Kompromiss kahe äärmuse vahel on paigutuse renderdamine kolme või nelja ekraanisuuruse jaoks. Nende hulgas peab olema mobiilseadmete paigutus. Ülejäänud tuleks kohandada väikeste, keskmiste ja suurte töölauaekraanide jaoks. Kuidas valida saidi laiust? Allpool tutvustame HotLog teenuse statistikat 2017. aasta mai kohta, mis näitab meile erinevate seadmete ekraanieraldusvõimete populaarsuse jaotust ning ka selle indikaatori dünaamikat.
Tabelist saate teada, kuidas määrata kasutatava saidi suurust. Lisaks võime järeldada, et tänapäeval on kõige levinum ekraan eraldusvõimega 1366 x 768 pikslit. Sellised ekraanid on paigaldatud eelarvega sülearvutitesse, seega on nende populaarsus loomulik. Populaarsuselt järgmine on Full HD monitor, mis on videote, mängude ja seega ka veebilehe paigutuste loomise kuldstandard. Edasi tabelis näeme mobiilseadmete eraldusvõimet 360 x 640 pikslit, samuti erinevaid võimalusi laua- ja mobiiliekraanide jaoks.
Paigutuse kujundamine
NiiPärast statistika analüüsimist võime järeldada, et saidi optimaalsel laiusel on 4 variatsiooni:
- 1366 piksli laiusega sülearvuti versioon.
- Täis-HD versioon.
- 800 piksli lai paigutus väikestel lauaarvutite monitoridel kuvamiseks.
- Saidi mobiiliversioon – 360 pikslit lai.
Oletame, et oleme otsustanud, millist suurust saidi loodud allika jaoks kasutada. Kuid selline projekt läheks ikkagi kulukaks. Nii et vaatame rohkem võimalusi, seekord ilma kindlat laiust kasutamata.
Paigutuse muutmine paindlikuks
On alternatiivne lähenemine, kui tasub kohaneda ainult minimaalse ekraanisuurusega ja saidi suurused ise määratakse protsentides. Samal ajal saab selliseid liidese elemente nagu menüüd, nupud ja logo määrata absoluutväärtustes, keskendudes ekraani laiuse minimaalsele suurusele pikslites. Sisuga plokid, vastupidi, venitatakse vastav alt ekraaniala laiuse määratud protsendile. See lähenemisviis võimaldab teil lõpetada saitide suuruse tajumise disaineri jaoks piiranguna ja selle nüansi oskuslikult ületada.
Mis on kuldlõige ja kuidas seda veebilehe paigutusele rakendada?
Isegi renessansiajal püüdsid paljud arhitektid ja kunstnikud anda oma loomingule täiusliku kuju ja proportsiooni. Vastuste saamiseks küsimustele sellise proportsiooni väärtuste kohta pöördusid nad kõigi teaduste kuninganna - matemaatika - poole.
Iidsetest aegadest peale on leiutatud proportsioon, mida meie silm tajub kõige loomulikuma ja elegantseima,sest see on looduses üldlevinud. Sellise suhte valemi avastajaks oli andekas Vana-Kreeka arhitekt nimega Phidias. Ta arvutas välja, et kui suurem osa proportsioonist on seotud väiksemaga, kuna tervik on seotud suuremaga, siis näeb selline proportsioon kõige paremini välja. Kuid see on nii, kui soovite objekti asümmeetriliselt jagada. Seda osakaalu hakati hiljem nimetama kuldlõikeks, mis ei hinda siiani üle selle tähtsust maailma kultuuriloo jaoks.
Tagasi veebikujunduse juurde
See on väga lihtne – kasutades kuldset lõiget, saate kujundada lehti, mis on inimsilmale võimalikult meeldivad. Kuldse lõike valemi definitsiooni järgi arvutades saame irratsionaalse arvu 1, 6180339887 …, kuid mugavuse huvides võime kasutada ümardatud väärtust 1, 62. See tähendab, et meie lehe plokid peaksid olema 62 % ja 38% tervikust, olenemata kasutatava saidi loodud allika suurusest. Sellel diagrammil näete näidet:
Kasutage uusi tehnoloogiaid
Kaasaegsed veebisaitide paigutustehnoloogiad võimaldavad täpselt edasi anda planeerija ja kujundaja ideed, nii et nüüd saate endale lubada julgemate ideede elluviimist kui Interneti-tehnoloogiate koidikul. Te ei pea enam tõsiselt mõtlema, milline peaks olema saidi suurus. Selliste asjade nagu plokkide adaptiivne paigutus, sisu ja fontide dünaamiline laadimine, tulekuga on veebisaitide arendamine muutunud palju meeldivamaks. Lõppude lõpuks on need tehnoloogiadvähem piiranguid, kuigi need on endiselt alles. Kuid nagu teate, poleks piiranguteta kunsti. Soovitame teil kasutada üht tõeliselt loomingulist disainilähenemist – kuldset suhet. Sellega saate tööruumi tõhus alt ja kaunilt täita, olenemata sellest, mis saidi suuruse mallides määrate.
Kuidas suurendada saidi tööruumi
On suur võimalus, et teil ei ole piisav alt ruumi, et mahutada kõik kasutajaliidese elemendid väikesele paigutusele. Sel juhul peate hakkama mõtlema loov alt või isegi loovam alt kui varem.
Vabasta saidil maksimaalselt ruumi, peites hüpikmenüüs navigeerimise. Seda lähenemist on loogiline kasutada mitte ainult mobiilseadmetes, vaid ka lauaarvutites. Lõppude lõpuks ei pea kasutaja kogu aeg vaatama, millised pealkirjad teie saidil on – ta tuli sisu järele. Ja kasutaja soove tuleb austada.
Näide heast viisist menüü peitmiseks on järgmine paigutus (foto allpool).
Punase ala ülemises nurgas on rist, millel klõpsates peidetakse menüü väikeseks ikooniks, jättes kasutaja veebisaidi sisuga rahule.
Kuid see on valikuline, võite navigeerimisest lahkuda, mis jääb alati silma. Kuid saate teha sellest ilusa kujunduselemendi, mitte ainult saidi populaarsete linkide loendi. Kasutage intuitiivseid ikoone lisaks tekstilinkidele või isegi nende asemel. see on samavõimaldab teie saidil kasutaja seadme ekraaniruumi tõhusam alt kasutada.
Parim veebisait on tundlik
Kui te ei tea, millist paigutust saidi jaoks valida, on kõik teie jaoks lihtne. Et säästa arenduskulusid ja samal ajal mitte kaotada oma vaatajaskonda mõne seadme kehva paigutuse tõttu, kasutage tundlikku disaini.
Reagatiivne disain on disain, mis näeb erinevates seadmetes ühtviisi hea välja. See lähenemisviis võimaldab teie saidil olla arusaadav ja mugav isegi sülearvutis, isegi tahvelarvutis, isegi nutitelefonis. See efekt saavutatakse ekraani tööala laiuse automaatse muutmisega. Kui kasutate oma saidil kohanduvaid stiililehti, teete parima võimaliku otsuse.
Mis vahe on tundliku disaini ja veebisaidi versioonide vahel
Reagatiivne disain erineb saidi mobiiliversioonist selle poolest, et viimasel juhul saab kasutaja html-koodi, mis erineb töölaua koodist. See on puuduseks nii serveri jõudluse optimeerimise kui ka otsingumootori optimeerimise seisukoh alt. Lisaks muutub saidi erinevate versioonide statistika arvutamine keerulisemaks. Kohaneval lähenemisel neid puudusi pole.
Erinevate seadmete reageerimisvõime saavutatakse paigutuse abil, mille laiuse protsent on määratud, või plokkide ülekandmisega vabasse ruumi (nutitelefoni vertika altasapinnalhorisontaalselt töölaual) või luua erinevatele ekraanidele individuaalseid paigutusi.
Lisateavet tundliku disaini ja arenduse kohta leiate meie õpetustest.
