Son las cuatro de la tarde y veo en la tele un documental sobre el pulpo mimético, un animal que tiene sorprendentes habilidades para adaptarse al medio en el que se encuentra, cambiando su color, forma o tamaño. Como soy un diseñador web un poco friki, pronto me digo a mí mismo: «Es un pulpo responsive» y me río solo. Apago la televisión y con esta inspiración comienzo a escribir.
El diseño web responsive, también llamado «adaptable», aúna una serie de técnicas que permiten que una única página web se adapte al medio, como lo hace el pulpo mimético. El contenido «responde» al tamaño de la pantalla o dispositivo con que el usuario accede, ajustando sus elementos, tamaños y posiciones. El objetivo es que la experiencia del usuario sea satisfactoria y completa, independientemente del tipo de acceso.
¿Alguna vez has visitado una web desde el móvil y tu primer gesto ha sido hacer zoom para poder leer los contenidos? ¿Presionas por error un enlace porque son muy pequeños? ¿No te resulta horrible leer artículos con el móvil y tener que arrastrar con el dedo el contenido a un lado y a otro para poder leer cada línea? ¿Has visitado alguna vez una página en la tableta que no cabe en la pantalla? Personalmente, como usuario, me resulta muy frustrante. En diseño web la usabilidad es lo más importante. Pensar en el usuario.
Pero no es una tarea fácil ya que, en la actualidad, el diseño web responsive es una tecnología que todavía está verde. No es un estándar cerrado y asentado, al igual que muchas otras cuestiones web, así que seguirá evolucionando en un futuro. Empresas, compañías, navegadores, profesionales y gurús del diseño y la usabilidad trabajan para innovar, desarrollar y aportar su granito de arena a un mundo relativamente nuevo.
Me gusta echar la vista atrás y ser partícipe de la evolución del diseño web. En los comienzos de Internet, los diseñadores trabajábamos a un tamaño de pantalla de 800 x 600. Eran los tiempos del FrontPage y Paintbrush. Después, las pantallas empezaron a crecer… hasta los 1024 x 768 y más allá. Y vuelta a la tortilla. Se extendió el uso del móvil y las tabletas…
Llegó la moda de las versiones web adaptadas y los redireccionadores: una página web para pantallas grandes, la misma web duplicada y adaptada para tabletas, ídem para móviles… o incluso diferentes versiones para diferentes marcas. Y todo ello controlado por códigos redireccionadores que detectan el tipo de dispositivo con el que entra el usuario y le envían a una versión u otra.
Constantemente salen al mercado dispositivos nuevos, con diferentes tecnologías, distintos navegadores, mayor o menor tamaño y resoluciones de pantalla… y en el futuro seguirán surgiendo más. El diseño web responsive se ha convertido prácticamente en una necesidad a la hora de desarrollar un sitio web. Además, para Google ha comenzado a ser un factor determinante para el posicionamiento. Si no eres responsive, estás fuera.
Como les digo a mis alumnos, para llegar a desarrollar diseño responsive «hay que comer mucho arroz». Hay que entender y dominar antes muchas otras cuestiones sobre html HTML o CSS. Primero, hay que pensar en grande y después, en pequeño para, finalmente, crear un nexo; trabajar con unidades fijas para luego evolucionar a unidades relativas; ser muy flexible mentalmente para poder plasmar esa misma flexibilidad en la creación. No se trata de diseñar una web para un ordenador de sobremesa y después pensar cómo tiene que verse en un móvil. Desde el minuto uno, hay que tener en mente todas las posibilidades. Supone un trabajo enorme, pero también mucha satisfacción.
Al visitar una página web, puedes comprobar si es responsive redimensionando el tamaño de la ventana, haciendo clic y arrastrando la esquina del navegador. Observa si los contenidos fluyen para adaptarse al nuevo tamaño. ¿Qué pasa con los menús, textos e imágenes?
Espero haber despertado en ti cierto interés sobre el responsive design. Ahora mismo puede ser un buen momento para que te pongas manos a la obra. Primero, haz unos estiramientos musculares: cuello, hombros, espalda… necesitamos flexibilidad. Después, un buen comienzo puede ser empezar a crear estructuras web mediante porcentajes en lugar de píxeles. Permite que las imágenes también se escalen. Establece los límites. Alucina con las media queries. Pregúntale a Google, cómprate un libro, trágate unos cuantos vídeo tutoriales. Ríe y después llora. Vuelve a reír.
También puedes pasarte por Aula Creactiva e informarte sobre nuestros cursos y másteres. Comamos juntos esta deliciosa tarta a trocitos para no atragantarnos.
Si no te interesa el DWR y deseas desconectar ahora, te recomiendo especialmente hacer una visita a YouTube y ver un par de vídeos sobre el pulpo mimético.
Por Adrián Martín | Profesor de Diseño Web en Aula Creactiva
¿Quieres convertirte en diseñador web? Infórmate sobre nuestros cursos y másters:
[av_button label=’Quiero informarme ‘ link=’manually,https://www.aulacreactiva.com/master/diseno-web-madrid/’ link_target=» size=’small’ position=’left’ icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ color=’theme-color’ custom_bg=’#444444′ custom_font=’#ffffff’ av_uid=’av-1wyk6g’]
