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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag