NubeBlog | Web Hosting en la Nube

Uso de Twitter bootstrap en nuestro website para un diseño adaptivo y fluido

Una de las primeras preguntas que nos hacemos cuando se diseña un website, es si queremos una estructura con ancho fijo, o que se expanda para cualquier tamaño de pantalla. Anteriormente el estándar era de 960px, sin embargo, la mayoría de las pantallas actuales son más grandes, por lo que quedaría mucha pantalla desperdiciada. Por otro lado, cada vez se usan más los dispositivos móviles para navegar la web con pantallas pequeñas, por lo que resultaría difícil navegar un website de 960px. Un ancho de 100% tampoco resulta práctico para dispositivos móviles ya que todo se vuelve muy pequeño y debemos hacer zoom para ver el contenido.

Una solución sería desarrollar diferentes versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, sin embargo esto nos trae problemas de mantenimiento y se vuelve tedioso al cambiar información. Otra solución son los llamados “responsive layout“, que significa que la estructura de nuestro website cambia dependiendo del tamaño de pantalla en el cual se visualiza.

Les presento Twitter bootstrap, un toolkit de archivos HTML, CSS y JS creado desde cero por personal experimentado de Twitter, que te ayudará a empezar y agilizar tu diseño web. Algunas características que ofrece son:

  • Estructura de 12 columnas
  • Tamaño pequeño de 10kb (comprimido)
  • Diseño adaptable
  • Plugins personalizados de Jquery
  • Compatible con todos los navegadores modernos incluído IE7
  • Soporta HTML5
  • Soporta CSS3

Entre otras bondades que tiene, es que ya trae mucha funcionalidad integrada, evitando que tengas que reinventar el hilo negro cada vez que diseñas un website. Puedes agregar una gran variedad de elementos en 1 2 por 3:

  • navegación con menús desplegables
  • tabs dinámicos
  • acordeones
  • ventanas modales o popups
  • barras de progreso
  • tooltips
  • botones
  • paginación
  • carrusel
  • autocompletado
  • etc.

Todo esto ya viene preparado para verse bien en cualquier navegador, y se degrada correctamente para navegadores antiguos.

Un ejemplo de lo que se puede hacer con bootstrap: podemos tener un diseño de 2 columnas expandidas al 100% normalmente, pero cuando se visualiza a través de un celular, se apila una columna encima de otra y se hacen 1 sola, de manera que resulta mucho más fácil de navegar y sin necesidad de hacer zoom.

Otra de las ventajas es que a las imágenes se les puede agregar una clase de manera que nunca excedan el 100% del tamaño de la columna en la que están, así nunca excederán el ancho de pantalla de un celular. Bootstrap expande cada columna a la proporción correcta, no importa el ancho de pantalla, siempre se verá bien en cualquier dispositivo y aprovechando al máximo toda el área de pantalla.

Pero, ¿cuál es el truco? Bootstrap utiliza los llamados media queries, que básicamente es código CSS condicional, y solamente aplica dependiendo del tamaño de pantalla. Por ejemplo el siguiente código solamente aplica para pantallas celulares menores a 480px:

@media (max-width: 480px) {}

En seguida puede ver un ejemplo de una página que se expande al 100% de la pantalla y en la segunda imagen se adapta dependiendo del dipositivo con el que se visualiza.

 

Los comentarios están cerrados.