Principii de design web responsiv

În acest articol, vom încerca să înțelegem diferența dintre cele două principii de creare a unei pagini bazate pe designul web "receptiv": Îmbunătățirea progresivă și degradarea grațioasă.







Grație degradării

Degradarea grațioasă sau "toleranța la erori" - este un concept mai larg care se aplică nu numai în ceea ce privește designul web. Într-un sens general, capacitatea sistemului de a funcționa chiar și în caz de eșec al unora dintre componentele sale. Cu cât este mai gravă respingerea, cu atât este mai scăzută calitatea sistemului sau lucrul cu sistemul, dar funcționarea principală a sistemului rămâne operațională.

Adesea, pentru a respecta acest principiu, trebuie să refaceți logica prelucrării formelor de pe server. Cu toate acestea, această abordare se va achita dacă vă gândiți la toleranța la erori chiar și în stadiul de planificare a formei.

Respectarea principiului degradării grațioase permite utilizatorilor (și fiecărui utilizator un client potențial) să poată lucra cu site-ul în orice situație.

Îmbunătățirea progresivă

Îmbunătățirea progresivă este un principiu care, împreună cu "primul" mobil, creează o bază teoretică pentru designul web "adaptabil" (adaptiv). Numele său deja spune că poziționează crearea unei pagini web în etape, ciclic, în conformitate cu principiul "de la simplu la complex". La fiecare dintre etapele pre-planificate, aspectul paginii ar trebui să devină mai frumos, mai bun și mai convenabil, dar toate funcționalitățile ar trebui să fie disponibile inițial.

Este un caz mai particular de degradare grațioasă, deoarece toate paginile web construite pe ea vor corespunde pe deplin principiului degradării grațioase.

De obicei, crearea paginii pe principiul îmbunătățirii progresive constă în următoarele etape:

Să încercăm să aplicăm această abordare în practică. Vom dezvolta și organiza cea mai simplă formă a intrării pe site. În prima etapă, creați un formular de autentificare pe HTML pur. Forma nu este atât de frumoasă, dar este pe deplin funcțională. Mai jos este codul paginii și rezultatul afișării în browser:







Principii de design web responsiv

Acum, în al doilea pas, să acordăm formularului un stil aplicând o foaie de stil care conține numai acele reguli care se aplică la CSS fără proprietăți speciale. Adăugați culoarea de fundal, liniuțele, alinierea. Acum, formularul arată mai bine:

Principii de design web responsiv

Acum adăugați regulile din specificația CSS3. Adăugați blocuri în blocuri, umbre pentru câmpurile de introducere a textului, stilizați butonul, utilizați selectori noi pentru a elimina indentarea inutilă din partea de sus. Obținem un formular îmbunătățit:

Principii de design web responsiv

În ultima etapă, putem crea o solicitare AJAX, astfel încât utilizatorul să poată merge pe site fără a trebui să reîncărcați pagina.

În același timp, în fiecare etapă specifică va fi afișată o pagină complet funcțională (cu ajutorul browserului său). Dar dacă browserul acceptă tehnologii mai avansate, atunci pagina devine mai bună.

Ce principiu ar trebui urmat?

În cazul în care situl este cel mai eficient construit în funcție de conceptul de degradare grațioasă, atunci acesta va fi aproximativ la fel ca în cazul utilizării unei creșteri progresive. Deci, care este diferența atunci?

Prin urmare, îmbunătățirea progresivă a apărut ca răspuns la degradarea grațioasă substandard. Proiectarea unor astfel de interfețe a devenit mai ușoară și mai calitativă, deoarece sunt clar formulate etapele de creare a interfeței.

În proiectarea adaptivă, există conceptul de "mobile first", care într-o oarecare măsură corespunde conceptului de îmbunătățire progresivă, deoarece solicită o acțiune de la simplu la complex, de la ecrane mobile la desktop-uri. Acesta este motivul pentru care cheia aplicării corecte a designului web adaptiv depinde de capacitatea dezvoltatorului de a aplica mai întâi principiile de îmbunătățire progresivă și mobilitate.







Trimiteți-le prietenilor: