Que é o deseño responsivo? (Vídeo explicativo e infografía)
Levou unha década para deseño web sensible (RWD) para ir mainstream xa Cameron Adams presentou por primeira vez o concepto en 2010. A idea era xenial: por que non podemos deseñar sitios que se adapten á vista do dispositivo no que se está a ver?
Que é o deseño responsivo?
O deseño web receptivo é un enfoque de deseño que garante que un sitio web proporcione unha experiencia de visualización óptima en calquera dispositivo, independentemente do tamaño ou resolución da pantalla. Implica o uso de deseños flexibles, deseños baseados en cuadrículas e consultas multimedia para crear un sitio que se axuste ao tamaño da pantalla na que se está a ver. Isto significa que un sitio web deseñado con deseño web responsive terá un aspecto e funcionará ben nun ordenador de escritorio, unha tableta ou un teléfono intelixente.
Noutras palabras, pódense axustar elementos como imaxes, así como a disposición deses elementos. Aquí tes un vídeo que explica o que é o deseño receptivo e por que a túa empresa debería implementalo. Se está a desenvolver un novo deseño de sitio ou aplicación web, o deseño web responsive é unha obriga, non unha opción, xa que máis da metade de todo o tráfico web procede de dispositivos móbiles que teñen diferentes anchos e alturas de visualización.
O deseño sensible tamén é óptimo para os deseñadores web, que non teñen que crear experiencias independentes que sexan únicas en función do dispositivo ou da ventana gráfica. O deseño web responsive pódese realizar usando CSS.
Consultas de vista CSS de deseño sensible
Aquí tes un exemplo dunha folla de estilo que está axustando o tamaño da fonte en función da ventana gráfica mediante unha consulta multimedia:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
Os navegadores son conscientes do seu tamaño e cargan a folla de estilo de arriba a abaixo. Consultando os estilos aplicables para o tamaño da pantalla, pode establecer elementos de estilo específicos para cada ancho mínimo e máximo de dispositivo. Isto non significa que teñas que deseñar sitios diferentes para cada tamaño de pantalla, só tes que cambiar os elementos necesarios usando as consultas multimedia.
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 Monetizar ilustrando os posibles beneficios de crear un deseño receptivo para varios dispositivos:
O teu sitio é responsive?
Unha forma sinxela de ver se o teu sitio responde é só crecer ou reducir a xanela do teu navegador para ver se os elementos se moven segundo o ancho do navegador.
Para máis precisión, apunta o teu Google Chrome navegador para o seu sitio. Seleccione Ver> Programador> Ferramentas para programadores do menú. Isto cargará unha morea de ferramentas nun panel ou nunha nova xanela. Fai clic na icona pequena á esquerda da barra de menú de Ferramentas para programadores que semella unha icona de móbil e tableta. Pode seleccionar algúns dispositivos estándar e incluso cambiar se desexa ver a páxina horizontal ou verticalmente.
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 ventás preprogramados. É 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.