Diseño Web Responsive ¿Qué es y Cómo Usarlo?
Para cualquier marca es importante contar con buenos portales web para informarles a sus clientes sobre sus productos. Por lo general, éstos cuentan con un diseño web responsive y atractivo dedicado a llamar la atención de los usuarios.
Por otro lado, la estética que suelen tener es muy clara y simple. Esto debido a que lo importante es que llegue el mensaje de lo que se produce para los antiguos y futuros compradores.
Pero, la mayoría de las páginas web poseen un diseño adaptado a los ordenadores. Este estilo se debe a que anteriormente era el acceso más común para las personas. Sin embargo, ahora en esta nueva era digital, millones de personas navegan a través de sus teléfonos inteligentes y tablets.
Por tal motivo, es importante adaptar los portales digitales a los distintos dispositivos que se encuentran actualmente. Y para eso se necesita de un diseño web responsive ideal. Así que para conocer todo sobre esta configuración te lo muestro a continuación.
Índice de Contenido
¿Qué es el diseño web responsive?
El diseño web responsive es una técnica que trata de buscar la visualización ideal de una página para los distintos dispositivos. Con esto hablamos desde ordenadores portátiles o de escritorios, hasta tablets y todos los modelos de celulares inteligentes.
Esta clase de diseño permite mediante configuraciones que las imágenes y textos mostrados en cualquier aparato electrónico se vean con claridad. Haciendo que los elementos se adapten, pero sin perder su diseño y así los usuarios puedan leer la información fácilmente.
¿En qué consiste el diseño web responsive?
Como ya he mencionado, este diseño web busca redimensionar los elementos de cualquier sitio web para que se moldee a todo tipo de dispositivo electrónico. Permitiendo de esa forma que las personas naveguen por las páginas cómodamente.
El responsive design se caracteriza por dos elementos. El primero es que su contenido e imágenes fluyen sin problema. El otro es que se emplea mediante un código media-queries de CSS3.
Es importante no confundir este tipo de diseño con las webs para dispositivos móviles, porque son diseños completamente diferentes. Ya que, al hablar del diseño responsive se habla netamente de la adaptación de las páginas a los distintos dispositivos existentes.
En cambio, crear un sitio exclusivo para los móviles significa hacer un diseño desde el inicio. Donde el contenido y hasta formato está destinado a funcionar sólo para esa clase de dispositivo.
¿Por qué es necesario emplear un web responsive?
Aparte de las razones mencionadas anteriormente existen otras por las cuales debes emplear un diseño web responsive. Por eso, aquí he decidido nombrártelas para que te animes a hacerlo con tu página web:
- Mayor visualización:
Mejorando la navegación de nuestros sitios web desde diversos dispositivos hacemos que los usuarios encuentren fácilmente lo que buscan. Y así pasaran más tiempo navegando y aumentando las probabilidades de que sean posibles consumidores.
- Facilidad al momento de compartir:
Por lo general cuando se cuenta con diferentes diseños en los ordenadores y móviles, las URL suelen ser distintas. Por eso suele ser difícil para los usuarios compartir la información que se emplea en nuestras páginas.
Pero, al contar con una sola compartir el contenido resulta ser mucho más sencillo y practico. Esto es debido a que se vincula un solo enlace y así todos los usuarios pueden acceder a él sin ningún problema.
- Preparados para un futuro:
Actualmente la tecnología avanza de manera muy rápida, y las personas utilizan diversos dispositivos con muchos tamaños de pantallas y resoluciones.
Por tal motivo, no sabemos qué esperar en un futuro, por eso tener una web responsive nos hará estar preparados. Haremos que nuestro sitio luzca genial desde cualquier aparato digital que posiblemente aun no exista. Nos ahorraremos mucho trabajo.
¿Cómo usar el diseño web responsive?
Acceder a este diseño web es muy simple, sólo se deben hacer ciertas configuraciones al sistema. Lo primero que se debe hacer es agregar la etiqueta al encabezado del documento. Con eso, se le indicará al navegador cómo ajustar el contenido.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Con esa etiqueta se podrá modificar las dimensiones y el escalamiento del sitio al ancho del dispositivo a modificar. Si no se coloca, el aparato móvil modificará los ajustes por él mismo, haciendo que se aumente el tamaño de la fuente. Y así sólo se mostrará una parte del texto en pantalla.
Por ese motivo es importante utilizar dicha meta etiqueta. Pero, después de eso consultamos el sitio de Google <<Fundamentos de la Web>> y así se podrá acceder a la documentación adicional. Mostrándonos a profundidad lo que se necesita saber para diseñar una web responsive.
¿Cuál es la diferencia entre el diseño
mobile-first y diseño responsive?
En primer lugar, a menudo hay un poco de confusión cuando se trata de conceptos. Muchas personas piensan erróneamente que son lo mismo cuando son completamente diferentes.
El diseño responsive comienza en el escritorio, es decir, con la máxima resolución requerida y luego se reduce a la pantalla más pequeña. Es decir, el contenido y diseño se adapta a los smartphones, navegador y las velocidad de carga se adaptan mejor al sitio web.
El diseño Mobile-First es similar al diseño de una aplicación móvil y luego adaptar el diseño para que se pueda ver claramente en dispositivos de tableta y de escritorio sin demasiadas modificaciones.
Todo el diseño y la maquetación se basan en proporcionar una excelente experiencia de usuario en el móvil: velocidades de carga rápida, contenido multimedia sofisticado para mantener el interés del público objetivo, navegación sencilla con pantalla táctil, etc.
Importancia de JavaScript
Un elemento a tener muy presente al momento de ajustar los sitios optimizado para los dispositivos es el uso de JavaScript. Ya que éste podrá modificar el procesamiento de la página según el tipo de dispositivo móvil que se maneje.
JavaScript normalmente se emplea, por ejemplo, para determinar qué tipo de anuncio o qué alternativa de resolución de imagen mostrar en página. Sin embargo, a continuación, se mostrará las formas en que se puede emplear JavaScript para un diseño web responsive:
JavaScript adaptable:
Con este modelo cualquier dispositivo podrá recibir el mismo diseño web responsive con HTML5 y CSS3, y hasta con JavaScript.
Cuando se utiliza el código de JavaScript en el aparato móvil el comportamiento y procesamiento de la página se modifica fácilmente. Por tal motivo, es una de las configuraciones recomendadas por Google.
Detección combinada:
Con esta configuración la página web emplea JavaScript. A partir de eso utiliza la detección de la capacidad del dispositivo móvil desde el sistema. Logrando así que se muestre de forma diferente el mismo contenido en distintos aparatos digitales.
/*video background*/
if(!WURFL.is_mobile){
$('#vid').videoBG({
mp4:'assets/Birds_Animation.mp4.mp4',
ogv:'assets/Birds_Animation.oggtheora.ogv',
webm:'assets/Birds_Animation.webmhd.webm'
});
}
/*The parallax scrolling*/
window.onscroll = function () {
if (!WURFL.is_mobile){
heroImage.style[prefixedTransform] = "translate3d(0px," + window.scrollY / 2.3 + "px, 0px)";
herovid.style[prefixedTransform] = "translate3d(0px," + window.scrollY / 1.1 + "px, 0px)";
heroText.style["opacity"] = (1 - ((window.scrollY / 6) / 100));
}
}
JavaScript dinámico:
Con este estilo de JavaScript todos los dispositivos móviles reciben y utilizan el mismo código HTML. Sin embargo, el código de JavaScript se envía desde un enlace que tiene agregado de manera dinámica el mísimo código.
La particularidad con esto, es que dicho código JavaScript viene según el usuario-agente del aparato móvil. Asimismo, le indica al robot de Google que localice dicho archivo empleando distintos usuarios-agente.
GET /page-1 HTTP/1.1 Host: www.example.com (...rest of HTTP request headers...) HTTP/1.1 200 OK Content-Type: text/html Vary: User-Agent Content-Length: 5710 (... rest of HTTP response headers...)
La cabecera Vary indica al navegador de que el contenido de la respuesta variará en función del agente de usuario que solicite la página. Si el servidor ya utiliza el HTTP Vary, puedes añadir «User-Agent».
El diseño receptivo y el poder de las Media Queries
Me encantan los datos y dedico mucho tiempo a supervisar los análisis de muchos sitios web. Cualquier desarrollador web que haga lo mismo habrá notado el aumento del tráfico de dispositivos móviles en los últimos años.
Estos representan un gran número de visitantes, con navegadores sofisticados que soportan las últimas versiones de HTML, CSS y JavaScript, pero que también tienen un espacio de pantalla limitado con anchos tan estrechos como por ejemplo 767 píxeles.
Media Queries (consulta de medios) es una de las herramientas más poderosas para diseñar un sitio web con capacidad de respuesta. Nos permite crear reglas CSS sobre varios parámetros basados en el tipo de dispositivo, la orientación y el tamaño del puerto de visualización.
Una consulta de medios consiste en un tipo de medio y cero o más expresiones que comprueban las condiciones de determinadas características del medio. Una característica particular de los medios nos dice sobre el dispositivo que está en uso.
Por ejemplo, tenemos pantalla, imprimir, proyección, todo para saber sobre el tipo de medio. En la mayoría de los casos, utilizamos la pantalla y la impresión en las consultas media queries. A continuación, te muestro una sintaxis simple de una media querie.
@media <media-type> and (expression) {
/* your css rules .....
................ */
}
Las consultas @media queries nos permiten crear una experiencia receptiva cuando se aplican estilos específicos en pantallas pequeñas, grandes y de cualquier tamaño intermedio.
Aunque hay varios elementos diferentes por los que podemos consultar, los que se usan con mayor frecuencia para el diseño web adaptable son min-width, max-width, min-height y max-height.
| Parámetros | |
|---|---|
min-width | Reglas para cualquier ancho del navegador que supere el valor definido en la consulta. |
max-width | Reglas para cualquier ancho del navegador que sea inferior al valor definido en la consulta. |
min-height | Reglas para cualquier altura del navegador que supere el valor definido en la consulta. |
max-height | Reglas para cualquier altura del navegador que sea inferior al valor definido en la consulta. |
orientation=portrait | Reglas que se aplican a cualquier navegador de altura inferior o igual al ancho. |
orientation=landscape | Reglas que se aplican a cualquier navegador de ancho inferior a la altura. |
¿Qué elementos se necesitan para crear un buen diseño web responsive?
Para crear un extraordinario web responsive hay que tener en cuenta ciertas recomendaciones. Esto ayudará a que cada elemento del sitio web esté en el lugar correcto al momento de verse en un dispositivo móvil. Haciendo así que el usuario obtenga una buena experiencia al ingresar a la página.
Tipografía
Es importante tomar en cuenta el tipo de la letra, ya que éste variará según el tipo de dispositivo donde se desee visualizar el contenido. Por tal motivo el tamaño de la letra debe ser diferente en función de la pantalla. Haciendo esto ahorraremos al usuario de hacer zoom cuando ingrese al sitio web.
Debido a esto tenemos que, por ejemplo, evitar colocar columnas con anchos predeterminados, ya que distorsionará el contenido. Por otro lado, hay que escoger una familia de letra armónica y legible para que no aburra al lector.
Imágenes y videos
Estos elementos, al igual que la tipografía deben ser proporcionales y de un tamaño acorde para todos los tipos de dispositivos. Para eso se debe buscar la proporción idónea donde se puedan observar cómodamente todos los contenidos.
Usabilidad
Las personas que acceden desde móviles o tablet usan pantallas táctiles para manejar todo. Pero, para los que navegan en el ordenador utilizan el ratón para interactuar.
Debido a esto, se deben adaptar tanto los botones como el menú del sitio web para que ambos casos naveguen correctamente. Aumentando de esa forma la buena experiencia del usuario.
Tiempo de carga
Cargar una página web lenta desde un móvil es sin duda una tarea frustrante y agotadora. Por eso, muchos usuarios deciden abandonar el sitio y acceder a uno en el que sea más rápido la carga. Debido a esto es importante optimizar al máximo el tiempo de carga para todos los aparatos móviles.
Conclusión
Vale la pena tener en cuenta que no hay una solución sencilla para hacer que los sitios web sean accesibles en dispositivos móviles y con vistas estrechas.
Las consultas de Media queries son una forma útil de añadir pulido para muchos dispositivos, pero recuerda que el 25% de las visitas se realizan desde aquellos navegadores que actualmente no soportan la técnica y hay algunas implicaciones de rendimiento.
La clave es hacer pruebas y con frecuencia. Cualquier tiempo que pases navegando por tus propios sitios con un smartphone o una tableta será de un valor incalculable. Cuando no puedas realizar pruebas en dispositivos reales, puedes utilizar el SDK de Android o el Simulador iOS.
Los navegadores móviles son una gran fuente de tráfico actualmente, y aprender la mejor manera de soportarlos es una nueva y emocionante área del desarrollo web profesional.