Cómo hacer una web responsive para mejorar tus resultados

Los programadores de páginas web deben adaptarse continuamente a las nuevas tendencias tecnológicas que hoy en día demanda el mercado. Aquí entran en juego los famosos smartphones, en los que cada vez consumimos más contenido multimedia, visitando nuestras páginas web de manera fácil y accesible, como si de un PC se tratara. ¿Y como se consigue esto? Pues con el conocido y cada vez más de moda Responsive Design.

En el post de hoy vamos a explicar brevemente cómo hacer una web responsive para mejorar tus resultados y obtener un buen SEO. Aunque nos basaremos en el desarrollo de la programación, simplemente modificando nuestro código, y no en el de diseño en sí como pueden hacer los arquitectos de la información, cabe señalar también que hay varias técnicas que son utilizadas por los mismos para hacer un diseño responsive en nuestra página web, así como la técnica Mobile First, que consiste en hacer primero nuestro diseño web en el dispositivo móvil y luego adaptarlo a PC. Nosotros, en cambio, no nos aventuraremos a éstas técnicas, ya que podríamos ocupar páginas y páginas para explicar el concepto como tal. A pesar de esto, vamos a detallar algunos conceptos que se deben tener en cuenta a la hora de implementar nuestro diseño responsive, basándonos en CSS3 y un poco de código HTML.

Responsive Design: pasos previos

Para saber cómo hacer una web responsive, sólo necesitaremos tener unos conocimientos básicos del lenguaje HTML y CSS3. Una vez creada nuestra web, deberemos adaptarla a nuestros diseños móviles. De ahí la esencia del Responsive Design. Pero antes de citar los principales pasos necesarios para hacer nuestra web responsive, debemos tener en cuenta una serie de factores que influyen directamente al usuario final, como por ejemplo pueden ser la carga de la página, el tamaño de pantalla que van a usar nuestros clientes y el uso de efectos o animaciones. Aunque estos factores son responsabilidad del arquitecto de la información antes de implementar el diseño que se va a adoptar, merece la pena nombrarlos.

1. Carga de página: Debemos tener especial cuidado cuando hacemos una página web y queremos adaptarla a un diseño responsive, ya que la carga de recursos de la página, es la misma para el PC y el dispositivo móvil. Esto puede dificultar la velocidad de visualización de la web responsive en nuestro dispositivo móvil, consiguiendo así una experiencia de usuario bastante pobre. Para solucionar este gran problema, recomendamos utilizar librerías que permitan hacer una carga de página condicional, evitando cargar recursos innecesarios cuando los usuarios visitan la web responsive desde sus dispositivos móviles.
2. Tamaño de pantalla: Se debe evitar sobrecargar la página web de elementos inútiles, ya que la gran cantidad de dispositivos y pantallas que existen en el mercado, hace que tengamos que tener muy en cuenta tamaños de contenido fluidos y no estáticos para evitar que haya usuarios que no vean bien el contenido de nuestra web responsive.
3. Uso de efectos: Pensad que muchos de los efectos que se usan en la web de PC no funcionan en la web responsive. Quizá esto ya sea más una faena del programador que del arqitecto de la información, ya que se debe adaptar el diseño que se quiere implementar. Aún así, es vital evitar efectos innecesarios con el fin de que nuestra web responsive tenga una buena experiencia de usuario y crezca lo máximo posible en número de visitas.

Una vez tengamos estos conceptos claros para tener una buena comunicación con el arquitecto de la información, pasaremos a programar nuestro código para hacer nuestra web responsive.

Cómo hacer una web responsive

Como hemos comentado al principio de este post, para programar nuestra web responsive, una vez tengamos nuestra página web con su respectivo diseño, sólo deberemos tener conocimientos básicos de CSS3 y HTML. A partir de aquí, los pasos que se deben seguir en el código son bastante simples. Primero de todo, debemos tener muy en cuenta que nuestro contenedor abarque todos los demás contenedores de la página web. A partir de aquí, en el head de nuestro contenedor añadiremos la etiqueta meta con el nombre "viewport" y sus correspondientes atributos. Inicialmente, el tamaño de los elementos de la página web los tenemos definido en píxeles. Para hacer una web responsive, debemos cambiar los píxeles por tantos por ciento (%) dentro de nuestro código CSS. Siguiendo con el tema de los tamaños, pondremos margin-auto a todas nuestra imágenes y contenidos, vigilando con los paddings que hemos puesto inicialmente. Luego, en el main de nuestro CSS, pondremos la propiedad box-sizing: border-box, para que el padding se vea vien y no influya en la visualización adaptada de la página.

Hasta aquí hemos detallado las principales claves para hacer nuestra web responsive pero, faltan las propiedades más importantes a insertar en nuestro código para tener un responsive completo. Las Media Queries. Este módulo de CSS3 nos ofrece características como poder definir el ancho, alto y color predeterminado de nuestra web responsive. Se deben insertar en nuestro código para la correcta visualización y apariencia en nuestros dispositivos móviles.

El responsive y la mejora de tus resultados

Es evidente que disponer de una página web responsive son todo ventajas. Los usuarios o clientes podrán acceder a tu página desde cualquier dispositivo (PC, tablet, smartphone…). Esto mejorará tu posicionamiento, a la vez que mejorará tu SEO móvil de tu web. Además, Google recomienda el diseño responsive antes de crear una página web móvil completa, ya que la experiencia de usuario mejorará considerablemente, evitamos posibles problemas de contenido duplicado y le damos al usuario una imagen consistente.

Y tú, ¿qué piensas? ¿Crees que todas las páginas web deben ser responsive? No olvidéis dejar vuestros comentarios.