Designul adaptiv al site-ului web este un sistem convenabil pentru afișarea aceluiași site web pe diferite tipuri de dispozitive online. În termeni simpli, aceasta este capacitatea de a vizualiza o pagină web pe un laptop, smartphone și alte gadgeturi.
Răspunsul web a devenit o necesitate de când oamenii au primit gadgeturi de diferite formate compatibile cu internet. Companiile, magazinele online și chiar și site-urile informative se străduiesc să-și mulțumească publicul, adaptându-se la acesta în toate modurile posibile. Designul receptiv rezolvă problema confortului, prin urmare este un element de lucru indispensabil.
Caracteristicile designului web responsiv
Confortul designului este caracterizat de mai multe criterii principale.
- Mărime. Designul site-ului responsive ar trebui să aibă diferențe minore la afișarea paginii pe diferite dispozitive, astfel încât dimensiunile imaginilor, textului și altor elemente vizualizate ar trebui să corespundă dimensiunilor dispozitivelor în sine. Pentru a face acest lucru, dezvoltatorii web adaptează designul astfel încât să aibă mai multe versiuni de vizualizare.
- Adaptarea conținutului. Material care umple site-ul (imagini, videoclipuriși alte elemente multimedia) trebuie să se potrivească, de asemenea, cu rezoluțiile de ecran necesare fără a pierde calitatea afișajului.
- Flexibilitate de proiectare. Includerea în dezvoltarea unor elemente care vă permit să ajustați rapid designul site-ului atunci când schimbați pagina web pe care o vizualizați. De exemplu, utilizatorul derulează pagina în sus și în jos, navighează prin diferite secțiuni sau schimbă poziția ecranului de la vertical la orizontal și invers.
- Simplificați articolele în funcție de dispozitiv pentru o mai bună utilizare.
- Ascunde blocurile neimportante pe ecranele mai mici.
Noțiuni de bază
Clădirea site-ului web este cu siguranță legată de limbajele de programare, deoarece pur și simplu nu puteți face fără ele. Folosind HTML și CSS, browserul recunoaște compoziția și ordinea obiectelor (texte, ilustrații, videoclipuri) - așa este format site-ul.
CSS este responsabil pentru culoare, stiluri, dimensiuni, fonturi, aliniamente, umplutură, elemente de fundal, forme etc. HTML este responsabil pentru conținutul și structura generală a site-ului. Astfel, o resursă web este construită în agregatul celor mai importante două metode de descriere.
CSS, pe de altă parte, este un instrument de design indispensabil. Are un set mare de funcții superioare HTML:
- Oferă coerență designului în mai multe pagini, aspectul site-ului și controlează afișarea documentelor HTML.
- Vă oferă posibilitatea de a face design și conținut în același timp.
- Aplică mai multe stiluri și abilitatea de avizionare pe diferite dispozitive.
- Ia decizii complexe de proiectare.
- Caracterizat de viteză mare.
Pentru a dezvolta un site web, trebuie să cunoașteți câteva concepte de bază.
Un selector CSS este notat prin numele unui stil care definește proprietățile și opțiunile de formatare. Spune browserului cărui element specific se aplică proprietățile.
O proprietate este o unitate structurală. Definește parametri externi (dimensiune, locație, culoare, formă etc.) și este exprimat într-un cod specific.
Există un set de proprietăți CSS definite care descriu un singur obiect în aspect și locație.
Împreună, aceste elemente formează următoarea schemă:
Selector { proprietate1: valoare; proprietate2; valoare }.
Dimensiuni și rezoluții aspect
Dezvoltarea designului începe cu pregătirea aspectului în Photoshop sau în alte programe grafice. Pentru comoditate, în pânză sunt introduse marcaje speciale ale grilei modulare, se observă indentări speciale. Astfel, web designer-ul îi arată layout-ului principiile structurării viitorului site și aranjarea corectă a elementelor web.
Rezoluții și dimensiuni de design web receptiv pentru principalele tipuri de dispozitive:
- Acest design respectă principiul începerii lucrului cu permisiunea mobilă. Aspectul pentru smartphone este creat cu dimensiunea de 460 × 960 px.
- Dimensiunea aspectului tabletei este de 768 × 1024.
- Dimensiunea notebook-ului este 1280 × 802.
- Dimensiunea PC-uluieste 1600 × 992.
În versiunea mobilă a site-uluiar trebui să fie cât mai simplificat posibil, păstrând în același timp toate funcțiile principale. Dacă se pregătește layout-ul pentru un magazin online, cu toată simplificarea utilizată, acesta ar trebui să aibă o descriere principală, un catalog de produse, o opțiune de comandă, un coș de cumpărături etc. - toate elementele necesare pentru funcționarea completă, ca și în cazul vizionarii în format complet pe un computer. Comoditatea versiunii mobile este că aici puteți evita paginile suplimentare pentru a economisi timp la încărcare.
În conținutul adaptiv, folosind codul html, puteți ascunde unele elemente care nu sunt cu adevărat necesare. De exemplu, la rezoluție în altă, site-ul afișează un card de produs cu descrierea, prețul, informațiile de livrare și posibilitatea de a adăuga la „Coș”. În rezoluția mobilă, procesul este simplificat la o fotografie, un preț și un buton de cumpărare.
Rezoluțiile medii și minime pentru design responsive ar trebui să țină cont de ușurința de citire și vizualizare de către utilizator.
Layout
Scopul designului adaptiv este de a crea un aspect flexibil sau, după cum se obișnuiește să se spună: „șablon de cauciuc”. Linia de jos nu este în dimensiuni de pagină cu o singură cifră, ci în compresibilitatea proporțională a șablonului pentru vizualizare ușoară pe toate dispozitivele.
Este construit în principal pe CSS. În timpul dezvoltării, sunt determinate punctele de control ale dimensiunilor ecranului. Astfel, se determină lățimea obiectelor rămase. Pentru a face acest lucru, lățimea paginii este setată de proprietatea css max-width, în funcție de aceste criterii, dimensiunea altor elemente este selectată ca procent. De exemplu, dimensiunea blocului pe principalpagina este de 600 px, iar lățimea blocului barei laterale (bara laterală a site-ului) este de 400 px, respectiv lățimea conținutului va fi de 60%, iar lățimea barei laterale de 40%.
Există mai multe tipuri de machete receptive. Fiecare este selectat individual, în funcție de caracteristici și construcție.
Vizualizări:
- Un tip de aspect care permite blocurilor să se înfășoare atunci când rezoluția ecranului este redusă. Pe site-urile cu mai multe coloane, blocurile suplimentare sunt mutate în partea de jos a ecranului.
- Când se elaborează un model separat pentru fiecare permisiune. Acest tip de design receptiv durează mai mult, dar este cel mai lizibil.
- Un tip simplu de design care are ca scop scalarea tuturor elementelor. Nu este flexibil.
- Tipul de panou este convenabil pentru utilizare în aplicațiile mobile, când apar funcții suplimentare la schimbarea poziției ecranului în sine.
Crearea de straturi receptive este doar o parte a sarcinii. Imaginile adaptive sunt un caz separat, care are propriile probleme și metode de rezolvare a acestora.
O singură imagine trebuie să fie afișată clar la diferite rezoluții ale ecranului. Există o problemă aici - cum să vă asigurați că imaginea rămâne întotdeauna aceeași, indiferent de modificarea rezoluției. Introducerea unui cod CSS simplu în acest caz nu va fi suficientă.
Exemplu: img {max-width: 250px;} - aici ar trebui să aplicați o metodă în care dimensiunea containerului care conține imaginea este limitată, și nu imaginea în sine. Va arăta cam așa: div img {max-width: 250px;}. Această metodă rezolvă problemaaspectul imaginilor mici, dar nu este potrivit pentru ilustrații mari.
De aceea, mulți dezvoltatori preferă să folosească limbaje javascript care vă permit să adaptați orice imagine fără a supraîncărca serverul. Javascript oferă un număr mare de scripturi alternative.
Pro și dezavantaje ale aspectului receptiv
Pozitive:
- Salvați locația tuturor elementelor. Acest lucru este convenabil atunci când utilizatorul este obișnuit cu versiunea completă a site-ului.
- Salvați domenii și adrese.
- Personalizare completă pentru alte formate de permisiuni.
Negative:
- Flexibilitatea funcțională este pierdută
- Orice supraîncărcare informativă este plină de lansarea îndelungată a unei resurse web, care obligă mulți utilizatori să treacă la opțiuni mai rapide.
Crearea unui site web
Structura site-ului este împărțită în mai multe secțiuni și blocuri. În mod tradițional, aspectul constă din partea de sus a site-ului (antet), logo, meniu, bloc de conținut și partea finală a site-ului (de exemplu, informații detaliate de contact). Să vedem cum să creăm un site web receptiv dintr-un șablon simplu.
Etichete auxiliare pentru scriere:
- wrapper - etichetă care combină toate elementele șablonului;
- header h1 - logo;
- header - antet pentru meniu și alte elemente importante;
- conținut - blocare;
- colLeft - dimensiunea conținutului;
- colDreapta - bară laterală (coloana laterală);
- footer - partea finală a site-ului;
- ecran media - seturirezoluția dorită.
La scrierea unui site, aceste elemente se pot muta într-o ordine diferită, în funcție de nevoie. De exemplu, la rezoluții mari, meniul poate fi afișat vertical. În versiunea mobilă, aspectul poate fi construit în așa fel încât meniul să alunece într-o poziție orizontală.
- port de vizualizare - o etichetă care vă permite să salvați dimensiunea textului într-o versiune mai mică a designului. Este situat între etichetele.
- max-width - pentru a optimiza site-ul pentru a evita întinderea la rezoluții de peste 1000 de pixeli.
La implementarea aspectului, biblioteca jQuery ajută foarte mult atunci când trebuie să schimbați stilul și structura blocurilor.
Care este diferența dintre designul receptiv și cel mobil
Pentru o înțelegere completă, luați în considerare câteva exemple ilustrative, deoarece confuzia dintre aceste două concepte nu este neobișnuită.
Trebuie să înțelegeți că versiunea mobilă este un analog al site-ului principal cu un subdomeniu. Prezentarea externă a site-ului repetă complet stilul și funcționalitatea, în timp ce structura și conținutul acestuia pot diferi de versiunea principală, deoarece versiunea este redusă la elementele necesare.
Designul receptiv este optim pentru toate rezoluțiile dispozitivului. Este scalabil și se redă corect, indiferent de condițiile de vizualizare.
Acestea sunt două prezentări diferite ale site-ului, în jurul cărora se dispută neobosit care este mai bună. Trebuie remarcat că încă nu s-a luat o decizie definitivă. Cineva laudă acest design, subliniind tendința modei și o mulțime de avantaje. Versiunea mobilă are și câteva avantaje pe care designul responsive nu le are. Prin urmare, pentru început, ar trebui să înțelegeți nevoile de bază.
Beneficii
Cum este designul receptiv mai bun decât mobilul?
Versatilitate. În vremea noastră, cu o creștere atât de frenetică a pieței, este pur și simplu necesar să prezentăm informațiile într-un mod diferit, satisfacând dorințele consumatorilor. Designul receptiv rezolvă această problemă.
Promovare eficientă în motoarele de căutare. Ceea ce nu poate fi atribuit principalelor avantaje ale unui dispozitiv adaptiv. Motoarele de căutare preferă să ofere utilizatorilor site-uri web receptive.
Utilitate. Designul responsive este de obicei conceput în cele mai bune soluții de design, ceea ce este un cadou frumos pentru percepția vizuală a utilizatorilor.
Ușurință și simplitate atât în implementarea proiectului, cât și în utilizarea acestuia.
Rate de conversie bune. Deoarece cu designul adaptiv există mai multe oportunități de afișare, conversia în sine crește.
Economie. Este relativ mai ieftin decât crearea și promovarea unei versiuni mobile separate.
Pro și dezavantaje ale versiunii mobile
Crearea unui design mobil receptiv necesită versatilitate și consecvență. În primul rând, se recomandă să scrieți termenii de referință în detaliu, ceea ce, desigur, va ajuta la evitarea lucrărilor inutile și la economisirea timpului, precum și la luarea în considerare a caracteristicilor serverului pe care va fi găzduit site-ul..
Există anumite avantaje și dezavantaje la designul mobil receptiv.
Pro:
- Dacă aveți un site gata făcut, nu este nevoie să dezvoltați un design pentru versiunea mobilă de la zero. Pot fi făcute doar câteva modificări, eliberând acest aspect de funcționalitatea nenecesară.
- Datorită a tot felul de simplificări, versiunea mobilă este considerată mai rapidă la descărcare.
- Utilizatorul vede cea mai importantă informație din tot conținutul.
- Implementare rapidă. Există plugin-uri cu care poți implementa adaptarea mobilă, chiar dacă nu cunoști etichete și coduri.
- Olecțiile pentru motorul de căutare favorizează versiunile adaptive, deoarece analizează necesită mai puțin timp.
Contra:
- Nu toate versiunile mobile pot corespunde rezoluțiilor dispozitivelor mobile. Site-ul, desigur, se va deschide, dar rezoluția ecranului nu se potrivește întotdeauna cu aspectul. Uneori, un design de smartphone bine conceput poate arăta diferit atunci când este deschis ca tabletă.
- Versiunile mobile necesită domenii separate plătite.
- Există câteva probleme minore la postarea conținutului. Dacă există mai multe versiuni simultan, conținutul trebuie ajustat pentru toate formatele simultan. Trimiterea de material nou pe site-ul principal și copierea acestuia în versiunea mobilă poate fi considerată furt. Pentru a evita această problemă, poate fi necesar să dovediți conexiunea resurselor.
Metode de implementare
Metode principale de implementare:
- După crearea designului machetelor și aspectului, acesta este încărcat la dimensiunile necesare folosindsite-ul operatorului și codul principal. Aceasta este o metodă clasică folosită la crearea versiunilor medii și mici (tablete, smartphone-uri etc.).
- BootStrap este un set simplu și clar de instrumente de adaptare. Potrivit pentru crearea de versiuni pentru Landing Page și alte proiecte web nu foarte complexe. Oferă o bună oportunitate de a aplica multe stiluri diferite în funcțiile de interfață.
- Responsive Grid System este un set popular de instrumente versatile. Ușor de aplicat și nu necesită cunoștințe profunde. Include o mare varietate de infografice.
- GUMBY - Un cadru CSS care se mândrește cu o capacitate de răspuns flexibilă și unelte excelente.
- Cookies - vă permite să implementați imagini receptive. Însoțește automat fișierele solicitate de browser.
- ExpressionEngine este o altă modalitate de a crea imagini receptive. Stabilește dacă dispozitivul este mobil, capabil să modifice imaginile la rezoluția necesară.
- ProtoFluid - Oferă prototipare rapidă. Potrivit pentru toate tipurile de dispozitive.
