Standard mõõtmed saidid: funktsioone, nõuded ja soovitused

Tehnoloogia areng veebilehed - väga mitmetahuline protsess. Kuid kogu selle etapid võib jagada kahte põhikomponenti - funktsionaalne ja väliskesta. Või nagu keskpikas webmaster algaja End ja Front End vastavalt. Inimesed, kes on ostnud oma veebilehtedel veebi arengut stuudiod, sageli naiivselt usuvad, et on vaja keskenduda ainult funktsionaalne, ja see on õige otsus. Aga see on tõsi väga, väga harva, tavaliselt vastloodud projektide etapil beeta testimise. Ülejäänud graafilise disaini ja kasutajaliidese lihtsalt kohustatud järgima veebiarendust standardite ja mugav.

Esimene nurgakivi ees disaineri või disainer - on laius saidi kujundus. Lõppude lõpuks, on vaja teha liidesed teda. Intuitiivselt on kaks lähenemisviisi - kas teha eraldi paigutusega iga populaarne ekraani eraldusvõime või saate luua ühe versiooni saidi kõigi kaarte. Mõlemad võimalused oleks vale, kuid esimesed asjad kõigepealt.

Standard laius pikslites saidi saate kunagi vaja

Enne arengu adaptiivne paigutus massiliseks on areng saidi tuhandeid pikslit lai. See arv valiti ühel lihtsal põhjusel - et sait pandi igal ekraanil. Ja seal on teatud loogika, kuid oletame, et inimene on ikka vähemalt HD-monitor töölaual. Sel juhul teie paigutus tundub tilluke riba ekraani keskel, kus kõik on vormitud ühes pakk, ja külgedele tohutu mitte-ruumi. Nüüd oletame, et inimene tuli oma veebisaidi tahvelarvutit ekraani 800 pikslit laius ja kontrollitakse seadete "Näita veebisaiti täisversiooni." Sel juhul oma veebilehel kuvatakse ka valesti, kui lihtsalt ei sobi ekraanile.

Nendest kaalutlustest, võime järeldada, et fikseeritud laiusega paigutuses, me lihtsalt ei sobi ja soovid leida muul viisil. Olgem analüüsida ideed eraldi paigutus iga ekraani laiuse.

Layouts kõik korda

Kui olete valinud strateegia, et luua paigutusega kõik ekraani suurused saadaval turul, siis saidi kõige ainulaadne Internet. Lõppude lõpuks, täna on see lihtsalt võimatu katta terve hulk seadmeid, püüdes teha peensätte iga valik. Aga kui teil keskenduda kõige populaarsem kuvari resolutsiooni ja ekraani seadmeid, idee on hea. Tema ainus puudus - rahalised kulud. Lõppude lõpuks, kui disainer disaineri ja foto on sunnitud 5 või 6 korda teha sama tööd, projekti maksab ebaproportsionaalselt algselt istutatud eelarve hinnaga.

Seetõttu kiidelda hulgaliselt versioone eri ekraanid võivad olla välja arvatud, et saite-odnostranichniki kelle eesmärk - müüa ühte toodet ja kindlasti teha seda hästi. Noh, kui sa ei ole üks neist Landing, multi-sait, siis loogiline veelgi.

Kõige populaarsem suurused saite

Kompromiss kahe äärmuse on joonistatud paigutus kolm või neli ekraani suurust. Neist üks peab olema paigutus mobiilseadmetes. Ülejäänud tuleb kohandada väikeste, keskmiste ja suurte töölaud. Kuidas valida laius leheküljel? Allpool tutvustame HotLog teenust statistika mai 2017, mis näitab meile, jaotamise populaarsust erinevate ekraani resolutsioon seade, samuti muutuste dünaamikat see näitaja.

Tabelist on võimalik õppida, kuidas määrata suurust ala, mida soovite kasutada. Lisaks võib järeldada, et kõige sagedamini täna on ekraani formaadi 1366 768 pikslit. Need ekraanid on paigaldatud eelarve sülearvuti, et nende populaarsus on loomulik. Järgmine kõige populaarsem on Full HD-monitor, mis on kulla standard filme, mänge ja seega luua saidi paigutusega. Edasine tabelis näeme lubada mobiilseadmeid 360 x 640 pikslit, samuti erinevate teostuste laua- ja mobiilse ekraanid hiljem.

disain kujundus

Niisiis, pärast analüüsides statistikat, võime järeldada, et optimaalne laius saidil on 4 variatsioone:

1. Versioon sülearvutid 1366 pikslit lai.
2. Full HD-versioon.
3. 800 pikslit laius suurus paigutus ekraanil väikeste kuvaritel.
4. Mobiilne versioon saidile - 360 pikslit lai.

Oletame, et meil otsustanud, mida soovite kasutada suuruse loodud lähtekoodi saidi. Aga selline projekt ikkagi kulukas. Nii leiavad rohkem võimalusi, seekord ilma kasutamise fikseeritud laiusega.

Tee paindlik kujundus

On alternatiivset lähenemist, et peame ainult kohandada minimaalse suuruse ekraani ja ulatuslikkus saite palutakse protsenti. Sel juhul liidese elemendid nagu menüüd, nupud ja logod, saab määratleda absoluutarvudes, keskendudes minimaalne suurus ekraani laiuse pikslites. Blocks sisuga, vastupidi, on venitatud vastavalt määratud protsenti ekraani laiuse ala. Selline lähenemine võimaldab suuda tuvastada suurus saidi konstruktori jaoks ja talent võita seda nüanssi.

Mis on kuldne suhe ja kuidas kasutada veebilehti paigutus?

Isegi Renaissance paljud arhitektid ja kunstnikud püüdnud anda oma loomingut täiuslik kuju ja osakaal. Vastuseid küsimustele mõju sellistes proportsioonides, pöördusid nad kuninganna kõik teadused - matemaatika.

Alates päeva antiikajast leiutas osa, mis meie silma tajub kõige loomulikum ja elegantne, sest see on looduses kõikjal. Avastaja valemiga käesoleva suhe oli andekas Kreeka arhitekt nimega Phidias. On välja arvutatud, et kui enamik proportsioone seotud madala tervikuna annab suurem, siis see osa näeb hästi. Aga sel juhul, kui soovite jagada asümmeetriliselt objekti. See osa hiljem nimeks sai kuldne suhe, et ikka ei ülehinnata selle tähtsust maailmas kultuuriloost.

Lähme tagasi veebidisain

See on väga lihtne - kasutades kuldne suhe, saate kujundada lehti, mis on kõige meeldiv inimese silma. Arvutatakse vastavalt valemile kuldne osa, leiame irratsionaalne number 1,6180339887 ..., kuid mugavuse saate ümardatud väärtus 1,62. See tähendab, et meie leht plokid peaks olema 62% ja 38% kogu, ükskõik mis suurus loodud lähtekoodi saidi te kasutate. Näide näed järgmise skeemi:

Uute tehnoloogiate kasutamine

Kaasaegne tehnoloogia paigutus veebilehti lubavad teil täpselt edastama ideid disainer ja disainer, nii et nüüd te ei saa endale lubada rakendamise julgem ideid kui koidikul Interneti tehnoloogial. Ei pea enam palju puzzle üle, milline peaks olema suurus kohas. Tekkega selliseid asju nagu plokk adaptiivne paigutus, dünaamiline laadimine sisu ja fonte, veebilehe arendamine on muutunud mitu korda rohkem nauditav. Lõppude lõpuks, need tehnoloogiad on vähem piiranguid, kuigi nad on. Aga nagu te teate, ilma piiranguteta, ei oleks kunsti. Soovitame kasutada tõeliselt loominguline lähenemine projekteerimine - kuldne lõik. Mis siis, siis oleks võimalik tõhusalt ja kenasti täita tööruumi, ükskõik mis suurus või saite palus oma malle.

Kuidas suurendada tööruumi sait

Võimalik, et sa ei ole piisavalt ruumi, et mahutada kõik liidese elementide paigutus väiksus. Sel juhul pead hakkama mõtlema loovalt, või isegi rohkem loominguline, kui sa tegid enne.

Suurim tasuta ruumi kohapeal kui võimalik, varjates navigatsiooni pop-up menüüst. Selline lähenemine on loogiline kasutada mitte ainult mobiiltelefoni, vaid ka töölaual. Lõppude lõpuks, kasutaja ei pea kogu aeg vaadata, mida on rubriikide saidil - see on tulnud sisu. Kasutaja soovib kinni pidada.

Näitena hea võimalus peita menüü on järgmine skeem (pildil allpool).

Ülemises nurgas punane ala, näed rist, klõpsa menüü, mis peidab väike ikoon, jättes kasutaja üksi veebilehe sisu.

Kuid see ei ole kohustuslik, võid jätta navigation, mis on alati silmapiiril. Aga sa võid teha seda kauni disaini element, mitte ainult nimekirja lingid populaarne. Kasutage intuitiivne ikoonid lisaks teksti lingid või isegi asendada. Samuti võimaldab saidi tõhusamalt kasutada ekraani seadmes ruumi.

Best Website - adaptiivne

Kui sa ei tea, millist valida paigutus sait, kõik just teie jaoks. Et säästa arenduskulude ja samal ajal ei kaota publiku kehva paigutus mingi seadeldis, kasutada tundlik web design.

Adaptive nimetatakse disain, mis näeb välja erinevates seadmetes võrdselt hästi. Selline lähenemine võimaldab saidi olema selge ja lihtne isegi sülearvuti, vähemalt tahvelarvuti isegi nutitelefoni. See saavutatakse see efekt on tingitud automaatsed muudatused tööpiirkonna ekraani laiuse. Kasutades adaptiivne laadilehti saidi te võtate õige otsuse võimalik.

Mis eristab kohandamisvõi- kättesaadavuse eri versioone oma kodulehel

Tundlik disain erineb saidi mobiil, nii et viimasel juhul, kasutaja saab html-koodi, mis erineb töölauale. See on puudust seisukohast optimeerides server, samuti otsingumootori optimeerimine. Lisaks seda raskem kaaluda statistika kohaselt erinevaid versioone kohas. Adaptiivne lähenemisviisi puudub puudusi.

Kohanemisvõime erinevate seadmete saavutatakse paigutuse tõttu laius või Protsendid kaudu transpordi plokid ruumi (vertikaaltasandil asemel horisontaalne nutitelefoni lauaarvuti) või üksikute paigutusega luues erinevaid ekraane.

Saate rohkem teada kujundusega ja arendada saate raamatutest.