El propósito del diseño Responsive (sensible) es que un sitio tenga distintos elementos que responden de manera diferente cuando se ven en dispositivos de diferentes tamaños.
Por ejemplo un sitio Web fijo tradicional. Cuando se visualiza en un equipo de escritorio, el sitio Web puede mostrar tres columnas.
Pero al ver ese mismo diseño en una tableta más pequeña, podría forzarle a desplazarse horizontalmente, algo que a los usuarios no les gusta hacer. O los elementos pueden estar ocultos de la vista o parecer distorsionados. El impacto también se complica por el hecho de que muchas tabletas se pueden ver ya sea en orientación vertical, o giradas hacia los lados.
En una pequeña pantalla de teléfono inteligente, los sitios Web fijos o regulares pueden ser aún más difíciles de ver. Las imágenes grandes pueden romper el diseño. Fuera de esto los sitios fijos pueden ser lentos para cargar en los smartphones si los gráficos son pesados.
Sin embargo, si un sitio utiliza diseño responsive, la versión de la tableta se puede ajustar automáticamente para mostrar sólo dos columnas. De esta forma, el contenido es legible y fácil de navegar.
En un smartphone, el contenido puede aparecer como una sola columna, tal vez apilado verticalmente. O, posiblemente, el usuario tendría la capacidad de deslizare a través del sitio y ver otras columnas. Las imágenes cambiarán de tamaño automáticamente en lugar de distorsionar el diseño o de cortarse.
El punto es que en un diseño responsive, el sitio Web se ajusta automáticamente en función del dispositivo que se usa para verlo.
¿Cómo funciona el diseño Web Responsive?
Los sitios responsive usan rejillas fluidas. Todos los elementos de página se clasifican por proporción, en lugar de píxeles. Así que si usted tiene tres columnas, usted no pensaría en términos generales, que tan anchas debe ser cada una, sino que como son de amplias en relación con las otras columnas. Por ejemplo, la columna 1 debería ocupar la mitad de la página, la columna 2 debería ocupar un 30% y la columna 3 debería ocupar un 20%.
Los medios, como las imágenes, también se redimensionan relativamente. De esta manera, una imagen puede permanecer dentro de su columna o elemento de diseño relativo.
Por qué las pequeñas empresas, blogers profesionales y todo aquel que tienen una página Web necesitan cambiar a un diseño Web responsive.
Más y más personas están utilizando dispositivos móviles para navegar la Web. Un estudio realizado por Pew recientemente, encontró que el 77% de los adultos estadounidenses poseen un teléfono inteligente.
La adopción de teléfonos inteligentes se ha más que duplicado desde que Pew comenzó a estudiar este tema en 2011: Ese año, el 35% de los estadounidenses informó que poseían un teléfono inteligente de algún tipo. Concluyeron que el uso de teléfonos inteligentes supera a los de los teléfonos móviles regulares, y el crecimiento de tabletas está aumentando.
Compruebe su tráfico y usted se sorprenderá de ver cuántos visitantes están llegando a su Web site con los dispositivos móviles. (En su Google Analytics, en el lado izquierdo seleccione “Audiencia” y a continuación, “Móvil” para ver qué proporción de tráfico proviene de dispositivos móviles. Puede incluso explorar los dispositivos que están enviando el tráfico).
Además El 21 de abril de 2015, Google lanzó un importante nuevo algoritmo de clasificación para móviles que está diseñado para dar un impulso a las páginas móviles en los resultados de búsqueda móvil de Google. Estas actualización hacen el diseño responsive una necesidad.
Las plantillas de diseño responsive se pueden comprar en todas partes. Si, por ejemplo, tiene un sitio de WordPress, puede visitar una galería de plantillas de buena reputación como MyThemeShop buscar y comprar los temas de WordPress responsive. Entre los mejores está Schema, pero tienen una variedad inmensa.