Diseño Responsive con CSS para móviles, tablets…

Diseño Responsive y el Nuevo algoritmo de Google

Google avisa a los responsables de sitios web que si no tienen adaptadas las páginas a dispositivos móviles éstas sufrirán una penalización y podrán desaparecer de los resultados de búsquedas que se realicen mediante móvil. Esta penalización entró en vigor el 21 de abril de 2015.

¿Qué es el diseño web responsive?

El diseño web responsive también conocido como diseño adaptativo consiste en implementar diferentes técnicas de diseño y programación para que los contenidos de una misma página web puedan verse de forma correcta en los distintos dispositivos: ordenadores, tablets, móviles (pantallas con distintas medidas).

En algunas ocasiones cuando se habla de Diseño Responsive sólo se incluyen las técnicas css de diseño. Normalmente asociamos Diseño Responsive a reglas de estilo css para móvil. El Diseño responsive abarca más técnicas pero en este artículo nos centraremos en diseño responsive css, aunque nombraremos otras soluciones.

¿Qué es mejor?¿Diseño web responsive o una página distinta para móvil?

Google recomienda el diseño web responsive pero hay ocasiones en que esto no es posible, por ejemplo hay páginas web que el contenido que muestran a los usuarios de ordenadores es diferente al contenido de usuarios de dispositivos móviles, otras veces el contenido es complicado de manejar en pantallas que no tengan una dimensión mínima… son decisiones que hay que valorar, pero en general es aconsejable para la mayoría de webs trabajar con diseño responsive.

A día de hoy se está implantando una nueva técnica de trabajo: web móvil AMP. Es conveniente y necesario adaptar nuestras web a AMP. De todas formas el enfoque AMP no te librará de la obligación de crear reglas css para móvil. Al menos de momento. Si necesitas instalar AMP en tu web puedes visitar el siguiente enlace:

LpH: configurar-amp-en-wordpress

¿Cómo se logra el diseño web responsive?

1. Se implementarán en el archivo css reglas de tamaño fluido (diseño líquido) que se adaptan al ancho del dispositivo  o al ancho de los elementos de la web.
2. Mediante Javascript u otros lenguajes se modifica el menú principal de página.
3. Se descartan contenidos y recursos que puedan perjudicar en la carga de la página así como contenidos que por sus características sean complicados de manejar desde pantallas más pequeñas, también lo haremos en la css.
4. Se desactivan efectos de página que no funcionan en dispositivos móviles.

 

¿Qué ventajas ofrece el diseño responsive?

Si decides trabajar el Diseño Responsive en lugar de crear varias páginas para los distintos dispositivos, estas son algunas de las ventajas:

1. Desarrollo rápido.
2. Evita contenidos duplicados.
3. No redirecciona la web hacia otro dominio tipo movil.midominio.com.
4. Mejora la experiencia de usuario.
5. Mejora el posicionamiento (Google AVISA!)

Recomendaciones para transformar el diseño de una web en Responsive

Menú Responsive – Menú móvil, tablet…

Si tu theme de WordPress no lo tiene implementado tendrás que crear un menú tipo desplegable para conseguir una buena experiencia de usuario. El menú lo puedes implementar:

1. con código (Javascript u otros lenguajes)
2. utilizando un plugin, en este artículo encontrarás un plugin que te puede ayudar
3. mediante diseño css

Estilos .css para los distintos dispositivos – DOS ENFOQUES

Aquí puedes tomar dos decisiones:

1. Crear una hoja de estilos .css para cada dispositivo.
2. En la hoja de estilos de tu página añadir diferentes reglas para trabajar con el Diseño Responsive.

1. Una hoja de estilos para cada dispositivo – crear y enlazar varios archivos css

Personalmente no lo recomiendo porque significa que hay que cargar diferentes hojas de estilo y puede hacer tu web más lenta (como mínimo cargará el archivo estilos por defecto más el que corresponde al dispositivo). De todas formas si has decidido implementar tu diseño responsive de esta manera, tendrás que abrir el archivo html y añadir una línea al head del archivo donde llames a la carga de la nueva .css

<link rel="stylesheet" media="only screen and (max-width: 480px)" href="stylemovil.css" >

Estas indicando que enlace y cargue la hoja de estilos stylemovil.css cuando la pantalla es menor a 480px.

En tu nuevo archivo stylemovil.css deberás implementar todos los estilos que quieras modificar como si de la página principal de estilos se tratase.

Ejemplo:

#mensaje{width:100%;color:#060; font-weight:bold}

2. Añadir diseño responsive css dentro del style.css de tu página

En la css principal puedes modificar los tamaños de contenedores, texto, imágenes… de tu web y descartar contenidos y recursos que puedan perjudicar en la carga de la página así como contenidos que por sus características sean complicados de manejar desde pantallas más pequeñas.

Hay dos maneras de conseguir esto:

1. Propuesta 1: Enfocado a los diferentes tamaños de las pantallas de dispositivos (obsoleto): es decir crear una media query (enseguida te explico este término) para cada tamaño de dispositivo (ipad vertical, iphone horizontal, sony modelo tal..). Hoy en día hay demasiados dispositivos con diferentes medidas que hacen inviable esto, imagina como sería:

  – reglas css para móvil iphone 6s pantalla horizontal

  – otras reglas css para iphone 6s pantalla vertical

 – diferentes css para samsung modelo X pantalla horizontal… y así con todos los modelos actuales. Y por supuesto cada vez que sale un nuevo dispositivo móvil al mercado debemos crear nuevas css móviles.

2. Propuesta 2: Enfocado a los cambios que sufre tu web cuando se modifica el ancho/alto de la pantalla del navegador (tamaño de los elementos, contenedores, div…) se trabaja igual que en la «propuesta 1″ con media query, pero sin consultar y crear una media query para cada tamaño horizontal y vertical de cada dispositivo disponible en el mercado, lo que hacemos es crear media querys según vemos que nuestra web muestra un aspecto no deseado al ampliar pantalla o reducir. (Conviene emplear herramientas para desarrolladores en nuestro navegador).

En pocas palabras si mi web cuando la veo en un tamaño menor a 485px se montan los elementos, crearé una regla de estilos para corregir esto.

@media only screen and (max-width: 485px) {
    .contenedor{
        //cambiar tamaño
    }
}

Este es el enfoque adecuado para trabajar el diseño responsive mediante css para móviles y otros dispositivos.

Css Responsive con Media Query

¿Qué son las Media Query?

Cuando hablamos de Media Query nos estamos refiriendo a una técnica de CSS3 que consiste en agrupar un conjunto de propiedades css que se aplicarán si una determinada propiedad (medida de pantalla se cumple). Te lo explico con un ejemplo:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

En este ejemplo estamos indicando que «cuando la pantalla cambie a una resolución menor de 500px entonces cambiar el color de fondo del cuerpo a blanco«.

Estructura Media Query CSS3

@media not|only mediatype and (media feature) {

//aquí el código CSS

}

@media la palabra que define que queremos implementar reglas de estilo, su uso es obligatorio.

Mediatype (tipo de medio)

Estos son los valores que puedes poner:

1. all (para todos los dispositivos)
2. print (usado para impresoras)
3. screen (para pantallas de ordenadores, tabletas, móviles…)
4. speech (para lectores de pantalla)

Ejemplo

@media print {
    //se aplica a impresoras, en este caso no tiene sentido el uso de media feature
}
@media screen and (min-width: 480px) {

    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}
//se aplica a cualquier pantalla mayor a 480px

Media Feature, conocidas también como Expresión 

Aquí es donde escribimos los tamaños de pantalla, resoluciones, ratios (proporción alto ancho), existen varias expresiones, te dejo una lista:

width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | aspect-ratio | min-aspect-ratio | max-aspect-ratio | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid

@media all and (color) { ... }

Las reglas de estilo se aplicarán a todos los dispositivos que soporten color.

@media screen and (min-aspect-ratio: 1/1) { ... }

En este caso estamos indicando que el ratio ancho alto es igual, por lo tanto las reglas de estilo agrupadas en esta query se aplicarán a todas las pantallas cuyo proporción de aspecto sea mayor o igual que 1:1 (cuadrada u horizontal)

Ejemplos Media Queries

Puedes implementar tantas Media Query como tamaños de pantalla* (para diferenciar de tamaños de dispositivos hablaremos de tamaños de pantalla) quieras tratar.

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

En este ejemplo estamos indicando que «cuando la pantalla sea más grande o igual a 480px entonces el sidebar flotará a la izquierda de la pantalla y el cuerpo principal se desplaza con un margen«.

@media (min-width: 768px) and (max-width: 979px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}

Reglas de estilo para pantallas de tamaño mayor o igual a 768px y menor a 979px. Si te fijas las dos expresiones van unidas por el operador lógico and y lo debes utilizar para unir varias expresiones.

Recomendación css para imágenes y vídeos

Las imágenes en los distintos dispositivos pueden perder la escala o salirse de la pantalla, es recomendable añadir el siguiente código css dentro de tu Media Query:

img {
    max-width: 100%; //también puedes probar width: 100%;
    height: auto;
}

video {
    max-width: 100%;
    height: auto;
}

Recursos, información y enlaces que pueden ayudarte con el diseño responsive de tu web

Fundación Mozilla

www.w3schools.com

Prueba de optimización para móviles de Google.

Hemos llegado al final del tutorial sobre diseño responsive css. Mi recomendación es que trabajes las reglas css para móvil dentro del mismo archivo style.css de tu página. Que trabajes con media query agrupando los distintos tamaños de pantalla. Y por último que instales AMP en tu web y trabajes los contenidos de cada página.

Si tienes alguna duda por aquí estaré.