In this screencast we dig into designing another very important page. This is one of those pages I've been excited about designing since the beginning, because it's a page that was particularly under-served by the last design. In this new design, we'll approach it from scratch and design something that suites the content better.

The first order of business is making the actual video on the page as big as it can be. I think it would be awesome if the video was larger on the screen than it is at YouTube. I like watching videos very big, but I don't always like full-screen - which hides the entire screen.

The question then becomes where the title of the video goes. We already have the site header, the videos header, and the black-bar sub navigation. If we also include a title (and possibly description and meta data) that pushes this full-width video pretty darn far down the page. This page is all about video, so we keep the video above that other information. Fortunately we can use black bar to show the title of the video, so it's not like the user is lost as to what they are looking at or where they are in the site's hierarchy.

We also use the black-bar navigation to offer up a Subscribe on iTunes link - which is more relevant on this page than anywhere else on the site. That's the kind of customization of content templates that makes a site sing.

Beneath the video, we can structure up a grid that essentially looks like a blog post or snippet or alamanac entry or anything else. Content and comments on the left 2/3 and aside (sidebar) content on the right 1/3.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.