6 claves para entender un layout moderno basado en CSS

Si todavía te quedan muchas dudas en cuanto al diseño con CSS, tal vez con estas claves te quede todo más claro, porque la mayoría del CSS es muy simple y para muchas personas muy fácil de comprender, ya sean tamaños de fuentes, márgenes, rellenos, colores, etc., estas son las 6 claves que debes conocer para entender más fácil el CSS (según Jonathan Snook).

1. Módelo de caja

   Para entenderlo debemos entender las bases del rectángulo, tal vez entiendas bien el margen y el relleno de los elementos, pero ¿qué pasa cuando estos van junto a otros? los problemas comienzan cuando con cierto navegador todo se muestra correctamente pero con otros no. Aqui es donde debemos comprender más las diferencias entre el modo raro (quirks mode) y el modo estricto.

   • Especificaciones del CSS 2.1 por la W3C (en inglés)
   • El modelo de caja
     
   • Hack para el modelo de cajas (box model hack)
   • Modo Quirks y el modo estricto
   • Utilizar la declaración Doctype correcta

2. Las columnas flotantes

   Mientras que el utilizar las posiciones obsolutas es lo que la mayoría de las personas se preocupa por aprender, el contenido flotante tiene más posibilidades, también es importantísimo aprender a limpiar los “floats” para mostrar correctamente los fondos de las cajas.

   • Floatorial (tutoriales simples para la propiedad float)
     en inglés
   • Limpiar los floats
   • Columnas continuas (Faux Columns)

3. Tamaños usando EMs

   Existen dos diferentes temas para especificicar medidas con la unidad de medida EM, una para las fuentes y otra para el layout.

   Para las fuentes: en Internet Explorer en sus versiones 6 y menores no se permite cambiar el tamaño del texto cuando se especifica en piexeles, lo vual es muy desagradable para personas que necesitan el texto más grande y no lo pueden cambiar. La importancia de especificar los tamaños de las fuentes con Em radica en la fuente va a lucir bien en todos los navegadores.

   Para el layout: especificar las medidas del layout con EM nos puede dar muchísima flexibilidad en cuanto al diseño ya que si especificas las medidas de las cajas con EM permites que crezcan con el texto especificado en EM también, esto claramente es una ventaja porque no te descompone el diseño cuando un usuario aumenta el tamaño del texto.

   • Cómo especificar el tamaño del texto usando EMs (en inglés)
   • Diseño elástico
     
   • ¿Fijo, fluido o elástico? ¿Que estructura elegir para nuestra web?
   • EMs el tamaño es relativo
   • Unidades de medida en CSS

4. El reemplazo de imágenes

   Los textos aburridos no nos gustan, existe una técnica muy utilizada para poder utilizar textos de todos los tipos, con efectos, degradados y colores algo que los estándares y los navegadores no nos ofrecen, el reemplazo de texto por imágenes te permite insertar texto optimizado para motores de búsqueda en imágenes que los motores simplemente no pueden interpretar.

   • Reemplazo de texto con imágenes
   • Manual de sIFR paso a paso

5. La navegación flotada

   Si ya dominas las columnas flotantes, la otra parte difícil que es muy usada, es la navegación flotada. La moda por los estándares se encuentra en las listas desordenadas para los menús de navegación. y estas son algunas formas de darles estilo:

   • Listamatic
   • Puertas deslizantes

6. Sprites

   Los sprites son cómo el los videjuegos paquetes de múltiples imágenes en una imagen simple, en CSS esto se ha convertido en una técnica muy popular pero trae algunos problemas, aunque se ha vuleto muy popular por ejemplo para los rollovers combinar multiples imágenes en una solo para los fondos, lo que nos ahorra peticiones al servidor y ancho de banda.

   • Rollovers rápidos sin precarga
   • Reducir las peticiones HTTP

¿Qué obtienes con todo esto?

Por supuesto, hay siempre más por aprender y si piensas que hay una técnica que es especialmente importante para un principiante, agrégalo a los comentarios.