Marketing de ContidoVídeos de mercadotecnia e vendasInfografía de mercadotecniaMarketing móbil e tableta

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:

Infografía de deseño web sensible

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.

  • ferramentas de desenvolvemento de chrome tableta sensible
  • ferramentas de desenvolvemento de Chrome responsive mobile horizontal
  • ferramentas de desenvolvemento de chrome para móbiles sensibles
  • Herramientas de programador chrome para escritorio 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 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.

Douglas Karr

Douglas Karr é CMO de OpenINSIGHTS e o fundador da Martech Zone. Douglas axudou a decenas de startups exitosas de MarTech, axudou na debida dilixencia de máis de 5 millóns de dólares en adquisicións e investimentos en Martech e segue axudando ás empresas a implementar e automatizar as súas estratexias de vendas e mercadotecnia. Douglas é un experto e relator de MarTech en transformación dixital recoñecido internacionalmente. Douglas tamén é autor publicado dunha guía de Dummie e dun libro de liderado empresarial.

artigos relacionados

Botón de volta ao principio
preto

Adblock detectado

Martech Zone pode fornecerche este contido sen ningún custo porque monetizamos o noso sitio mediante ingresos publicitarios, ligazóns de afiliados e patrocinios. Agradeceríamos que elimines o teu bloqueador de anuncios mentres visitas o noso sitio.