Part 1—Content First

1 Content Strategy

Document title

Doc title

First thing is the title of the document. Title of the document is used in the following places:

  • Home screen
  • Bookmark
  • History log
  • Tab
  • Back button in browser
  • Social network

The following is the screen of sharing a webpage on Facebook. Facebook fetches the document title when it is shared.

Title in Facebook sharing dialog

This screenshot shows how confuse it is when every page shares the same document title.

This screenshot, on the other hand, shows the website with corresponding title set for each page.

Content strategy

Why we should care about content first?

Because no matter how the web and app present our content, the content itself doesn’t change. So the first thing we should focus is the content structure.

By structure, I meant the important order of our content. I meant the correct headings for our content. The informative HTML tags we applied to our content.

The next most important thing after document title is our headings.

Headings define the document outline. It shows the architecture of the essay.

Correct use of headings helps both readers and software process the content. Our main heading (h1) may be used in many places. It could be the title of our essay that’s displayed in:

  • Email newsletter
  • Read later service

For detail about how we should use the headings, we may check the reference to the W3C spec about the headings.

Exercise

Now try to make use of the HTML5 tags to write a news web page. You may create or copy dummy content. We focus only on the structure.

Try to write the core content first. Then add the author information. Then the category of this essay. Then add a website header and footer. Then add a navigation list. Then add a side bar to display related content. After adding all these things, can the reading tool still extract your essay content?

Content structure

Remember, people don’t consume website. They consume content.

The first step is not make your website fit in mobile. The first thing you should do is make your content fits in the mobile device.

Remember, people don’t consume website. They consume content.

There is an article view in mobile Safari. The iOS parsed the web page and try to extract the content for a better reading experience.

Moreover, most read-later service also supports content extraction. For example, the following screenshot shows how Pocket displays the content in its mobile app, with a good reading experience.

Another example

Yet another example

Similar article view is not only use in mobile but also desktop service, such as Evernote.

So how we could make the system or service extract the content correctly? When we plan our HTML structure, we can make use of the <article> tag. Here is the explanation from Mozilla.

The HTML <article> Element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable, e.g., in syndication. It’s often confusing when deciding when to use the section tag and when to use the article tag.

Good structure helps web service analysis your content.

Two quotes from the w3 spec helping us to choose between section and article.

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

License

Icon for the Creative Commons Attribution 4.0 International License

Content Strategy by makzan is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.