Dimensiuni standard ale site-urilor: caracteristici, cerințe și recomandări

Tehnologia de dezvoltare site web

Prima piatră de temelie cu care se confruntă designerul de interfață sau proiectantul este lățimea aspectului site-ului. La urma urmei, este necesar să se deseneze interfețe pentru aceasta. Exclusiv intuitiv există două abordări - fie pentru a face planuri separate pentru fiecare rezoluție populară a ecranului, fie pentru a crea o versiune a site-ului pentru toate mapările. Și ambele opțiuni vor fi incorecte, dar despre totul în ordine.

Lățimea standard a site-ului în pixeli pentru RuNet

Înainte de dezvoltare aspect adaptabil un fenomen masiv a fost dezvoltarea unui sit cu o lățime de o mie de pixeli. Această cifră a fost aleasă dintr-un singur motiv simplu - site-ul se potrivește în orice ecran. Și aceasta are logica proprie, dar să presupunem că persoana are încă cel puțin un monitor HD pe desktop. În acest caz, aspectul va parea benzi de mici în mijlocul ecranului, în cazul în care totul este turnat într-o grămadă, iar pe părțile laterale ale imens non-spațiu. Acum, să presupunem că o persoană a ajuns pe site-ul dintr-o tabletă cu un ecran de 800 de pixeli în lățime, și este verificat în setările „Arată site-ul Web versiunea completă.“ În acest caz, site-ul dvs. va fi, de asemenea, afișat incorect, deoarece pur și simplu nu se încadrează în ecran.

Din aceste considerente, putem concluziona că lățimea fixă ​​pentru aspect nu ne potrivește exact și trebuie să căutăm un alt mod. Să analizăm ideea unui aspect separat pentru fiecare lățime a ecranului.

Layouts pentru toate ocaziile

Dacă ați ales ca strategie să creați machete pentru toate dimensiunile ecranului prezente pe piață, atunci site-ul dvs. va deveni cel mai unic pe întregul Internet. Este pur și simplu imposibil să acoperiți întreaga gamă de dispozitive astăzi, încercând să faceți o ajustare exactă pentru fiecare opțiune. Dar dacă vă concentrați asupra celor mai populare rezoluții ale monitoarelor și ecranelor de dispozitive, atunci ideea nu este rea. Singurul minus este costurile financiare. La urma urmei, atunci când proiectantul de interfață de designer și programatorul va fi obligat la 5 sau 6 ori pentru a efectua aceeași lucrare, proiectul va costa în mod disproporționat plantate inițial la prețuri de buget.

Prin urmare, se mândresc cu o multitudine de versiuni pentru diferite ecrane, cu excepția site-urilor cu o singură pagină, al căror scop este de a vinde un produs și, în mod necesar, să o facă bine. Dacă nu aveți una dintre aceste aterizări și un site cu mai multe pagini, merită să discutați mai departe.

Cele mai populare dimensiuni ale site-ului

Un compromis între cele două extreme este trasarea unui aspect pentru trei sau patru dimensiunile ecranelor. Dintre acestea, trebuie să fie un mockup pentru dispozitivele mobile. Restul ar trebui să fie adaptat pentru un ecran desktop mic, mediu și mare. Cum de a alege lățimea site-ului? Mai jos sunt statisticile serviciului HotLog pentru mai 2017, care ne arată distribuția popularității diferitelor rezoluții ale ecranelor dispozitivelor, precum și dinamica acestei modificări a indicatorilor.

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 ecranul 1366 la 768 de puncte. Aceste ecrane sunt instalate în laptop-uri de buzunar, astfel încât popularitatea lor este naturală. Următorul cel mai popular este monitorul Full HD, care este standardul de aur pentru clipuri video, jocuri și, prin urmare, pentru crearea layout-urilor site-ului. În continuare, în tabel, vedem rezoluția dispozitivelor mobile 360 ​​la 640 de puncte, precum și diferite opțiuni pentru ecrane desktop și mobile după aceasta.

Proiectarea unui aspect

Astfel, după analizarea statisticilor, putem concluziona că lățimea optimă a site-ului are 4 variații:

1. Versiune pentru notebook-uri cu o lățime de 1366 pixeli.
2. Versiune Full HD.
3. Un aspect de 800 de pixeli pentru afișare pe monitoare desktop mici.
4. Versiunea mobilă a site-ului are o lățime de 360 ​​de pixeli.

Să presupunem că am decis să folosim mărimea sursei generate pentru site. Dar un astfel de proiect va fi totuși costisitor. Deci, să luăm în considerare mai multe opțiuni, de data aceasta fără a utiliza o lățime fixă.

Realizarea aspectului flexibil

Există o abordare alternativă, atunci când este necesar să se ajusteze numai pentru dimensiunea minimă a ecranului, iar dimensiunile site-urilor vor fi stabilite cu procente. În acest caz, astfel de elemente de interfață precum meniurile, butoanele și logo-urile pot fi setate în valori absolute, concentrându-se pe dimensiunea minimă a lățimii ecranului în pixeli. Blocurile cu conținut, în contrast, vor fi întinse în funcție de procentele specificate ale lățimii zonei ecranului. Această abordare vă permite să opriți perceperea dimensiunii site-urilor ca o limitare pentru designer și talentat pentru a bate această nuanță.

Care este raportul de aur și cum să îl aplicați la aspectul paginilor web?

Chiar și în Renaștere, mulți arhitecți și artiști au încercat să le ofere creațiilor o formă și o proporție ideale. După ce au răspuns la întrebări despre semnificația acestei proporții, s-au adresat Reginei tuturor științelor - matematică.

Din vremea antichității, a fost inventată o proporție, pe care ochiul nostru o percepe drept cea mai naturală și mai elegantă, deoarece este găsită universal în natură. Descoperitorul formulării unui astfel de raport a fost un arhitect grec antic, numit Phidias. El a calculat că, dacă cea mai mare parte a proporției se referă la mai puțin, deoarece întregul se referă la cele mai mari, atunci această 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 denumită mai târziu secțiunea de aur, care încă nu supraestimează importanța acesteia pentru istoria mondială a culturii.

Înapoi la Web Design

Este foarte simplu - folosind o secțiune de aur, puteți crea pagini care să fie la fel de plăcute ochiului uman. Calculând prin definiția formulei secțiunii de aur, obținem numărul irațional 1.6180339887 ... dar pentru comoditate putem folosi valoarea rotunjită 1.62. Acest lucru va însemna că blocurile paginii noastre ar trebui să fie de 62% și 38% din întreg, indiferent de mărimea codului sursă pentru site-ul pe care îl utilizați. Un exemplu pe care îl puteți vedea în această schemă:

Utilizați noile tehnologii

Tehnologia modernă a designului site-ului vă permite să transmiteți cu exactitate ideea designerului și designerului, astfel încât acum vă puteți permite implementarea de idei mai îndrăznețe decât în ​​zorii tehnologiilor de internet. Nu mai este necesar să te gândești serios la ce dimensiune ar trebui să fie. Odată cu apariția unor aspecte cum ar fi aspectul adaptabil al blocurilor, încărcarea dinamică a conținutului și a fonturilor, dezvoltarea site-ului a devenit de multe ori mai plăcută. La urma urmelor, aceste tehnologii au mai puține restricții, deși sunt. Dar, după cum știți, fără limitări nu ar exista nici o artă. Vă sugerăm să utilizați o abordare cu adevărat creativă a designului - o secțiune de aur. Cu ajutorul acestuia, puteți completa în mod eficient și frumos spațiul de lucru, indiferent de dimensiunile site-urilor pe care le specificați în șabloanele dvs.

Cum de a mări spațiul de lucru al site-ului

Există o mare probabilitate ca nu veți avea spațiu suficient pentru a se potrivi cu toate elementele de interfață într-un aspect de dimensiuni reduse. În acest caz, trebuie să începeți să gândiți creativ sau chiar mai creativ decât înainte.

Maximizarea spațiului de pe site poate fi prin ascunderea navigației în meniul pop-up. Această abordare este logică pentru utilizarea nu numai pe dispozitivele mobile, ci și pe desktopuri. La urma urmei, utilizatorul nu trebuie să caute tot timpul la ce categorii se află pe site-ul dvs. - a venit pentru conținut. Iar dorințele utilizatorului trebuie respectate.

Un exemplu de modalitate bună de ascundere a meniului este următorul aspect (fotografia de mai jos).

În colțul din dreapta sus al zonei roșu, puteți vedea o cruce, faceți clic pe meniul care se ascunde într-o pictogramă mică, lăsând utilizatorul singur cu conținutul site-ului.

Cu toate acestea, nu este necesar să faceți acest lucru, puteți lăsa navigația, care va fi întotdeauna vizibilă. Dar puteți face un element de design frumos, și nu doar o listă de link-uri populare de pe site. Utilizează icoane intuitive pe lângă legăturile text sau chiar în locul lor. Acest lucru va permite, de asemenea, site-ului dvs. să utilizeze mai eficient spațiul de pe ecranul utilizatorului.

Cel mai bun site - adaptabil

Dacă nu știți ce aspect să alegeți pentru site, atunci totul este ușor pentru dvs. Pentru a salva costurile de dezvoltare și, totuși, nu pierdeți un public din cauza unui aspect slab pentru un dispozitiv, utilizați un design adaptabil.

Adaptive se numește 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, cel puțin pe o tabletă, chiar și pe un smartphone. Acest efect este realizat datorită modificărilor automate ale lățimii zonei de lucru a ecranului. Folosind foi de stil adaptive pentru site, veți lua cea mai corectă decizie posibilă.

Care este diferența dintre designul adaptabil și disponibilitatea diferitelor versiuni ale site-ului

Proiectul adaptabil diferă de versiunea mobilă a site-ului prin faptul că în acest ultim caz utilizatorul primește un cod html care diferă de versiunea 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ă numărați statistici pe diferite versiuni ale site-ului. Abordarea adaptivă este lipsită de astfel de deficiențe.

Adaptabilitate pentru diferite dispozitive se realizează datorită lățimii de aspect sau Procentajele prin blocuri de transport în spațiul disponibil (în plan vertical, în loc de telefonul inteligent orizontal pe un desktop), sau planurile individual prin crearea diferitelor ecrane.

Mai multe informații despre designul adaptiv și despre dezvoltarea acestuia puteți găsi din manuale.