Què és el disseny responsiu? (Vídeo explicatiu i infografia)

disseny web sensible

Ha trigat una dècada disseny web sensible (RWD) per passar a ser corrent des de Cameron Adams va presentar per primera vegada el concepte. La idea va ser enginyosa: per què no podem dissenyar llocs que s’adaptin a la finestra del dispositiu en què es visualitza?

Què és el disseny responsiu?

El disseny web responsiu (RWD) és un enfocament de disseny web dirigit a crear llocs web per proporcionar una experiència de visualització òptima: lectura i navegació fàcils amb un mínim de redimensionament, panoràmica i desplaçament, a través d’una àmplia gamma de dispositius (des de telèfons mòbils fins a ordinadors d’escriptori) monitors). Un lloc dissenyat amb RWD adapta el disseny a l’entorn de visualització mitjançant l’ús de quadrícules fluides basades en proporcions, imatges flexibles i consultes de suports CSS3, una extensió de la regla @media.

Wikipedia

En altres paraules, es poden ajustar elements com les imatges, així com la disposició d'aquests elements. Aquí teniu un vídeo que explica què és el disseny sensible i per què la vostra empresa hauria d’implementar-lo. Recentment hem renovat el DK New Media el lloc serà sensible i ara està treballant Martech Zone fer el mateix!

La metodologia per crear un lloc sensible és una mica tediós, ja que heu de tenir una jerarquia dels vostres estils que s’organitzin en funció de la mida de la finestra gràfica.

Els navegadors són conscients de la seva mida, de manera que carreguen el full d’estils de dalt a baix, consultant els estils aplicables per a la mida de la pantalla. Això no significa que hagueu de dissenyar diferents fulls d’estil per a cada mida de pantalla, només heu de canviar els elements necessaris.

Operar amb una mentalitat primer mòbil és l’estàndard de referència actual. Les millors marques de la categoria no només pensen en si el seu lloc és apte per a mòbils, sinó en l’experiència completa del client.

Lucinda Duncalfe, CEO de Monetate

Aquí teniu una infografia de Monetate que il·lustra els avantatges potencials de crear un disseny sensible per a diversos dispositius:

Infografia de disseny web sensible

Si voleu veure un lloc responsiu en acció, apunteu el vostre Google Chrome navegador (crec que Firefox té la mateixa funció) a DK New Media. Ara seleccioneu Visualització> Desenvolupador> Eines per a desenvolupadors des del menú. Això carregarà un munt d’eines a la part inferior del navegador. Feu clic a la petita icona del mòbil a l'extrem esquerre de la barra de menú Eines per a desenvolupadors.

responsive-testing-chrome

Podeu utilitzar les opcions de navegació a la part superior per canviar la visualització de paisatge a vertical, o fins i tot seleccionar qualsevol nombre de mides de finestra preprogramades. És possible que hagueu de tornar a carregar la pàgina, però és l'eina més divertida del món per verificar la configuració de resposta i garantir que el vostre lloc tingui un aspecte fantàstic en tots els dispositius.

3 Comentaris

  1. 1
  2. 2

    Moltes gràcies Douglas per aquest article ben explicat. Tot i això, he d’estar d’acord pel que fa al contingut. Per a la majoria dels llocs que fem, un disseny sensible no serà suficient. Necessitem contingut responsiu. Però, per als llocs web més bàsics, farem servir el vostre article ben documentat sobre com gestionar-ho.

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.