Meniu
AcasăCuvânt

Aspect adaptiv: ce este și cum se folosește. Reglarea rezoluției ecranului. Cerințe de design receptiv

Salutare tuturor! Recent, uitându-mă la statisticile unuia dintre proiectele mele, mi-am dat seama că era timpul să învăț cum să creez un design adaptiv de site web, adică un design care să arate bine atât pe computere desktop și laptopuri, cât și pe dispozitive mobile. Aruncă o privire pentru tine, sugerează Metrica.

Cum iti place aceasta poza? Poate că în unele subiecte procentul de trafic mobil va fi mai mic, în altele mai mult, dar în orice caz, nu mai poți ignora vizitatorii care te citesc de pe un smartphone sau tabletă.

Știți cum văd utilizatorii de dispozitive mobile site-ul dvs. web? Din fericire, există o modalitate de a verifica serviciu excelent— responsinator.com

Totul aici este revoltător de simplu - introduci adresa site-ului și vezi cum arată pe dispozitivele mobile. Să luăm un exemplu de blog cu care probabil toată lumea este familiarizată.


La Alexandru Borisov frumos șablon, este imediat evident că s-au investit mulți bani în design și aspect. Totuși, citirea unui blog de pe telefon este foarte incomod și nu m-aș mira dacă rata de eșec în rândul utilizatorilor de dispozitive mobile este mult mai mare decât în ​​rândul celor care accesează site-ul de pe computer.

Ce să fac? Există două căi de ieșire: lăsați totul așa cum este și urmăriți cum alte proiecte ocolesc pe ale dvs. în rezultatele căutării. motoarele de căutare sau faceți designul site-ului dvs. web receptiv.

Ce este designul responsive

La început, nu am văzut diferența dintre aspectul adaptiv și cel „fluid”, când dimensiunile blocurilor se modifică în funcție de lățimea ecranului. Cu toate acestea, există o diferență.

Designul responsive nu doar se întinde sau se micșorează în lățime, se adaptează la dimensiunea ecranului, schimbând uneori complet stilul blocurilor.

Cel mai simplu exemplu: zona de conținut este întinsă pe toată lățimea ecranului, iar bara laterală fie este mutată în jos, fie dispare complet din pagină. Sau meniul se transformă dintr-unul obișnuit orizontal într-o listă derulantă.

Cum să faci un design responsive pentru site-ul tău

În funcție de bugetul dvs. și de cunoștințele CSS/HTML, pot exista mai multe opțiuni.

Comanda aspect adaptiv de la un freelancer

Opțiunea cea mai corectă, după părerea mea, este și cea mai nepopulară. Pentru că plăcerea nu este ieftină. Și totuși, dacă fondurile permit și nu există dorința de a înțelege complexitățile aspectului, este mai bine să găsești un studio sau un freelancer care să-ți adapteze șablonul pentru dispozitive mobile sau să creeze unul nou. Și știți deja să verificați funcționarea acestuia pe dispozitive cu rezoluții diferite - responsinator.com vă poate ajuta.

Găsiți un design gata făcut

ÎN în ultima vreme Aproape toți designerii încearcă să-și adapteze șabloanele pentru dispozitivele mobile. Puteți căuta un design gata făcut, de exemplu, aici:

  • www.templatemonster.com este una dintre cele mai populare colecții de șabloane plătite pentru diverse CMS și doar site-uri HTML.
  • www.templatemo.com - multe opțiuni gratuite design modern.

Această opțiune este potrivită pentru cei care nu urmăresc un design exclusiv sau care pot face propriile modificări codului pentru a face șablonul unic.

Utilizați cadre

Cadrul - s-ar putea spune, cadrul șablonului, fișierele sale principale și o grilă de blocuri. Designerii le iubesc pentru ușurința în utilizare și economisirea de timp, deoarece un șablon „pește” gata făcut vă permite să nu pierdeți timpul cu rutină. Dacă știți să lucrați cu cadre, folosirea acestora pentru a crea un design responsive este o soluție excelentă.

Veți găsi o listă uriașă de cadre adaptive pentru toate gusturile pe Habré. Dar cele mai multe dintre ele sunt destul de greu de folosit și grele ca volum. Prin urmare, pentru cei care iubesc minimalismul, recomand o altă listă de cadre adaptive ușoare de la Beloweb.ru. În același timp, aruncați o privire mai atentă pe blog, există o mulțime de „bunătăți” utile pentru designeri și designeri de layout.

Faceți singur aspectul

Această metodă este pentru cei care nu caută modalități ușoare și doresc să-și dea seama singuri. În esență, pentru ca șablonul să fie receptiv, trebuie să utilizați două lucruri:

Metaetichetă Viewport
Care determină tipul de dispozitiv de pe care vizitatorul a accesat site-ul și setează lățimea corectă a ecranului. Doar copiați acest cod în capul site-ului dvs.

@regula media
Datorită cărora putem scrie stiluri diferite pentru aceleași blocuri din fișierul dvs. css. Arata cam asa:

#left( lățime: 600px; float: stânga; margin-right: 10px; ) #right( lățime: 400px; float: dreapta; ) Ecran numai pentru media și (max-width: 1010px)( #stânga, #right( lățime : 98% float: nici o marjă: 10px;

În acest exemplu, blocul #stânga are 600 de pixeli lățime și va fi poziționat la stânga blocului #dreapta de 400 de pixeli. Dar dacă rezoluția monitorului este mai mică de 1010 pixeli, scoatem ambalajul din ambele blocuri și le întindem la 98% din lățimea ecranului.

Și așa trebuie să scrieți reguli pentru următoarele dimensiuni de ecran:

  • 320px pentru iPhone 3-5 în poziție verticală
  • 480px pentru iPhone 3-4 în poziție orizontală
  • 568px pentru iPhone 5 pe orizontală
  • 384px pentru smartphone în poziție verticală
  • 600px pentru smartphone în poziție orizontală
  • 768px pentru iPad pe orizontală
  • 1024px pentru iPad în poziție verticală

O listă completă de rezoluții poate fi găsită pe responsinator.com sau în raportul Yandex.Metrica pentru site-ul dvs. (secțiunea Tehnologii/Rezoluții afișare). Într-un cuvânt, nu va fi dificil pentru cei care sunt familiarizați cu aspectul site-ului web să înțeleagă această problemă.

Știi, rareori dau link-uri către cursuri plătite(pentru că nu recomand niciodată ceva pe care nu l-am folosit niciodată), dar acesta este cu adevărat cel mai bun material de instruire pe care l-am urmărit vreodată. Datorită lui Mikhail, șablonul meu de blog este acum nu numai adaptat la diferite rezoluții de ecran, ci a devenit mai ușor decât versiunea anterioară și este mai bine optimizat pentru motoarele de căutare.

Apropo, dacă citiți articolul de pe telefonul mobil, scrieți dacă totul este la locul lui, este totul convenabil? Asta e tot pentru azi. Dacă aveți întrebări sau completări, bine ați venit la comentarii, ca întotdeauna, sunt deschise tuturor.

Astăzi, majoritatea oamenilor accesează Internetul prin intermediul gadgeturi mobile- tablete, telefoane, in acest sens, optimizarea site-ului include si nou nivel. Dacă intră un utilizator și vede că site-ul nu este optimizat pentru dispozitive mobile: imaginea nu poate fi vizualizată, butoanele s-au mutat, fonturile sunt mici și imposibil de citit, designul este denaturat - 99 din 100% pe care îl va părăsi și începeți să căutați altul mai convenabil. Și va bifa caseta că resursa este irelevantă, adică nu corespunde interogării de căutare. Prin urmare, designul paginii trebuie adaptat la diverse dispozitive mobile. Ce este o versiune mobilă a unui site web, cum se realizează și care este cea mai bună metodă de utilizat? Citiți mai multe în acest articol.

Deci sunt patru căi cheie adapta site-ul la versiunea mobilă.

Metoda unu - design receptiv

Șabloanele adaptive implică schimbarea imaginii site-ului web în funcție de dimensiunea ecranului. De regulă, acestea sunt setate la 1600, 1500, 1280, 1100, 1024 și 980 pixeli standard. Interogările sunt folosite pentru implementare. Nu se schimba singur.

Avantajele acestei metode includ:

  • dezvoltare convenabilă, deoarece structura în sine se adaptează la parametrii ecranului și orice actualizare nu necesită dezvoltarea unui design de la zero, este suficient să corectați CSS și HTML;
  • unul adresa URL- utilizatorul nu trebuie să-și amintească mai multe nume, nu este nevoie de o redirecționare (redirecționare de la o adresă la alta), ceea ce poate complica munca unui webmaster și este mai ușor pentru un motor de căutare să sorteze și să clasifice o resursă cu o singură adresă.

Desigur, șabloanele adaptive au și dezavantajele lor, care, apropo, depășesc avantajele lor. Cu toate acestea, mulți dezvoltatori aderă la acest concept special, de exemplu, Google Corporation, a cărei versiune mobilă a site-ului are un design responsive. Deci, dezavantajele:

  • Designul responsive nu acceptă aceleași sarcini pe un dispozitiv mobil ca pe un desktop. Dacă aceasta este, de exemplu, o versiune mobilă a site-ului web al unei bănci, unde utilizatorul va avea cel mai probabil nevoie de informații despre cursurile de schimb sau bancomatele din apropiere, atunci acest design este destul de suficient. Dar dacă este o resursă structurată complexă, cu multe secțiuni și subsecțiuni, atunci este puțin probabil să atragă vizitatorii.
  • Încărcarea lentă transformă site-ul tău preferat într-unul urât. Acest lucru este valabil mai ales pentru resursele în care există o abundență de animații, videoclipuri, ferestre pop-up și altele. elemente active. Datorită greutății mari, pagina pur și simplu va „încetini”, utilizatorul se va enerva și va pleca și căutarea pozițiilor site - a cădea.
  • Incapacitatea de a dezactiva versiunea mobilă este un alt dezavantaj semnificativ. Dacă un element este ascuns de un astfel de aspect, nu puteți face nimic pentru a-l deschide, spre deosebire de site-urile unde îl puteți dezactiva și trece la un domeniu obișnuit.

Cu toate acestea, o astfel de versiune mobilă a site-ului rapid, fără abilități și costuri speciale, vă permite să adaptați resursa la orice gadget. Dar, având în vedere deficiențele enumerate, este potrivit pentru resurse mici, simple, cu un minim de informații și multimedia, fără navigare dificilăși animație. Pentru un site complex sunt potrivite alte 2 metode.

Metoda a doua - o versiune separată a site-ului

Această metodă este foarte comună și adesea face un site mai ușor de utilizat pe un dispozitiv mobil. Esența sa este de a crea o versiune separată a paginii, concepută pentru aplicație și situată pe un URL sau subdomeniu separat, de exemplu, m.vk.com. În același timp, funcționalitatea principală este păstrată, designul site-ului pur și simplu arată diferit. Avantajele acestei metode sunt evidente:

  • interfață de utilizator convenabilă;
  • este ușor să schimbați și să faceți modificări, deoarece versiunea există separat de resursa principală;
  • datorită greutății sale reduse, o versiune separată a site-ului funcționează mult mai rapid decât un șablon adaptiv;
  • Cel mai adesea este posibilă trecerea la versiunea principală a paginii de pe cea mobilă.

Dar acest lucru nu este lipsit de dezavantajele sale:

  • Mai multe adrese - versiuni desktop și mobile ale site-ului. Cum să faci utilizatorul să-și amintească două opțiuni? Webmasterii transferă adesea din versiunea desktop în versiunea mobilă, dar dacă această pagină nu există în versiunea mobilă, utilizatorul va primi o eroare. Aici apar dificultăți cu motoarele de căutare, cărora le este greu să clasifice 2 resurse identice, iar acest lucru afectează direct promovarea.
  • Versiunea mobilă a site-ului de pe computer, dacă un utilizator o accesează din greșeală, va arăta ridicol, ceea ce poate afecta și traficul.
  • Această versiune este adesea foarte redusă, desktop, astfel încât utilizatorul va primi funcționalități foarte limitate. Dar, în același timp, dacă ceva lipsește, vizitatorul poate merge la versiunea completă pagini.

În general, un site mobil separat se justifică și este cel mai comun mod de a adapta o resursă pentru dispozitive mobile. El este popular printre marile magazine online, de exemplu, Amazon.

A treia cale este proiectarea RESS

Motorul de căutare Google sprijină în mod activ această direcție a designului mobil. Acesta este cel mai dificil, mai costisitor, dar metoda eficienta adaptați site-ul pentru telefon sau tabletă. Se numește RESS. Aceasta vizează o resursă într-o aplicație mobilă care poate fi descărcată pentru fiecare dispozitiv separat. Pentru Android - de pe GooglePlay și pentru Apple - de pe iTunes.

Astfel de aplicații sunt rapide, gratuite, convenabile și au capacitatea de a găzdui diverse tipuri informații, în timp ce memoria telefonului și traficul pe Internet nu sunt consumate la fel de mult ca atunci când vizitați un site prin intermediul unui browser. Ele sunt ușor de accesat, deoarece linkul va fi întotdeauna pe ecranul la îndemână și nu este nevoie să introduceți un nume complex în bara de adrese browser.

Desigur, aici există și dezavantaje, cum ar fi complexitatea dezvoltării, costurile ridicate ale forței de muncă număr mare programatori, necesitatea de a face mai multe opțiuni de aspect. Uneori, dispozitivul mobil nu este recunoscut de aplicație. Sunt necesare suport tehnic regulat și remedieri de erori. Cu toate acestea, această opțiune este considerată cea mai bună dintre cele trei propuse datorită funcționării productive, neîntrerupte.

Cele mai multe mod ieftin faceți un site web mobil

Toate metodele de mai sus necesită muncă, deși nu întotdeauna lungă și complexă, dar încă plătită pentru webmaster. Dacă nu vedeți o nevoie urgentă pentru o astfel de dezvoltare, o versiune mobilă simplă și gratuită a site-ului vi se va potrivi. Care este cel mai simplu mod de a o face?

Descărcați șabloane speciale (plugin-uri) pentru design responsive. De exemplu, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile și altele. Ele vă vor ajuta să afișați mai corect site-ul pe telefon și veți primi mai multe sfaturi despre ce ar trebui corectat pentru a adapta mai bine pagina la versiunea mobilă.

Cu siguranţă, această metodă greu potrivit pentru resurse serioase. Mai degrabă, este oportunitate gratuită Destinat site-urilor mici și simple, blogurilor, fluxurilor de știri. De asemenea, nu ar trebui să uităm asta motor de căutare Google, ca și Yandex, astăzi impune cerințe serioase pentru versiunile mobile, așa că există o șansă mare de a vă reduce poziția folosind această metodă.

Cu această metodă, cel mai probabil, reclamele și bannerele pop-up vor fi tăiate, dar pagina se va încărca rapid și fără întârzieri.

Principii de creare a versiunilor mobile

Nu contează dacă versiunea mobilă a site-ului a fost creată gratuit sau cu ajutorul unui staff de webmasteri, dacă a fost realizată folosind sistemul RESS sau folosind un șablon adaptiv. Cel mai important lucru este că, pentru ca acesta să funcționeze eficient, trebuie să respectați câteva extrem de multe principii importante. Deci, cum ar trebui să fie versiunea mobilă a site-ului? Cum să-l faci productiv, eficient și productiv?

Îndepărtăm tot ce nu este necesar

Minimalismul este ceea ce ar trebui să încerce un dezvoltator al unei versiuni mobile a unui site web. Imaginați-vă cât de dificil este să percepeți informații pline de culori, butoane, bannere și pe care trebuie să le parcurgeți la nesfârșit în căutarea materialul necesar. Designul mobil ar trebui să fie simplu și curat. Alegeți 2-3 culori pentru a împărți spațiul (de exemplu, culori de marcă). Este mai bine dacă unul dintre ele este alb. Împărțiți spațiul mic de pe ecran în zone clare și lizibile. Cheile virtuale trebuie să fie vizibile pentru ca utilizatorul să știe clar unde să apese și să vadă - aici este produsul, aici este formularul de completare a datelor, aici sunt informațiile despre livrare și plată.

Toate opțiuni suplimentare, care ar fi util în versiunea desktop și ar face viața mai ușoară utilizatorului, nu va aduce decât complicații aici. Lăsați doar elementele cele mai importante. Animaţie, bannere publicitare, multimedia va încetini cel mai probabil funcționarea site-ului sau a aplicației și va distrage atenția de la lucrul principal.

Aliniere

Problema alinierii nu este mai puțin presantă, deoarece dacă este făcută incorect, utilizatorul va primi doar terminațiile cuvintelor importante. În general, este acceptat să se alinieze stânga și vertical. Imaginați-vă că defilați flux de știri la telefon. Faceți acest lucru de sus în jos, dar nu la stânga sau la dreapta.

Asociere

Când nu există posibilitatea unui lanț lung de tranziții, încercați să combinați mai mulți pași într-unul singur. De exemplu, un site necesită introducerea datelor în mai multe etape - un nume, apoi o adresă, unde în fiecare celulă individuală există o casă separată, stradă, apartament etc. Pentru a nu forța utilizatorul să încerce să intre în multe mici celule, cereți-i să completeze doar 2 - numele și adresa.

Și deconectare

Uneori, dimpotrivă, este necesară și deconectarea număr mare informaţii. De exemplu, în meniul derulant aveți o listă cu peste 80 de orașe în care se efectuează livrarea. Grupați-le după regiune, astfel încât utilizatorul să nu fie nevoit să defileze prin această listă imensă. Când mută cursorul peste un centru regional sau regiune, va apărea o altă listă de orașe.

Liste

Apropo, despre liste. Există două dintre ele - fixate în ordine alfabetică sau altă ordine și cu substituție. Alegerea lor depinde de ceea ce va fi listat.

Fixed este convenabil dacă utilizatorul știe exact ce caută. De exemplu, orașul, numărul sau data. A doua opțiune este potrivită pentru nume lungi, complexe sau pentru cazurile în care există multe variații ale aceluiași nume, iar fiecare aduce utilizatorul cu un pas mai aproape de obiectiv. Opțiunea de înlocuire automată este folosită mai des atunci când un vizitator are nevoie de ajutor. De exemplu, un site web de tricotat oferă să cumpere ace de tricotat. Utilizatorul intră interogare de căutare„Ace de tricotat din metal”, dar în sfatul instrumentului vede „ace de tricotat de 5 mm”, „ace de tricotat de 4,5 mm”, etc.

Completare automată

Acest punct se aplică în special site-urilor unde vând ceva online și trebuie să completați formulare standard pentru plată, livrare etc. Dacă o persoană face o achiziție de pe telefonul său, atunci cel mai probabil nu are timp să ajungă la computer , ceea ce înseamnă că procesul de achiziție trebuie făcut cât mai rapid și convenabil posibil.

Pentru a face acest lucru, formularele pot conține date deja completate, puteți apela la cele mai populare răspunsuri. De exemplu, introduceți data de astăzi, metoda de plată în numerar, orașul, dacă lucrați în aceeași regiune. Ele pot fi modificate, dar dacă atingeți ținta, timpul utilizatorului va fi salvat.

Totul se citește, totul se vede

Când creați designul versiunii mobile a site-ului, amintiți-vă că telefonul fiecăruia este diferit, la fel și viziunea lor. Site-ul dvs. poate fi vizualizat pe un ecran mic, astfel încât fonturile ar trebui să fie simple și lizibile, butoanele ar trebui să fie suficient de mari pentru a face clic fără a fi duse la o altă pagină, iar imaginile ar trebui să se deschidă separat și mari, mai ales când vine vorba de Internet. magazin.

Câteva statistici

Când vorbim despre adaptarea unui site web la dispozitivele mobile, nu se poate să nu recurgă la statistici pentru a înțelege cât de important este acest proces pentru promovarea online.

Numerele sunt după cum urmează. Astăzi, 87% din populație folosește gadgeturi, aparent cu excepția celor mai mici copii și a unor persoane în vârstă. Economiștii prevăd că comerțul mobil va crește de 100 de ori în următorii 5 ani. Cu toate acestea, doar 21% dintre site-uri sunt adaptate să funcționeze cu dispozitive mobile. Aceasta înseamnă că traficul de internet și piața e-commerce Doar o mică parte a 5-a este ocupată.

Gândește-te la aceste numere. Are sens să vă adaptați resursa? Desigur că da. Mai mult, în timp ce sunt atât de multe spatiu liber pe această piață, vă puteți lua propriul segment în ea.

Unde este nevoie de versiunea mobilă?

Utilizarea versiunii mobile este recomandabilă pentru orice platformă care urmărește să obțină un rating ridicat. La urma urmei, acesta este un impact direct asupra utilizatorului, creând condiții confortabile pentru ca acesta să rămână pe site-ul tău.

Următoarele nu pot exista fără o versiune mobilă:

  • portaluri de știri, deoarece acestea sunt ceea ce majoritatea oamenilor văd de pe telefoanele lor în drum spre serviciu sau școală;
  • rețelele sociale - din același motiv, plus că există și factorul comunicării online, ceea ce înseamnă că pentru aceasta trebuie creat un chat convenabil, ușor de înțeles;
  • cărți de referință, site-uri cu navigare etc., unde oamenii se întorc când caută ceva;
  • Magazinele online sunt o oportunitate de a atrage clienți care nu pierd timpul la cumpărături, ci cumpără totul prin internetul mobil.
În loc de o concluzie

Astăzi, tehnologiile mobile se află într-o etapă de creștere și dezvoltare activă, prin urmare, luptă pentru leadership pe piață, orice companie trebuie să se asigure că resursa sa de Internet îndeplinește cerințele. Datorită cererilor tot mai mari ale utilizatorilor, site-urile web trebuie să fie permanent modernizate și adaptate pentru diferite dispozitive. Este clar că, dacă o persoană este incomod să fie pe o anumită resursă, nu poate obține informații despre un produs sau preț acolo, să plaseze o comandă, să afle despre livrare, atunci va găsi site-ul unde toate acestea vor deveni posibile. Prin urmare, pentru a câștiga concurenţă, este important să aveți o resursă flexibilă, convenabilă, funcțională și interesantă.

Versiunea mobilă a site-ului Android sau iOS vă va ajuta să faceți acest lucru. Pentru a face acest lucru, trebuie să alegeți una dintre metodele de reproiectare de mai sus - un șablon adaptiv, creând un site nou pe un subdomeniu și trecerea la acesta prin redirecționare, folosind șabloane gratuite sau creație aplicație mobilă, cu care utilizatorul poate intra și rămâne mai comod pe pagină.

Termeni precum design receptiv și adaptiv au fost folosiți destul de des în ultima vreme. După cum se dovedește, pentru unii oameni aceste două concepte sunt aproape identice. În acest articol vom vorbi despre ce este designul receptiv și adaptiv și care este diferența dintre ele.

Începând din clipă tablete iar smartphone-urile au devenit disponibile publicului larg, site-urile web sunt din ce în ce mai vizualizate folosind dispozitive controlate prin atingere cu ecrane mici. Multe resurse de internet s-au dovedit a fi complet nepotrivite pentru utilizarea de către proprietarii unor astfel de dispozitive.
Au apărut două abordări fundamental diferite pentru a crea site-uri web pentru dispozitive mobile: design web adaptiv și design web responsiv. Să ne uităm la fiecare dintre ele separat, apoi să le comparăm aplicațiile și caracteristicile.

Ce s-a întâmplat design receptiv

Designul web responsiv (RWD) este o abordare a designului în care un site web este conceput pentru a fi cât mai ușor de utilizat: vizualizare convenabilă site web cu un minim de redimensionări și derulare inutilă - pe cea mai largă gamă de dispozitive. Designul responsive are următoarele caracteristici:

  • Când creați un design responsive, sunt folosite doar HTML și CSS - fără conexiuni JavaScript pentru a determina „sensibilitatea” elementelor de design.
  • Aspectul receptiv determină modul în care vor arăta elementele site-ului diferite dispozitive Oh; totuși, aceste elemente nu sunt ascunse/înlocuite de altele, iar comportamentul lor, precum și funcțiile pe care le îndeplinesc, nu se modifică.
  • Trei principii de bază ale designului receptiv:
  • aranjarea tuturor elementelor în cadrul rețelei modulare;
  • toate elementele de aspect și fișierele media (inclusiv imaginile) sunt „flexibile” - dimensiunile lor depind de dimensiunea ecranului;
  • lucrul cu interogări media - un modul CSS3 care vă permite să setați diferite stiluri (sau chiar foi de stil) în funcție de rezoluția ecranului, dimensiunea acestuia și alte caracteristici.
  • Designul responsive este creat folosind un marcaj responsive (a nu fi confundat cu designul responsive). Aspectul adaptiv înseamnă că pe site sunt create mai multe stiluri, opțiuni pentru aranjarea elementelor pe o grilă modulară și mai multe opțiuni pentru stiluri de elemente de design. Aceste opțiuni se înlocuiesc reciproc pe măsură ce dimensiunea ecranului se modifică și se formează anumite puncte de tranziție între diferite tipuri de aspect/stiluri de site.
  • Designul responsive nu implică lucrul cu model de obiect elementele din pagină nu implică o modificare a ierarhiei/imbricarea blocurilor și obiectelor atunci când se modifică tipul de marcare.
Ce este designul responsive

Designul web adaptiv (AWD) este un design care manipulează diferite aspecte sau aspecte ale site-ului pentru a asigura cea mai bună utilizare pe dispozitive și rezoluții de ecran specifice, predeterminate.

  • În cazul designului adaptiv, elementele site-ului pot fi ascunse și înlocuite cu altele; Comportamentul și funcționalitatea elementelor individuale ale site-ului web se pot modifica.
  • Designul responsive folosește pe scară largă JavaScript pentru a controla comportamentul și funcționalitatea obiectelor de pe un site.
  • Designul adaptiv necesită lucrul cu modelul obiect al elementelor de pe pagină și implică schimbarea ierarhiei/imbricarea acestora pe diferite dispozitive.
  • Nu este obligatoriu să se asigure același aspect al site-ului și funcționalitatea acestuia în browsere diferite. Este posibil să se utilizeze tehnologii noi care nu sunt acceptate de versiuni mai vechi de programe - deoarece designul, așa cum sa menționat mai sus, este adaptat anumitor tipuri de dispozitive.
Definiție confuzie

În RuNet, conceptele de design receptiv și adaptiv sunt aproape identice între ele. Merită să înțelegem că aceste abordări diferă în primul rând în sarcinile pentru care sunt utilizate.

Markupul receptiv și designul receptiv sunt lucruri complet diferite. Aspectul adaptiv al site-ului implică schimbarea stilurilor elementelor pe diferite dispozitive și este utilizat în designul responsive. Designul adaptiv este o abordare separată pentru proiectarea și crearea front-end-ului site-urilor web.

Caracteristicile abordărilor

Unele aspecte importante, în ceea ce privește modelele receptive și adaptive sunt radical diferite:
Viteza site-ului. Un site creat conform principiilor designului adaptiv se poate încărca de câteva ori mai repede, deoarece utilizatorul va trebui să descarce de pe server doar acele părți ale designului care sunt necesare pentru ca site-ul să funcționeze pe dispozitivul său. În cazul designului responsive, utilizatorul va fi obligat să aștepte până când toate stilurile și imaginile sunt încărcate, indiferent de dispozitivul pe care îl folosește vizitatorul.
Complexitatea dezvoltării. Crearea unui site web cu design adaptiv necesită un nivel profesional superior din partea dezvoltatorului. În special, experiență solidă cu JavaScript.
Aspectul SEO. Se zvonește că Google acceptă mult mai mult site-urile web receptive decât cele adaptive.

În practică

În practică, designul responsiv este destul de comun, spre deosebire de designul adaptiv. Ceea ce este evident: la urma urmei, primul este mai ușor de implementat și de stăpânit Majoritatea șabloanelor care sunt vândute pe piețe sunt receptive, nu adaptive.
Designul adaptiv este folosit mai des în produsele serioase și multifuncționale. Cele mai evidente exemple: în versiunea mobilă a rețelei VKontakte, e-mail de la Google.

P.S.

Dacă acordați atenție, veți observa că aspectul site-ului nostru este un exemplu de design responsive. Pentru a verifica acest lucru, pe computer, încercați să schimbați lățimea ferestrei browser - și veți observa cum stilul de aspect al site-ului se transformă treptat, transformându-se într-o vizualizare mobilă.

Mai recent, cu 10 ani în urmă, atunci când creau site-uri web, designerii web erau ghidați de o anumită lățime medie de ecran a monitoarelor utilizatorilor. La început, cea mai comună rezoluție a fost 800*600, apoi a crescut la 1024*768. Pe Internet s-ar putea întâlni următoarele cuvinte: „Site-ul este optimizat pentru o astfel de rezoluție.” Odată cu creșterea numărului de dimensiuni de ecran, a devenit populară aspectul din cauciuc al site-urilor, despre care am scris în Datorită acestui tip de aspect, a fost posibil să vizualizați site-uri pe monitoare cu rezoluții diferite. Cu toate acestea, în aspectul cauciucului a încetat să mai fie un „panacee”. Pe de o parte, au apărut monitoarele cu dimensiuni uriașe de ecran, pe de altă parte, a avut loc o revoluție a dispozitivelor mobile - numărul de conexiuni la internet a dispozitivelor mobile (laptop-uri, smartphone-uri, tablete) a devenit mai mare decât numărul de computere desktop. Trafic mobil este în creștere și este nevoie de a afișa corect site-ul pe ecranele unui număr mare de dispozitive diferite. Gama de dimensiuni este prea largă.

Dacă site-ul arată rău pe ecranele mici, atunci vizitatorul pur și simplu îl părăsește, traficul scade și factorii comportamentali se înrăutățesc.

Pentru a verifica cum arată site-ul dvs. când este vizualizat diverse dispozitive, puteți folosi serviciul Screenfly. Pentru a face acest lucru, introduceți adresa site-ului și selectați dintr-un număr suficient de lista mare dispozitivul dorit. Ar putea fi computer desktop

, și tablete de diferite tipuri și telefoane mobile. Puteți schimba orientarea ecranului de la peisaj la portret și invers.

  • Cum se rezolvă problema afișării normale a site-ului web pe diferite dispozitive? Există două căi de ieșire:
  • Utilizați două versiuni ale site-ului, cea obișnuită pentru computere desktop și cea mobilă.

Utilizați un design receptiv.

Care dintre aceste opțiuni de aplicat este, desigur, la latitudinea proprietarului sau clientului site-ului să decidă. Dacă site-ul a fost creat cu mult timp în urmă și are un design desenat manual care face parte din brand, atunci poate că merită să faceți o versiune mobilă pentru el și să o lăsați pe cea veche. Pentru site-urile web noi, desigur, ar trebui să alegeți un design responsive.

Ce este designul responsive?

Ce fel de design este acesta și prin ce diferă de cauciuc?

Șablonul de cauciuc nu își schimbă structura atunci când lățimea ecranului se modifică, ci doar își schimbă dimensiunile. De exemplu, o pagină web are trei coloane: în stânga este un meniu cu o lățime de 25% din lățimea ferestrei, în centru este conținut – ​​50%, în dreapta este o bară laterală – 25%. Cu o lățime a ferestrei de 1000 px, acestea vor avea dimensiuni de 250, 500 și, respectiv, 250 px, ceea ce este destul de normal. Dar dacă utilizați un telefon mobil cu un ecran mic de 320 px lățime, coloanele se vor micșora la dimensiuni de 80, 160, 80 px și vor deveni ilizibile.

Care este soluția? Implică schimbarea radicală a paginii web. Această modificare constă în faptul că, după o scădere treptată a lățimii coloanelor, structura paginii este reconstruită - este întinsă într-o singură coloană. Dar aceasta nu este singura diferență. Cerințe pentru
  • design adaptiv Se adaptează la dimensiunea și orientarea ecranului, variind de la monitoare mari
  • Redimensionați imaginile când schimbați rezoluția ecranului. Chiar și pe site-urile cu un design „fluid”, dimensiunile imaginii nu se schimbă, iar la o anumită lățime a ecranului, dungă orizontală derulați pentru a le vizualiza. Când utilizați un design responsive, imaginile „se potrivesc” pentru a se potrivi cu dimensiunea ecranului.
  • Eliminarea elementelor șablonului neimportante. Pot fi atât elemente decorative, cât și software care nu funcționează pe dispozitivele mobile.
  • Viteză mare de descărcare. Viteză Internet mobil este încă relativ mic, iar acest lucru trebuie luat în considerare la dezvoltarea unui site destinat vizionarii pe dispozitive mobile.
  • Utilizarea butoanelor relativ mari. Utilizarea dispozitivelor mobile intrare tactilă iar absența unui cursor trebuie luată în considerare la elaborarea designului.
  • Lucrul cu funcții mobile, de exemplu, geolocalizarea.
Cum este creat designul receptiv

Acest design se bazează pe utilizare Media CSS interogări (interogări media). Datorită acestor solicitări, sunt determinați mai întâi parametrii dispozitivului pe care îl folosește vizitatorul și, în funcție de această alegere, se conectează stilul adecvat, adică cu design adaptiv, un site este utilizat cu un set de stiluri pentru diferite dispozitive. De exemplu, dacă un vizitator accesează site-ul cu computer obișnuit, o foaie de stil este conectată și vede un site cu un antet mare colorat, meniu orizontal, mai multe coloane de conținut, iar atunci când utilizați iPad-ul, se aplică un stil diferit și, în loc de un antet imens, este afișat un mic logo, meniul se transformă într-o listă verticală, iar conținutul este tras într-o singură coloană.

Șabloane receptive

Este posibil să convertiți un șablon de site existent într-o versiune responsive? Desigur, puteți dacă aveți suficiente cunoștințe de HTML și CSS. Dar, dacă folosești orice sistem de gestionare a conținutului - WordPress, Joomla!, Drupal, atunci este mai bine să găsești șablon gata făcut, Acum șabloane adaptive s-au dezvoltat multe. Apropo, în articolul meu ar trebui să mai adaug un articol „Verificarea șablonului pentru adaptabilitate”.

Deci, putem spune că designul responsive este în prezent cel mai într-un mod modern dezvoltarea site-ului web și, în ciuda complexității sale relative, este viitorul. Progresul nu stă pe loc, apar dispozitive noi, mai complexe și software le devine și mai dificil.

Apropo, tocmai a apărut un curs inedit al lui Andrei Kudlay. Folosind cadrul Bootstrap, astăzi poți crea un site web cu un design frumos, plăcut, profesional, fără a fi nevoie să fii un profesionist în aspect. Folosind cadre, chiar și cel mai începător în construirea de site-uri web poate aranja o pagină, poate crea un site web cu o singură pagină sau o pagină de destinație. Mai mult, site-ul va fi destul de profesionist, iar timpul petrecut la crearea lui este minim.

Toate acestea sunt foarte serioase, dar pentru a face o pauză, vă sugerez să puneți cap la cap și să vă uitați la un alt tablou al conaționalului meu, Artistul Poporului din Rusia N.P.

Scrieți părerea dvs. despre designul responsive în comentarii.

Toată lumea vorbește despre design web responsive. Dar asta înseamnă că toată lumea înțelege pentru ce este?

Designul responsive nu este doar despre dezvoltarea de site-uri web pentru dispozitive mobile, ci este despre adaptarea layout-urilor la diferite dimensiuni de ecran (porturi de vizualizare).

În acest tutorial ne vom uita la principiile de bază din spatele designului web responsive pentru concept mai bun această tehnică. În continuare, vom crea un site web receptiv care se va scala perfect pe ecrane mari și mici. Designul web responsive a devenit foarte popular în rândul din ce în ce mai mulți oameni care folosesc dispozitive mobile precum iPhone, iPad, BlackBerry și alte smartphone-uri și tablete compatibile cu internet.

Este important să înțelegeți că site-ul nu trebuie creat pentru un anumit desktop sau dispozitiv mobil. Ceea ce este important aici este capacitatea aspectului de a se adapta la diferite dimensiuni.

Frustrarea utilizatorului

Unii oameni cred că este normal ca utilizatorul să reducă funcționalitatea și să elimine conținutul pe care îl consideră neimportant. Dar cum poți fi sigur că informațiile pe care le-ai tăiat sau mutat pe o pagină secundară nu sunt conținutul care este cel mai important pentru mine?!

În primul rând, trebuie să înțelegi că designul responsiv nu înseamnă doar îngrijirea design mobil. În al doilea rând, dezvoltarea unui site web responsive bun necesită mult timp și efort, nu doar ajutorul interogărilor media. Cu un număr mare și în creștere de dispozitive web, este foarte important să oferiți site-ului dvs. șansa de a facilita în mod eficient experiența utilizatorului.

Pentru un site web responsive, putem folosi același cod pentru ambele computer desktop, și pentru un dispozitiv mobil. Acest lucru este convenabil deoarece nu trebuie să ajustam separat conținutul pentru fiecare dispozitiv. Dar multe site-uri web își ascund conținutul, considerându-l inutil pentru utilizatorii de telefonie mobilă. Există două probleme cu asta:

  • În primul rând, penalizează efectiv utilizatorii de telefonie mobilă care navighează pe site.
  • În al doilea rând, stilurile ascunse în CSS nu înseamnă că conținutul nu se încarcă. Acest lucru poate avea un impact masiv asupra eficienței, în special pentru cei cu conectivitate slabă.

Prin urmare, cea mai bună abordare a dezvoltării site-ului web este să luați în considerare mobil sau dispozitive mici, în primul rând. Astfel te poți concentra pe cel mai mult informatii importante, pe care site-ul dvs. ar trebui să îl producă. Și apoi, dacă este necesar, puteți folosi metode condiționaleîncărcări în care grilele dvs. de aspect, imaginile mari și interogările media sunt stratificate peste un design de ecran mic existent.

Ghid pas cu pas

Pentru acest tutorial, am creat un site web care se adaptează perfect între ecrane mari și mici. Salvați tot conținutul, pe toate dimensiunile de ecran. Și cu ajutorul interogărilor media, navigarea va fi comutată de la afișare orizontală la afișare verticală, pentru dispozitivele mai mici.

Un element cheie al flexibilității în designul receptiv este lățimea fluidă a aspectului. Tot ce trebuie să faceți este să creați lățimi de wrapper, conținut și coloane care se vor adapta la diferite lățimi ale dispozitivului. Nu este nimic nou, dar este mai important acum ca niciodată. Pentru a menține lucrurile simple, vom crea o pagină fluidă formată din navigare, o imagine principală și două coloane, care ține cont de locația pe dispozitive diferite dimensiuni. Am inclus și respond.min.js, care permite interogărilor media să funcționeze în IE6-8.

Principal Structura HTML:

Demo de site responsive

  • Derulați la conținut
Logo
  • Acasă
  • Cumpăra
  • Serviciu
  • Contacte
Poveste

Istoria modelului Mercedes SL datează din 1954 - atunci nemții au prezentat Mercedes 190 SL cu două uși la Salonul Auto de la New York. Vă puteți imagina nivelul de șoc estetic în rândul vizitatorilor salonului auto de atunci. Sub caroseria de o frumusețe captivantă se afla o platformă scurtată de la Mercedes W120 Ponton sedan și o monococă din oțel. Suspensia era complet independentă - cu un braț dublu în față și arbori de axă oscilante în spate. Lungime - 4290 mm, distanta intre axe - 2400 mm.

Când vine vorba de CSS, setarea lățimii maxime este o idee bună, va împiedica scalarea site-ului pe ecrane uriașe, dar nu va împiedica micșorarea paginilor. Una dintre principalele probleme atunci când treceți de la lățime fixă ​​la fluidă este imaginile. În CSS, există o soluție simplă la această problemă. Doar setați lățimea imaginii la 100%. Să adăugăm și automat pentru înălțimea imaginilor pentru a evita imaginile stricate în Opera și Safari pe ecrane mici:

/* Aspect */ #wrapper ( lățime: 96%; lățime maximă: 920px; margine: automată; padding: 2%; ) #principal ( lățime: 60%; margine-dreapta: 5%; float: stânga; ) deoparte ( lățime: 35%; float: dreapta; ) /* Logo H1 */ antet h1 ( înălțime: 98px; lățime: 216px; float: stânga; afișare: bloc; fundal: url(images/sllogo.png) 0 0 no- repetare; text-indent: -9999px ) /* Navigare */ header nav ( float: right; margin-top: 40px; ) header nav li ( display: inline; margin-left: 15px; ) header nav ul li a ( text-decoration:none; color:#333;) #skipTo ( afișare: none; ) #skipTo li ( fundal: #ccc; ) /* Imagine principală*/ #banner ( float: stânga; margin-bottom: 15px; width : 100% ) #banner img ( lățime: 100%; înălțime: auto; )

Imaginea ta va fi afișată pe ea element părinte lățimea completă și se va micșora odată cu ea. Doar asigurați-vă că lățimea maximă a imaginilor nu depășește lățimea maximă a containerului său.

Utilizarea imaginilor mari poate afecta timpul de încărcare. Deci, pentru ecranele mai mici, există o metodă de imagine receptivă care detectează dimensiunea ecranului utilizatorului și produce o imagine mai mică/mai mare în funcție de ceea ce este necesar. Această metodă este încă greu de numit ideală, dar merită totuși luată în considerare.

Comutați navigarea principală

Motivul principal pentru care trebuie să vă schimbați navigarea este din cauza minimizării care apare, ceea ce poate face ca butoanele să nu fie citite și să fie dificil de apăsat. Utilizarea acestei metode va ușura viața utilizatorului. Veți observa, de asemenea, în cod că am făcut modificări la secțiunile #main și aside pentru a le combina într-o singură coloană.

/* Interogări media */ @media ecran și (max-width: 480px) ( #skipTo ( display: block; ) header nav, #main, aside ( float: left; clear: left; margin: 0 0 10px; width : 100%; ) header nav li ( margine: 0; fundal: #ccc; display: block; margin-bottom: 3px; ) header nav a ( afișare: bloc; padding: 10px; text-align: center; )

Veți observa că pe unele dispozitive mobile, site-ul dvs. web se va micșora automat pentru a se potrivi. a acestui ecran. Acest punct devine o problemă atunci când trebuie să creștem dimensiunea ecranului pentru a naviga prin conținut incomod.

Pentru a permite interogărilor media să intre în vigoare, un site obișnuit optimizat pentru mobil și receptiv ar trebui să conțină ceva de genul următor:

Proprietatea width este responsabilă pentru dimensiunea ferestrei de vizualizare. Poate fi setat la un anumit număr de pixeli, lățime=960 sau la valoarea lățimii dispozitivului, care este lățimea ecranului în pixeli la scară de 100%. Proprietatea initial-scale controlează scara la prima încărcare a paginii. proprietățile de scară maximă, scară minimă și scalabile de utilizator controlează modul în care utilizatorii pot scala pagina (mai mare/mai mică).