Reactivitatea site-ului este capacitatea site-ului de a se afișa corect diferite dispozitive cu caracteristici diferite.
Mai multe videoclipuri pe canalul nostru - învață marketing pe internet cu SEMANTICA
Astăzi, site-urile sunt vizualizate pe computere personale, tablete, smartphone-uri. Fiecare dispozitiv are propriile sale caracteristici - viteza de operare, rezoluția ecranului.
Dacă site-ul nu răspunde, atunci acesta va fi afișat corect pe computer. Și pe telefon poate „mergi” - blocurile se vor suprapune, fontul poate deveni ilizibil.
Termenul de receptivitate în sine a fost folosit pe scară largă de la lansarea cărții lui Ethan Marcotte Responsive Web Design - Responsive Web Design. Site-urile capabile să se adapteze dinamic la caracteristicile date ale dispozitivelor de vizualizare au ajuns să fie numite adaptive.
Un exemplu de aspect receptiv
Afisare pe PC:
Pe farfurie:
Pe un smartphone:
De ce ai nevoie de un site web responsive
Tehnologiile se dezvoltă într-un ritm rapid, iar producătorii de echipamente țin pasul cu ele. Telefoanele inteligente, tabletele, televizoarele și alte dispozitive electronice conectate la Internet sunt disponibile pentru orice gust și buget, există multe opțiuni de dimensiune a ecranului.
În același timp, consumul de conținut crește exponențial. În lupta pentru client, proprietarii de site folosesc toate mijloacele și metodele. În special, în etapa de dezvoltare, este prevăzută posibilitatea afișării corecte a resursei dvs. web pe diverse dispozitive.
Procentul de dispozitive care vă permit să vizualizați informații online crește în fiecare an. Varietatea de formate și rezoluții complică procesul de dezvoltare în ansamblu, cerințe suplimentare trebuie luate în considerare în toate etapele: designeri și designeri de layout și programatori.
Conceptul de design responsive vă permite să simplificați procesul, deoarece nu trebuie să creați mai multe variante de site, așa cum era înainte, de exemplu, cu versiunile mobile. În acest caz, un set separat de funcții a fost proiectat pe un subdomeniu separat.
Site-urile vechi trebuie îmbunătățite și o varietate de abordări ale adaptabilității fac posibilă implementarea acestui lucru. Principalul lucru este să evaluați corect scara la început, în unele cazuri este mai ușor, mai rapid și mai ieftin să utilizați noi machete și șabloane de design. Dacă identitatea ta corporativă nu este o marcă de recunoscut, adesea faptul că este depășită din punct de vedere moral te împinge și la reelaborare. Și nimeni nu a anulat rebrandingul ca o etapă de tranziție la un nou nivel. Un site web responsive este un instrument puternic pentru afacerea dvs.
Există servicii pentru a verifica cât de receptiv este site-ul.
Mai mult, astăzi cele mai mari motoare de căutare Google și Yandex iau în considerare acest parametru atunci când clasifică site-urile web. Deoarece uzabilitate, navigarea este unul dintre factorii indispensabili în evaluarea calității site-ului. Viteza de încărcare a informațiilor, iar în cazul imaginilor optimizate, aceasta scade, textul ilizibil și elementele distorsionate care sunt prea mici sau nu se potrivesc pe ecran fac dificilă găsirea informațiilor și pur și simplu duc la o creștere a refuzurilor - utilizatorul închide pagina. Aceștia sunt factori comportamentali care afectează și poziția în rezultatele căutării.
Pentru proprietarii de site-uri, terminologia tehnică și parametrii de clasare nu sunt criterii complet clare și tangibile. Dar este suficient pentru ei să înțeleagă cum afectează acest lucru dinamica prezenței. În multe zone, ponderea traficului de pe dispozitivele mobile este comparabilă și chiar depășește traficul de pe desktop. Acest lucru trebuie luat în considerare. Este din ce în ce mai puțin posibil să întâlniți dezvoltatori care nu se oferă să adapteze site-ul, dar nu va strica să navigați în această problemă pentru a controla procesul.
Principii de adaptabilitate
Filetat
Să presupunem că ați dezvoltat un design pentru browsere desktop. Totul este cool. Când vizualizați acest site de pe un dispozitiv mobil, blocurile se schimbă și trec unul sub celălalt.
Aceasta se numește flux. Și acum este unul dintre principiile principale care este folosit în designul responsive. Gandeste-te la asta.
relativitatea unitară
Din lecțiile de fizică de la școală se știe că viteza poate fi absolută, când indiferent de unde observați mișcarea, viteza va fi aceeași. Și relativ - când, în funcție de punctul de referință, viteza se poate schimba.
Unitățile sunt aceleași. Dispozitivele diferite au densități de pixeli diferite. Și dimensiunea, de exemplu, 320 px va arăta diferit pe ecranul unui computer și al unui smartphone.
Soluția este utilizarea unităților relative. Când setați toate dimensiunile, scările și coordonatele blocului în raport cu elementul care se află pe ecranul computerului și pe afișajul smartphone-ului. De exemplu, marginea de sus.
Utilizarea punctelor de control
Acestea sunt elemente a căror aranjare se modifică doar dacă se folosește un anumit dispozitiv pentru vizionare parametrii dați ecran.
De exemplu, dacă conținutul paginii „se accesează cu crawlere”, atunci este logic să adăugați un astfel de punct și să remediați conținutul.
Valori minime și maxime
Pe un telefon mobil, articolul poate fi afișat așa cum trebuie. Dar acum deschideți aceeași pagină pe un monitor cu ecran lat și nu sunteți mulțumit de imagine. Totul este întins, lizibilitatea este exclusă.
De exemplu, puteți specifica proprietăți. Dacă lățimea ecranului este mai mică de 1000 de pixeli, atunci conținutul ar trebui să fie afișat pe ecran complet. În caz contrar, lățimea maximă va fi de 1000 de pixeli.
Imbricarea obiectelor
Se întâmplă că trebuie să utilizați multe elemente care depind de poziția altor blocuri. E greu de controlat. Puteți cuibări astfel de obiecte într-un singur container. Acesta este potrivit pentru acele blocuri pe care nu doriți să le adaptați la parametrii ecranului - butoane, logo-uri etc.
Fonturi corecte
Fonturile web arată frumos. Dar nu uitați că toate sunt încărcate. Acest lucru afectează viteza de încărcare a paginilor pentru utilizator.
Utilizarea corectă a graficelor raster și vectoriale
Dacă imaginea are o mulțime de detalii mici, atunci utilizați un format raster. În caz contrar - vector.
Dar nicio imagine nu ar trebui folosită fără optimizare - compresie. Imaginile vectoriale sunt de obicei deja comprimate. Dar nu toate browserele mai vechi le acceptă.
Respect pentru layout-uri
Există standarde generale pentru ce dimensiuni de bază sunt de obicei considerate ghidate atunci când se dezvoltă un aspect.
În designul responsive, există puncte de întrerupere. Aceștia sunt parametrii care sunt trecuți în funcțiile media. Indicați la ce rezoluții are loc modificarea designului.
- Pentru mobil 320px, 480px.
- Pentru tablete 768px.
- Pentru netbook-uri și unele tablete 1024px.
- Pentru computere personale 1280px și mai mult.
Legarea la o anumită rezoluție nu este rigidă. Depinde de setările și parametrii dispozitivelor.
Uneori nu este nevoie să creați un aspect pentru rezoluții intermediare, de exemplu, 480px, dacă aspectul este afișat corect în intervalul 768 - 320px.
Dacă aspectul „se întrerupe” pe un anumit gadget, este afișat incorect la o rezoluție diferită, valorile reale pentru acest ecran sunt luate ca puncte de întrerupere.
Interogări media
Dezvoltarea site-urilor responsive se bazează pe principiul definirii parametrilor de stil folosind interogări media.
Interogările definesc:
- Tip de dispozitiv: proiectoare, smartphone-uri, monitoare, televizoare etc.
- Condiții.
Cererea și răspunsul corespunzătoare vor aplica setările de afișare corespunzătoare din fișierul foaie de stil CSS.
Verificarea site-ului pentru receptivitate
Puteți verifica modul în care site-ul dvs. este afișat pe dispozitivele mobile folosind diverse servicii și instrumente.
Folosind un browser
De exemplu, Google Chrome are un set de instrumente încorporat pentru verificarea corectitudinii designului site-ului pentru afișarea pe dispozitivele mobile. Trebuie să apăsați tasta F12 sau Ctrl + Shift + I sau să selectați „Instrumente suplimentare” - „Instrumente pentru dezvoltatori” din meniu.
V Mozilla Firefox se poate face astfel "Meniu" - "Dezvoltare" - "Responsive Design", sau Ctrl + Shift + M.
Compatibil cu Google Mobile (Google Search Console)
Doar introducem adresa URL completă în șir și obținem rezultatele. Verificarea durează de obicei mai puțin de un minut.
Un site responsive este un standard de dezvoltare web, unul dintre indicatorii calității unei resurse Internet și o atitudine atentă la nevoile utilizatorilor.
Aspect adaptiv site-ul permite paginilor web să se adapteze automat la ecranele tabletelor și smartphone-urilor. Traficul pe Internet mobil crește în fiecare an, iar pentru a procesa eficient acest trafic, trebuie să oferiți utilizatorilor site-uri receptive cu o interfață ușor de utilizat.
Motoarele de căutare utilizează o serie de criterii pentru a evalua capacitatea de răspuns a unui site web atunci când este vizualizat pe dispozitive mobile. Google încearcă să simplifice utilizarea internetului pentru proprietarii de smartphone-uri și tablete, marcând rezultatele mobile adaptate pentru dispozitive mobile site-uri cu un marcaj special prietenos cu dispozitivele mobile... Yandex are, de asemenea, un algoritm care dă preferință site-urilor cu o versiune mobilă / responsive pentru utilizatorii din căutarea mobilă.
Puteți verifica afișarea paginii pe dispozitivele mobile pe servicii și.
Orez. 1. Rezultatele căutării mobile ale Yandex și Google cu o notă despre compatibilitatea site-ului cu dispozitivele mobile Ce este aspectul receptiv
Aspectul receptiv presupune absența dungi orizontale zone de defilare și zoom atunci când sunt vizualizate pe orice dispozitiv, text care poate fi citit și zone mari pentru elementele pe care se poate face clic. Cu interogări media, puteți controla aspectul și poziția blocurilor pe pagină, reconstruind șablonul pentru a se adapta la diferite dimensiuni de ecran ale dispozitivului.
Tehnicile de bază pentru crearea unui site web responsive sunt date în articol. Pentru design receptiv lățimea containerului principal al site-ului este setată în%, în timp ce poate fi egală fie cu 100% din lățimea ferestrei browserului, fie mai puțin. Lățimea coloanelor grilei este, de asemenea, setată în %. V design receptiv lățimile containerului principal și ale coloanelor grilei sunt fixate folosind valori în px.
Tehnica de aspect fluid receptiv discutată în această lecție funcționează excelent pe un aspect cu două coloane, făcând site-ul receptiv și ușor de vizualizat pe dispozitivele mobile. Șablonul presupune un aspect diferit al conținutului principal al paginilor, în această lecție va fi analizat aspectul paginii principale.
Aspectul paginii principale
O pagină constă din trei blocuri principale: un antet (antet), un container pentru conținutul principal și bara laterală și un subsol (subsol). Vom lua 768 px și 480 px ca puncte de vârf ale designului.
La primul punct, vom ascunde meniul de sus și vom muta bara laterală sub containerul cu postări. În al doilea punct, vom schimba poziția elementelor antetului, vom anula poziționarea butoanelor rețelelor sociale în postări și vom anula înfășurarea coloanelor de subsol.
Orez. 2. Un exemplu de aspect receptiv 1. Meta-etichete și secțiune
1) Adăugați la secțiune
fișierele necesare - un link către fonturile utilizate, biblioteca jQuery și pluginul fără prefixe (pentru a nu scrie prefixele browserului pentru proprietăți):
2. Antetul paginii
În antetul paginii
logo-ul ;
butonul pentru a afișa/ascunde meniul principal
