Kur hartoni faqen tuaj të internetit, është e rëndësishme të siguroheni që të duket e mrekullueshme në çdo pajisje, pavarësisht nga madhësia dhe forma e ekranit. Uebfaqet e përgjegjshme janë krijuar që të duken mirë në të gjitha llojet e pajisjeve moderne si kompjuterët, telefonat, tabletët, televizorët, pajisjet e veshshme dhe madje edhe ekranet e makinave. Për të bërë një faqe në internet të përgjegjshme, do t'ju duhet të modifikoni kodin tuaj CSS dhe HTML për të ndryshuar madhësinë automatikisht të elementeve të saj në varësi të kushteve specifike. Ky wikiHow ju mëson se si të planifikoni dhe zbatoni dizajnin bazë të përgjegjshëm të uebit.
Hapa
Metoda 1 nga 3: Planifikimi i Dizajnit të përgjegjshëm
Hapi 1. Zbuloni sesi audienca juaj përdor uebfaqen tuaj
Këto ditë, shumica e njerëzve që shfletojnë uebin e bëjnë këtë nga telefonat celularë dhe tabletët. Që një faqe të jetë e përgjegjshme, duhet të siguroheni që ajo të shfaqet siç duhet, pavarësisht se ku po shikohet. Nëse koha dhe paratë janë thelbësore, përqendrohuni në llojet e pajisjeve që janë më të popullarizuara tek përdoruesit tuaj (nëse ky informacion është i disponueshëm) dhe si ata përdorin faqen tuaj. Duke përdorur softuerin tuaj analitik ose ndonjë formë tjetër kërkimi, zbuloni:
- Çfarë lloj pajisjesh ata përdorin më shpesh për të parë uebfaqen, duke i kushtuar vëmendje të veçantë markave të telefonit celular/tabletit/kompjuterit dhe madhësive të ekranit/rezolucionit.
- Cilët shfletues janë më të njohurit tek përdoruesit tuaj. Sa i përket statistikave globale, Google Chrome është shfletuesi i uebit më i popullarizuar në të gjithë botën, por Safari është një i dyti.
- Si e përdorin vizitorët tuaj faqen tuaj të internetit, të tilla si sa kohë shpenzojnë për ta parë atë, ku po e shikojnë atë dhe cila përmbajtje është më e popullarizuar. Kjo mund t'ju ndihmojë të përcaktoni se cili lloj përmbajtje është i rëndësishëm për t'u përfshirë dhe cili mund të hiqet.
Hapi 2. Dizajnoni paraqitje të ndryshme për pajisje të ndryshme
Ju mund të përdorni një kombinim të CSS dhe JavaScript për të zbuluar pajisjen e një përdoruesi, si dhe aftësitë e tij (nëse mbështet Java, Flash, etj.) Dhe për të shfaqur një version të veçantë të faqes tuaj në përputhje me rrethanat. Pyetjet CSS Media janë veçanërisht të dobishme për përcaktimin e madhësisë/zgjidhjes së pajisjes.
Hapi 3. Llogarisni llojet e ndryshme të ndërveprimeve
Vizitori juaj mund të jetë duke bashkëvepruar me faqen tuaj në internet duke përdorur miun, tastierën, ekranin me prekje, apo edhe lexuesin e ekranit për njerëzit me shikim të kufizuar. Duke pasur parasysh këtë, faqja juaj e internetit duhet t'i përgjigjet klikimeve të miut, çelësave të tastierës (Tab, Enter, Return, etj.) Dhe prekjeve të gishtërinjve në ekran.
Efektet Hover-over nuk funksionojnë me asgjë përveç një miu. Në vend që të përdorni këto efekte, ju mund të përdorni që vizitori të klikojë një buton ose ikonë për të shfaqur gjithçka që ishte shfaqur më parë në një lëvizës të miut
Hapi 4. Merrni parasysh përdorimin e një Sistemi të Menaxhimit të Përmbajtjes (CMS)
Një mënyrë e thjeshtë për të siguruar që dizajni i faqes tuaj është i përgjegjshëm është të përdorni një CMS me një temë të përgjegjshme të ndërtuar paraprakisht. Përdorimi i një CMS si Joomla, Drupal ose Wordpress ju lejon të siguroheni që faqja juaj e internetit të duket e mrekullueshme në të gjitha pajisjet pa pasur nevojë të kodoni vetë elementet përgjegjëse. Kontrolloni me ofruesin tuaj të webhosting për të parë se cilat mjete CMS janë në dispozicion me shërbimin tuaj.
Hapi 5. Përdorni mjete online për të testuar faqen tuaj
Tani që dizajni i përgjegjshëm i uebit është rritur në popullaritet, ka një larmi mjetesh falas që mund të përdorni për të testuar faqen tuaj të internetit. Nëse e keni koduar tashmë faqen tuaj të internetit, përdorni këto mjete për të provuar se si duket në kushte të ndryshme, kështu që do të dini se ku keni nevojë për të përmirësuar reagimin:
- Test miqësor me celularin nga Google: Ju lejon të dini nëse faqja juaj funksionon aq mirë në pajisjet celulare sa në ekranet e kompjuterit.
- resizeMyBrowser: Ju lejon të shikoni faqen tuaj në rezolucione të ndryshme.
- Përgjegjës: Shfaq faqen tuaj në ekranet e pajisjeve të ndryshme në paraqitje të ndryshme (anash ose nga ana e djathtë).
Metoda 2 nga 3: Bërja e faqosjes së faqes të përgjegjshme
Hapi 1. Konsideroni një kornizë të fletës së stilit të përgjegjshëm falas
Një kuadër është një grup i para-shkruar i HTML, CSS dhe/ose JavaScript që mund të përdorni si skelet për faqen tuaj. Kornizat janë të gjitha të testuara dhe të optimizuara për të punuar me të gjithë shfletuesit, kështu që gjithçka që ju duhet të bëni është të futni përmbajtjen tuaj, të shtoni preferencat tuaja të mediave dhe ngjyrave dhe të publikoni faqen tuaj. Disa korniza të njohura janë:
- Rrip çizme
- Skeleti
- Fondacioni
Hapi 2. Vendosni portën e shikimit me një meta tag
Nëse nuk përdorni një kornizë, do të dëshironi të filloni me aspektin më të rëndësishëm të kodimit të një faqe në internet të përgjegjshme: Viewport. Porta e shikimit është pjesa e faqes së internetit që është e dukshme për përdoruesit. Çelësi për ta bërë faqen tuaj të shfaqet siç duhet pavarësisht nga madhësia e ekranit është të shkallëzoni madhësinë e portës së shikimit në etiketën META. Për ta bërë këtë, përfshini këtë etiketë në krye të secilës faqe në sit:
Hapi 3. Specifikoni madhësinë e tekstit në lidhje me portën e shikimit
Pasi të jetë vendosur porta e shikimit, teksti në faqen tuaj do të shkallëzohet për t'iu përshtatur ekranit. Sidoqoftë, shkronjat mund të shfaqen shumë të mëdha ose shumë të vogla nëse madhësitë e tyre nuk specifikohen në lidhje me portën e shikimit. Ju mund ta bëni këtë duke përcaktuar madhësinë e fontit si një përqindje specifike e portës së shikimit me njësinë vw. Ky shembull u thotë titujve H1 të shfaqen në 10% të gjerësisë së portës, pavarësisht nga madhësia e saj:
wikiSi
Hapi 4. Përdorni pyetjet e mediave për të treguar stile të ndryshme për madhësi të ndryshme të ekranit
Pyetjet e mediave ju lejojnë të zgjidhni nëse do të shfaqni elementë të caktuar CSS në varësi të madhësisë së ekranit. Ju mund të specifikoni specifikat e pyetjes suaj të mediave në skedarin tuaj CSS. Në këtë shembull, ngjyra e sfondit të trupit do të bëhet e kuqe nëse madhësia e ekranit të përdoruesit është 480px ose më e madhe:
wikiSi
@media ekran dhe (min-width: 480px) {body {background-color: aqua; }}
Metoda 3 nga 3: Bërja e Imazheve të përgjegjshme
Hapi 1. Përdorni vetinë e gjerësisë CSS për të shkallëzuar imazhet
Në vend që të vendosni gjerësinë e figurës në një sasi të caktuar pikselësh (p.sh., 500px), përdorni një përqindje (p.sh., 100%) në mënyrë që imazhi të shikojë gjerësinë e prindit të tij dhe të përshtatet në përputhje me rrethanat. Vendosja e gjerësisë së imazhit në 100% e detyron imazhin të shkallëzohet lart e poshtë në varësi të madhësisë së ekranit të shikuesit. Për ta bërë këtë në linjë:
Hapi 2. Përdorni vetinë e gjerësisë maksimale për të kufizuar shkallëzimin e madhësisë aktuale të figurës
Nëse përdorni vetinë e gjerësisë në hapin e mëparshëm për të shkallëzuar një imazh në 100%, imazhi do të rritet ose tkurret për të përshtatur 100% të kontejnerit të tij, pavarësisht nga madhësia. Kjo do të thotë që nëse imazhi është në anën më të vogël, ai do të rritet më shumë se madhësia e tij origjinale dhe do të duket me cilësi më të ulët. Për të parandaluar që kjo të ndodhë, përdorni gjerësinë maksimale për të vendosur madhësinë maksimale të shkallëzimit të figurës në 100% (madhësia e saj aktuale). Ja si:
Hapi 3. Përdorni elementin e figurës HTML për të shfaqur imazhe të ndryshme në madhësi të ndryshme të ekranit
Nëse dëshironi të krijoni imazhe me madhësi të personalizuar për t'u shfaqur në ekrane me madhësi të ndryshme, mund të specifikoni se cilat fotografi do të shfaqen në kodin tuaj HTML. Krijoni imazhe me madhësi të ndryshme dhe më pas përdorni këtë kod si shembull për të përcaktuar se cilën imazh do të përdorni në ekranet me gjerësi 600px dhe 1500px:
