Chapter 2 – Content strategy

Content is king.

In this chapter, we focus on the fundamental of the web. It’s so fundamental that these techniques apply to both desktop web and mobile web design. It’s so fundamental that we often overlook and forget about it.

Table of Content for Chapter 2 – Content strategy:

1. Document title
2. Content strategy
3. Content structure
4. Mobile first approach
5. Sketching for mobile web
6. Minimal mobile friendly website
7. Listview
8. Do mobile web has to be a webpage?

Document 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.

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.

📖 Chapter 2 – Content strategy

Content is king.

In this chapter, we focus on the fundamental of the web. It’s so fundamental that these techniques apply to both desktop web and mobile web design. It’s so fundamental that we often overlook and forget about it.

Table of Content for Chapter 2 – Content strategy:

1. Document title
2. Content strategy
3. Content structure
4. Mobile first approach
5. Sketching for mobile web
6. Minimal mobile friendly website
7. Listview
8. Do mobile web has to be a webpage?

Document 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.

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.

Chapter 2 – Content strategy

Content is king.

In this chapter, we focus on the fundamental of the web. It’s so fundamental that these techniques apply to both desktop web and mobile web design. It’s so fundamental that we often overlook and forget about it.

Table of Content for Chapter 2 – Content strategy:

1. Document title
2. Content strategy
3. Content structure
4. Mobile first approach
5. Sketching for mobile web
6. Minimal mobile friendly website
7. Listview
8. Do mobile web has to be a webpage?

Document 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.

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.

Chapter 2 – Content strategy

Content is king.

In this chapter, we focus on the fundamental of the web. It’s so fundamental that these techniques apply to both desktop web and mobile web design. It’s so fundamental that we often overlook and forget about it.

Table of Content for Chapter 2 – Content strategy:

1. Document title
2. Content strategy
3. Content structure
4. Mobile first approach
5. Sketching for mobile web
6. Minimal mobile friendly website
7. Listview
8. Do mobile web has to be a webpage?

Document 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.

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.

Mobile first approach

We talk about mobile first. Mobile first means that during our website planning, we plan the content and layout for the mobile first.

Planning for mobile first ensures us to consider the most important thing of our website.

Sketching for mobile web

For sketching the layout of the mobile web, we can use a draft paper with narrow boundary box. Zurb’s sketchsheet is one of my favorites. Zurb Sketch sheet is a collection of website sketching toolkit. It contains different kinds of sketch sheets that we can use.

For example, this one contains both wide and narrow boundary that we can draw our website layout in both wide and small screen.

Exercise time

Now, browse to the the Macao Gov Portal. Follow the website layout and draw a rough layout sketch in the wide screen on the left of the sketch sheet. What I want you to do is then think how you would layout the content in the narrow screen. Try to draw your design on the right side.

Here is a sketching example on NYtimes.com:

Now it’s your turn to work on the sketching of Macao Gov Portal. You may take a photo of your design and send me your design via email. Remember the mobile first approach? To maximize the usage of this sketch sheet, you’ll actually need to draw the right side first. Then you draw on the left side only after you’ve done your mobile first design.

What’s more? You can fold the the sketchsheet into 1/3 of the original one. Then hold it on your hand and feel your sketch. Are your buttons easy to tap? Are content too indense to read clearly?

A screenshot showing how mobile-friendly web makes use of large buttons and list view.

Exercise time

It’s time for some exercises. Now use your mobile device and explore some websites. Try to check if these websites provide a nice reading experience. Or can the system or service extract the content of the website.

Chapter 2 – Content strategy

Content is king.

In this chapter, we focus on the fundamental of the web. It’s so fundamental that these techniques apply to both desktop web and mobile web design. It’s so fundamental that we often overlook and forget about it.

Table of Content for Chapter 2 – Content strategy:

1. Document title
2. Content strategy
3. Content structure
4. Mobile first approach
5. Sketching for mobile web
6. Minimal mobile friendly website
7. Listview
8. Do mobile web has to be a webpage?

Document 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.

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.

Chapter 2 – Content strategy

Content is king.

In this chapter, we focus on the fundamental of the web. It’s so fundamental that these techniques apply to both desktop web and mobile web design. It’s so fundamental that we often overlook and forget about it.

Table of Content for Chapter 2 – Content strategy:

1. Document title
2. Content strategy
3. Content structure
4. Mobile first approach
5. Sketching for mobile web
6. Minimal mobile friendly website
7. Listview
8. Do mobile web has to be a webpage?

Document 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.

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.