Optimizar el diseño de tu Página web usando Twitter bootstrap
Una primera inquietud que llega al planear un website, es si creamos una estructura con ancho fijo u otra que se expanda para cualquier tamaño de pantalla. Al comienzo contábamos con un estándar de 960 pixeles, pero hoy la mayoría de las pantallas modernas podrían ser más grandes, obviamente mucha parte de la pantalla queda desperdiciada. Además, los dispositivos móviles con pantallas pequeñas son usados cada vez con más frecuencia para navegar la web, por esto mismo se volvería impráctico navegar un website de 960px. Y para dispositivos móviles un ancho del 100% no se vuelve muy apropiado, puesto que toda imágen se reduce y se necesita hacer zoom para ver el contenido.
Una respuesta sería crear distintas versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, aún cuando esto nos provoca problemas de mantenimiento y se torna fastidioso al variar 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. diseño web. Muchas características que permite son:
– Plantilla de 12 columnas
– Peso optimizado de 10 kilobytes (comprimido)
– Diseño adaptable
– Plugins customizados de Jquery
– Válido con todos los browsers de hoy en día así como IE7
– Soporta HTML5
– Funciona con CSS3
Otras de las ventajas que permite es que ya dispone de mucha funcionalidad integrada, ésto te evita que tengas que inventar de nuevo la rueda cuanta vez diseñas un website. Tendrás la oportunidad de incorporar una inmensa variedad de elementos en un abrir y cerrar de ojos:
– navegación con menús ajaxeados
– tabs dinámicos
– acordeones
– ventanas o popups
– porcentaje de progreso
– tooltips
– botones
– paginación
– carrusel
– autocompletado
Todo eso ya está preparado para verse bien en cada navegador, y se degrada de forma adecuada para navegadores más viejos.
Un ejemplo de lo que se podrá ejecutar con bootstrap: podríamos tener un diseño de 2 columnas expandidas al 100% normalmente, aunque siempre que se visualiza a través de un celular, se crea una columna arriba de otra y se vuelven 1 sola, de forma que se vuelve bastante más factible de navegar y sin tener que hacer zoom.
Otra de las ventajas es que a las imágenes se les puede añadir una clase de forma que nunca excedan el 100% del tamaño de la columna en la que se hallan, de esa forma de ninguna manera excederán el ancho de pantalla de un celular. Bootstrap amplia cada columna a la proporción correcta, no interesa el ancho de pantalla, siempre se verá bien en todo dispositivo y aprovechando al máximo toda el área de pantalla.
Te estarás preguntando ¿cómo lo logra?, Bootstrap hace uso de los identificados como media queries, esencialmente ésto es código CSS condicional, y tan sólo aplica de acuerdo al tamaño de la pantalla.
Ahora mismo 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:
