Aspect adaptiv: ce este și cum se folosește. Web Design adaptiv și receptiv

Tema acestei luni este receptivitatea site-ului, așa că am decis să vorbim mai detaliat despre ce este designul web responsiv, de ce este necesar și care sunt principiile de bază ale designului web responsive.

Designul web adaptiv este o direcție destul de nouă în proiectarea resurselor web, dar acum este unul dintre principalii indicatori ai calității site-ului web. În acest articol vom vorbi despre ce este responsive web design și ce poate fi acesta.

Ce este designul web responsive

Adaptive web design (în engleză „responsive web design”) este designul de pagini web care oferă o experiență excelentă pe diverse dispozitive conectate la Internet.

Aceasta înseamnă că același site poate fi vizualizat pe o varietate de dispozitive, indiferent de rezoluție și format de ecran - smartphone-uri, tablete, laptopuri etc. În același timp, vizualizarea va fi la fel de convenabilă pentru toate formatele - utilizatorii de dispozitive mobile, de exemplu, nu vor trebui să extindă zonele individuale ale site-ului pentru a nu pierde linkul dorit.

Designul responsive are ca scop să facă paginile web și afișarea conținutului lor adecvate pentru dispozitivul pe care sunt vizualizate.

De ce ai nevoie de design web responsive?

1) O mare varietate de dispozitive de pe care puteți accesa Internetul. În prezent, există multe dispozitive pe care oamenii le folosesc, inclusiv pentru a accesa Internetul. Toate aceste dispozitive variază în ceea ce privește dimensiunea ecranului, rezoluția și, prin urmare, modul în care poate fi afișat un site web pe ele. Prin urmare, este important ca site-ul dvs. să arate bine și să se afișeze corect pentru orice utilizator, indiferent de dispozitivul pe care îl folosește.

2) Popularitatea dispozitivelor mobile cu acces la Internet și creșterea traficului de internet mobil. Odată cu popularitatea tot mai mare a dispozitivelor mobile, numărul de utilizatori care accesează site-uri web de pe acestea a crescut considerabil, așa că nu le mai puteți ignora pur și simplu - nu este vorba de una sau două persoane la fiecare șase luni, aceasta este o parte semnificativă a audienței dvs., și ar trebui să fie confortabil folosind site-ul dvs. (altfel nu o vor face).

3) Informații urgente. Dacă resursa dumneavoastră conține știri/informații urgente și există o mare probabilitate ca utilizatorul să fie nevoie să citească aceste informații de pe telefon (pentru că nu are alte dispozitive la îndemână) la un moment dat, trebuie să vă asigurați că are posibilitatea de a face acest lucru.

Diferența dintre un site web responsive și o versiune (aplicație) mobilă a unui site web

Versiunile mobile ale site-urilor web și aplicațiilor mobile, special concepute pentru diverse dispozitive mobile, rezolvă și problema ușurinței vizualizării site-ului, dar au unele dezavantaje.

1) Fiecare tip de sistem de operare necesită propria sa versiune de aplicație/site-ul web. Acest lucru necesită resurse suplimentare, atât timp, cât și bani.

2) Necesitatea de a descărca aplicația. Pentru a utiliza aplicația dvs., utilizatorii trebuie să o descarce. Acest lucru necesită un efort suplimentar din partea utilizatorilor și mulți nu vor face acest lucru decât dacă sunt absolut siguri că au într-adevăr nevoie de aplicație și intenționează să o folosească în mod regulat.

3) Separarea traficului. Din punct de vedere al promovării site-ului, o aplicație mobilă nu este convenabilă deoarece împarte tot traficul de resurse în trafic pe site și trafic pe aplicații, ceea ce va arăta ca mai puțin trafic pe site.

4) Necesitatea integrării materialelor de șantier. În cazul unei aplicații mobile, este necesar fie să sincronizați site-ul cu aplicația (resurse suplimentare), fie să faceți o muncă dublă pentru a umple site-ul și aplicația cu materiale.

Spre deosebire de aplicațiile mobile, designul responsive este o adresă de site, un design, un sistem de management și conținutul site-ului.

Desigur, designul adaptiv are și dezavantajele sale, principalul dintre acestea fiind noutatea relativă a tehnologiei și, ca urmare, lipsa unor specialiști buni și a cunoștințelor despre proiectarea site-urilor web adaptive.

Principiile designului receptiv

Designul începe cu o versiune responsive a site-ului web pentru dispozitive mobile. În această etapă, designerii se străduiesc să transmită corect sensul și ideile principale folosind un mic ecran și doar o coloană. Conținutul este redus dacă este necesar, eliminând blocurile de informații neimportante și lăsându-le pe cele mai importante.

Proiectare pentru dispozitive mobile din primele etape („mobile first”);
Utilizarea unui aspect flexibil, bazat pe grilă;
Utilizarea imaginilor flexibile;
Lucrul cu interogări media;
Aplicarea îmbunătățirii incrementale.

Tipuri de layout-uri receptive

Articolul despre Habrahabr prezintă principalele tipuri de layout-uri adaptive care există în prezent.

1) cauciuc

Ușor de implementat și evident pentru tipul de utilizator de prezentare a site-ului. Blocurile principale sunt comprimate la lățimea ecranului dispozitivului mobil, unde acest lucru este imposibil - sunt rearanjate într-o bandă lungă.

2) Transferarea blocurilor

O modalitate evidentă pentru un site cu mai multe coloane: atunci când lățimea ecranului este redusă, blocurile suplimentare (barele laterale) sunt mutate în partea de jos a aspectului.

3) Schimbați aspectul

Această metodă este cea mai convenabilă atunci când citiți un site de pe diferite dispozitive: este dezvoltat un aspect separat pentru fiecare rezoluție a ecranului. Metoda necesită multă muncă, prin urmare mai puțin populară decât cele două anterioare.

Schimbarea layout-ului Fragment al site-ului LukeW Ideare + Design 4) Adaptabilitate cu costuri reduse

O metodă foarte simplă, potrivită pentru site-uri simple. Obținut prin simpla scalare a imaginilor și a tipografiei. Nu foarte popular, pentru că... lipsit de flexibilitate.

Adaptabilitate cu puțin sânge. Fragment din site-ul LukeW Ideation + Design 5) Panouri

O metodă care a venit din aplicațiile mobile, unde poate apărea un meniu suplimentar cu o atingere orizontală sau verticală. Principalul dezavantaj este că acțiunile nu sunt evidente pentru utilizator: este foarte neobișnuit să vezi navigarea mobilă pe un site web. Dar, în timp, metoda poate deveni destul de populară.

Trebuie reținut că machetele prezentate mai sus nu sunt soluții universale - pentru fiecare proiect trebuie să alegeți cea mai potrivită metodă pentru nevoile și capacitățile dumneavoastră.

Utilizatorii de internet navighează pe site-uri web pe diferite dispozitive cu diferite dimensiuni de ecran. Dimensiunile ecranului se schimbă constant, așa că este important ca site-ul să se adapteze la oricare dintre ele. Există două abordări principale pentru a crea site-uri web care se adaptează cu ușurință la diferite tipuri de dispozitive:

Responsive Design (RWD) - design responsive - proiectarea unui site cu anumite valori de proprietate, de exemplu, o grilă de layout flexibilă, care permite unui layout să funcționeze pe diferite dispozitive;

Adaptive Design (AWD) - design adaptiv, sau afișare dinamică - proiectarea unui site cu condiții care se modifică în funcție de dispozitiv, pe baza mai multor aspecte cu lățime fixă.

1. Tehnici de design receptiv

Filosofia din spatele designului web responsive este de a face site-ul ușor de vizualizat pe orice dispozitiv, indiferent de dimensiunea ecranului. Expresia design responsive a fost inventată de Ethan Marcotte în 2011. Caracteristica principală a designului web responsive este că, datorită rețelei fluide, aspectul răspunde automat la modificările dimensiunii ecranului, umflându-se sau contractându-se ca un balon.

Responsive Web Design combină trei tehnici - aspect flexibil bazat pe grilă, imagini flexibile și interogări media.

Flexibilitatea aspectului se bazează pe utilizarea unităților de măsură relative în loc de valori fixe de pixeli, permițând ajustarea lățimii pentru a se potrivi spațiului disponibil.

Flexibilitatea conținutului textului este obținută prin calcularea dimensiunilor fonturilor în raport cu dimensiunea implicită a fontului de 16 px, de exemplu pentru o dimensiune fixă a font-size: 42px, dimensiunea relativă este 42px / 16px = 2.625em.

Problema imaginilor flexibile este rezolvată folosind regula img (lățime: 100%; lățime max: 100%;) pentru toate imaginile de pe site. Această regulă asigură că imaginile nu sunt niciodată mai largi decât containerele lor și nu depășesc niciodată dimensiunile lor reale pe ecrane mai mari.

Interogările media modifică stilurile în funcție de caracteristicile dispozitivului asociate cu afișarea conținutului, inclusiv tipul ecranului, lățimea, înălțimea, orientarea și rezoluția. Interogările media creează un design receptiv care aplică stiluri adecvate fiecărei dimensiuni de ecran.

Orez. 1. Responsive Design Tehnici suplimentare de Responsive Design

Grafică vectorială scalabilă - Utilizați imagini SVG care se scalează la orice dimensiune fără a pierde calitatea și arată bine pe ecranele Retina.

Interfețe de card - Folosiți așa-numitele interfețe de card - forme dreptunghiulare cu colțuri rotunjite care reprezintă containere pentru conținut. Astfel de blocuri sunt unități de interfață autonome și sunt ușor de mutat în jurul aspectului.

Orez. 2. Pinterest, aspect bazat pe carduri

Păstrarea doar a elementelor esențiale este o tehnică bună, mai ales pentru design responsive. Creați interfețe minimaliste receptive și prietenoase, care devin din ce în ce mai populare în zilele noastre.

Orez. 3. Aspect hotelier, minimalism în web design

Prioritizează și ascunde corect conținutul - folosește comenzi ascunse, în special pentru dispozitivele cu ecrane mici. Ferestrele pop-up, filele, meniurile off-canvas și alte tehnici similare vor ajuta la reducerea numărului de elemente de pe pagină. Eliberând spațiu de elemente inutile, veți face interfața convenabilă și ușor de utilizat.

Creați un spațiu mare pe care se poate face clic pentru butoanele dvs. - cu cât zona pe care se poate face clic este mai mare a unui buton, cu atât este mai ușor pentru utilizator să interacționeze cu acesta.

Adăugați interactivitate la interfețele dvs. - ca răspuns la o acțiune a utilizatorului, creați o acțiune de răspuns - o animație care va funcționa atunci când treceți cu mouse-ul peste un element pe dispozitivele desktop și când atingeți un element pe dispozitivele mobile.

2. Personalizarea ferestrei de vizualizare folosind metaeticheta de vizualizare

Pentru a împiedica browserele mobile pentru sistemele de operare Android și iOS să redimensioneze automat paginile site-ului, este utilizată o etichetă specială cu atributul name="viewport". Această etichetă vă permite să setați o valoare specifică pentru parametrii de lățime și scară inițială:

— initial-scale=1 înseamnă că dimensiunea paginii din browser va fi egală cu 100% din dimensiunea ferestrei de vizualizare. Adică, raportul dintre pixelul fizic și pixelul css va fi 1:1;

— width=device-width înseamnă că lățimea paginii va fi egală cu 100% din lățimea ferestrei oricărui browser. Adică, lățimea paginii site-ului corespunde cu lățimea dispozitivului, deci nu trebuie să fie scalată.

În acest exemplu, conținutul din fereastra browserului va fi de 2 ori mai mare în comparație cu dimensiunea fizică.

Eticheta poate fi folosită și pentru a controla cât de mult pot crește sau micșora utilizatorii lățimea paginii:

Acest cod vă va permite să măriți lățimea paginii la o valoare egală cu de 3 ori lățimea ecranului dispozitivului și să o reduceți la jumătate din lățimea ecranului dispozitivului.

Puteți refuza utilizatorilor posibilitatea de a scala folosind atributul scalabil de utilizator:

3. Șabloane universale

Cele mai multe dintre machetele folosite pentru a crea un design web receptiv se încadrează într-una dintre cele cinci categorii de modele definite de Luke Wroblewski:
Preponderent fluid
Column Drop (Coloane una sub alta),
Schimbător de aspect (aspect în mișcare),
Tiny Tweaks (Mini modificări),
Off Canvas.
În unele cazuri, o pagină poate utiliza o combinație de șabloane, cum ar fi Column Drop și Off Canvas.

3.1. Preponderent fluid

Un aspect popular constând în principal din plasă de cauciuc. Pe ecranele mari sau cu lățime medie, dimensiunea acesteia rămâne de obicei neschimbată pe ecranele mari, doar marginile sunt ajustate. Pe ecranele mai mici, grila de cauciuc face ca aspectul să fie recalculat pentru conținutul principal, iar coloanele sunt plasate una sub alta. Avantajul șablonului este că necesită un singur punct de control între ecranele mici și ecranele mari.

3.2. Column Drop

Coloanele sunt plasate una câte una vertical dacă lățimea ferestrei nu poate afișa tot conținutul. Drept urmare, coloanele vor fi poziționate vertical unul sub celălalt. Alegerea punctelor de întrerupere pentru acest șablon de aspect depinde de conținut și este determinată pentru fiecare opțiune de proiectare separat.

3.3. Schimbător de aspect

Cel mai receptiv șablon, deoarece oferă mai multe puncte de control pentru ecrane de diferite lățimi. Principala diferență cu acest aspect este că, în loc să recalculăm arborele de randare și să plasați coloane una sub alta, conținutul este mutat. Datorită diferențelor semnificative dintre punctele de întrerupere majore, menținerea acestui aspect este mai dificilă și poate fi necesar să modificați nu numai aspectul general al conținutului, ci și elementele acestuia.

3.4. Tweaks minuscule

Șablonul aduce mici modificări aspectului, cum ar fi ajustarea dimensiunii fontului, redimensionarea imaginilor sau mutarea conținutului. Funcționează bine pe aspecte cu o singură coloană, cum ar fi site-uri cu o singură pagină și articole cu mult text.

3.5. Off Canvas

Conținutul care este utilizat rar, cum ar fi elementele de navigare sau meniurile aplicațiilor, este plasat în afara ecranului și afișat numai atunci când dimensiunea ecranului o permite. Pe ecranele mai mici, conținutul se deschide cu un singur clic.

4. Design receptiv

Spre deosebire de designul responsive, Adaptive Web Design se concentrează pe dimensiunile dispozitivelor. Utilizează mai multe layout-uri statice pentru diferite tipuri de dispozitive (dispozitive mobile, tablete, computere desktop), bazate pe puncte de control (rupere). Adică, layout-urile se încarcă la anumite dimensiuni ale ferestrei browserului dispozitivului, iar tranzițiile între layout-uri au loc mai degrabă decât fără probleme.

De obicei, aspectele receptive au șase opțiuni de aspect, în funcție de lățimea ecranului:
320
480
760
960
1200
1600.

Aspectele receptive se concentrează pe funcționalitate, ceea ce înseamnă că designul ia în considerare caracteristicile dispozitivului, cum ar fi comenzile tactile pentru dispozitive mobile sau spații mari pentru monitoarele desktop.

Tehnici de bază de proiectare receptivă

Menține coerența – orice site web trebuie să creeze încredere cu utilizatorul, astfel încât să se simtă confortabil navigând și interacționând cu el. Designul consecvent înseamnă că atunci când trece pe o altă pagină de pe un site, utilizatorul nu simte că se află pe alt site. Acordați atenție micilor detalii, construiți o ierarhie vizuală și evidențiați elementele importante cu caractere aldine. Utilizați o schemă de culori consecventă pe tot site-ul, reutilizand aceleași elemente pentru diferite situații, cum ar fi același design de notificare pop-up.

Utilizați o grilă - o structură cu 12 coloane este de preferat pentru a controla lățimea coloanei și spațiul dintre coloane.

5. Care este diferența dintre designul web responsiv și adaptiv

Orez. 4. Design receptiv și adaptiv pe diferite dispozitive

Pentru a crea machete receptive, utilizați interogări media și dimensiunile relative ale elementelor grilei specificate cu % . În proiectarea responsive, scripturile de pe server determină mai întâi tipul de dispozitiv pe care utilizatorul încearcă să acceseze site-ul (desktop, telefon sau tabletă), apoi încarcă exact versiunea paginii care este cea mai optimizată pentru acesta. Elementele de grilă primesc dimensiuni fixe în pixeli.

Prin urmare, principala diferență dintre aceste tehnici este designul responsive - un aspect pentru toate dispozitivele, design adaptiv - un aspect pentru fiecare tip de dispozitiv.

6. Servicii și instrumente utile

Emulator Android pentru Windows, Linux și Mac OS X. Simulatorul iOS este disponibil numai pentru utilizatorii Mac OS X și face parte din pachetul Xcode (poate fi descărcat gratuit din Mac App Store).

Un script PHP care rulează pe orice site web detectează dimensiunea ecranului și ajustează dimensiunea imaginii pentru a se potrivi, rezultând o dimensiune mică a imaginii pe ecranele mici.

Tabele de corespondență între dimensiunile fizice ale dispozitivelor și valorile CSS pentru înălțime și lățime, precum și valoarea raportului de pixeli pentru dispozitivele mobile.

O colecție de site-uri web care utilizează interogări media și design web receptiv.

Cadru CSS bazat pe un aspect cu 12 coloane, maxim 960 px. Acceptat de Chrome, Safari, Firefox, IE 7 și versiuni ulterioare, versiuni mobile ale browserelor.

Un set de instrumente pentru dezvoltarea aplicațiilor web. MĂRINA limbă, aspect adaptiv pe 12 coloane, suport pentru dispozitive mobile, tablete și monitoare, multe componente, butoane, meniuri derulante, stil personalizat de câmpuri de introducere, liste, titluri, etichete, pictograme, alerte, file, bare de progres, sfaturi cu instrumente , „acordeon”, „carusel” și așa mai departe, diverse plugin-uri Javascript, suport pentru schele, inclusiv aplicarea stilului Bootstrap la HTML deja creat.

Salutări, vizitatori ocazionali și cititori obișnuiți ai site-ului blogului!

Pe parcursul existenței acestui site, am schimbat șablonul de mai multe ori și chiar mi-am creat al meu de la zero.
Una dintre sarcinile principale atunci când alegeți un șablon nou este aspectul adaptiv al site-ului pentru toate rezoluțiile de ecran.

Scurtă prezentare a articolului:

Într-un articol anterior am scris deja de ce este nevoie. Dar cum să obții această adaptabilitate?

Există diferite moduri de a face acest lucru. Unii folosesc javascript, alții folosesc altceva. Dar cred că cel mai simplu și mai corect mod este adaptativ folosind CSS.

Cum să faci un aspect de site responsiv

In primul rand, Dacă decideți să creați un design web receptiv, introduceți următorul cod între etichete:

Ce prost am fost că nu am făcut asta imediat când încercam să fac un aspect adaptiv al site-ului!!!
Problema browserelor mobile este scalarea aspectului site-ului web, chiar și a celor adaptive.

Imaginați-vă, desenez un design, apoi notez toate stilurile și interogările necesare, verific adaptabilitatea site-ului la diferite rezoluții. Totul pare să fie bine! Dar când îmi deschid blogul pe smartphone, văd că site-ul pur și simplu s-a micșorat. Nu s-a adaptat la dispozitivul mobil, ci pur și simplu a redus dimensiunea fontului, imaginilor etc.

Cum așa? Am început să verific toate stilurile pentru a vedea dacă am scris corect clasele și, în cele din urmă, am ajuns la punctul în care am verificat lățimea ferestrei browser în px folosind javascript. Am fost socat. Când verific pe un laptop, am obținut un rezultat de 1024px și am obținut cam același rezultat la deschiderea site-ului pe un smartphone!

Dar asta nu poate fi!

Se dovedește că dacă nu scrieți codul pe care l-am indicat mai sus, browserul mobil nu înțelege că site-ul este adaptiv și pur și simplu încearcă să reducă pagina site-ului astfel încât să se potrivească în micul ecran al unui telefon mobil.

Din cauza prostiei și incompetenței mele, am pierdut mult timp. Dar acum îmi amintesc pentru totdeauna))).

Interogări media CSS cu aspect adaptiv

Pentru a face răspunsul utilizând CSS, trebuie să utilizați interogări media.

Ce zici de asta? Da, foarte simplu. În fișierul CSS trebuie să scrieți interogări precum:

Ecran @media și (lățime minimă: 1440 px) și (lățime maximă: 1599 px)( )

Acest cod înseamnă că stilurile cuprinse între „( )” vor funcționa pentru ecrane cu o lățime minimă de 1440 px și maximum 1599 px.

Adică acele stiluri de elemente de site care trebuie adaptate în funcție de rezoluția ecranului trebuie scrise separat pentru fiecare lățime posibilă a ecranului.

Cele mai importante rezoluții de ecran pentru aspect adaptiv

320 px - Dispozitive mobile (orientare portret);
480 px - Dispozitive mobile (orientare peisaj);
600 px - Tablete mici;
768 px - Tablete (orientare portret);
1024 px - Tablete (orientare peisaj)/Netbook-uri;
1280 px și mai mult - PC.

Aceste rezoluții trebuie să vă concentrați și cărora trebuie să le acordați o atenție deosebită atunci când faceți machete adaptive. Acestea sunt cele mai comune tipuri de rezoluții de ecran.

design responsiv bootstrap

Este foarte convenabil să utilizați bootstrap pentru a crea un aspect adaptiv. Comoditatea este că toate stilurile pentru adaptarea blocurilor, butoanelor, meselor etc. sunt deja înregistrate în bootstpap. Trebuie doar să vă dați seama ce clasă să atribuiți cărui element.

Pentru a începe, descărcați cea mai recentă versiune de bootstrap și conectați-o la site-ul dvs. Vă rugăm să rețineți că conectarea stilurilor și scripturilor la WordPress are propriile sale caracteristici.

Aspectul de pe Bootstrap este diferit prin faptul că lățimea blocului sau a ecranului este împărțită în 12 părți egale. Și atribuind o anumită clasă unui bloc, puteți seta lățimea blocului egală cu numărul necesar de părți.

De exemplu, acest design vă va permite să alocați un bloc lat pentru conținut de 8 părți lățime și un bloc îngust pentru o bară laterală de 4 părți lățime:

Lățimea blocurilor va fi calculată automat în funcție de lățimea ecranului. Și atunci când sunt vizualizate pe un dispozitiv mobil, aceste blocuri se vor deplasa unul sub celălalt.

De asemenea, puteți ajusta distanța blocului de la margine, din nou, la numărul necesar de piese. De exemplu, acest design:

Un bloc de 10 părți lățime va fi creat cu o indentație din stânga de 1 parte a ecranului.

Dacă te uiți la asta, lucrul cu bootstrap face munca foarte rapidă. Mai mult, aceste stiluri funcționează cu siguranță corect și nu va fi nimic strâmb pe site.

Pe viitor am de gând să postez câteva lecții despre lucrul cu bootsrap. Prin urmare, vă sfătuiesc să nu ratați acest moment.

Verificarea adaptabilității site-ului web

Dar apare întrebarea: cum să verificați adaptabilitatea site-ului? Acum ați scris interogări media în CSS, ați conectat bootstrap și ați folosit clasele necesare. Cum poți verifica dacă site-ul se adaptează corect la toate rezoluțiile ecranului?

Un serviciu foarte precis și, cel mai important, gratuit, care merită respect și recunoștință din partea webmasterilor și a designerilor de layout care se ocupă de aspectul adaptiv al site-ului web.

Ei bine, cum vă place articolul? Tot clar? Dacă nu, scrieți în comentarii, ne vom da seama împreună.

Da, pentru a crea un site web receptiv, trebuie să muncești din greu. Dar aceste eforturi vor fi răsplătite cu o atitudine favorabilă față de site-ul dvs. de la motoarele de căutare și, cel mai important, vizitatorii site-ului dvs.

Aspectul adaptiv modifică designul paginii în funcție de comportamentul utilizatorului, platformă, dimensiunea ecranului și orientarea dispozitivului și este o parte integrantă a dezvoltării web moderne. Vă permite să economisiți semnificativ și nu trebuie să desenați un nou design pentru fiecare rezoluție, ci să schimbați dimensiunea și locația elementelor individuale.

Acest articol va analiza principalele elemente ale site-ului și modul de adaptare a acestora.

Reglarea rezoluției ecranului

În principiu, puteți împărți dispozitivele în diferite categorii și puteți proiecta pentru fiecare dintre ele separat, dar acest lucru va dura prea mult timp și cine știe ce standarde vor fi peste cinci ani? În plus, conform statisticilor, avem o gamă întreagă de rezoluții diferite:

Devine evident că nu vom putea continua să proiectăm pentru fiecare dispozitiv separat. Dar ce să faci atunci?

Soluție parțială: faceți totul flexibil

Desigur, aceasta nu este o metodă perfectă, dar elimină majoritatea problemelor.

Ethan Marcotte a creat un șablon simplu care demonstrează utilizarea aspectului receptiv:

La prima vedere poate părea că totul este ușor, dar nu este. Aruncă o privire la logo:

Dacă reduceți întreaga imagine, inscripțiile vor deveni ilizibile. Prin urmare, pentru a salva sigla, imaginea este împărțită în două părți: prima parte (ilustrare) este folosită ca fundal, a doua (logo) își schimbă dimensiunea proporțional.

Elementul h1 conține o imagine ca fundal, iar imaginea este aliniată la fundalul containerului (antet).

Imagini flexibile

Lucrul cu imagini este una dintre cele mai importante probleme atunci când lucrați cu design responsive. Există multe moduri de a redimensiona imaginile, iar cele mai multe dintre ele sunt destul de simplu de implementat. O soluție este utilizarea lățimii maxime în CSS:

Imagine (lățimea maximă: 100%;)

Lățimea maximă a unei imagini este de 100% din lățimea ecranului sau a ferestrei browserului, deci cu cât lățimea este mai mică, cu atât imaginea este mai mică. Rețineți că lățimea maximă nu este acceptată în IE, așa că utilizați lățime: 100% .

Metoda prezentată este o opțiune bună pentru crearea de imagini adaptive, dar schimbând doar dimensiunea, vom lăsa greutatea imaginii la fel, ceea ce va crește timpul de încărcare pe dispozitivele mobile.

O altă modalitate: imagini receptive

Tehnica, introdusă de Filament Group, nu numai că redimensionează imaginile, ci și comprimă rezoluția imaginilor pe ecrane mici pentru a accelera încărcarea.

Această tehnică necesită mai multe fișiere disponibile pe Github. Mai întâi luăm fișierul JavaScript ( rwd-images.js), dosar .htaccessȘi rwd.gif(fișier imagine). Apoi folosim ceva HTML pentru a asocia rezoluții mari și mici: mai întâi o imagine mică cu un prefix .r(pentru a arăta că imaginea ar trebui să răspundă), apoi conectați-vă la imaginea mare folosind data-fullsrc:

Pentru orice ecran mai lat de 480 px, va fi încărcată o imagine cu rezoluție mai mare ( largeRes.jpg), iar pe ecranele mici se va încărca ( smallRes.jpg).

iPhone și iPod Touch au o caracteristică: un design creat pentru ecrane mari se va micșora pur și simplu într-un browser cu rezoluție scăzută, fără defilare sau aspect mobil suplimentar. Cu toate acestea, imaginile și textul nu vor fi vizibile:

Pentru a rezolva această problemă, utilizați metaeticheta:

Dacă scara inițială este egală cu unu, lățimea imaginilor devine egală cu lățimea ecranului.

Structură personalizabilă de aspect al paginii

Pentru modificări semnificative ale dimensiunii paginii, poate fi necesar să modificați aranjamentul general al elementelor. Acest lucru se poate face convenabil printr-un fișier de stiluri separat sau, mai eficient, printr-o interogare media CSS. Nu ar trebui să existe probleme, deoarece majoritatea stilurilor vor rămâne aceleași și doar câteva se vor schimba.

De exemplu, aveți un fișier de stil principal care specifică #wrapper , #content , #sidebar , #nav împreună cu culorile, fundalul și fonturile. Dacă stilurile principale vă fac aspectul prea îngust, scurt, lat sau înalt, puteți identifica acest lucru și include stiluri noi.

style.css (principal):

/* Stiluri de bază care vor fi moștenite de foaia de stil copil */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Elemente structurale */ #wrapper( lățime: 80%; margine: 0 auto; fundal: #fff; padding: 20px; ) #conținut( lățime: 54%; float: stânga; margine-dreapta: 3%; ) # sidebar-left( lățime: 20%; float: stânga; margin-right: 3%; ) #sidebar-right( lățime: 20%; float: stânga; )

mobile.css (copil):

#wrapper( lățime: 90%; ) #conținut( lățime: 100%; ) #sidebar-left( lățime: 100%; clar: ambele; /* Stiluri suplimentare pentru noul design */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( lățime: 100%; clear: ambele; /* Stil suplimentar pentru noul nostru aspect */ border-top: 1px solid #ccc; margin-top: 20px; )

Pe un ecran lat, barele laterale din stânga și din dreapta se potrivesc bine în lateral. Pe ecranele mai înguste, aceste blocuri sunt situate unul sub celălalt pentru o mai mare comoditate.

Interogări media CSS3

Să vedem cum puteți utiliza interogări media CSS3 pentru a crea modele receptive. min-width specifică lățimea minimă a ferestrei sau a ecranului browserului la care vor fi aplicate anumite stiluri. Dacă orice valoare este sub min-width , stilurile vor fi ignorate. max-width face opusul.

@media ecran și (min-lățime: 600px) ( .hereIsMyClass ( lățime: 30%; float: dreapta; ) )

Interogarea media va funcționa numai atunci când lățimea minimă este mai mare sau egală cu 600 px.

Ecran @media și (lățime maximă: 600 px) ( .aClassforSmallScreens (clar: ambele; dimensiunea fontului: 1.3em; ) )

În acest caz, clasa ( aClassforSmallscreens) va funcționa atunci când lățimea ecranului este mai mică sau egală cu 600 px.

În timp ce lățimea minimă și lățimea maximă se pot aplica atât lățimii ecranului, cât și lățimii ferestrei browserului, este posibil să fie nevoie să lucrăm doar cu lățimea dispozitivului. De exemplu, pentru a ignora browserele deschise într-o fereastră mică. Puteți utiliza min-device-width și max-device-width pentru aceasta:

@media ecran și (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen și (min-device-width: 768px) ( .minimumiPadWidth ( clar: ambele; margin-bottom) : 2px solid #ccc) )

În special pentru iPad, interogările media au proprietatea orientare, ale căror valori pot fi fie peisaj(orizontală), sau portret(vertical):

@ecran media și (orientare: peisaj) ( .iPadLandscape ( lățime: 30%; float: dreapta; ) ) @ecran media și (orientare: portret) ( .iPadPortrait ( clar: ambele; ) )

De asemenea, puteți combina valorile interogărilor media:

Ecran @media și (lățime minimă: 800 px) și (lățime maximă: 1200 px) ( .classForaMediumScreen ( fundal: #cc0000; lățime: 30%; float: dreapta; ) )

Acest cod va fi executat numai pentru ecrane sau ferestre ale browserului cu lățime cuprinsă între 800 și 1200 px.

Puteți încărca o anumită foaie cu stiluri pentru diferite valori de interogare media, astfel:

JavaScript

Dacă browserul dvs. nu acceptă interogări media CSS3, atunci înlocuirea stilului se poate face folosind jQuery:

$(document).ready(function())( $(window).bind(„resize”, resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Dacă lățimea este mai mică de 600 px , foaia de stil mobilă este utilizată if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Dacă lățimea este mai mare de 600 px, se folosește foaia de stil pentru desktop $("link").attr((href: "style.css")); ) ) ));

Afișare opțională a conținutului

Abilitatea de a micșora și rearanja elementele pentru a se potrivi pe ecrane mici este excelentă. Dar aceasta nu este cea mai bună opțiune. Dispozitivele mobile prezintă de obicei un set mai larg de modificări: navigare simplificată, conținut mai concentrat, liste sau rânduri în loc de coloane.

Iată marcajul nostru:

Conținut principal O bară laterală din stânga O bară laterală din dreapta

style.css (principal):

#conținut( lățime: 54%; float: stânga; margine-dreapta: 3%; ) #sidebar-left( lățime: 20%; float: stânga; margine-dreapta: 3%; ) #sidebar-right( lățime: 20 %; float: left ) .sidebar-nav( display: none; )

mobile.css (simplificat):

#conținut( lățime: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

Dacă dimensiunea ecranului este redusă, puteți, de exemplu, să utilizați un script sau un fișier de stil alternativ pentru a mări spațiul alb sau pentru a înlocui navigarea pentru o mai mare comoditate. Astfel, având capacitatea de a ascunde și afișa elemente, de a schimba dimensiunea imaginilor, elementelor și multe altele, puteți adapta designul oricărui dispozitiv și ecran.

De la autor: Designul de site web responsiv este o abordare cu totul nouă a designului, care câștigă din ce în ce mai multă atenție, dar având în vedere cât de mult diferă de metodele tradiționale de dezvoltare, poate părea inițial prohibitiv de dificil pentru noii designeri și dezvoltatori web. În acest articol, voi acoperi câteva dintre cele mai importante puncte legate de dezvoltarea și implementarea designului web responsive și voi face viața un pic mai ușoară, prieteni.

Abordarea clasică a creării unui site web arată cam așa: un bloc de dezvoltare, un bloc de web design, un bloc de layout etc. Cu toate acestea, în ultimii câțiva ani, totul a început să se schimbe dramatic: termenul de „web design” este treptat. dispare, în timp ce „designul adaptiv” își întărește insidios poziția, făcând treptat schimbări în conștiința specialiștilor.

În general, designul web nu ar trebui să fie perceput atât de clar, iar dezvoltarea rapidă a designului adaptiv, care este considerat aproape un standard industrial, a implicat un întreg carusel de diverse instrumente și platforme.

Conceptul de adaptabilitate

„Ce este designul responsive și la ce se adaptează?” - poate întreba o persoană ignorantă. Vă voi răspunde: la tipul de dispozitiv folosit. Designul responsive asigură o bună vizualizare a paginilor web de pe diverse gadget-uri conectate la Internet.

Același site ar trebui să arate grozav pe laptopuri, smartphone-uri, tablete etc., indiferent de formatul ecranului și rezoluția utilizată. În același timp, ar trebui să fie la fel de convenabil pentru utilizatori să vizualizeze pagini web pentru toate formatele, fără a fi nevoie, de exemplu, de a extinde blocurile individuale pentru a nu pierde butonul dorit.

Datorită faptului că fiecare proiect adaptiv este individual și iterativ, este destul de dificil să analizezi toate procesele sale pentru a oferi soluții pentru toate situațiile și a îmbunătăți eficiența muncii. Cu toate acestea, există strategii și tehnici generale de succes pentru implementarea, îmbunătățirea și crearea unui design de site web receptiv care pot fi aplicate în aproape orice situație.

Mobile First Strategy

Această strategie de dezvoltare a fost propusă încă din 2009 de Luke Wroblewski, autor de cărți și articole despre web design, șeful rețelei de socializare Bagcheck, care a fost achiziționată de Twitter Inc. la doar 9 luni de la crearea sa.

Abordarea lui Luke Wroblewski asupra dezvoltării se numește „Mobile First” din trei motive:

mediul mobil vă permite să vă concentrați și să scăpați de dezordinea care apare din cauza „aglomerației” unei cantități mari de spațiu pe ecran;

Piața de telefonie mobilă tinde să se dezvolte într-un ritm vertiginos;

Mediul mobil este asociat cu multe posibilități (camera, gesturi multi-touch, GPS, accelerometru, geolocalizare).

De atunci, designul web s-a mutat constant către această abordare. Mulți designeri web și dezvoltatori web se gândesc mai întâi la cum să realizeze un design receptiv pentru versiunea mobilă a site-ului, apoi se angajează în dezvoltarea desktopului.

Strategia „Mobile First” începe prin a crea structura și conținutul unei versiuni mobile care funcționează în medii de internet de viteză redusă și se îndreaptă către puncte de întrerupere mai mari, cu conexiuni mai rapide, îmbunătățind și optimizând în același timp versiunile simplificate.

Tendințe și abordări moderne în dezvoltarea web

Aflați algoritmul pentru o creștere rapidă de la zero în construirea site-ului web

Acest lucru asigură funcționarea inovatoare și eficientă a tuturor tipurilor de dispozitive. Dezvoltatorii de site-uri web se concentrează pe nevoile utilizatorilor, creează pagini optimizate și de mare viteză și acordă atenție conținutului important. Apropo, chiar și Google folosește abordarea „Mobile First”.

Strategia de conținut „Conținut scos”

Scopul creării de design responsive este de a oferi cea mai bună utilizare în orice context. Aceasta este o oportunitate excelentă de a analiza conținutul și de a-l face ușor accesibil și lizibil pe toate tipurile de dispozitive.

Mulți dintre cei care nu folosesc o strategie Mobile First preferă o strategie Content First. Acesta este, desigur, lucrul corect de făcut, cu toate acestea, nu ar trebui să luați acest apel la propriu și să vă gândiți că nu ar trebui să începeți să dezvoltați un design până când tot conținutul este gata.

Conținutul trebuie creat și discutat în mod continuu atât în etapa de creare a unui site web responsive, cât și după finalizarea acestuia! După cum a spus renumitul designer Cennydd Bowles, „designul și conținutul ar trebui să meargă mână în mână”. Ele trebuie să se completeze reciproc.

Strategia „În primul rând structura conținutului” este o chestiune complet diferită. În primul rând, trebuie să fii clar despre misiunea site-ului, ce încearcă să spună lumii. Și numai atunci luați în considerare cu atenție structura conținutului său, metodele de creare, tipurile și scopul fiecărui element, în timp ce utilizatorul ar trebui să fie pus în prim-plan.

Trebuie să aveți o strategie care să vă asigure că oferiți fiecărui utilizator conținutul necesar în fiecare etapă a călătoriei sale pe resursa dumneavoastră. Structura site-ului ar trebui să se bazeze pe cercetarea comportamentului și nevoilor publicului țintă.

Dacă vă structurați bine conținutul în etapele inițiale ale dezvoltării site-ului web, îl puteți transfera cu ușurință pe alte platforme și dispozitive în viitor. Desigur, nu ar strica să ai un exemplu de design responsive ca referință pentru tine.

Fă-ți timp să schițezi și să prototipezi

Decizia pentru ce rezoluții să faci design responsive ar trebui să înceapă cu crearea unui aspect organizat - schiță, care va fi ușor de scalat în viitor.

Varietatea dispozitivelor cu capabilitățile, rezoluțiile și dimensiunile ecranului lor înseamnă un număr mare de layout-uri. Crearea unei schițe va pune bazele unui viitor prototip al proiectului. Cu ajutorul acestuia, puteți aduce diverse idei pentru discuții, puteți face schițe brute care vor sta la baza cadrului site-ului.

Odată ce schița este gata, puteți trece la crearea unei versiuni nefinalizate de lucru a site-ului web sau a șablonului HTML. Acest proces se numește prototip și implică un design vizual minim pentru a îmbunătăți interacțiunea și funcționalitatea.

Această strategie vă va ajuta să vă regândiți întreaga abordare pentru crearea unui design responsive. În loc să dezvoltați „site-uri mobile” și „site-uri web”, vă veți concentra acum pe dezvoltarea unor sisteme flexibile cu un set de reguli care determină modul în care este livrat și livrat conținutul în funcție de context.

Sper că acest articol a fost util atât designerilor web experimentați, cât și celor începători.

Și, în sfârșit, cuvintele tradiționale de despărțire: faceți site-ul util, convenabil și familiar, indiferent de dispozitivul pe care este vizualizat. Ne vedem din nou, prieteni!

P.S.: te-ai abonat deja la actualizările blogului nostru?

Tendințe și abordări moderne în dezvoltarea web

Aflați algoritmul pentru o creștere rapidă de la zero în construirea site-ului web