Empezando con responsive design

Tarde o temprano tendrás un cliente que te lo pida, o quizás decidas investigar por curiosidad ya que está en boca de todos y es la tendencia actual del sector… así que mejor estar preparado para cuando lo necesites porque no se aprende en un rato.

Hay infinidad de frameworks css con todo lo que necistas incluido (como pueden ser bootstrap, responsive grids o titan) y herramientas varias (tipo sass) que te pueden facilitar la existencia a la hora de conseguir diseño y maquetación responsive.

Pero si estás empezando mi recomendación es olvidarte de tomar atajos, hay que arremangarse y meter hasta el codo en el barro, sino no aprenderás las ideas básicas y por tanto no entenderás lo que estás haciendo. También es cierto que es mejor empezar por un proyecto sencillo, la típica página que tienes desde hace años dejada por ahí (si es de algún cliente además quedas genial, porque le estás “regalando” una mejora importante)

Una vez captada la idea, sabiendo lo que haces te puedes pasar a utilizar las herramientas disponibles.
De los frameworks que he tocado el que más me ha gustado ha sido bootstrap ya que es muy completo: el “customizador” es muy bueno, tiene muchos recursos en forma de botones, tablas, menús, etc., la estrucutra adaptable (scafolding) es muy cómoda y además incluye una serie de recursos jquery interesantes.

Un punto que no se debe dejar de lado es el tema de las imágenes. Lo más rápido y sencillo (pero no lo más eficiente) es utilizar anchos del 100% en las imágenes para que se adapten al tamaño de su contenedor. Otra opción más engorrosa pero más eficiente (de cara al cliente, que no en el servidor) es tener para cada “media” un juego de imágenes y mediante javascript mostrar las imágenes del tamaño adecuado. Y la que más me gusta, usar htacces y un php que nos devuelve la imagen al tamaño adecuado (adaptive-images)
Hay más técnicas, pero ya las trataremos en otra ocasión.

Otro tema clave, no todos los contenidos deben verse en todos los dispositivos, o al menos no debería ser necesario. El usuario de smartphone necesita una información básica y rápida, mientras que en tablets o sobremesa el usuario se recrea más en los contenidos. Es importante analizar qué y donde mostramos cada elemento. Las medias de css nos permiten mostrar o no según que contenidos, pero es recomendable trabajar a nivel servidor para no sobrecargar al cliente con información que no le mostraremos.

Una última recomendación para esta modesta y pequeña introducción al responsive design. Si eres un tipo duro de los que les gusta picar tu código: sass, una herramienta que nos permite escribir css mucho más rápido, si le coges el punto vuelas a la hora de crearlas, las medias se trabajan de forma más cómoda, tiene shortcodes para según que reglas de estilos y además, se pueden utilizar variables (colores, tamaños, etc.) Fantástico!!!

Autor: Juan Castells

Compártelo!!


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *