Optimizar el diseño de la Web usando Twitter bootstrap

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. web hosting.

Les presento Twitter bootstrap, un toolkit de archivos HTML, CSS y JS elaborado desde cero por personal experimentado de Twitter, que te ayudará a dar inicio y facilitar tu 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: diseño web.