Source: https://aukera.es/blog/diseno-responsive/
Timestamp: 2019-08-26 05:30:37+00:00

Document:
Diseño responsive: ¿cómo configurarlo correctamente? - Aukera
Si no sabes si tu sitio Web está optimizado para móviles, Google pone a disposición una herramienta online para que puedas comprobarlo.
Solo tienes que ir a Prueba de optimización para móviles e introducir la URL principal de tu sitio Web; en pocos segundos, te indicara si la página tiene un diseño optimizado o no.
Si tu sitio Web no se muestra correctamente en los dispositivos móviles, lo más seguro es que se estén escapando una parte importante de las visitas y usuarios que desean ver tu página y, lo más importante, posibles clientes.
Es fundamental tener una página web responsive, es decir, optimizada para todo tipo de dispositivo. De manera general podemos distinguir dos formas de optimización: “Responsive Web Design” y “Mobile First Web”.
¿En qué se diferencian Responsive Web Design y Mobile First Web?
Aunque van de la mano, hay que diferenciar entre Responsive Web Design o, lo que viene a ser lo mismo, Diseño Web Adaptativo, y Mobile First Web. Como su propio nombre indica, el Diseño Web Adaptativo es aquel capaz de adaptarse a diferentes tamaños y dispositivos, es decir, dependiendo de qué dispositivo sea en el que se cargue, tu sitio web se verá más accesible y fácil de usar. Sin embargo, lo que propone el término Mobile First es empezar a diseñar un sitio web desde la resolución más pequeña para ir creciendo y adaptando el contenido y el diseño a la resolución más grande.
Hasta ahora todos los sitios web han sido diseñados solo para equipos de sobremesa y el proceso de navegar por las webs en los teléfonos móviles era bastante incómodo, debido a una mala experiencia de usuario. Sin embargo, las tecnologías están cambiando y el principio de Mobile First se está convirtiendo en un concepto cada vez más extendido.
¿Qué conseguimos con el principio Mobile First?
Si empezamos maquetando un sitio web para la versión de escritorio y un usuario se conecta desde un dispositivo, primero cargará todo el contenido utilizado en la primera versión, hasta cargar los recursos necesarios para móvil. Por lo tanto, lo más recomendable es empezar a maquetar para la versión más pequeña, siempre optimizando el contenido que se utilice (hojas de estilos, ficheros, imágenes…), así conseguiremos que el usuario no cargue más recursos de los necesarios, reduciendo el tiempo de carga del sitio web.
La clave es conocer el tamaño, resolución o posibles orientaciones de las pantallas en las que necesitamos mostrar nuestro contenido basándonos en los usuarios que tenemos como objetivo.
Los pilares principales del Responsive son las Media Queries y la etiqueta Viewport.
Las Media Queries son las herramientas fundamentales que se encargan de aplicar diferentes estilos para diferentes dispositivos, y proporcionan la mejor experiencia para cada tipo de usuario que se encuentra navegando en tu sitio web. Nacen de la necesidad de crear breakpoints o puntos de ruptura en la hoja de estilos CSS que tengas predefinida. Permite que tu sitio Web sea manejable desde diferentes dispositivos.
Si no te ha quedado muy claro, las Media Queries son un módulo de CSS que sirve para detectar el tipo de dispositivo por el que se está navegando; de esa manera el contenido consigue adaptarse al dispositivo concreto a través de las distintas condiciones que tú mismo asignas, como pueden ser ancho y alto de la ventana del navegador, ancho y alto del dispositivo, la resolución del dispositivo o la orientación de la pantalla. Son declaraciones lógicas que actúan dependiendo de las condiciones específicas que tú mismo declaras en la hoja de estilos. Si la premisa se cumple, se aplicaran los estilos definidos; si no, los omitirá por completo.
Hay dos formas de implementarlas:
La primera opción para poner en funcionamiento las Media Queries es a través del atributo media de la etiqueta <link>. Como sabemos, esta etiqueta es la que se usa para enlazar una hoja de estilo con un documento HTML. En ese enlace podemos especificar condiciones que deben cumplirse para que los estilos enlazados se apliquen. Debería ir dentro del <head> de nuestro HTML.
Recuerda que la etiqueta <link> tiene esta forma:
Pues ahora simplemente agregamos el atributo media indicando la condición que se debe cumplir para que estos estilos se apliquen:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="estilos.css">
Lo que concretamente le estamos indicando es que cargue la hoja de estilos “estilos.css” si se cumple que el dispositivo de salida es una pantalla, no una impresora u otro dispositivo (only screen), y si la anchura de la ventana del navegador tiene de máximo 768 píxeles (max-width: 768px).
Si se cumplen las condiciones, los estilos se mostraran correctamente, en caso contrario, los estilos se omiten por completo, y el contenido se muestra sin estilos definidos:
Cargar de esta manera las Media Queries supone un problema, y es que cada vez que queramos cargar diferentes estilos dependiendo de ciertas condiciones que queramos aplicar para distintos dispositivos, tendríamos que cargar una hoja de estilos nueva. Esto conlleva una carga más lenta de tu sitio web, ya que se hacen solicitudes HTTP adicionales, que se podrían evitar.
Hay otro sistema más recomendable para aplicar las Media Queries: basta con incluir todas las condiciones necesarias dentro de un único archivo CSS. Así, incorporaríamos la construcción @media seguido de las condiciones que queremos definir para cada tipo de dispositivo y donde se apliquen entre llaves { } los estilos concretos para cada uno de ellos. Es la manera más aconsejable, ya que la carga es de un único archivo CSS.
La forma de incluir Media Queries dentro de la hoja de estilos CSS es la siguiente:
<!—- Aquí van todos los estilos CSS -->
Esta Media Query se ejecutará sólo cuando la anchura de la ventana del navegador sea menor de 320 píxeles.
Esta Media Query se ejecutará sólo cuando la anchura de la ventana del navegador sea mayor de 768 píxeles.
Además de las características para determinar las resoluciones y anchos de pantalla, podemos determinar otros parámetros, como por ejemplo la orientación del dispositivo, importante en dispositivos móviles:
<!-- Aquí van todos los estilos CSS -->
Landscape: orientación horizontal
También se pueden combinar más de una condición en la misma Media Query para concretar todavía más un rango de resolución, mediante los operadores lógicos:
Operador and: las dos condiciones deben cumplirse para que se apliquen los estilos.
Operador not: es una negación de una condición. Cuando esta condición no se cumpla, se aplicarán las media queries definidas.
Operador only: se aplican las reglas solo en el caso de que se cumpla.
Operador or: se pueden poner varias condiciones separadas por comas y en el momento que se cumpla cualquiera de ellas, se aplicarán los estilos.
Para esta Media Querie se mostrarán los estilos CSS cuando la anchura de la ventana del navegador sea entre 320 pixeles y 480 pixeles, ambos incluidos.
Estos son algunos de los parámetros generales que se pueden emplear a la hora de construir las condiciones en las Media Queries:
device-width: anchura de la resolución de pantalla.
device-height: altura de la resolución de pantalla.
orientation (portrait/landscape): dispositivo en horizontal o en vertical.
max-width: La anchura será menor que la indicada.
min-width: La anchura será mayor que la indicada.
Una cosa muy importante que debemos tener en cuenta a la hora de utilizar las Media Queries, es diferenciar entre el ancho de ventana del navegador y la resolución de la pantalla del dispositivo, es decir:
@media only screen and (min-device-width: 960px){
En esta Media Querie que hemos definido, el atributo min-device-width se refiere a la resolución de la pantalla del dispositivo a la hora de cargar la hoja de estilos definida.
Esto quiere decir que si reducimos el ancho del navegador, seguirá mostrándose de la misma manera, ya que la resolución de la pantalla seguirá siendo la misma y no se adaptara al nuevo ancho de la ventana del navegador (es decir, si la pantalla de nuestro móvil tiene 450 px y el navegador detecta que lo óptimo sería visualizarla con 600 px así lo hará si no usamos la meta-etiqueta Viewport).
En caso de usar los atributos para la resolución de la pantalla, la etiqueta Viewport es necesaria.
¿Qué hace la meta-etiqueta Viewport?
El Viewport es el área visual donde se plasma el contenido del documento HTML de tu sitio web. Se podría traducir como vista o ventana y nos sirve para definir qué área de pantalla está disponible al renderizar un documento, la escala/zoom que debe mostrar inicialmente. Todo ello, con parámetros que le damos a la propia etiqueta meta, separados por comas en caso de utilizar más de uno:
width Valor integral (en pixels) o constante device-width Define el ancho de la página.
height Valor integral (en pixels) o constante device-height Define el alto de la página.
Initial-scale Cualquier número real de 0.1 en adelante.
1 representa no escalable
(1.0 para no tener zoom o 2.5 para tener un zoom del 2,5 de aumento, por ejemplo). La escala / zoom inicial del sitio Web.
User-scale “yes” / “no” Define los permisos para que el usuario pueda o no hacer zoom.
Minimun-scale Cualquier número real de 0.1 en adelante. 1 representa no escalable Define la escala / zoom mínimo que podemos hacer en la página.
Maximun-scale Cualquier número real de 0.1 en adelante. 1 representa no escalable Define la escala / zoom máxima que podemos hacer en la página.
Prácticamente todos los navegadores de smartphones al entrar a un sitio analizan el tamaño total y lo escalan para que se muestre completo en la pantalla, este procedimiento genera muchas veces resultados inapropiados.
Por ejemplo, esta imagen mide 320 píxeles al igual que la pantalla del dispositivo, ahora bien, la imagen aparece con un tamaño inferior a causa del efecto de la escala automática.
La escala automática se puede evitar y controlar muy fácil con el uso de este atributo Viewport: es un atributo del tag <meta> que debe incluirse entre las etiquetas <head> del documento HTML de tu sitio web:
Con solo agregar estas líneas de código, la imagen se adaptará al dispositivo:
Es posible definir un tamaño específico para el área visible del documento; muchos sitios web ajustan directamente el Viewport a 320 px para ajustar la apariencia al display vertical de un smartphone, usando un código similar a este:
<meta name="viewport" content="width=320"/>
Pero, con los diferentes equipos, dispositivos y tamaños de pantalla, definir un tamaño específico puede ser una mala práctica que puede mostrar resultados erróneos en algunos equipos o cuando el dispositivo cambia de posición. Afortunadamente podemos configurar el viewport para ajustarse dinámicamente al tamaño de cada dispositivo usando el atributo “device-width”, que es equivalente al 100% del ancho de la pantalla del dispositivo, independiente de su tamaño, posición o resolución:
El alto de la pantalla también es configurable con las mismas propiedades a través del atributo “height” , aunque –salvo condiciones muy específicas– no es necesario definirlo. Esta propiedad se asignará automáticamente a través del scroll.
También podemos controlar la escala de la vista con el atributo “initial-scale“. El sitio se mostrará al doble de su tamaño original:
<meta name=”viewport” content=”width=device-width; initial-scale=2“/>
Es posible además, limitar el tamaño al que se puede escalar el sitio con el atributo “maximum-scale” . El siguiente ejemplo muestra el documento en escala correcta y permite ampliar (zoom) hasta al doble de su tamaño.
<meta name="viewport" content="width=device-width, maximum-scale=2"/>
Por ultimo, está el atributo “user-scalable”, que controla los permisos de reducir/ampliar el documento. Con el siguiente código, el sitio se muestra en su escala original y no es posible cambiar el tamaño desde el dispositivo móvil (importante mencionar que no se recomienda deshabilitar la opción de escalar el contenido).
En general, el atributo viewport permite muchas configuraciones, pero para asegurar compatibilidad con la mayor cantidad de pantallas y navegadores móviles, se recomienda utilizar este formato como base:
Para conseguir que nuestro sitio web se adapte a los diferentes anchos de pantalla, estos parámetros serán muy útiles:
Lo primero, y lo más importante es dejar de usar píxeles y usar porcentajes a la hora de tomar medidas (por ejemplo: width: 60%).
Que el ancho de la página sea 100% no significa que queramos que la pantalla este en una alta resolución, sino que, si queremos limitar el ancho/alto junto al máximo/mínimo del contenido, debemos usar los diferentes parámetros apropiados para ello (max-width o si quisiésemos establecer un alto máximo max-height; para establecer el mínimo sería min-width y min-height)
Las posiciones absolutas o fijas no son recomendables usarlas para posicionar contenido (menos cuando hagan falta). Lo mejor es utilizar el atributo float (float:left/right), es una técnica muy usada.
Hay que hacer que las imágenes y vídeos no sobresalgan de la estructura; si no, aparecerá un scroll lateral en los dispositivos móviles que descolocará totalmente el diseño.
En resumen, ¿cuál es la mejor opción para tu sitio web? La experiencia del usuario siempre será lo primero.
A los usuarios no les importa que versión utilices ni como estés optimizando tu sitio web; su objetivo es poder encontrar lo que buscan de manera más eficiente y rápida. Por tanto, si tu web está más centrada en el contenido, es mejor una Responsive Web Design. Pero si necesitas que el usuario interaccione mucho con la web, es mejor una Mobile First, ya que cada vez se consume más información desde los dispositivos móviles.
La conclusión es sencilla, los clientes están yendo más rápido que las propias empresas y estas deben adaptarse a ellos y a sus nuevas costumbres de consumo online a través de dispositivos. Esto es una solución para reducir la tasa de rebote, haciendo que el usuario pase más tiempo en la página por su facilidad, comodidad, y óptima visualización y lectura de los contenidos.
A día de hoy, Google valora todas aquellas páginas web que se adaptan perfectamente a cualquier dispositivo, ya sea PC, smartphone, tablet… Por ello, es necesario que optimices tu sitio web de modo que cualquier usuario pueda visualizar la página sin importar el medio por el cual acceda.
Y tu sitio web, ¿se ve bien desde cualquier dispositivo?
2018-04-25 a las 14:59
Excelente. Una explicación muy clara, expresada en un impecable castellano y bien argumentada. La guinda del pastel: las imágenes ilustrativas.
Solo una duda en este párrafo: “Por ultimo, está el atributo “user-scalable”, que controla los permisos de reducir/ampliar el documento. Con el siguiente código, el sitio se muestra en su escala original y NO es posible cambiar el tamaño desde el dispositivo móvil (importante mencionar que no se recomienda deshabilitar la opción de escalar el contenido).” ¿”No” es posible o “nos” es posible? Entiendo que nos es posible a los usuarios.
Enhorabuena y muchas gracias por el artículo y por tu respuesta,
2018-04-27 a las 08:32
cuando disponemos de un diseño responsive, opcionalmente podemos establecer, configurando el atributo user-scalable, si queremos que los usuarios puedan o no aumentar/disminuir el contenido que se encuentre en la página que están visitando.
En el artículo incluyo este ejemplo:
junto con la siguiente explicación:
“Con el siguiente código, el sitio se muestra en su escala original y no es posible cambiar el tamaño desde el dispositivo móvil (importante mencionar que no se recomienda deshabilitar la opción de escalar el contenido).”
Cuando comento que no es posible cambiar el tamaño, hago referencia al atributo user-scalable que se encuentra en el ejemplo y que en este caso tiene valor: no, por lo tanto, estamos indicando en ese atributo que los usuarios no van a poder reducir/ampliar el contenido de la página. (hacer zoom)
Nosotros somos quienes decidimos dicha acción, por defecto el valor del atributo user-scalable es yes.
Te aconsejo que dejes el atributo como viene por defecto (user-scalable=yes), ya que no dejar al usuario hacer zoom puede convertirse en un grave problema para gente que por ejemplo tiene problemas de visión.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución