Optimizar el diseño de la Web usando Twitter bootstrap
Una de las primeras preguntas que nos hacemos cuando se realiza un website, es si deseamos cierta estructura con ancho fijo, o que se expanda para todo tamaño de pantalla. Al inicio el estándar era de 960px, aún cuando, la mayoría de las pantallas actualmente son más grandes, por lo que queda mucha pantalla desperdiciada. Aparte, cada vez se usan más los dispositivos móviles para navegar la web con pantallas pequeñas, debido a eso resultaría impráctico navegar un website de 960px. Un ancho de 100% tampoco sería práctico para dispositivos móviles ya que todo se vuelve muy pequeño y vamos a hacer zoom para ver el contenido.
Esta circunstancia podemos resolverla haciendo varias versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, pero tal cosa implica problemas de mantenimiento y es muy fastidioso al variar información. Igualmente se podrá acudir a los llamados “responsive layout”, que se refiere a que la estructura del website varía de acuerdo al tamaño de la pantalla en la que se visualiza. diseño web. Ciertas características que permite son:
– Diseño de doce columnas
– Tamaño reducido de diez kilobytes (compactado)
– Esquema flexible
– Añadidos customizados de Jquery
– Válido con todos los navegadores de hoy en día así como IE7
– Soporta HTML5
– Soporta CSS3
Otras de las ventajas que brinda es que ya ostenta abundante funcionalidad integrada, ello te evita que tengas que volver a inventar la rueda cuanta vez creas un website. Tendrás la opción de agregar una importante variedad de elementos en un abrir y cerrar de ojos:
– navegación con dropdown menus
– pestañas dinámicos
– acordeones
– modal windows o popups
– porcentaje de progreso
– tooltips
– botones
– paginación
– carrusel
– autocompletado
Todo esto ya está listo para verse excelente en todo browser, y se degrada de forma adecuada para navegadores más viejos.
Gracias a bootstrap, por ejemplo, podras contar con un diseño de 2 columnas expandidas al 100% normalmente, y siempre que usas un celular, una columna se une a otra logrando una sola, facilitando la navegación sin tener que hacer zoom.
Otra de las ventajas es que a las imágenes se les puede agregar una clase de forma que nunca excedan el 100% del tamaño de la columna en la que se encuentran, de esa forma no excederán el ancho de pantalla de un celular. Bootstrap extiende cada columna a la medida correcta, no importa el ancho de pantalla, siempre se verá bien en todo 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.
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:
