Ce este designul receptiv? (Video explicativ și infografic)

design web sensibil

A durat un deceniu pentru design web sensibil (RWD) pentru a deveni mainstream de atunci Cameron Adams l-a prezentat pentru prima dată conceptul. Ideea a fost ingenioasă - de ce nu putem proiecta site-uri care să se adapteze la vizualizarea dispozitivului pe care este vizualizat?

Ce este designul receptiv?

Responsive web design (RWD) este o abordare de design web care vizează crearea de site-uri pentru a oferi o experiență de vizualizare optimă - citire ușoară și navigare cu un minim de redimensionare, panoramare și derulare - pe o gamă largă de dispozitive (de la telefoane mobile la computer desktop) monitoare). Un site proiectat cu RWD adaptează aspectul la mediul de vizualizare utilizând grile fluide, bazate pe proporții, imagini flexibile și interogări media CSS3, o extensie a regulii @media.

Wikipedia

Cu alte cuvinte, elemente precum imaginile pot fi ajustate, precum și aspectul acelor elemente. Iată un videoclip care explică ce este designul receptiv, precum și de ce ar trebui să îl implementeze compania dvs. Recent am reamenajat DK New Media site-ul să fie receptiv și acum lucrează la Martech Zone sa fac la fel!

Metodologia construirii unui site receptiv este un pic plictisitoare, deoarece trebuie să aveți o ierarhie a stilurilor dvs. care sunt organizate în funcție de dimensiunea ferestrei.

Browserele sunt conștiente de dimensiunea lor, așa că încarcă foaia de stil de sus în jos, interogând stilurile aplicabile pentru dimensiunea ecranului. Acest lucru nu înseamnă că trebuie să proiectați foi de stil diferite pentru fiecare dimensiune a ecranului, trebuie doar să schimbați elementele necesare.

Funcționarea cu o mentalitate mobilă este în prezent standardul de bază. Cele mai bune mărci din clasă se gândesc nu doar dacă site-ul lor este compatibil cu dispozitivele mobile, ci și cu experiența completă a clienților.

Lucinda Duncalfe, CEO Monetate

Iată un infografic de la Monetate care ilustrează avantajele potențiale ale creării unui design receptiv pentru mai multe dispozitive:

Infografie de proiectare web receptivă

Dacă doriți să vedeți un site receptiv în acțiune, indicați-vă Google Chrome browser (cred că Firefox are aceeași caracteristică) la DK New Media. Acum selectați Vizualizare> Dezvoltator> Instrumente pentru dezvoltatori din meniu. Aceasta va încărca o grămadă de instrumente în partea de jos a browserului. Faceți clic pe pictograma mobilă mică din extrema stângă a barei de meniu Instrumente pentru dezvoltatori.

test-responsive-crom

Puteți utiliza opțiunile de navigare în partea de sus pentru a schimba vizualizarea din peisaj în portret sau chiar selectați orice număr de dimensiuni ale ferestrei preprogramate. Poate că va trebui să reîncărcați pagina, dar este cel mai tare instrument din lume pentru verificarea setărilor de reacție și pentru a vă asigura că site-ul dvs. arată excelent pe toate dispozitivele!

4 Comentarii

  1. 1
  2. 2

    Mulțumesc mult Douglas pentru acest articol bine explicat. Cu toate acestea, trebuie să fiu de acord cu conținutul lucrurilor. Pentru majoritatea site-urilor pe care le realizăm, un aspect receptiv nu va fi suficient. Avem nevoie de conținut receptiv. Dar pentru site-urile mai simple vom folosi articolul dvs. bine documentat despre cum să rezolvați problema!

Ce părere ai?

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.