Optimizar el diseño de tu Página web usando Twitter bootstrap

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

Les presento Twitter bootstrap, un toolkit de archivos HTML, CSS y JS hecho a partir de cero por equipo experimentado de Twitter, que te ayudará a comenzar y acelerar tu 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: diseño web.