Dizajni përshtatës i faqes në internet është një sistem i përshtatshëm për të shfaqur të njëjtën faqe interneti në lloje të ndryshme pajisjesh në internet. Me fjalë të thjeshta, kjo është aftësia për të parë një faqe interneti në një laptop, smartphone dhe pajisje të tjera.
Përgjegjshmëria në ueb është bërë një domosdoshmëri që kur njerëzit morën pajisje të formateve të ndryshme të aktivizuara me internet. Kompanitë, dyqanet online dhe madje edhe faqet thjesht informuese përpiqen të kënaqin audiencën e tyre, duke iu përshtatur asaj në çdo mënyrë të mundshme. Dizajni i përgjegjshëm zgjidh problemin e komoditetit, prandaj është një artikull pune i domosdoshëm.
Karakteristikat e dizajnit të përgjegjshëm të uebit
Përshtatshmëria e dizajnit karakterizohet nga disa kritere kryesore.
- Madhësia. Dizajni i përgjegjshëm i faqes në internet duhet të ketë dallime të vogla gjatë shfaqjes së faqes në pajisje të ndryshme, kështu që madhësitë e imazheve, tekstit dhe elementëve të tjerë të parë duhet të korrespondojnë me madhësitë e vetë pajisjeve. Për ta bërë këtë, zhvilluesit e uebit përshtatin dizajnin në mënyrë që të ketë versione të shumëfishta shikimesh.
- Përshtatja e përmbajtjes. Materiali që mbush faqen (imazhe, videodhe elementë të tjerë multimedialë) duhet gjithashtu të përputhen me rezolucionet e kërkuara të ekranit pa humbur cilësinë e ekranit.
- Fleksibilitet dizajni. Përfshirja në zhvillimin e elementeve që ju lejojnë të rregulloni shpejt dizajnin e faqes kur ndryshoni faqen e internetit që po shikoni. Për shembull, përdoruesi lëviz faqen lart e poshtë, navigon nëpër seksione të ndryshme ose ndryshon pozicionin e ekranit nga vertikale në horizontale dhe anasjelltas.
- Thjeshtoni artikujt sipas pajisjes për përdorim më të mirë.
- Fshih blloqe të parëndësishme në ekrane më të vogla.
Bazat
Ndërtimi i faqeve të internetit është padyshim i lidhur me gjuhët e programimit, sepse thjesht nuk mund të bëni pa to. Duke përdorur HTML dhe CSS, shfletuesi njeh përbërjen dhe renditjen e objekteve (tekste, ilustrime, video) - kështu është formuar faqja.
CSS është përgjegjëse për ngjyrën, stilet, madhësitë, fontet, rreshtimet, mbushjet, elementët e sfondit, format, etj. HTML është përgjegjëse për përmbajtjen dhe strukturën e përgjithshme të sajtit. Kështu, një burim ueb është ndërtuar në grumbullin e dy metodave më të rëndësishme të përshkrimit.
CSS, nga ana tjetër, është një mjet i domosdoshëm projektimi. Ka një grup të madh karakteristikash që janë superiore ndaj HTML:
- Siguron konsistencë të dizajnit në faqe të shumta, pamjen e sajtit dhe kontrollon shfaqjen e dokumenteve HTML.
- Të jep mundësinë të bësh dizajn dhe përmbajtje në të njëjtën kohë.
- Zbaton stile të shumta dhe aftësinë për tëduke parë në pajisje të ndryshme.
- Merr vendime komplekse të projektimit.
- Karakterizohet nga shpejtësia e lartë.
Për të zhvilluar një faqe interneti, duhet të dini disa koncepte bazë.
Një përzgjedhës CSS shënohet me emrin e një stili që përcakton vetitë dhe opsionet e formatimit. Ai i tregon shfletuesit se për cilin element specifik zbatohen vetitë.
Një pronë është një njësi strukturore. Ai përcakton parametrat e jashtëm (madhësia, vendndodhja, ngjyra, forma, etj.) dhe shprehet në një kod specifik.
Ekziston një grup karakteristikash të përcaktuara CSS që përshkruajnë një objekt të vetëm në pamje dhe vendndodhje.
Së bashku, këta elementë formojnë skemën e mëposhtme:
Zgjedhuesi { vetia 1: vlera; prona2; vlera }.
Madhësitë dhe rezolucionet e paraqitjes
Zhvillimi i dizajnit fillon me përgatitjen e paraqitjes në Photoshop ose programe të tjera grafike. Për lehtësi, shenjat e veçanta të rrjetës modulare futen në kanavacë, vërehen pika të veçanta. Kështu, projektuesi i uebit i tregon dizajnerit të faqosjes parimet e strukturimit të faqes së ardhshme dhe rregullimin e saktë të elementeve të uebit.
Rezolucione dhe madhësi të përgjegjshme të dizajnit të uebit për llojet kryesore të pajisjeve:
- Ky dizajn i përmbahet parimit të fillimit të punës me leje celulare. Paraqitja për telefonin inteligjent është krijuar në madhësinë 460 × 960 px.
- Madhësia e paraqitjes së tabletit është 768 × 1024.
- Madhësia e fletores është 1280 × 802.
- Madhësia e kompjuterit është 1600 × 992.
Në versionin celular të faqesduhet të thjeshtohet sa më shumë që të jetë e mundur, duke ruajtur të gjitha funksionet kryesore. Nëse faqosja po përgatitet për një dyqan online, me gjithë thjeshtimin në përdorim, duhet të ketë një përshkrim kryesor, një katalog produkti, një opsion porosie, një karrocë blerjeje etj. - të gjithë elementët e nevojshëm për funksionim të plotë, si me shikimin në format të plotë në një kompjuter. Komoditeti i versionit celular është se këtu mund të shmangni faqet shtesë për të kursyer kohë gjatë ngarkimit.
Në përmbajtjen adaptive, duke përdorur kodin html, mund të fshehni disa elementë që nuk janë vërtet të nevojshëm. Për shembull, me rezolucion të lartë, faqja shfaq një kartë produkti me përshkrimin, çmimin, informacionin e dorëzimit dhe aftësinë për të shtuar në "Shportë". Në rezolucionin celular, procesi thjeshtohet në një foto, një çmim dhe një buton blerjeje.
Rezolucionet mesatare dhe minimale për dizajn të përgjegjshëm duhet të marrin parasysh lehtësinë e leximit dhe shikimit nga përdoruesi.
Layout
Qëllimi i paraqitjes së dizajnit adaptiv është të krijojë një plan urbanistik fleksibël, ose siç është gjithashtu e zakonshme të thuhet: "shabllon gome". Përfundimi nuk është në madhësitë e faqeve njëshifrore, por në kompresueshmërinë proporcionale të shabllonit për shikim të lehtë në të gjitha pajisjet.
Është ndërtuar kryesisht në CSS. Gjatë zhvillimit, përcaktohen pikat e kontrollit të dimensioneve të ekranit. Kështu, përcaktohet gjerësia e objekteve të mbetura. Për ta bërë këtë, gjerësia e faqes përcaktohet nga vetia css max-width, në varësi të këtyre kritereve, madhësia e elementeve të tjerë zgjidhet në përqindje. Për shembull, madhësia e bllokut në kryesorefaqja është 600 pikselë dhe gjerësia e bllokut të shiritit anësor (shiritit anësor të faqes) është 400 px, përkatësisht, gjerësia e përmbajtjes do të jetë 60%, dhe gjerësia e shiritit anësor 40%.
Ka disa lloje të paraqitjeve të përgjegjshme. Secila zgjidhet individualisht, në varësi të veçorive dhe strukturës.
Shikime:
- Një lloj strukture që lejon blloqet të mbyllen kur rezolucioni i ekranit zvogëlohet. Në sajtet me shumë kolona, blloqet shtesë zhvendosen në fund të ekranit.
- Kur përpunohet një model i veçantë për secilën leje. Ky lloj dizajni reagues kërkon më shumë kohë, por është më i lexueshëm.
- Një lloj i thjeshtë dizajni që synon të shkallëzojë të gjithë elementët. Nuk është fleksibël.
- Lloji i panelit është i përshtatshëm për t'u përdorur në aplikacionet celulare, kur shfaqen funksione shtesë kur ndryshoni pozicionin e vetë ekranit.
Krijimi i shtresave të përgjegjshme është vetëm një pjesë e punës. Imazhet adaptive janë një rast më vete, i cili ka problemet dhe metodat e veta për zgjidhjen e tyre.
Imazhi i vetëm duhet të shfaqet qartë në rezolucione të ndryshme të ekranit. Këtu ka një problem - si të siguroheni që fotografia të mbetet gjithmonë e njëjtë, pavarësisht nga ndryshimi i rezolucionit. Futja e një kodi të thjeshtë CSS në këtë rast nuk do të mjaftojë.
Shembull: img {max-width: 250px;} - këtu duhet të aplikoni një metodë në të cilën madhësia e kontejnerit që përmban imazhin është e kufizuar dhe jo vetë imazhi. Do të duket diçka si kjo: div img {max-width: 250px;}. Kjo metodë e zgjidh probleminfaqosje e imazheve të vogla, por jo të përshtatshme për ilustrime të mëdha.
Prandaj, shumë zhvillues preferojnë të përdorin gjuhë javascript që ju lejojnë të përshtatni çdo imazh pa mbingarkuar serverin. Javascript ofron një numër të madh skriptesh alternative.
Të mirat dhe të këqijat e paraqitjes së përgjegjshme
Pozitive:
- Ruaj vendndodhjen e të gjithë elementëve. Kjo është e përshtatshme kur përdoruesi është mësuar me versionin e plotë të faqes.
- Ruaj domenet dhe adresat.
- Përshtatje e plotë për formate të tjera lejesh.
Negative:
- Fleksibiliteti funksional humbet
- Çdo mbingarkesë informative është e mbushur me një nisje të gjatë të një burimi në internet, gjë që detyron shumë përdorues të kalojnë në opsione më të shpejta.
Krijimi i një faqe interneti
Struktura e faqes është e ndarë në disa seksione dhe blloqe. Tradicionalisht, faqosja përbëhet nga pjesa e sipërme e faqes (titulli), logoja, menyja, blloku i përmbajtjes dhe pjesa përfundimtare e faqes (për shembull, informacioni i detajuar i kontaktit). Le të shohim se si të bëjmë një dizajn të përgjegjshëm uebsajti nga një shabllon i thjeshtë.
Etiketa ndihmëse për të shkruar:
- wrapper - etiketë që kombinon të gjithë elementët e shabllonit;
- header h1 - logo;
- header - kokë për menunë dhe elementë të tjerë të rëndësishëm;
- përmbajtje - bllok;
- colLeft - madhësia e përmbajtjes;
- colDjathtas - shirit anësor (kolona anësore);
- footer - pjesa e fundit e faqes;
- ekran media - vendosrezolucioni i dëshiruar.
Kur shkruani një sajt, këta elementë mund të lëvizin në një rend të ndryshëm, në varësi të nevojës. Për shembull, me rezolucion të lartë, menyja mund të shfaqet vertikalisht. Në versionin celular, faqosja mund të ndërtohet në atë mënyrë që menyja të rrëshqasë në një pozicion horizontal.
- viewport - një etiketë që ju lejon të ruani madhësinë e tekstit në një version më të vogël të dizajnit. Ndodhet midis etiketave.
- max-width - për të optimizuar faqen për të shmangur shtrirjen në rezolucione mbi 1000 piksel.
Kur zbatoni paraqitjen, biblioteka jQuery ndihmon shumë kur keni nevojë të ndryshoni stilin dhe strukturën e blloqeve.
Cili është ndryshimi midis modelit të përgjegjshëm dhe atij celular
Për një kuptim të plotë, merrni parasysh disa shembuj ilustrues, pasi konfuzioni midis këtyre dy koncepteve nuk është i pazakontë.
Duhet të kuptoni se versioni celular është një analog i faqes parësore me një nëndomain. Prezantimi i jashtëm i faqes përsërit plotësisht stilin dhe funksionalitetin, ndërsa struktura dhe përmbajtja e tij mund të ndryshojnë nga versioni kryesor, pasi versioni është shkurtuar në elementët e nevojshëm.
Dizajni i përgjegjshëm është optimal për të gjitha rezolucionet e pajisjes. Është i shkallëzueshëm dhe jepet saktë pavarësisht nga kushtet e shikimit.
Këto janë dy prezantime të ndryshme të faqes, rreth të cilave gërmojnë pa u lodhur mosmarrëveshjet se cili është më i mirë. Duhet të theksohet se ende nuk është marrë një vendim përfundimtar. Dikush e vlerëson këtë dizajn, duke vënë në dukje trendin e modës dhe shumë përparësi. Versioni celular ka gjithashtu disa avantazhe që dizajni reagues nuk i ka. Prandaj, për të filluar, duhet të kuptoni nevojat themelore.
Përfitimet
Si është dizajni reagues më i mirë se celulari?
Shkathtësi. Në kohën tonë, me një rritje kaq të furishme të tregut, është thjesht e nevojshme të paraqitet informacioni në një mënyrë tjetër, duke kënaqur dëshirat e konsumatorëve. Dizajni i përgjegjshëm e zgjidh këtë problem.
Promovim efektiv në motorët e kërkimit. Çfarë nuk mund t'i atribuohet avantazheve kryesore të një pajisjeje adaptive. Motorët e kërkimit preferojnë t'u japin përdoruesve faqe interneti të përgjegjshme.
Përdorshmëria. Dizajni i përgjegjshëm zakonisht dizajnohet në zgjidhjet më të mira të dizajnit, gjë që është një dhuratë e këndshme për perceptimin vizual të përdoruesve.
Lehtësi dhe thjeshtësi si në zbatimin e projektit ashtu edhe në përdorimin e tij.
Norma të mira konvertimi. Meqenëse me dizajnin adaptiv ka më shumë mundësi për shfaqje, vetë konvertimi rritet.
Ekonomi. Është relativisht më lirë sesa krijimi dhe promovimi i një versioni të veçantë celular.
Të mirat dhe të këqijat e versionit celular
Krijimi i një dizajni të përgjegjshëm celular kërkon shkathtësi dhe qëndrueshmëri. Para së gjithash, rekomandohet të shkruani në detaje kushtet e referencës, të cilat, natyrisht, do të ndihmojnë në shmangien e punës së panevojshme dhe kursimin e kohës, si dhe të merren parasysh veçoritë e serverit në të cilin do të mbahet faqja.
Ka disa avantazhe dhe disavantazhe për dizajnin e përgjegjshëm për celularin.
Pro:
- Nëse keni një faqe të gatshme, nuk ka nevojë të zhvilloni një dizajn për versionin celular nga e para. Mund të bëhen vetëm disa ndryshime, duke e çliruar këtë strukturë nga funksionaliteti i panevojshëm.
- Për shkak të të gjitha llojeve të thjeshtimeve, versioni celular konsiderohet më i shpejtë kur shkarkohet.
- Përdoruesi sheh informacionin më të rëndësishëm në të gjithë përmbajtjen.
- Zbatim i shpejtë. Ka shtojca me të cilat mund të zbatoni përshtatjen celulare, edhe nëse nuk i dini etiketat dhe kodet.
- Zgjedhjet e motorëve të kërkimit favorizojnë versionet adaptive sepse kërkojnë më pak kohë për t'u analizuar.
Kundër:
- Jo të gjitha versionet celulare mund të përputhen me rezolucionet e pajisjes celulare. Sajti, natyrisht, do të hapet, por rezolucioni i ekranit nuk përputhet gjithmonë me paraqitjen. Ndonjëherë një dizajn smartphone i dizajnuar mirë mund të duket ndryshe kur hapet si tablet.
- Versionet celulare kërkojnë domene të veçanta me pagesë.
- Ka disa probleme të vogla me postimin e përmbajtjes. Nëse ka disa versione në të njëjtën kohë, përmbajtja duhet të rregullohet për të gjitha formatet menjëherë. Dorëzimi i materialit të ri në faqen kryesore dhe kopjimi i tij në versionin celular mund të konsiderohet si vjedhje. Për të shmangur këtë problem, mund t'ju duhet të provoni lidhjen e burimeve.
Metodat e zbatimit
Metodat kryesore të zbatimit:
- Pas krijimit të dizajnit të paraqitjeve dhe paraqitjes, ai ngarkohet në dimensionet e kërkuara duke përdorursiti i operatorit dhe kodi kryesor. Kjo është një metodë klasike që përdoret kur krijohen versione të mesme dhe të vogla (tableta, telefona inteligjentë, etj.).
- BootStrap është një grup i thjeshtë dhe i qartë mjetesh përshtatjeje. I përshtatshëm për krijimin e versioneve për Landing Page dhe projekte të tjera jo shumë komplekse në internet. Ai jep një mundësi të mirë për të aplikuar shumë stile të ndryshme në funksionet e ndërfaqes.
- Responsive Grid System është një grup i njohur mjetesh të gjithanshme. Lehtë për t'u aplikuar dhe nuk kërkon njohuri të thella. Përfshin një shumëllojshmëri të gjerë infografike.
- GUMBY - Një kornizë CSS që mburret me reagim fleksibël dhe vegla të shkëlqyera.
- Cookies - ju lejon të implementoni imazhe të përgjegjshme. Shoqëron automatikisht skedarët e kërkuar nga shfletuesi.
- ExpressionEngine është një mënyrë tjetër për të krijuar imazhe të përgjegjshme. Përcakton nëse pajisja është e lëvizshme, e aftë për të ndryshuar imazhet në rezolucionin e kërkuar.
- ProtoFluid - Ofron prototipizim të shpejtë. I përshtatshëm për të gjitha llojet e pajisjeve.
