Que é o deseño responsivo? (Vídeo explicativo e infografía)

deseño web sensible

Levou unha década para deseño web sensible (RWD) Cameron Adams presentou por primeira vez o concepto. A idea foi enxeñosa: por que non podemos deseñar sitios que se adapten á pantalla do dispositivo no que se está a ver?

Que é o deseño responsivo?

O deseño web responsivo (RWD) é un enfoque de deseño web dirixido a elaborar sitios para proporcionar unha experiencia de visualización óptima: lectura e navegación sinxelas cun mínimo de redimensionamento, panorámica e desprazamento a través dunha ampla gama de dispositivos (desde teléfonos móbiles ata computadoras de escritorio monitores). Un sitio deseñado con RWD adapta o deseño ao ambiente de visualización empregando redes fluídas baseadas en proporcións, imaxes flexibles e consultas de medios CSS3, unha extensión da regra @media.

Wikipedia

Noutras palabras, pódense axustar elementos como as imaxes e o deseño destes elementos. Aquí tes un vídeo que explica o que é o deseño sensible e por que a túa empresa debería implementalo. Recentemente remodelamos o DK New Media o sitio web será sensible e agora está a traballar Martech Zone facer o mesmo!

A metodoloxía para construír un sitio que responde é un pouco tediosa xa que precisa ter unha xerarquía cos seus estilos que estean organizados en función do tamaño da ventá gráfica.

Os navegadores son conscientes do seu tamaño, polo que cargan a folla de estilo de arriba abaixo, consultando os estilos aplicables ao tamaño da pantalla. Isto non significa que teñas que deseñar follas de estilo diferentes para cada tamaño de pantalla, só tes que cambiar os elementos necesarios.

Operar cunha mentalidade de primeiro móbil é o estándar de base na actualidade. As mellores marcas da súa clase non están pensando só en saber se o seu sitio é compatible con dispositivos móbiles, senón na experiencia completa do cliente.

Lucinda Duncalfe, CEO de Monetate

Aquí tes unha infografía de Monetate que ilustra os beneficios potenciais de crear un deseño sensible para varios dispositivos:

Infografía de deseño web sensible

Se desexa ver un sitio responsivo en acción, sinale o seu Google Chrome navegador (creo que Firefox ten a mesma función) para DK New Media. Agora selecciona Ver> Programador> Ferramentas para programadores desde o menú. Isto cargará unha chea de ferramentas na parte inferior do navegador. Fai clic na pequena icona do móbil situada á extrema esquerda da barra de menú Ferramentas para desenvolvedores.

Cromo de proba sensible

Podes usar as opcións de navegación arriba para cambiar a vista de horizontal a vertical ou incluso seleccionar calquera número de tamaños de ventanas preprogramadas. É posible que teñas que volver cargar a páxina, pero é a ferramenta máis legal do mundo para verificar a túa configuración de resposta e garantir que o teu sitio ten un aspecto estupendo en todos os dispositivos.

3 Comentarios

  1. 1
  2. 2

    Moitas grazas Douglas por este artigo ben explicado. Debo estar de acordo con isto no aspecto do contido. Para a maioría dos sitios creamos un deseño sensible non será suficiente. Necesitamos contido sensible. Pero para os sitios web máis básicos, seguro que usaremos o seu artigo ben documentado sobre como tratar isto.

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.