Când vă proiectați site-ul web, este important să vă asigurați că arată excelent pe orice dispozitiv, indiferent de dimensiunea și forma ecranului. Site-urile web receptive sunt concepute pentru a arăta bine pe tot felul de dispozitive moderne, cum ar fi calculatoare, telefoane, tablete, televizoare, articole portabile și chiar ecrane auto. Pentru a face un site web receptiv, va trebui să vă modificați codul CSS și HTML pentru a redimensiona automat elementele acestuia în funcție de condiții specifice. Acest wikiHow vă învață cum să planificați și să implementați designul web de bază receptiv.
Pași
Metoda 1 din 3: Planificarea proiectării responsive
Pasul 1. Aflați cum publicul dvs. vă folosește site-ul
În aceste zile, majoritatea oamenilor care navighează pe web o fac de pe telefoane mobile și tablete. Pentru ca un site să fie receptiv, trebuie să vă asigurați că acesta se afișează corect, indiferent unde este vizualizat. Dacă timpul și banii sunt esențiali, concentrați-vă asupra tipurilor de dispozitive care sunt cele mai populare pentru utilizatorii dvs. (dacă aceste informații sunt disponibile) și modul în care utilizează site-ul dvs. Folosind software-ul de analiză sau o altă formă de cercetare, aflați:
- Ce fel de dispozitive utilizează cel mai des pentru a vizualiza site-ul web, acordând o atenție specială mărcilor de telefoane mobile / tablete / computere și dimensiunilor ecranului / rezoluției.
- Ce browsere sunt cele mai populare cu utilizatorii dvs. În ceea ce privește statisticile globale, Google Chrome este cel mai popular browser web din întreaga lume, dar Safari este o secundă apropiată.
- Modul în care vizitatorii dvs. utilizează site-ul dvs. web, cum ar fi cât timp își petrec vizionarea, unde îl vizionează și ce conținut este cel mai popular. Acest lucru vă poate ajuta să determinați ce tip de conținut este important să includeți și care poate fi omis.
Pasul 2. Proiectați diferite machete pentru diferite dispozitive
Puteți utiliza o combinație de CSS și JavaScript pentru a detecta dispozitivul unui utilizator, precum și capacitățile acestuia (indiferent dacă acesta acceptă Java, Flash etc.) și să afișați o anumită versiune a site-ului dvs. în consecință. Interogările CSS Media sunt utile în special pentru determinarea dimensiunii / rezoluției dispozitivului.
Pasul 3. Contabilizați diferite tipuri de interacțiuni
Vizitatorul dvs. ar putea interacționa cu site-ul dvs. web folosind un mouse, o tastatură, un ecran tactil sau chiar un cititor de ecran pentru persoanele cu deficiențe de vedere. Având în vedere acest lucru, site-ul dvs. web ar trebui să răspundă la clicurile mouse-ului, tastele tastaturii (Tab, Enter, Return etc.) și atingerile ecranului.
Efectele hover-over nu funcționează cu nimic, cu excepția unui mouse. În loc să utilizați aceste efecte, puteți utiliza să solicitați vizitatorului să facă clic pe un buton sau o pictogramă pentru a afișa orice a fost afișat anterior pe un mouse
Pasul 4. Luați în considerare utilizarea unui sistem de gestionare a conținutului (CMS)
O modalitate ușoară de a vă asigura că designul site-ului dvs. este receptiv este utilizarea unui CMS cu o temă receptivă predefinită. Utilizarea unui CMS precum Joomla, Drupal sau Wordpress vă permite să vă asigurați că site-ul dvs. web arată excelent pe toate dispozitivele, fără a fi nevoie să codificați singur elementele responsive. Consultați furnizorul de găzduire web pentru a vedea ce instrumente CMS sunt disponibile împreună cu serviciul dvs.
Pasul 5. Utilizați instrumentele online pentru a vă testa site-ul web
Acum că designul web receptiv a crescut în popularitate, există o varietate de instrumente gratuite pe care le puteți utiliza pentru a vă testa site-ul web. Dacă v-ați codificat deja site-ul, utilizați aceste instrumente pentru a testa cum arată în diferite condiții, astfel încât să știți unde trebuie să îmbunătățiți capacitatea de reacție:
- Test Google-Friendly de către Google: vă permite să știți dacă site-ul dvs. funcționează la fel de bine pe dispozitivele mobile ca și pe ecranele computerului.
- resizeMyBrowser: vă permite să vizualizați site-ul dvs. în diferite rezoluții.
- Responsabil: afișează site-ul dvs. pe diferite ecrane ale dispozitivului în diferite aspecte (lateral sau dreapta-sus).
Metoda 2 din 3: Soluționarea aspectului paginii
Pasul 1. Luați în considerare un cadru de foaie de stil receptiv gratuit
Un cadru este un set pre-scris de HTML, CSS și / sau JavaScript pe care îl puteți utiliza ca schelet pentru site-ul dvs. Cadrele sunt toate testate și optimizate pentru a funcționa cu toate browserele, deci tot ce trebuie să faceți este să introduceți conținutul, să adăugați preferințele media și de culoare și să vă publicați site-ul. Unele cadre populare sunt:
- Bootstrap
- Schelet
- fundație
Pasul 2. Setați fereastra de vizualizare cu o metaetichetă
Dacă nu utilizați un cadru, veți dori să începeți cu cel mai important aspect al codificării unui site web receptiv: Viewport. Fereastra de vizualizare este partea site-ului web vizibilă utilizatorului. Cheia pentru afișarea corectă a site-ului dvs., indiferent de dimensiunea ecranului, este scalarea dimensiunii ferestrei în eticheta META. Pentru aceasta, includeți această etichetă în partea de sus a fiecărei pagini de pe site:
Pasul 3. Specificați dimensiunea textului în raport cu fereastra de vizualizare
Odată ce vizualizarea dvs. este setată, textul de pe pagina dvs. se va scala pentru a se potrivi ecranului. Cu toate acestea, fonturile pot fi afișate prea mari sau prea mici dacă dimensiunile lor nu sunt specificate în raport cu fereastra de vizualizare. Puteți face acest lucru definind dimensiunea fontului ca un procent specific al ferestrei cu unitatea vw. Acest exemplu le spune antetelor H1 să se afișeze la 10% din lățimea ferestrei, indiferent de dimensiunea acesteia:
wikiHow
Pasul 4. Folosiți interogări media pentru a afișa diferite stiluri pentru diferite dimensiuni de ecran
Interogările media vă permit să alegeți dacă să afișați anumite elemente CSS în funcție de dimensiunea ecranului. Puteți specifica specificul interogării dvs. media în fișierul CSS. În acest exemplu, culoarea de fundal a corpului va deveni roșie dacă dimensiunea ecranului utilizatorului este de 480 px sau mai mare:
wikiHow
@media screen și (min-width: 480px) {body {background-color: aqua; }}
Metoda 3 din 3: Sensibilizarea imaginilor
Pasul 1. Utilizați proprietatea lățime CSS pentru a scala imaginile
În loc să setați lățimea imaginii la o anumită cantitate de pixeli (de exemplu, 500 px), utilizați un procent (de exemplu, 100%), astfel încât imaginea să privească lățimea părintelui său și să se adapteze în consecință. Setarea lățimii unei imagini la 100% forțează imaginea să se ridice în sus și în jos în funcție de dimensiunea ecranului vizualizatorului. Pentru a face acest lucru în linie:
Pasul 2. Utilizați proprietatea de lățime maximă pentru a limita scalarea dimensiunii reale a imaginii
Dacă utilizați proprietatea de lățime în pasul anterior pentru a scala o imagine la 100%, imaginea va crește sau se va micșora pentru a se potrivi cu 100% din container, indiferent de dimensiune. Aceasta înseamnă că, dacă imaginea este pe partea mai mică, va crește mai mult decât dimensiunea originală și va arăta de o calitate mai mică. Pentru a preveni acest lucru, utilizați lățimea maximă pentru a seta dimensiunea maximă a imaginii la 100% (dimensiunea sa reală). Iată cum:
Pasul 3. Utilizați elementul imagine HTML pentru a afișa diferite imagini pe diferite dimensiuni ale ecranului
Dacă doriți să creați imagini de dimensiuni personalizate pentru a fi afișate pe ecrane de dimensiuni diferite, puteți specifica ce fotografii să afișați în codul dvs. HTML. Creați imaginile de dimensiuni diferite, apoi utilizați acest cod ca exemplu pentru a specifica ce imagine să utilizați pe ecranele cu lățime de 600 px și 1500 px:
