Teknologjia e zhvillimit të faqeve të internetit është një proces shumë i shumëanshëm. Por megjithatë, të gjitha fazat e tij mund të ndahen në dy komponentë kryesorë - guaskën funksionale dhe atë të jashtme. Ose, siç është zakon në mesin e webmasterëve, përkatësisht back-end dhe front-end. Njerëzit që porosisin faqet e tyre të internetit nga studiot e zhvillimit të uebit shpesh besojnë me naivitet se ia vlen të fokusohemi vetëm te funksionaliteti dhe ky do të jetë vendimi i duhur. Por kjo është e vërtetë në raste shumë, shumë të rralla, zakonisht për projektet fillestare në fazën e testimit beta. Përndryshe, dizajni grafik dhe ndërfaqja e përdoruesit janë thjesht të nevojshme që të jenë në përputhje me standardet e zhvillimit të uebit dhe të jenë të përshtatshme.
Guri i parë themelor me të cilin përballet projektuesi ose projektuesi i ndërfaqes është gjerësia e paraqitjes së faqes. Në fund të fundit, për të është e nevojshme të vizatoni ndërfaqe. Thjesht intuitivisht, lindin dy qasje - ose bëni paraqitje të veçanta për çdo rezolutë të njohur të ekranit, ose krijoni një version të faqes për të gjitha ekranet. Dhe të dyja opsionet do të jenë të gabuara, por gjërat e para së pari.
Gjerësia standarde e uebsajtit në pikselpër Runet
Përpara zhvillimit të paraqitjes adaptive, zhvillimi i një siti me gjerësi prej njëmijë pikselësh ishte një fenomen masiv. Kjo shifër u zgjodh për një arsye të thjeshtë - në mënyrë që faqja të përshtatet në çdo ekran. Dhe kjo ka logjikën e vet, por le të supozojmë se një person ka ende të paktën një monitor HD në një desktop. Në këtë rast, faqosja juaj do të duket si një shirit i vogël në mes të ekranit, ku gjithçka është ngjitur së bashku në një grumbull, dhe në anët ka një hapësirë të madhe të papërdorur. Tani le të supozojmë se një person hyn në faqen tuaj të internetit në një tabletë me një ekran të gjerë 800 px dhe "Trego faqen e plotë të faqes në internet" është kontrolluar në cilësimet. Në këtë rast, faqja juaj do të shfaqet gjithashtu gabimisht, pasi thjesht nuk do të futet në ekran.
Nga këto konsiderata, mund të konkludojmë se një gjerësi fikse për paraqitjen definitivisht nuk është e përshtatshme për ne dhe duhet të kërkojmë një mënyrë tjetër. Le të analizojmë idenë e një paraqitjeje të veçantë për çdo gjerësi ekrani.
Strukturat për të gjitha rastet
Nëse keni zgjedhur si strategji për të krijuar paraqitje për të gjitha madhësitë e ekranit në treg, atëherë faqja juaj do të jetë më unike në të gjithë internetin. Në fund të fundit, sot është thjesht e pamundur të mbulosh të gjithë gamën e pajisjeve, duke u përpjekur të rregullosh mirë çdo opsion. Por nëse fokusoheni në rezolucionet më të njohura të monitorëve dhe ekraneve të pajisjeve, atëherë ideja nuk është e keqe. Disavantazhi i vetëm i tij janë kostot financiare. Në fund të fundit, kur një projektues i ndërfaqes, një projektues dhe një kodues detyrohen të bëjnë të njëjtën punë 5 ose 6 herë, projekti do të kushtojënë mënyrë disproporcionale më e lartë se çmimi i buxhetuar fillimisht.
Prandaj, vetëm faqet me një faqe mund të mburren me një bollëk versionesh për ekrane të ndryshme, qëllimi i të cilave është të shesësh një produkt dhe sigurohu që ta bësh mirë. Epo, nëse nuk keni një nga këto ulje, por një faqe me shumë faqe, atëherë duhet të mendoni më tej.
Madhësitë më të njohura të sajtit
Një kompromis midis dy ekstremeve po e bën paraqitjen për tre ose katër madhësi ekranesh. Midis tyre, duhet të jetë një plan urbanistik për pajisjet mobile. Pjesa tjetër duhet të përshtatet për ekranet e desktopit të vegjël, të mesëm dhe të mëdhenj. Si të zgjidhni gjerësinë e faqes? Më poshtë po paraqesim statistikat e shërbimit HotLog për muajin maj 2017, e cila na tregon shpërndarjen e popullaritetit të rezolucioneve të ndryshme të ekranit të pajisjes, si dhe dinamikën e këtij treguesi.
Nga tabela mund të mësoni se si të përcaktoni madhësinë e faqes që dëshironi të përdorni. Për më tepër, mund të konkludojmë se formati më i zakonshëm sot është një ekran prej 1366 me 768 piksele. Ekrane të tilla janë instaluar në laptopë buxhetorë, kështu që popullariteti i tyre është i natyrshëm. Më i popullarizuari tjetër është monitori Full HD, i cili është standardi i artë për videot, lojërat dhe për rrjedhojë për krijimin e paraqitjeve të faqeve të internetit. Më tej në tabelë shohim rezolucionin e pajisjeve celulare 360 me 640 piksel, si dhe opsione të ndryshme për ekranet e desktopit dhe celularëve pas saj.
Dizajnimi i paraqitjes
PraPas analizimit të statistikave, mund të konkludojmë se gjerësia optimale e faqes ka 4 variacione:
- Versioni i laptopit me gjerësi 1366px.
- Versioni Full HD.
- Një plan urbanistik i gjerë 800 px për shfaqje në monitorët e vegjël të desktopit.
- Versioni celular i sajtit - 360 piksel i gjerë.
Le të themi se kemi vendosur se çfarë madhësie të përdorim për burimin e krijuar për sitin. Por një projekt i tillë do të ishte ende i kushtueshëm. Pra, le të shohim më shumë opsione, këtë herë pa përdorur një gjerësi fikse.
Bërja fleksibël e paraqitjes
Ekziston një qasje alternative, kur ia vlen të përshtatet vetëm me madhësinë minimale të ekranit, dhe vetë madhësitë e faqeve do të vendosen me përqindje. Në të njëjtën kohë, elementë të tillë të ndërfaqes si menytë, butonat dhe logoja mund të vendosen në vlera absolute, duke u fokusuar në madhësinë minimale të gjerësisë së ekranit në piksel. Blloqet me përmbajtje, përkundrazi, do të shtrihen sipas përqindjes së specifikuar të gjerësisë së zonës së ekranit. Kjo qasje ju lejon të ndaloni së perceptuari madhësinë e faqeve si një kufizim për projektuesin dhe ta mposhtni me mjeshtëri këtë nuancë.
Cili është raporti i artë dhe si mund të zbatohet në paraqitjen e faqes në internet?
Edhe në Rilindje, shumë arkitektë dhe artistë u përpoqën t'u jepnin krijimeve të tyre formën dhe proporcionin perfekt. Për përgjigjet e pyetjeve në lidhje me vlerat e një proporcioni të tillë, ata iu drejtuan mbretëreshës së të gjitha shkencave - matematikës.
Që nga lashtësia, është shpikur një proporcion që syri ynë e percepton si më natyrale dhe elegante,sepse është i kudondodhur në natyrë. Zbuluesi i formulës për një raport të tillë ishte një arkitekt i talentuar i lashtë grek i quajtur Phidias. Ai llogariti se nëse pjesa më e madhe e proporcionit lidhet me atë më të vogël pasi e tëra lidhet me atë më të madhin, atëherë një proporcion i tillë do të duket më i miri. Por ky është rasti nëse dëshironi ta ndani objektin në mënyrë asimetrike. Ky proporcion u quajt më vonë seksioni i artë, i cili ende nuk e mbivlerëson rëndësinë e tij për historinë botërore të kulturës.
Kthehu te dizajni i uebit
Është shumë e thjeshtë - duke përdorur raportin e artë, mund të dizajnoni faqe që do të jenë sa më të këndshme për syrin e njeriut. Duke llogaritur sipas përcaktimit të formulës së raportit të artë, marrim numrin irracional 1, 6180339887 …, por për lehtësi, mund të përdorim një vlerë të rrumbullakosur prej 1, 62. Kjo do të thotë që blloqet e faqes sonë duhet të jenë 62 % dhe 38% të tërësisë, pavarësisht nga madhësia e burimit të krijuar për sitin që po përdorni. Ju mund të shihni një shembull në këtë diagram:
Përdor teknologjitë e reja
Teknologjitë moderne të paraqitjes së faqeve në internet bëjnë të mundur përcjelljen e saktë të idesë së një planifikuesi dhe projektuesi, kështu që tani mund të përballoni të zbatoni ide më të guximshme sesa në agimin e teknologjive të Internetit. Ju nuk keni më nevojë të mendoni shumë se cila duhet të jetë madhësia e faqes. Me ardhjen e gjërave të tilla si faqosja adaptive e bllokut, ngarkimi dinamik i përmbajtjes dhe shkronjave, zhvillimi i faqes në internet është bërë shumë më i këndshëm. Në fund të fundit, këto teknologji janëmë pak kufizime, megjithëse ato janë ende atje. Por siç e dini, pa kufi nuk do të kishte art. Ne ju sugjerojmë të përdorni një qasje vërtet krijuese të dizajnit - raportin e artë. Me të, ju mund të plotësoni në mënyrë efektive dhe bukur hapësirën e punës, pavarësisht se çfarë madhësie faqesh vendosni në shabllonet tuaja.
Si të rrisni hapësirën e punës së faqes
Ka një shans të mirë që nuk do të keni hapësirë të mjaftueshme për të vendosur të gjithë elementët e ndërfaqes së përdoruesit në një plan urbanistik të vogël. Në këtë rast, do t'ju duhet të filloni të mendoni në mënyrë krijuese ose edhe më kreative se sa keni bërë më parë.
Liro hapësirë maksimale në sajt duke fshehur navigimin në menynë kërcyese. Është logjike të përdoret kjo qasje jo vetëm në pajisjet mobile, por edhe në desktop. Në fund të fundit, përdoruesi nuk ka nevojë të shikojë gjatë gjithë kohës se cilat tituj janë në faqen tuaj - ai erdhi për përmbajtjen. Dhe dëshirat e përdoruesit duhet të respektohen.
Një shembull i një mënyre të mirë për të fshehur menunë është faqosja e mëposhtme (foto më poshtë).
Në këndin e sipërm të zonës së kuqe, mund të shihni një kryq, duke klikuar mbi të cilin do të fshihet menyja në një ikonë të vogël, duke e lënë përdoruesin vetëm me përmbajtjen e faqes në internet.
Megjithatë, kjo është opsionale, ju mund të largoheni nga navigimi, i cili do të jetë gjithmonë në sy. Por ju mund ta bëni atë një element të bukur dizajni, dhe jo vetëm një listë të lidhjeve të njohura në faqe. Përdorni ikona intuitive përveç ose edhe në vend të lidhjeve me tekst. është e njëjtado të lejojë faqen tuaj të përdorë më efikas hapësirën e ekranit në pajisjen e përdoruesit.
Uebfaqja më e mirë është reaguese
Nëse nuk e dini se cilën plan urbanistik të zgjidhni për faqen, atëherë gjithçka është e thjeshtë për ju. Për të kursyer në kostot e zhvillimit dhe në të njëjtën kohë për të mos humbur audiencën tuaj për shkak të paraqitjes së dobët për disa pajisje, përdorni dizajn të përgjegjshëm.
Dizajni i përgjegjshëm është një dizajn që duket po aq i mirë në pajisje të ndryshme. Kjo qasje do të lejojë që faqja juaj të jetë e kuptueshme dhe e përshtatshme edhe në një laptop, madje edhe në një tabletë, madje edhe në një smartphone. Ky efekt arrihet duke ndryshuar automatikisht gjerësinë e zonës së punës të ekranit. Duke përdorur fletë stilesh reaguese për faqen tuaj, ju po merrni vendimin më të mirë të mundshëm.
Cili është ndryshimi midis dizajnit të përgjegjshëm dhe versioneve të faqes në internet
Dizajni i përgjegjshëm ndryshon nga versioni celular i faqes në atë që në rastin e fundit, përdoruesi merr një kod html që është i ndryshëm nga ai i desktopit. Ky është një disavantazh për sa i përket optimizimit të performancës së serverit, si dhe optimizimit të motorëve të kërkimit. Për më tepër, bëhet më e vështirë llogaritja e statistikave për versione të ndryshme të faqes. Qasja adaptive nuk i ka këto disavantazhe.
Përgjegjshmëria për pajisje të ndryshme arrihet nëpërmjet një paraqitjeje me një përqindje të gjerësisë së specifikuar ose duke transferuar blloqe në hapësirën e disponueshme (në planin vertikal në një smartphone në vend tëhorizontale në desktop), ose krijimi i paraqitjeve individuale për ekrane të ndryshme.
Mëso më shumë rreth dizajnit dhe zhvillimit të përgjegjshëm në mësimet tona.
