Ghidul complet pentru începători pentru designul web responsiv

În ghidul nostru pentru design web responsive , vom discuta cele mai importante puncte ale abordării mobile prietenoase și vă vom însoți prin procesul de bază de a face site-ul dvs. complet receptiv.

Cu un număr în creștere masivă de telefoane mobile și alte dispozitive portabile care au acces la Internet, crearea și rularea unui site web care să fie receptiv a devenit o necesitate.

Ce este responsive web design?

Designul web responsiv este proiectarea paginilor web pentru a oferi o experiență excelentă pentru utilizator pe toate dimensiunile, dispozitivele și rezoluțiile de ecran posibile. Această strategie de design va permite oricărui site să se adapteze automat la orice rezoluție țintă pentru dispozitive mobile sau dispozitive, de dragul aspectului de calitate premium al site-ului dvs. pe toate acestea.

Principiul din spatele acestui ghid de design web receptiv este că orice site web modern și profesional ar trebui să fie suficient de elastic pentru a suferi anumite modificări pentru a se potrivi cu orice dimensiune și rezoluție a ecranului. Una peste alta, este o soluție excelentă în afișarea corectă și precisă a unui site web pe diferite ecrane.

De ce este important?

Vă amintiți imaginile perfecte în pixeli pe care le vedeți pe ecranul smartphone-ului dvs., meniurile pliabile sau structurile de culoare rearanjate? Acestea sunt toate exemple de design web modern și foarte solicitat, prietenos cu dispozitivele mobile sau receptiv.

Însă poți să mărturisești, că nu lăudați pe autorii site-ului care au făcut tot posibilul să vă ofere o experiență de utilizator mobil de neîntrecut, pentru că este firesc să vă bucurați de performanța impecabilă a versiunii mobile a site-ului.

Dar cu siguranță te vei simți iritat și, după toate probabilitățile, vei părăsi acel site web după câteva secunde dacă nu reușește să fie convenabil în utilizare și complet lizibil atunci când este accesat de smartphone sau tabletă.

Același lucru este și cu propriul public. Niciunul dintre vizitatorii dvs. web nu va tolera nici măcar o mică defecțiune sau disparitate în versiunea mobilă a site-ului dvs. Prin urmare, vă faceți site-ul web optimizat și să funcționeze fără probleme. Pe ele este una dintre cele mai bune strategii orientate spre menținerea clienților pe site-ul tău web și invitarea mai multor dintre ei în același timp.

Cu toate acestea, acesta nu este singurul avantaj pe care îl puteți obține din designul responsive al site-ului dvs. Este una dintre soluțiile minunate de design Google pentru site-urile web contemporane. Înseamnă că site-urile receptive vor fi clasate mai sus decât cele care nu au această funcționalitate minunată.

În timp ce numărați avantajele designului web responsive, ar trebui să rețineți că nu este vorba doar despre construirea unui site web care să funcționeze bine atunci când este așezat pe diferite dispozitive. Este, de asemenea, despre generarea unui site web care este suficient de flexibil și de adaptabil pentru a reda adevărata natură a unui site web fără nicio distorsiune.

Acum, că am subliniat punctele importante de compatibilitate cu dispozitivele mobile în ghidul nostru pentru design web responsive, să trecem la partea tehnică a acestuia, astfel încât înțelegerea unui design responsive va fi mai puțin o sarcină descurajantă pentru dvs.

Acum, să vedem care sunt principalele componente ale designului web responsive. Sunt trei.

1. Aspecte flexibile

Crearea unui site cu o grilă flexibilă care să fie rearanjată și redimensionată în funcție de dimensiunea și dimensiunile ecranului.

Acesta este primul pas către realizarea unui aspect receptiv. Cu un astfel de aspect, lățimea sau înălțimile nu sunt fixe. Totul este distribuit în procente proporționale pentru a se potrivi cerințelor cutare sau cutare dispozitiv. De exemplu, dacă browserul este mărit, aspectul dvs. va răspunde în consecință și se va întinde pe lățimea necesară.

Dacă doriți să convertiți orice aspect fix în cel cu grilă, va trebui să vă folosiți abilitățile matematice pentru a împărți ținta în funcție de context sau să utilizați alternativ un calculator de design receptiv.

2. Imagini flexibile

Imaginile, în primul rând, precum și alte fișiere media integrate în site-ul dvs. web trebuie să fie redimensionate în mod corespunzător pe măsură ce dispozitivul sau rezoluția acestuia se modifică.

A avea fișiere media flexibile sau receptive pe site-ul dvs. este următorul punct important de reținut. Dacă aveți un aspect fluid și imaginile site-ului dvs. nu sunt receptive, de exemplu, veți avea unele discrepanțe în viitor.

Una dintre metodele productive pe care le puteți utiliza pentru a face imaginile receptive este Imaginile adaptive. Utilizați CSS-ul de mai jos pentru a oferi unei imagini o lățime de 100%, astfel încât să se poată adapta ori de câte ori browser-ul se redimensionează:

img {
 latime maxima: 100%;
 latime: 100%;
}

3. Interogări media

De îndată ce avem un aspect flexibil împreună cu fișiere media flexibile, este timpul să le legăm pe toate cu ajutorul interogărilor media. Acestea sunt setări CSS minunate care permit browserului web care secțiuni web se vor încărca ori de câte ori este identificată o anumită dimensiune a ecranului dispozitivului.

Practic, există trei interogări media care aparțin rezoluțiilor ecranului telefonului, desktopului și tabletei. Cele mai utilizate setări pentru lățimea ecranului pentru a se potrivi cu aceste rezoluții de ecran sunt 320px, 600px, 768px și 1280px.

Iată câteva dintre punctele practice de întrerupere a interogării media CSS care vă vor fi de mare ajutor:

/* Personalizat, iPhone Retina */ 
Ecran numai @media și (lățime minimă: 320 px) {
/* stiluri personalizate */
}
/* Dispozitive foarte mici, telefoane */ 
Ecran numai @media și (lățime minimă: 480 px) {
/* stiluri personalizate */
}
/* Dispozitive mici, tablete */
Ecran numai @media și (lățime minimă: 768 px) {
/* stiluri personalizate */
}
/* Dispozitive medii, desktop-uri */
Ecran numai @media și (lățime minimă: 992 px) {
/* stiluri personalizate */
}
/* Dispozitive mari, ecrane late */
Ecran numai @media și (lățime minimă: 1200 px) {
/* stiluri personalizate */
}

În plus, interogările media sunt responsabile pentru adăugarea, mutarea sau ascunderea conținutului pentru fiecare dispozitiv specific, astfel încât utilizatorii acestuia să se bucure de site-ul dvs. de sus în jos. De exemplu, aveți un anumit buton pe site și doriți ca acesta să fie ascuns pentru utilizatorii de smartphone. Puteți utiliza următorul CSS pentru a-l ascunde numai de posesorii de smartphone:

/* Telefoane inteligente (portret și peisaj) ----------- */
Ecran numai @media și (lățime minimă a dispozitivului: 320 px) și (lățime maximă a dispozitivului: 480 px) {
/* Stiluri */
.button {display:none}
}