Diseño de una web adaptable. Una acción necesaria en el diseño de nuestra página web

• El diseño web adaptable

  El diseño web adaptable nos permite enviar desde nuestros ervidor el mismo código HTML a todos los dispositivos desde los cuales se realiza una petición y se utilizará el lenguaje CSS para modificar el procesamiento de la página en cada dispositivo. En definitiva, con un diseño web adaptable enviaremos a todos los dispositivos un mismo código ajustado al tamaño de pantalla.

• La etiqueta “meta name=”viewport”

  La manera de indicar a los navegadores que nuestro sitio web se adaptará a todos los dispositivos desde los que se efectúe una petición de consulta es incluyendo en la cabecera del mismo la siguiente meta etiqueta.
  <meta name=»viewport« content=»width=device-width, initial-scale=1.0«>
  Incluyendo la anterior etiqueta podremos;

  1. El uso de la etiqueta nos permitirá controlar el ancho y el ajuste de la ventana de visualización del navegador
  2. Incluyendo width=device-width podremos hacer coincidir el ancho de la pantalla en píxeles con independencia del dispositivo desde el cual se haga la consulta.
  3. Además, si incluimos en la etiqueta el atributo “initial-scale=1” estaremos estableciendo una relación de 1:1 entre los píxeles CSS y los píxeles independientes de cada dispositivo.

  En definitiva, con la meta etiqueta meta name=”viewport” buscamos indicar a los navegadores cómo se deben ajustar las dimensiones y el escalado de la página o la anchura del dispositivo.

Todo ello va resultar esencial a fin de optimizar dos aspectos fundamentales.

• Optimizar el posicionamiento de nuestro sitio web en los diferentes buscadores
• Maximizar la experiencia del usuario y con ello, seguramente, el retorno de cada uno de ellos a nuestra estrategia de marketing online.