Mejorar el diseño de mediante Web empleando Twitter bootstrap
Una de las primeras preguntas que nos hacemos cada vez que se realiza un website, es si pretendemos una estructura con ancho fijo, o que se expanda para todo tamaño de pantalla. Antes 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. Por otra parte, cada vez se ocupan más los dispositivos móviles para navegar la web con pantallas pequeñas, por lo que resultaría dificultoso navegar un website de 960px. Un ancho de 100% tampoco parece práctico para dispositivos móviles debido a que todo se vuelve muy pequeño y tendremos que hacer zoom para verificar el contenido.
Una respuesta sería elaborar diversas versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, aunque tal cosa nos provoca problemas de mantenimiento y se vuelve tedioso al cambiar información. Otra solución serían 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. Distintas características que proporciona son:
– Esquema de doce columnas
– Tamaño pequeño de diez kb (comprimido)
– Plantilla flexible
– Añadidos personalizados de Jquery
– Compatible con todos los browsers actuales así como IE7
– Funciona con HTML5
– Funciona con CSS3
Dentro de diversas utilidades que tiene, es que ya trae mucha funcionalidad integrada, eludiando que tengas que reinventar el hilo negro toda vez que creas algún website. Podrás añadir una importante variedad de elementos en 1 2 por 3:
– navegación con dropdown menus
– pestañas dinámicos
– textos dinámicos
– modal windows o popups
– porcentaje de progreso
– tooltips
– botones
– paginación
– carrusel
– autocompletado
Todo eso ya queda dispuesto para verse excelente en cualquier navegador, y se degrada adecuadamente para navegadores antiguos.
Un ejemplo de lo que se consigue ejecutar con bootstrap: podríamos tener un diseño de 2 columnas expandidas al 100% normalmente, sin embargo siempre que se visualiza por medio de un celular, se crea una columna encima de otra y se vuelven 1 sola, de modo que resulta bastante más factible de navegar y sin necesidad de hacer zoom.
Otra de las ventajas es que a las imágenes se les podría agregar una clase de modo que jamás excedan el 100% del tamaño de la columna en la que se encuentran, así no excederán el ancho de pantalla de un celular. Bootstrap expande cada columna a la proporción correcta, no importa el ancho de pantalla, todo el tiempo se verá bien en cualquier dispositivo y aprovechando al máximo toda el área de pantalla.
Aunque, ¿cuál es el truco? Bootstrap emplea los llamados media queries, que más que todo es código CSS condicional, y solamente aplica de acuerdo al tamaño de pantalla.
Ahora mismo podrá 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:
