Web Science/Part1: Foundations of the web/Web content/Motivating separation of content and layout

From Wikiversity
Jump to: navigation, search

Motivating separation of content and layout

Wikiversity-Mooc-Icon-Edit.svg
Wikiversity-Mooc-Icon-Ask.svg
Wikiversity-Mooc-Icon-Learning-goals.svg

Learning goals

  1. See the problems with inline styles
  2. Understand that a style sheet gives you freedom
  3. being able to explain people why they should use style sheets
Wikiversity-Mooc-Icon-Edit.svg
Wikiversity-Mooc-Icon-Ask.svg
Wikiversity-Mooc-Icon-Video.svg

Video

Wikiversity-Mooc-Icon-Edit.svg
Wikiversity-Mooc-Icon-Ask.svg
Wikiversity-Mooc-Icon-Script.svg

Script

We have now learned about HTML document structures and also about HTML options for formatting. But, what do we now need style sheets for and why do we distinguish between document structure and document layout? Isn't this much more practical, right to the point and easier to handle both together? Yes, to some very limited extent it is, but there are some issues that arise quickly:

  • Consistency of Layout: It is very difficult to remember and maintain consistency of layout (e.g. always use italics for emphasis instead of bold face) over a longer time of working. When you collaborate on a text, it is practically speaking even infeasible. It is much simpler to provide structure (emphasize) and factor out the decision how to convey the corresponding notion through layout (e.g. italics)
  • Expertise: The content expert is typically not an expert for layout and vice versa. Even if one person does both, the person may learn over time about content vs layout at different speeds leading to the next issue of
  • Change of Layout: Layout and content tend to develop in different cycles. You may decide for a new text and maintain existing layout. Or you may change your layout, but maintain existing content. Hence, it is good practice to separate the two.
  • Adaptability: Some users have a big screen, others have only a tiny device. What a heading is, is not altered by a different device, but how to display it may change. Knowing about a certain font size, however, does not identify a heading.
  • Personalizability: Some users have perfect eye sight, others may be color blind or their eye sight may be even more challenged. Determining colors to be red and green may prevent color-blind people from understanding the content. But, they might decide to go for certain color options in their browser.
  • Repurposing: Even a single user may have varying requirements, for instance depending on whether he wants to print content or view it on screen.

Rule of thumb: People who are serious about publishing use style sheets.

Wikiversity-Mooc-Icon-Edit.svg
Wikiversity-Mooc-Icon-Ask.svg
Wikiversity-Mooc-Icon-Further-readings.svg

Further reading

no further reading defined
You can define further reading here.
In general you can use the edit button in the upper right corner of a section to edit its content.
Wikiversity-Mooc-Icon-Discussion.svg

Discussion