# 125: Photoshopping en la página de un video - Trucos CSS

Anonim

En este screencast profundizamos en el diseño de otra página muy importante. Esta es una de esas páginas que me ha entusiasmado diseñar desde el principio, porque es una página que estuvo particularmente mal servida por el último diseño. En este nuevo diseño, lo abordaremos desde cero y diseñaremos algo que se adapte mejor al contenido.

La primera orden del día es hacer que el video real en la página sea lo más grande posible. Creo que sería genial si el video fuera más grande en la pantalla que en YouTube. Me gusta ver videos muy grandes, pero no siempre me gusta la pantalla completa, que oculta toda la pantalla.

La pregunta entonces es dónde va el título del video. Ya tenemos el encabezado del sitio, el encabezado de videos y la navegación secundaria de barra negra. Si también incluimos un título (y posiblemente una descripción y metadatos) que empuja este video de ancho completo bastante abajo en la página. Esta página tiene que ver con el video, por lo que mantenemos el video por encima de esa otra información. Afortunadamente, podemos usar la barra negra para mostrar el título del video, por lo que no es como si el usuario se perdiera en cuanto a lo que está mirando o dónde se encuentra en la jerarquía del sitio.

También usamos la barra negra de navegación para ofrecer un enlace Suscribirse en iTunes, que es más relevante en esta página que en cualquier otro lugar del sitio. Ese es el tipo de personalización de las plantillas de contenido que hace que un sitio cante.

Debajo del video, podemos estructurar una cuadrícula que esencialmente parece una publicación de blog o un fragmento o una entrada de alamanac o cualquier otra cosa. Contenido y comentarios a la izquierda 2/3 y contenido a un lado (barra lateral) a la derecha 1/3.