Categorizing Topics of Web Concepts

Brochure Kiosk

There are several blog entries in Design DriveThru about the practical application of HTML and CSS, simple ideas as well. In order to put these entries in a clearer light, there needs to be specific categories where they fall under. This will put things in context so that the reader would know to which extent the entry applies to him or her.

For example, as we talk about Notes on SASS File Structure, how does one try to absorb this concept? You might ask if this entry is important for you as a web or front-end designer. The answer can be made easier by categorizing the topics.

Think and Act

The first categories deal with a particular web concept as being either of the two:

  • Theory
  • Technique


Theory deals with general principles.

Theory is a contemplative and rational type of abstract or generalizing thinking, or the results of such thinking. Depending on the context, the results might for example include generalized explanations of how nature works.

Source: Wikipedia

An example of a theory is CSS Principles.


Technique on the other hand, deals with practical application.

A technique is a procedure to complete a task.

Source: Wikipedia

An example of Technique is Recreating Spotify’s Album Cover.

There could also be an entry with both Theory and Technique as its categories, for example: Using <body> to Define UI States and Types. This entry talks about principles and demonstrates how to apply it.

Brochure and Kiosk

The second part of categories is about the web being generally split into two – it is either:

  • web as a document or web as an application
  • web as hypertext system (information-oriented) or web as software interface (task-oriented)

The latter is from The Elements of User Experience by Jesse James Garrett.


Web Documents deals mainly with information like Wikipedia or a WordPress blog. This is the primitive beginnings of HTML wherein information are linked to other information via anchor elements.


Web Applications deals mainly with services that foster activities and enable the users to accomplish specific tasks. Good examples range from Google Sheets to InVision.

This category set could be mutual like Flickr, for example – it is a webapp yet it deals with images and videos with rich information.

I would be using these categories to contextualize entries mostly discussing HTML because each web object, whether a simple web document or a webapp deals with HTML.


Hopefully this categorization technique will be useful in mapping the context of Front-End Design entries.


Leave a Reply

Your email address will not be published. Required fields are marked *