Tehnologia de dezvoltare a site-urilor web este un proces cu multe fațete. Dar totuși, toate etapele sale pot fi împărțite în două componente principale - învelișul funcțional și exteriorul. Sau, după cum se obișnuiește printre webmasteri, back-end și, respectiv, front-end. Oamenii care își comandă site-urile de la studiourile de dezvoltare web cred adesea în mod naiv că merită să se concentreze doar pe funcționalitate, iar aceasta va fi decizia corectă. Dar acest lucru este adevărat în cazuri foarte, foarte rare, de obicei pentru proiectele de pornire în faza de testare beta. În caz contrar, designul grafic și interfața cu utilizatorul sunt pur și simplu necesare pentru a respecta standardele de dezvoltare web și pentru a fi convenabile.
Prima piatră de temelie cu care se confruntă designerul de interfață, sau designerul, este lățimea aspectului site-ului. La urma urmei, pentru aceasta este necesar să desenați interfețe. Pur intuitiv, apar două abordări - fie creați machete separate pentru fiecare rezoluție populară de ecran, fie creați o versiune a site-ului pentru toate afișajele. Și ambele opțiuni vor fi greșite, dar pe primul loc.
Lățimea site-ului web standard în pixelipentru Runet
Înainte de dezvoltarea aspectului adaptiv, dezvoltarea unui site cu o lățime de o mie de pixeli era un fenomen de masă. Această cifră a fost aleasă dintr-un motiv simplu - astfel încât site-ul să se potrivească în orice ecran. Și asta are propria sa logică, dar să presupunem că o persoană mai are cel puțin un monitor HD pe un desktop. În acest caz, aspectul dvs. va părea ca o bandă minusculă în mijlocul ecranului, unde totul este lipit împreună într-o grămadă, iar pe părțile laterale există un spațiu imens nefolosit. Acum să presupunem că o persoană vă accesează site-ul pe o tabletă cu un ecran lat de 800 de pixeli și „Afișați site-ul complet” este bifat în setări. În acest caz, site-ul dvs. va fi afișat incorect, deoarece pur și simplu nu se va potrivi pe ecran.
Din aceste considerente, putem concluziona că o lățime fixă pentru aspect nu este cu siguranță potrivită pentru noi și trebuie să căutăm o altă cale. Să analizăm ideea unui aspect separat pentru fiecare lățime a ecranului.
Aspecte pentru toate ocaziile
Dacă ați ales ca strategie să creați machete pentru toate dimensiunile de ecran de pe piață, atunci site-ul dvs. va fi cel mai unic de pe întregul Internet. La urma urmei, este pur și simplu imposibil astăzi să acoperiți întreaga gamă de dispozitive, încercând să faceți un reglaj fin pentru fiecare opțiune. Dar dacă te concentrezi pe cele mai populare rezoluții ale monitoarelor și ecranelor dispozitivelor, atunci ideea nu este rea. Singurul său dezavantaj sunt costurile financiare. La urma urmei, atunci când un designer de interfață, un designer și un programator sunt forțați să facă aceeași muncă de 5 sau 6 ori, proiectul va costadisproporționat mai mare decât prețul bugetat inițial.
De aceea, doar site-urile cu o singură pagină se pot lăuda cu o abundență de versiuni pentru diferite ecrane, al căror scop este de a vinde un singur produs și asigurați-vă că o faceți bine. Ei bine, dacă nu aveți una dintre aceste destinații, ci un site cu mai multe pagini, atunci ar trebui să vă gândiți mai departe.
Cele mai populare dimensiuni de site
Un compromis între cele două extreme este redarea aspectului pentru trei sau patru dimensiuni de ecran. Printre acestea, unul trebuie să fie un aspect pentru dispozitive mobile. Restul ar trebui adaptat pentru ecrane desktop mici, medii și mari. Cum să alegi lățimea site-ului? Vă prezentăm mai jos statisticile serviciului HotLog pentru luna mai 2017, care ne arată distribuția popularității diferitelor rezoluții ale ecranului dispozitivului, precum și dinamica acestui indicator.
Din tabel puteți afla cum să determinați dimensiunea site-ului pe care doriți să îl utilizați. În plus, putem concluziona că cel mai comun format astăzi este un ecran de 1366 pe 768 pixeli. Astfel de ecrane sunt instalate în laptop-uri de buget, așa că popularitatea lor este firească. Următorul cel mai popular este monitorul Full HD, care este standardul de aur pentru videoclipuri, jocuri și, prin urmare, pentru crearea de layout-uri de site-uri web. Mai departe în tabel vedem rezoluția dispozitivelor mobile 360 x 640 pixeli, precum și diverse opțiuni pentru ecranele desktop și mobile după aceasta.
Proiectarea aspectului
DeciDupă analiza statisticilor, putem concluziona că lățimea optimă a site-ului are 4 variații:
- Versiune pentru laptop cu lățime de 1366 px.
- Versiune Full HD.
- Un aspect lat de 800 de pixeli pentru afișare pe monitoare desktop mici.
- Versiunea mobilă a site-ului - 360 de pixeli lățime.
Să presupunem că am decis ce dimensiune să folosim pentru sursa generată pentru site. Dar un astfel de proiect ar fi totuși costisitor. Deci, să ne uităm la mai multe opțiuni, de data aceasta fără a folosi o lățime fixă.
Facerea aspectului flexibil
Există o abordare alternativă, când merită să ne adaptăm doar la dimensiunea minimă a ecranului, iar dimensiunile site-ului în sine vor fi stabilite în procente. În același timp, elemente de interfață precum meniurile, butoanele și logo-ul pot fi setate în valori absolute, concentrându-se pe dimensiunea minimă a lățimii ecranului în pixeli. Blocurile cu conținut, dimpotrivă, vor fi întinse în funcție de procentul specificat din lățimea zonei ecranului. Această abordare vă permite să nu mai percepeți dimensiunea site-urilor ca o limitare pentru designer și să învingeți cu pricepere această nuanță.
Care este raportul de aur și cum poate fi aplicat aspectului paginii web?
Chiar și în Renaștere, mulți arhitecți și artiști au încercat să ofere creațiilor lor forma și proporția perfectă. Pentru răspunsuri la întrebări despre valorile unei astfel de proporții, au apelat la regina tuturor științelor - matematica.
Încă din antichitate, a fost inventată o proporție pe care ochiul nostru o percepe ca fiind cea mai naturală și elegantă,deoarece este omniprezent în natură. Descoperitorul formulei pentru un astfel de raport a fost un arhitect grec antic talentat pe nume Phidias. El a calculat că, dacă cea mai mare parte a proporției este legată de cea mai mică, deoarece întregul este legat de cea mai mare, atunci o astfel de proporție va arăta cel mai bine. Dar acesta este cazul dacă doriți să împărțiți obiectul asimetric. Această proporție a fost numită ulterior secțiunea de aur, care încă nu își supraestimează importanța pentru istoria mondială a culturii.
Înapoi la design web
Este foarte simplu - folosind raportul de aur, poți crea pagini care să fie cât mai plăcute ochiului uman. Calculând conform definiției formulei raportului de aur, obținem numărul irațional 1, 6180339887 …, dar pentru comoditate, putem folosi o valoare rotunjită de 1, 62. Aceasta va însemna că blocurile paginii noastre ar trebui să fie 62 % și 38% din total, indiferent de dimensiunea sursei generate pentru site-ul pe care îl utilizați. Puteți vedea un exemplu în această diagramă:
Folosiți tehnologii noi
Tehnologiile moderne de amenajare a site-ului web fac posibilă transmiterea cu acuratețe a ideii de planificator și designer, așa că acum vă puteți permite să implementați idei mai îndrăznețe decât în zorii tehnologiilor internetului. Nu mai trebuie să vă gândiți bine care ar trebui să fie dimensiunea site-ului. Odată cu apariția unor lucruri precum aspectul adaptiv bloc, încărcarea dinamică a conținutului și a fonturilor, dezvoltarea site-ului web a devenit mult mai plăcută. La urma urmei, aceste tehnologii suntmai puține restricții, deși sunt încă acolo. Dar, după cum știți, fără limite nu ar exista artă. Vă sugerăm să utilizați o abordare de design cu adevărat creativă - raportul de aur. Cu acesta, puteți umple eficient și frumos spațiul de lucru, indiferent de dimensiunile site-ului pe care le setați în șabloanele dvs.
Cum să măresc spațiul de lucru al site-ului
Există șanse mari să nu aveți suficient spațiu pentru a încadra toate elementele UI într-un aspect mic. În acest caz, va trebui să începeți să gândiți creativ sau chiar mai creativ decât înainte.
Eliberați spațiu maxim pe site prin ascunderea navigației în meniul pop-up. Este logic să folosiți această abordare nu numai pe dispozitivele mobile, ci și pe desktop-uri. La urma urmei, utilizatorul nu trebuie să se uite tot timpul la ce titluri sunt pe site-ul tău - a venit pentru conținut. Și dorințele utilizatorului trebuie respectate.
Un exemplu de modalitate bună de a ascunde meniul este următorul aspect (foto de mai jos).
În colțul de sus al zonei roșii, puteți vedea o cruce, făcând clic pe care va ascunde meniul într-o pictogramă mică, lăsând utilizatorul singur cu conținutul site-ului.
Totuși, acest lucru este opțional, puteți părăsi navigarea, care va fi mereu la vedere. Dar îl puteți face un element de design frumos și nu doar o listă de link-uri populare de pe site. Utilizați pictograme intuitive în plus față de sau chiar în locul link-urilor text. e la felva permite site-ului dvs. să utilizeze mai eficient spațiul de pe ecran de pe dispozitivul utilizatorului.
Cel mai bun site web este receptiv
Dacă nu știi ce aspect să alegi pentru site, atunci totul este simplu pentru tine. Pentru a economisi costurile de dezvoltare și, în același timp, pentru a nu vă pierde audiența din cauza aspectului slab pentru anumite dispozitive, utilizați un design receptiv.
Designul receptiv este un design care arată la fel de bine pe diferite dispozitive. Această abordare va permite site-ului dvs. să fie ușor de înțeles și convenabil chiar și pe un laptop, chiar și pe o tabletă, chiar și pe un smartphone. Acest efect este obținut prin modificarea automată a lățimii zonei de lucru a ecranului. Folosind foi de stil receptive pentru site-ul dvs., luați cea mai bună decizie posibilă.
Care este diferența dintre designul responsive și versiunile site-ului
Responsive design diferă de versiunea mobilă a site-ului prin aceea că, în acest ultim caz, utilizatorul primește un cod html diferit de cel desktop. Acesta este un dezavantaj în ceea ce privește optimizarea performanței serverului, precum și optimizarea motorului de căutare. În plus, devine mai dificil să se calculeze statistici pentru diferite versiuni ale site-ului. Abordarea adaptivă nu are aceste dezavantaje.
Receptivitatea pentru diverse dispozitive se realizează printr-un aspect cu un procent din lățimea specificat sau prin transferarea blocurilor în spațiul disponibil (în plan vertical pe un smartphone în loc deorizontală pe desktop) sau crearea unor aspecte individuale pentru diferite ecrane.
Aflați mai multe despre proiectarea și dezvoltarea responsive în tutorialele noastre.
