# 125: Photoshopping la page vidéo unique - Astuces CSS

Anonim

Dans ce screencast, nous creusons la conception d'une autre page très importante. C'est l'une de ces pages que je suis enthousiasmé par la conception depuis le début, car c'est une page qui était particulièrement mal desservie par le dernier design. Dans ce nouveau design, nous l'aborderons à partir de zéro et créerons quelque chose qui correspond mieux au contenu.

La première chose à faire est de rendre la vidéo réelle sur la page aussi grande que possible. Je pense que ce serait génial si la vidéo était plus grande à l'écran qu'elle ne l'est sur YouTube. J'aime regarder des vidéos très grandes, mais je n'aime pas toujours le plein écran - qui cache tout l'écran.

La question devient alors où va le titre de la vidéo. Nous avons déjà l'en-tête du site, l'en-tête des vidéos et la sous-navigation de la barre noire. Si nous incluons également un titre (et éventuellement une description et des métadonnées) qui pousse cette vidéo pleine largeur très loin dans la page. Cette page est entièrement consacrée à la vidéo, nous conservons donc la vidéo au-dessus de ces autres informations. Heureusement, nous pouvons utiliser une barre noire pour afficher le titre de la vidéo, donc ce n'est pas comme si l'utilisateur était perdu quant à ce qu'il regarde ou à sa position dans la hiérarchie du site.

Nous utilisons également la barre de navigation noire pour proposer un lien S'abonner sur iTunes - ce qui est plus pertinent sur cette page que partout ailleurs sur le site. C'est le genre de personnalisation des modèles de contenu qui fait chanter un site.

Sous la vidéo, nous pouvons structurer une grille qui ressemble essentiellement à un article de blog ou à un extrait de code ou à une entrée d'alamanac ou à toute autre chose. Contenu et commentaires sur le 2/3 gauche et contenu de côté (barre latérale) sur le 1/3 droit.