Site-uri dimensiuni standard: caracteristici, cerințe și recomandări

Tehnologia de dezvoltare de site-uri - un proces foarte multe fațete. Cu toate acestea, toate etapele sale pot fi împărțite în două componente principale - o funcțională și un înveliș exterior. Sau, la fel ca în webmasterul mediu Beg final și, respectiv, Front End. Oameni care au cumpărat site-urile lor în studiouri de dezvoltare web, de multe ori cred cu naivitate că este necesar să se concentreze doar asupra funcțională, și va fi decizia corectă. Dar acest lucru este adevărat într-un ocazii foarte, foarte rare, de obicei, pentru start-up-uri de proiecte în etapa de testare beta. Restul de design grafic și interfața cu utilizatorul sunt pur și simplu obligați să respecte standardele de dezvoltare web și să fie confortabil.

Prima piatra de temelie a cu care se confruntă designer de interfață, sau proiectant - este lățimea de aspectul site-ului. La urma urmei, este necesar să se atragă interfețe pentru ea. Intuitiv există două abordări - fie pentru a face aspecte separate pentru fiecare dintre cele mai populare rezoluții de ecran, sau puteți crea o versiune a site-ului pentru toate hărțile. Ambele opțiuni ar fi greșit, dar primele lucruri primele.

Lățimea standard în pixeli pentru site-ul veți avea nevoie vreodată

Înainte de dezvoltarea fenomenului de masă aspect de adaptare a fost dezvoltarea unui site cu mii de pixeli lățime. Această cifră a fost ales pentru un motiv simplu - că site-ul a fost plasat pe orice ecran. Și există o anumită logică, dar să presupunem că o persoană este în continuare cel puțin HD-monitor de 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șate incorect, ca pur si simplu nu se încadrează în ecran.

Din aceste considerente, putem concluziona că o lățime fixă pentru layout-ul, noi pur și simplu nu se potrivesc și doriți să găsiți o altă cale. Să analizăm ideea unui plan separat pentru fiecare lățimea ecranului.

Aspecte pentru toate ocaziile

Dacă ați ales ca o strategie pentru a crea machete pentru dimensiunile disponibile tot ecranul pe piață, atunci site-ul dvs. va fi cel mai unic în Internet. La urma urmei, azi este pur și simplu imposibil de a acoperi întreaga gamă de dispozitive într-o încercare de a face o setare exactă pentru fiecare opțiune. Dar, dacă se concentreze pe cele mai populare dispozitive rezoluția monitorului și ecran, ideea este bună. Singurul său dezavantaj - 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.

De aceea lăuda o abundență de versiuni pentru diferite ecrane pot fi cu excepția faptului că site-urile-odnostranichniki al căror scop - de a vinde un produs și să fie sigur de a face acest lucru bine. Ei bine, dacă nu sunteți unul dintre cei Landing, un multi-site-ul, este evident în continuare.

Cele mai populare site-uri de dimensiuni

Un compromis între cele două extreme este un desen al layout pentru trei sau patru dimensiuni de ecran. Dintre acestea, unul trebuie să fie un aspect pentru dispozitive mobile. Restul trebuie să fie adaptate pentru ecranul desktop mici, mijlocii și mari. Cum de a alege lățimea site-ului? Mai jos vom prezenta HotLog statistici de servicii pentru luna mai 2017, în care ne arată distribuția popularității de diferite rezoluția ecranului dispozitivului, precum și dinamica schimbării în acest indicator.

Din tabel este posibil pentru a afla cum pentru a determina dimensiunea site - ului pe care doriți să îl utilizați. În plus, se poate concluziona că formatul cel mai frecvent astăzi este ecranul în 1366 cu 768 de puncte. Aceste ecrane sunt instalate într - un laptop de buget, astfel încât popularitatea lor este natural. Urmatorul cel mai popular este un monitor Full HD-, care este standardul de aur pentru filme, jocuri, și, prin urmare, pentru a crea machete site - ului. Mai departe în tabel vom vedea permite dispozitivelor mobile de 360 x 640 pixeli, precum și diverse variante ale spațiului de lucru și ecrane mobile după aceea.

design layout

Deci, după analizarea statisticilor, putem concluziona că lățimea optimă a site - ului are 4 variante:

1. laptop - uri versiune cu 1366 pixeli lățime.
2. Full HD-versiune.
3. 800 pixeli în mărime de aspect lățime pentru afișare pe monitoarele desktop mici.
4. Versiunea mobilă a site - ului - 360 pixeli în lățime.

Să presupunem că ne - am decis ce doriți să utilizați dimensiunea de cod sursă generat pentru site - ul. Dar un astfel de proiect ar fi încă costisitoare. Deci , ia în considerare mai multe opțiuni, de data aceasta fără a utiliza o lățime fixă.

Asigurați-un aspect flexibil

Există o abordare alternativă care avem nevoie doar pentru a ajusta pentru dimensiunea minimă a ecranului, și dimensiunea mare de site - uri va cere procente. În acest caz, elementele de interfață , cum ar fi meniurile, butoane și logo - uri, pot fi definite în termeni absoluți, concentrându - se pe dimensiunea minimă a lățimea ecranului în pixeli. Blocuri cu conținutul, dimpotrivă, va fi întinsă în funcție specificată la sută din lățimea zonei ecranului. Această abordare nu permite detectarea dimensiunea site - ului ca constrângeri designer și talentul de a bate această nuanță.

Care este raportul de aur, și modul de utilizare a paginilor web pentru layout?

Chiar și în Renaștere mulți arhitecți și artiști au încercat să dea creațiile sale forma perfectă și proporția. Pentru răspunsuri la întrebări cu privire la implicațiile unor asemenea proporții, au apelat la regina tuturor științelor - matematică.

Încă din zilele antichității a fost inventat de proporția în care ochiul nostru percepe ca fiind cel mai natural si elegant, deoarece este omniprezent în natură. Descoperitorul formula acest raport a fost un arhitect grec talentat pe nume Phidias. Este calculat că, dacă cea mai mare parte proporțiile se referă la nivelul unui ansamblu oferă o mai mare, atunci acest procent va arata bine. Dar, în acest caz, dacă doriți să împărțiți obiect asimetric. Această proporție mai târziu a devenit numit raportul de aur, care încă nu supraestimeze importanța sa pentru istoria culturală mondială.

Să ne întoarcem la web design

Este foarte simplu - folosind raportul de aur, aveți posibilitatea să proiectați pagini care vor fi cele mai plăcute ochiului uman. Calculat conform formulei secțiunii de aur, vom găsi numărul irațional 1.6180339887 ..., dar pentru comoditate puteți utiliza valoarea rotunjită de 1,62. Acest lucru va însemna că blocurile de pagini noastre ar trebui să fie de 62% și 38% din total, indiferent de mărimea generat codul sursă pentru site-ul pe care îl utilizați. Exemplu puteți vedea pe următoarea schemă:

Utilizarea noilor tehnologii

Site - uri web modernă tehnologie de aspect vă permit să transmită cu exactitate ideile designerului și designer, așa că acum vă puteți permite punerea în aplicare a ideilor mai îndrăznețe decât în zorii tehnologiei de pe Internet. Nu mai este nevoie de mult pentru a puzzle - ului asupra a ceea ce ar trebui să fie de mărimea unui site. Odată cu apariția de lucruri , cum ar fi bloc aspect adaptiv, încărcare dinamică a conținutului și de fonturi, dezvoltare site -ul web a devenit de multe ori mai placuta. La urma urmei, aceste tehnologii au mai puține restricții, chiar dacă acestea sunt. Dar , după cum știți, fără a se limita la , nu ar fi nici o artă. Vă sugerăm să utilizați o abordare cu adevărat creativ pentru proiectarea - secțiunea de aur. Cu aceasta, va fi capabil să umple eficient și frumos spațiul de lucru, indiferent de mărimea sau site - uri ați întrebat în șabloane.

Cum de a crește site-ul spațiului de lucru

Sunt șanse ca nu va avea suficient spațiu pentru a se potrivi toate elementele de interfață în structura de dimensiuni mici. În acest caz, va trebui să înceapă să se gândească creativ, sau chiar mai creativ decât ai făcut-o înainte.

spațiu liber în sus maximă pe site-ul posibil, ascunderea navigarea din meniul pop-up. Această abordare este logic să se utilizeze nu numai pentru dispozitive mobile, dar, de asemenea, pe desktop. La urma urmei, utilizatorul nu are nevoie tot timpul să se uite la ceea ce are rubrici de pe site-ul dvs. - aceasta a venit pentru conținut. Un utilizator dorește să fie respectate.

Un exemplu de un bun mod de a ascunde meniul este următorul aspect (imaginea de mai jos).

În sus colțul roșu zonă, 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, acest lucru este opțională, puteți lăsa de navigare care este întotdeauna la vedere. Dar poate un element de design frumos, nu doar o listă de link-uri de pe site-ul popular face. Utilizați pictograme intuitive, în plus față de text, link-uri sau chiar să le înlocuiască. Acesta va permite, de asemenea, site-ul dvs. pentru o utilizare mai eficientă a spațiului ecranului pe dispozitiv.

Cel mai bun website - adaptivă

Dacă nu știi pe care să aleagă un aspect pentru site-ul, toate doar pentru tine. Pentru a salva pe costurile de dezvoltare și, în același timp, să nu-și piardă publicul din cauza proastei dispuneri pentru un dispozitiv, utilizați web design receptiv.

Adaptive numit un design care arata pe diferite dispozitive la fel de bine. Această abordare va permite site-ul dvs. să fie clare și ușor chiar și pentru un laptop, cel puțin pe tabletă, chiar și pe un smartphone. Acesta a obținut acest efect se datorează modificărilor automate în zona de lucru a lățimea ecranului. Utilizarea foilor de stil adaptive pentru site-ul, luați decizia corectă posibil.

Ceea ce distinge designul adaptiv al disponibilității diferitelor versiuni ale site-ului

Design receptivă este diferit de site-ul mobil, astfel încât, în acest din urmă caz, utilizatorul primește un cod html, care este diferit de pe desktop. Acesta este un dezavantaj din punct de vedere al optimizării performanței serverului, precum și optimizarea motorului de căutare. În plus, cu atât mai dificil devine să ia în considerare statisticile în funcție de diferitele versiuni ale site-ului. O abordare adaptivă este lipsită de neajunsuri.

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.

Puteți afla mai multe despre designul receptiv și poți dezvolta din cărți.