Creating Example Content Pages

Often when I'm building out a new design I'll create a demo page that showcases some of the common html elements in action. The goal for the content is to cover as many bases as possible and show off all the elements of the theme design.

What's the point?

Certainly you can fill your PSD files with lorem-ipsum and call it a day. I find that I like to do more of my design in the browser, working with real content in a real context.

Making it look real

Usually there will be a few headers and some miscellaneous text to try to look like a real page. I'll try to have explanations about some of the key concepts without going overboard. There are a couple of key elements that need to be considered.

Use headings of varying levels

Typically I reserve the H1 for the page title, and don't break up too much beyond h2-h4 otherwise. The example page should have enough content on it to reasonably include the levels you know you'll encounter (even if some may not be used as regularly).

Include a little extra formatting

The content on this type of demo page having to cover a lot of ground means that your examples will look denser than a real page might. (You're not often going to see so much variation in headings, or such density of text formatting.)

It's useful for the demo page, but verify designs in the wild against sparser examples as well.

Include examples of important components

Once you've covered all the basic HTML elements, make sure that you cover a couple of the extra component types that might be used.

Admonitions

For sections of content that showcase warnings or caution alerts.

Callouts & Quotes

Text pulled from other places (quotes) or emphasized in other ways (like first paragraph text)

Tweets?

When embedding tweets inline in content, what sort of format should it take?

Publish then design

Having the HTML test page published means I have a space that looks like a real post that I can use to play around with design elements (and build my design around some real life content).

Designs filled with Lorem-Ipsum will only get you so far: at a certain point you'll want to build with real content so you can put your content through it's paces.