We have the "header" of the design in place, we just need to figure out the rest of the page. We have a list of the most important goals we're trying to accomplish, so that will help us guide us. Essentially a set of links ("main navigation") will serve us well.

For instance, we need to showcase Jeff's writing. A link to the blog makes good sense. No sense in making it tiny. We're working with small screens here so we made a big and obvious full-width bar-link. A little gradient gives it some dimensionality (pushable) and separates it from the slider above. If there is any doubt, an arrow icon sells the click (or tap) -ability.

Because we've used a gradient for the link, more buttons below it are already separated from the one above it. We can continue creating links down the page until we have all the major areas covered. Don't wanna overdo it, but 4-5 should be fine. And the fact that the "fold" happens right in the middle of a bar-link is great. Just like the slides that hang off the edges of the screen, having a link hanging off the bottom makes it obvious you can scroll down as well.

The footer will be about as simple as can be. Just a copyright link and some social media stuff. Everyone knows what a link that says "Twitter" or "Facebook" means.

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-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag