Să încercăm să aflăm care sunt opțiunile pentru dezvoltarea unui design al site-ului web.
Acum 10-15 ani nu a existat o astfel de varietate și număr de monitoare. Prin urmare, pentru a proiecta site-ul a fost ușor. Creați un design static obișnuit pentru o lățime fixă a ecranului și puteți fi siguri că majoritatea utilizatorilor vor vedea site-ul conform destinației.
Până acum, puteți face față mai multor versiuni ale modului în care "designul adaptiv" este înțeles de diferiți specialiști IT. Să încercăm să înțelegem, care sunt opțiunile pentru dezvoltarea unui design al site-ului.
Designul static
Static sau static este un site care conține pagini HTML imuabile. Un astfel de site presupune un subiect fix cu o lățime fixă și adesea conține una sau doar câteva pagini. Pentru a afișa un astfel de site în centrul ecranului este suficient pentru 1000 px. Conținutul va fi întotdeauna aliniat strict la centru.
De asemenea, merită să considerăm că numai o persoană cu o experiență bună de dezvoltare web poate actualiza un site static. Nu are panouri admin, deci toate modificările trebuie făcute prin codul sursă.
Avantajele designului static:
Dezavantaje ale designului static:
- Pe un dispozitiv mobil, site-ul va fi afișat cu o bară de derulare orizontală;
- Monitoarele cu ecran lat prezintă un design static destul de prost - opțiunea nu este pentru cei care doresc să fie spectaculoși.
Anterior, au existat mult mai multe site-uri statice - apariția și dezvoltarea CMS au contribuit la reducerea numărului lor în favoarea celor dinamice. Exemple de site-uri statice:
Design dinamic
"Designul adaptiv este una dintre cele mai relevante tendințe în dezvoltarea site-urilor, care a venit serios și de foarte mult timp" - aproape toate site-urile dedicate dezvoltării web și designului web sunt acum pline de astfel de titluri. Aflați despre ceea ce este, nu fi dificil. Cu toate acestea, există unele subtilități care privesc înțelegerea și percepția unui astfel de design. Să ne uităm la ele.
Design "cauciuc"
Caracteristica principală a acestui design este aceea că lățimea coloanelor este stabilită în procente, nu în pixeli. Prin urmare, designul "cauciuc" la orice rezoluție a monitorului se întinde pe întreaga lățime a ecranului. Pentru a face un astfel de design, mai ales atunci când se utilizează aspectul blocului este ceva mai complicat decât fix, dar utilizatorul nu va vedea câmpuri goale pe pagină. Este demn de remarcat faptul că designul de cauciuc a fost inițial utilizat pe scară largă în râu, în timp ce în Occident, dezvoltatorii de mult timp au rămas angajați în proiectarea statică.
Proiectare adaptivă
Proiectarea adaptabilă este justificată atunci când se creează proiecte la scară largă: portaluri de informare, magazine online, forumuri, site-uri corporative și alte resurse similare. În mod deosebit, arată pe monitoare cu o diagonală de cel puțin 15,6 ".
Principiul adaptabilității se bazează pe crearea unei singure adrese URL, care ajustează conținutul în diferite formate de ecran. exemple:
Consultați modul în care structura textului și a imaginilor variază în funcție de ecran. De ce e misto? Unul dintre motive - Google preferă astfel de resurse în cadrul SERP. Un alt motiv este că astfel de site-uri sunt mai ușor de proiectat și menținut, ceea ce simplifică munca multor oameni.
Design "receptiv"
Ultima metodă de proiectare a web designerilor a fost "designul receptiv", care se opunea "designului adaptiv" obișnuit, deși până acum acești termeni sunt deseori confundați și folosiți într-un sens similar. Designul "receptiv" combină caracteristicile modelelor adaptive și "cauciucului". Se adaptează automat la orice lățime a ecranului, ca la cea din cauciuc. În același timp, în timpul procesului de ajustare, locația blocurilor, mărimea imaginilor, se poate schimba. Este posibil ca unele elemente să apară, să dispară sau să se schimbe. De exemplu, meniul orizontal obișnuit se poate schimba într-un meniu derulant.
Chiar mai important este locul în care oamenii vor veni pe site-ul dvs. Prin urmare, este foarte important să țineți cont de viteza internetului, deoarece un număr mare de oameni locuiesc în zone îndepărtate, unde viteza internetului nu este chiar 1 mb / s. Există un studiu conform căruia 57% dintre utilizatori vor părăsi site-ul dvs. dacă acesta este încărcat mai mult de câteva secunde. Nu cu mult timp în urmă, Google a început să ia în considerare viteza atunci când clasament site-uri. Nu are un impact mare asupra poziției site-urilor cu o viteză medie de descărcare, dar dacă pagina nu se încarcă pentru o anumită perioadă de timp, atunci algoritmul de căutare aplică sancțiuni acestui site.
Toate acestea ne fac să aruncăm o privire mai atentă la viteza internetului și să oferim utilizatorului posibilitatea de a descărca conținut rapid la cele mai mici viteze. Adică designul "receptiv" nu este doar o poveste despre dimensiunile ecranelor, ci diferite scenarii, soluții pentru care trebuie să fie flexibile și grijuliu "de la și la".
Site-uri unde puteți vedea designul "receptiv" în acțiune:
Avantajele designului dinamic:
- Puteți modifica și actualiza elementele unei astfel de resurse în orice moment fără a fi nevoie să editați toate paginile.
- Puteți să dezvoltați un site scalabil de la zero, să creați manual scripturile necesare, codurile programelor etc. și să utilizați CMS.
- Proiectul adaptabil este ușor de modificat, luând în considerare nu numai dorințele clientului, ci și cerințele actuale ale industriei, noi posibilități de programare, circumstanțe obiective. Toate ajustările se fac prin panoul de administrare fără a fi nevoie să editați fișierele cu codul.
- Capacitățile unui web designer de a lucra cu un site dinamic sunt limitate doar de imaginația sa.
Dezavantaje ale designului dinamic:
- Pentru a crea un site bun "cauciuc" este destul de transpirat - această sarcină nu este pentru leneș și necesită anumite abilități ale unui web designer;
- Pe monitoarele cu ecran lat, liniile prea lungi de conținut de text nu pot fi citite - trebuie să ne gândim în mod constant cum să îmbunătățim percepția informațiilor de către utilizator.
Apropo, au încercat să arate clar diferența dintre tipurile de design. Încercați să alegeți una dintre cele 4 opțiuni și să modificați lățimea ferestrei browserului. Aici, design adaptiv - adaptiv, lichid - cauciuc, reactiv - receptiv, static - static.
Trimiteți-le prietenilor: