¿Qué ventajas ofrece Bootstrap en el diseño responsive?

3min

Para los que todavía no lo conozcan, Bootstrap es un framework de diseño web, una librería con código CSS, HTML y Javascript para crear interfaces de usuario y layouts de páginas que nos permite resultados profesionales sin tener que conocer cómo se hacen ciertas cosas de diseño. En su lugar, basta con aprender a usar aquellas utilidades propuestas en Bootstrap para la creación de aquellos componentes que deseamos usar.

Bootstrap es de código abierto y su licencia nos permite usarlo en cualquier tipo de trabajo, tanto personal como comercial. Detrás de este framework está la red de microblogging Twitter, que lo ha desarrollado y puesto a disposición de los usuario con la intención de ayudar a los diseñadores y mejorar la calidad de sus trabajos, a la vez que crear un lenguaje común que facilite la comunicación entre una páginas web y sus usuarios.

Entre las utilidades de Bootstrap, encontramos la creación de todo tipo de interfaces de usuario para páginas web, desde simples elementos como o iconos hasta componentes de interfaz gráfica avanzados como tips, tabs, desplegables, etc. Basta echar un vistazo a su página web Getbootstrap.com para ver fácilmente todo lo que nos permite hacer.

Índice

Facilidades para layouts responsive

Entre las utilidades que nos ofrece Bootstrap encontramos la posibilidad de crear layouts, plantillas o simplemente maquetar contenidos, colocando elementos allá donde deseemos. La gracia de todo es que está pensado para el desarrollo adaptable, conocido generalmente como Responsive Web Design, y del que ya hemos hablado en numerosas ocasiones.

De hecho, una de las principales utilidades de Bootstrap es la de proporcionar una vía rápida para el diseño web adaptado a cualquier tipo de dispositivo. Cualquiera de sus componentes es adaptable a las dimensiones de la pantalla, así como el sistema de regilla, que nos permite ajustar el tamaño y posición de cualquier elemento. Dicho sistema está preparado para ser sensible a los cambios de tamaño de la pantalla o ventana del navegador, llegando a distribuir el contenido desde una hasta doce columnas de anchura.  Por todo ello, cualquier diseño creado con Bootstrap es un diseño responsive.

Además nos ofrece diversas utilidades CSS justamente pensadas para que el sitio reaccione ante diversos tipos de dimensiones de pantalla. Por ejemplo, permite indicar que ciertos elementos se deben visualizar, u ocultarse, dependiendo de si la pantalla del dispositivo tiene dimensiones pequeñas, medianas, grandes o muy grandes.

Desventajas de Bootstrap

Como todo en la vida, no todo son ventajas en el uso de frameworks de diseño. Existen muchos detractores de Bootstrap y los motivos son varios. A nuestro juicio, ninguno de ellos es realmente definitivo, pero creemos que es importante señalar los principales puntos en contra.

  • Optimización. Bootstrap contiene mucho código para componentes, iconos, rejillas, etc. Si solo vamos a usar una pequeña parte del framework no tiene sentido cargar todas sus utilidades.
  • Código HTML complejo. Nuestro código HTML tendrá que ser modificado para crear los contenedores tal como Bootstrap necesita para cargar en ellos ciertos componentes. A veces las soluciones HTML no son las más sencillas y nos obliga a generar código mayor del que sería necesario si lo hiciéramos a mano.
  • Diseños muy similares entre sí. Si no personalizamos el diseño de nuestro sitio y no personalizamos el tema gráfico de Bootstrap, obtendremos un diseño bastante aparente, pero infelizmente parecido a otros millares de sitios de Internet.

Generalmente, cuanto mayor sea el conocimiento de Bootstrap el diseñador será capaz de mitigar las desventajas y paralelamente maximizar las ventajas. Si vamos a usar Bootstrap sin saber lo que hacemos y sin tomarnos la suficiente molestia en aprender a sacarle el máximo partido, probablemente nos estemos perdiendo gran parte de su potencial.

Fernán García de Zúñiga

Productos relacionados: