Hace unos días nuestro cliente Jungleshop, una tienda online, nos pidió convertir su sitio web en “responsive”, o lo que es lo mismo, adaptable a diferentes tamaños de pantalla. Al igual que esta tienda online, los propietarios de sitios web no pueden ignorar la gran cantidad de usuarios de Internet que usan móviles y tabletas para navegar por la red. Nosotros siempre implementamos este tipo de diseño, como hicimos en nuestro último trabajo del sector salud y belleza, en el que dedicamos unas líneas al diseño adaptable. Por ello vamos a hablar hoy de cómo adaptar la hoja de estilos de tu página web para que se convierta en un diseño “responsive”.
¿Porqué Responsive?
Según Julian Marquina el 86% de los usuarios de Internet acceden a la red usando un teléfono móvil inteligente (smartphone). Estos son datos de 2013 que nos dan una idea de la vital importancia que tiene adaptarse a los tiempos que corren si nuestro negocio está ligado a la web. Frente a la tableta el móvil ganó adeptos para realizar búsquedas en Internet, hacer compras online o ver un vídeo en YouTube.
Un sitio web que no está adaptado a la pantalla del móvil le hace al usuario muy difícil la tarea de navegar.
Responsive no es lo mismo que sitio web para móviles
No se debe confundir diseño responsive con diseño para móviles. Los diseños para móviles (del tipo movil.tusitio.com) suelen ser versiones reducidas y completamente diferentes a la web original). Es mucho mejor dejar que los contenidos se recoloquen como bloques uno debajo del otro para poderlos ver pasando la pantalla con el dedo.
Bueno para SEO
¿Qué tiene que ver el diseño con el posicionamiento web? Pues, aparte de que ya nosotros lo hemos recomendado en este post, hay una razón de peso: Google ya ha publicado en diferentes ocasiones noticias relacionadas con la necesidad de usar este tipo de diseño y que lo promueven para que los diseñadores vayan en esta dirección. De hecho, a los robots de Google les es más fácil rastrear las responsive websites.
Además, un sitio web va a tener más visitas al ser “Mobile Friendly” (amigo de los móviles) y esto a su vez repercutirá en la reputación de esa página.
Incluso el índice de rebote (el bounce rate es la tasa de usuarios que no hacen clic al llegar a tu página y abandonan) se ve mejorado notablemente al usar este tipo de diseño, debido a que el usuario no tiene que esforzarse en hacer zoom con los dedos para ampliar la zona de la web en la que quiere ver la información. Hacer clic en un sitio no responsive es incluso mucho más difícil. A fin de cuentas, por muy finos que sean nuestros dedos, si hay que dar un toque de pantalla en una zona minúscula es como buscar una aguja en un pajar…
Formas de implementar Responsive en un sitio web
- Edita el <head> de cada página. Debes incluir la siguiente línea antes de </head>:
<meta name="viewport" content="width=device-width, initial-scale=1"> - Incluye en la hoja de estilos los parámetros @media. Según el tamaño en el que quieras trabajar tendrás que establecer diferentes tamaños en píxeles. Por ejemplo, la etiqueta @media (max-width:767px) {aquí irían los estilos específicos} definirá los estilos para cualquier pantalla con un tamaño no superior a 767 píxeles.
- Ajusta el tamaño del texto (font-size) para que se pueda leer bien en un móvil. Necesitarás fuentes más grandes que las normales.
- No elimines elemntos de tu sitio web móvil. Cualquier información es relevante. Para algo la has puesto ahí. El dedo puede deslizarse mucho más rápido de arriba hacia abajo que un ratón.
Estructura tu página en HTML5 para una mejor semántica
HTML5 ha revolucionado el diseño web. Tenemos ahora una infinidad de posibilidades usando este nuevo lenguage. Pero naturalmente hay aspectos importantes que debemos tener en cuenta para darle a tu página la estructura de acuerdo con la semántica estándar del html5 y así facilitar a los robots de los buscadores el rastreo de tu página.
Cuando estamos diseñando una página responsive debemos prestar mucha atención a la estructura de la misma. Con html5 es mucho más fácil hacerse la idea ya que incluye las etiquetas de cada sección para poder identificar rápidamente en qué parte de la página nos encontramos.
Aquí os dejo un ejemplo de página web en HTML5 con lo comentado, tal y como nos lo muestra creativebloq.com
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title> Demo | Responsive Web</title> <meta name="viewport" content="width=device-width, minimumscale= 1.0, maximum-scale=1.0" /> <link href="styles/main.css" type="text/css" rel="stylesheet"> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type='text/javascript' src='scripts/respond.min.js'></script> </head> <body> <div id="wrapper"> <header> <nav id="skipTo"> <ul> <li> <a href="#main" title="Skip to Main Content">Skip to Main Content</a> </li> </ul> </nav> <h1>Demo</h1> <nav> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="About">About</a></li> <li><a href="#" title="Work">Work</a></li> <li><a href="#" title="Contact">Contact</a></li> </ul> </nav> <div id="banner"> <img src="images/kaws.jpg" alt="banner" /> </div> </header> <section id="main"> <h1>Main section</h1> <p>Lorem…p> </section> <aside> <h1>Sub-section</h1> <p>Lorem …p> </aside> </div> </body> </html>
Y del mismo sitio web tenemos un ejemplo de los códigos a usar en la hoja de estilos y que se aplicarán sólo a los tamaños indicados en el tag @media:
#wrapper {
width: 96%;
max-width: 920px;
margin: auto;
padding: 2%;
}
#main {
width: 60%;
margin-right: 5%;
float: left;
}
/* Media Queries */
@media screen and (max-width: 480px) {
#skipTo {
display: block;
}
header nav, #main, aside {
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
header nav li {
margin: 0;
background: #efefef;
display: block;
margin-bottom: 3px;
}
header nav a {
display: block;
padding: 10px;
text-align: center;
}
}
Como se puede observar la consulta @media screen and (max-width: 480px) nos indica que para pantallas con un ancho de hasta 480 píxeles se aplicará el estilo que esté dentro de los corchetes {}.
Y para terminar me gustaría decir que aplicar este tipo de estilos no es muy difícil de implementar. Sólo requiere de paciencia y un par de tazas de café!
De primeras felicitarte por el artículo que has escrito. Muy buena aportación para los desarrolladores y diseñadores web. He de comentar, que podrías aportar a este artículo cómo enlazar tu página web al subdominio creado para la versión móvil. Eso sería de gran ayuda.
Un saludo
De todos modos, dejo una pequeña aportación con este artículo
Gracias por tus comentarios y tu aportación. Saludos.
Excelennte..lo aplicare..
Gracias!!