10 sitios con gran ejemplo diseños CSS

Una de las mejores maneras de aprender cómo utilizar CSS para realizar diversas tareas es la de ver cómo otras personas están configurando sus sitios. La siguiente lista presenta varios diseños que se pueden utilizar para crear su propio sitio. También se analiza el tipo de diseño y las características especiales de cada sitio que debe tener en cuenta.

• Foto Astronómica del Día: La Foto Astronómica del Día (APOD) es un excelente ejemplo de un diseño fluido. Trate de cambiar el tamaño de la página y usted se sorprenderá de cómo responde el contenido de la página. (El gráfico en el centro no funciona bien en un teléfono celular, pero el texto, sin duda lo hace.) Presenta una buena combinación de estilos de fuente y muestra cómo utilizar enlaces bien para mejorar el contenido.

• EE.UU. Hoy en día: Este es un buen ejemplo de un diseño de adaptación de dos o tres columnas. Observe que al cambiar el tamaño de la página, la tercera columna de la derecha tiende a desaparecer cuando la página se vuelve demasiado pequeña. Note las flechas en cada lado de la presentación. Usted las puede utilizar para moverse entre las secciones del periódico, lo cual es un excelente uso de este efecto especial.

• Yahoo! Maps: Mapa sitios pueden ser muy difíciles de usar porque se basan en una interfaz compleja o la información no se encuentra en una forma que sea fácil para los usuarios a la entrada. Yahoo! Maps obtiene en torno a este problema proporcionando tres campos simples. La mayoría de la interfaz es en realidad dedicado a mostrar el mapa. El sistema de control para el mapa es fácil de entender y no requiere ningún texto. Este es un gran ejemplo de una aplicación gráfica orientada. Este es también uno de los pocos ejemplos de un diseño sensible que encontrará implementado correctamente.

• Thesaurus.com: Esto fija con el sitio de diseño proporciona un buen ejemplo de cómo utilizar las pestañas de una manera única. En realidad, hay varios sitios asociados a este sitio único. Al hacer clic en una de las pestañas en la parte superior, que está transportado a otros sitios como Dictionary.com y Dictionary.com Translator. Observe el uso de un diseño complejo para este sitio. El diseño de tres columnas se divide en las subsecciones según sea necesario para transmitir información adicional.

• Ir Convertir: Este es un buen ejemplo de un diseño elástico de tres columnas. La aplicación no es perfecta, pero se dio cuenta de cómo el contenido consume toda la página, no importa lo grande que usted lo hace. También puede hacer que la página relativamente pequeño antes de ver cualquier señal de una barra de desplazamiento porque el contenido se reduce para ajustarse al espacio disponible. Esta página también cuenta con un sistema de dos menú (de la izquierda se utiliza para acceder a funciones de conversión y de la derecha para acceder a las características del sitio).

• JC Penney: Muchos sitios de ventas proporcionan capas de contenido. En este caso, usted ve un título de proveedor en la parte superior, un buen menú interactivo siguiente, las últimas ventas siguiente, la ruta de sitio actual, y por último la información de ventas de dos columnas. Esta es una presentación de ancho fijo, por lo que no escala bien cuando el tamaño de los cambios del navegador. La atención se centra en la presentación de las imágenes en la página de la mejor manera posible.

• Petter Hesselberg.com: A diferencia de la mayoría de los sitios de hoy, éste utiliza el posicionamiento absoluto con eficacia (también rompe las reglas mediante el uso de tablas para mantener el contenido - el sitio sería mejor si se utiliza exclusivamente CSS). Presentación de los datos tabulares puede ser difícil. Este sitio muestra una manera eficaz para mostrar datos tabulares que no es demasiado ocupado o difíciles de ver. No siempre es necesario el uso de las fronteras al mostrar datos tabulares - a veces coloración sutil es todo lo que necesitas.

• Sourceforge: En algunos casos, es necesario crear una configuración de distribución de información en algún otro formato, como archivos .ZIP. Este es un ejemplo de una estrategia de distribución de información que utiliza técnicas HTML5 y características tales como listas desordenadas para los menús. El diseño de ancho fijo no cambia de tamaño muy bien, pero el sitio en sí es bastante flexible. Observe cómo este sitio utiliza efectivamente un diseño de dos columnas con cabecera y pie de página.

• GetHuman: Las bases de datos se buscan con más frecuencia que están cambiados. Cuando la base de datos es grande, tratando de encontrar una pieza específica de información se vuelve increíblemente difícil y frustrante. Este sitio ancho fijo demuestra una técnica de búsqueda de directorio telefónico que se podría aplicar a otros tipos de sitios que tienden a depender de sólo una o dos teclas para mostrar una variedad de información. Note el uso de efectos especiales para mostrar que la línea está seleccionada. El sitio también presenta un aspecto de tabla sin usar tablas (ver el código fuente para ver por sí mismo).

• Los pensamientos y las discusiones al azar de John: Este sitio le presenta un perfecto ejemplo de la disposición de dos columnas se utiliza en un entorno de blog. Usted ve cómo las entradas en la columna de la barra lateral de la izquierda hacen posible el acceso a las entradas de contenido en el panel derecho con mayor facilidad. Además, este sitio le ayudará a entender los pros y los contras de la disposición de ancho fijo clásico.