El toolkit Twitter bootstrap te sirve para perfeccionar el esquema de el Sitio
La 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 principio contábamos con un estándar de 960 pixeles, pero actualmente la mayoría de las pantallas modernas son más grandes, obviamente mucha parte de la pantalla quedaría desperdiciada. Por otro lado, los dispositivos móviles con pantallas pequeñas son usados cada vez con mayor frecuencia para navegar la web, por esto mismo se volvería complicado navegar un website de 960px. Y para dispositivos móviles un ancho del 100% no sería muy apropiado, ya que toda imágen se reduce y se necesita hacer zoom para ver el contenido.
Una solución debería ser generar distintas versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, aunque eso nos provoca problemas de mantenimiento y se torna tedioso al cambiar información. Otra solución serían los llamados “responsive layout”, lo cual significa que la estructura de nuestro website varía dependiendo del tamaño de pantalla en el cual se visualiza. diseño web. Algunas características que brinda son:
– Plantilla de 12 columnas
– Peso optimizado de 10 kilobytes (comprimido)
– Esquema adjustable
– Añadidos personalizados de Jquery
– Válido con todos los navegadores actuales tales como IE7
– Funciona con HTML5
– Soporta CSS3
Entre muchas utilidades que facilita, es que ya trae bastante funcionalidad integrada, evitando que tengas que inventar de nuevo el hilo negro cuanta vez creas algún website. Si quieres puedes incorporar una buena variedad de elementos en 1 2 por 3:
– navegación con menús ajaxeados
– tabs dinámicos
– textos dinámicos
– ventanas o popups
– barras de progreso
– tooltips
– botones
– paginación
– carrusel
– autocompletado
Todo esto ya queda listo para verse excelente en todo navegador, y se degrada correctamente para navegadores antiguos.
Por medio de bootstrap, por ejemplo, podras contar con un diseño de 2 columnas expandidas al 100% normalmente, y una vez que utilizas un celular, una columna se une a otra creando una sola, facilitando la navegación sin necesidad de hacer zoom.
Bootstrap por otra parte te permite la ventaja de añadir a las imágenes una clase de forma que nunca sobrepasen el 100% del tamaño de la columna en la que se encuentran, de esa forma jamás excederán el ancho de pantalla de un celular. Sin importar el ancho de pantalla, bootstrap expande cada columna en la medida adecuada, en cualquier dispositivo siempre se verá bien a la vez que se utiliza toda el área de pantalla.
Te estarás preguntando ¿cómo lo hace?, Bootstrap hace uso de los llamados media queries, esencialmente ésto es código CSS condicional, y tan sólo aplica según el tamaño de la 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:
