October 2020

Brian Dys

Creative Leadership

Volunteer Work

Adplist Mentor Swag

Elsewhere on the Internet

Professional

Personal

Music

Brian Dys Archive Index
584
Design Lead @ PayMaya
Categories

Revisiting HTML – Content Categories and Sectioning Roots

05:59:16
05:59:16
Brian Dys Avatar Brian Dys
0
Comment

It’s good to revisit several concepts in HTML for the purpose of optimally structuring it—for all kinds of usage and accessibility.

Content Categories

Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics. This is a loose grouping (it doesn’t actually create a relationship among elements of these categories), but they help define and describe the categories’ shared behavior and their associated rules, especially when you come upon their intricate details. It’s also possible for elements to not be a member of any of these categories. Source

Sectioning Roots

A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Besides <body> which is the logical sectioning root of a document, the following elements often introduce external content to the page: <blockquote>, <details>, <fieldset>, and <figure>. Source

Categories

What’s a good practice to completely redesign an existent CSS?

05:00:05
17:24:36
Brian Dys Avatar Brian Dys
0
Comment

Styling in CSS is always dependent on the structure of HTML. If you have control over the structure of HTML, plan to redesign it also.

A good rule of thumb is to first, set up a system.

  1. Usability and Accessibility (e.g., making a link’s target area large enough for touch or pointing device, making the structure of HTML accessible to screen readers)
  2. Visual Design
    1. Nature (style of the element as a standalone)
    2. Layout (style of the element in relation to other elements)
    3. Colors (with nature and layout alone, the design should be able to work even in black and white colors)
    4. Graphics (border, border-radius, box-shadow)
    5. Typography (style of text)
    6. Transitions and Animations

You could notice that this system is designed to build on top of the previous one. Meaning usability and accessibility come first before visual design. The same goes for the considerations under visual design.

Originally published in Quora