La gran cantidad de dispositivos electrónicos que hay con distintos tamaños de pantalla, obliga a adaptar el diseño de las páginas web para verlas perfectamente en cada una de estas pantallas, esta adaptación que haces del contenido de tu web para mostrarlo de manera optimizada en distintos tamaños de pantalla es conocido como diseño web Responsive.
El hecho de ver optimizado el diseño de una web en cualquier tamaño de pantalla no es magia, es gracias a una serie de propiedades CSS que han sido declaradas previamente en la programación de la web. En este artículo verás una introducción a la propiedad CSS media query, consejos para aplicar buenas prácticas, verás también la ventaja de usar WordPress para que el diseño de tu sitio web sea cien por cien Responsive y una serie de ejemplos útiles para aplicarlos al diseño de tu web.
Antes recuerda que puedes suscribirte al newsletter de este blog.
Si te suscribes, tienes acceso a soporte técnico para resolver dudas de tu web, puedes proponer temas para el blog y escribiré un artículo detallado sobre el tema que has propuesto. También te envío un email semanal con todas las novedades publicadas en el blog para que las apliques y mejores tu proyecto web.
Contenido importante
Introducción al diseño web Responsive.
Una web Responsive es aquella que adapta el contenido que muestra a cualquier tamaño de pantalla para visualizarlo de manera optimizada.
Ver una web correctamente en cualquier dispositivo, ya sea un ordenador de sobremesa, portátil, tablet o teléfono móvil, es gracias a las media queries, propiedades CSS declaradas para que se adapte el diseño de una web en función del tamaño de pantalla en el que se muestra.
CSS (Cascading Style Sheets) es el lenguaje de programación que define el estilo de las páginas web, controlando el diseño, colores, fuentes tipográficas, características de estas y todos los elementos que se muestran en pantalla de páginas web.
Declaraciones CSS diseño web Responsive, las Media queries.
Las media queries son propiedades CSS que permiten aplicar reglas de estilo basadas en las características del dispositivo de visualización, como el ancho, la altura, la resolución y la orientación de la pantalla. Esto es vital en el diseño web responsive, ya que permite que un sitio web se adapte y ofrezca una experiencia óptima en una amplia variedad de dispositivos, desde ordenadores de escritorio hasta tablets y teléfonos móviles. Las media queries facilitan la creación de diseños flexibles y adaptables al tipo de pantalla que se visualiza.
Estos son las declaraciones media query más habituales.
- Ancho máximo de pantalla:
@media only screen and (max-width: 600px) {
/* estilos para pantallas menores o iguales a 600px */
}- Ancho mínimo de pantalla:
@media only screen and (min-width: 768px) {
/* estilos para pantallas mayores o iguales a 768px */
}- Rango de ancho de pantalla:
@media only screen and (min-width: 600px) and (max-width: 1200px) {
/* estilos para pantallas entre 600px y 1200px */
}Si quieres que profundice más sobre las Media Query, házmelo saber a través del formulario de contacto.
Te dejo también un enlace a un curso gratuito excelente de introducción a CSS. Te recomiendo conocer este lenguaje, es vital para personalizar tu web. En más de una ocasión puede solucionarte un problema.
Concepto Fluid Grid Layouts.
El término «Fluid Grid Layouts» se refiere a un enfoque en el diseño web a través del cual te permite adaptar y reorganizar de manera flexible los distintos elementos que se muestran en una página web según el tamaño de la pantalla del dispositivo. Este concepto de diseño web responsive moderno, propicia una mayor fluidez de trabajo al usar declaraciones CSS sencillas de recordar e implementar.
Te dejo una pequeña lista con recursos Fluid Grid Layouts que puedes usar en el diseño de tu web.
- Flexbox Grid: Son un conjunto de declaraciones CSS que combinadas te permiten hacer elementos flexibles y adaptables a los distintos tamaños de pantalla.
- CSS Grid Layout: Es otra especificación CSS que permite la creación de rejillas complejas y flexibles directamente con CSS.
- Bootstrap: Es uno de los frameworks CSS más utilizados. Ofrece un potente sistema de rejillas fluidas que se adapta a diferentes tamaños de pantalla.
En el video de ejemplo, verás que el diseño se adapta y reordena los elementos dependiendo del tamaño de pantalla en el cual se muestra. Este ejemplo de diseño flexible está hecho con instrucciones CSS Flexbox.
En muchas ocasiones, añadir conocimientos de CSS a los que ya tienes, te permite con muy pocas líneas de código terminar de adaptar y personalizar el diseño de tus páginas web.
Un framework es una estructura predefinida de código que facilita la ejecución de acciones o funcionalidades en páginas web y aplicaciones. Con instancias sencillas y prácticas puedes aplicar fragmentos de código elaborados y complejos.
Diseño web responsive en WordPress.
La gran ventaja de construir una web en WordPress, es la cantidad de tiempo y trabajo tan grande que te ahorras. Gracias a usar este estupendo CMS, puedes tener tu propia web sin necesidad de saber programar y, como no puede ser de otra manera, cien por cien responsive.
WordPress es un software que tiene como finalidad crear páginas web sin necesidad de saber programar. Tiene dos grandes funcionalidades para que esta magia sea posible, una son los plugins, software adicional que añade funcionalidades a la web, y otras los theme, los temas de WordPress, encargados de dar aspecto a la parte visual de la web, el diseño que vemos en pantalla.
Los temas de WordPress que están bien programados, tienen optimizada la parte Responsive de su diseño y simplemente al activarlo, ya sea que eliges un diseño definido disponible o construyas tu una página desde cero con elementos del editor de bloques, se verá perfectamente tanto en ordenador como en móvil.
La elección del theme que vas a usar en tu WordPress es vital para que tu web sea responsive, te dejo el enlace al artículo donde encontrarás una serie de themes de WordPress cien por cien recomendables.
Ejemplos y buenas prácticas de diseño web responsive.
Buenas prácticas de diseño web responsive.
Muchas veces, para tener completamente optimizada la parte responsive de tu web hecha en WordPress, no basta con tener activado un buen theme. Es muy aconsejable que revises como muestra los elementos de las páginas en distintos tamaños de pantalla y asegurarte que todo se ve correcto y que la usabilidad web es correcta. Te dejo enlace al artículo Buenas prácticas de usabilidad web por si quieres ampliar información.
En este apartado del blog, creo que es bueno explicarte cómo puedes comprobar que tu web se adapta bien a cualquier tipo de pantalla y muestra perfectamente el diseño. Lo voy a hacer a través de un video, en el cual verás que desde el navegador Chrome, una vez abierta la página web que quieres comprobar el diseño responsive, pulsas el botón derecho y seleccionas la opción inspeccionar. Verás que la pantalla del navegador aparecen una serie de opciones, sigue los pasos que aparecen en el video y podrás comprobar si tu web es responsive.
En esta revisión de la parte responsive de tu web, es importante que revises el tamaño de los textos, que las imágenes no quedan cortadas y muestra el mensaje que quieres transmitir, el orden de los elementos, el tamaño de los contenedores, menús de navegación, etc.
Ejemplos de diseño web responsive.
El primer video que te he compartido en este artículo, es el ejemplo de un diseño web que adapta los elementos que muestra dependiendo del tamaño de pantalla. Ese ejemplo lo hice programando a mano instrucciones Flexbox.
La imagen que te comparto a continuación, es un ejemplo de como utilizando un theme de WordPress bien programado y optimizado el código para lograr una web responsive. Puedes ordenar elementos dependiendo del tamaño de la pantalla para que el usuario que la visita tenga una buena experiencia sin añadir solo una línea de código, simplemente activando el theme en tu WordPress.
Esta es una prueba de la importancia que tiene elegir temas de WordPress que estén bien programados para diseñar tu web. Te ahorran mucho trabajo y el resultado final es excelente.
Otro ejemplo que te comparto es el de una imagen. Un problema que me encuentro habitualmente en páginas web, es cuando añades imágenes al diseño. En las imágenes, tienes que asegurarte que se ven bien en cualquier tamaño de pantalla para no perder el mensaje que quieres transmitir.
El tercer y último ejemplo que te comparto, es un menú de navegación web responsive. El menú que añades en tu web también se tiene que adaptar a cualquier tamaño de pantalla. Presta especial atención en cómo se muestra en dispositivos móviles, hoy en día la mayoría de visitas que reciben las páginas web son a través de ellos. Asegúrate que es cómodo, fácil y los enlaces son reconocibles y cómodos de clicar.
Resumen.
A modo de resumen te dejo una lista con los puntos importantes que debes revisar para asegurarte de que tu web es cien por cien responsive.
- Revisión diseño: utiliza el inspector web de Chrome para asegurarte de cómo muestras tu diseño web en los distintos tamaños de pantalla. Pulsa aquí para ir al video.
- Texto: tamaño del texto, alineación, separación entre líneas y entre parrafos.
- Imágenes: se adapta bien a cualquier pantalla, muestra bien el mensaje que quieres transmitir.
- Orden: el orden de los distintos elementos se muestra tal y como tú quieres.
- Menú de navegación: se muestra optimizado en pantalla de ordenador, tablet y teléfono móvil.
- Tamaño de contenedores: asegúrate que los contenedores que contienen los distintos elementos que forman el diseño de tu web ocupan el cien por cien de cualquier tamaño de pantalla.
Hoy en día tu web se tiene que ver de manera optimizada en cualquier tamaño de pantalla. Piensa que lo normal, es que la mayoría de visitas las recibas a través de dispositivos móviles por lo que tienes que prestar especial atención a cómo se ve tu web en este tipo de pantallas. Si tienes alguna duda o quieres que profundice más sobre el diseño responsive, házmelo saber a través del formulario de contacto.
Albert Gimeno, diseñador y consultor web.
Si estás suscrito al blog…
- Podrás proponer temas para el blog.
- Recibirás un email semanal con el contenido publicado durante la semana.