¿Tu website es responsive design?

Hasta no hace mucho tiempo, 4 o 5 años, el principal problema de un diseñador web era el de definir la optimización de un website respecto al tamaño de pantalla: 800×600 o 1024×768. Es verdad que también estaba el tema de la compatibilidad entre navegadores, sobretodo con IE6 que fue “la china en el zapato”.

responsive web design

Después se añadio la problemática del mobile, primero con los smartphones, y ahora con las tabletas. Y para retamar el asunto, apareció el televisor conectado a Internet (Smart TV). El dilema que se plantea es: ¿hay que crear tantos sites como terminales o pantallas existen?…

Responsive design: la solución

El responsive design que se podría traducir como diseño «adaptable o reactivo» consiste en concebir un website asegurando una adaptación óptima a las diferentes formatos de pantalla. Se trata de una concepción basada en la flexibilidad. El interfaz se construye entorno a una rejilla o cuadrícula que contiene un cierto número de columnas: la disposición de las columnas se adaptan al tamaño de la pantalla. Lo mismo sucede con las imágenes, cuyo tamaño y disposición se optimizan para ajustarse a la pantalla. En el centro del dispositivo se encuentra los medias queries, que son características de CSS3, que permiten detectar el tipo de terminal y sus características de presentación para servir la versión adaptada.

The grid system, responsive web design

Existen aplicaciones para testar la adaptabilidad de un website, como por ejemplo The Responsinator.

 Aquí os pongo algunos ejemplos del resultado del test de responsive web design de mi propio blog.

Mi blog adaptado a iPhoneMi blog adaptado a iPadInfografía interactiva de responsive design

Para completar este post adjunto una interesante infografía interactiva elaborada por TemplateMonster.com, que explica muy claramente todo lo referente al responsive design. En la infografía se puede interactuar para acceder a artículos, recomendaciones de Google, eBooks gratuitos, tutoriales, estadísticas, herramientas (plugins, frameworks…), templates, etc., todo en formato del juego de la oca.

Haciendo clic en la infografía accedemos a la versión interactiva.

 



Author: Samuel Diosdado
20 años experiencia en Marketing, 10 años en Marketing Digital. Consultor de Marketing freelance. He trabajado como responsable de Marketing y he colaborado en el proceso de transformación digital de PYMES. Google

3 comentarios