Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
There are many different kinds of interaction in an information environment like web pages.
Clicking and scrolling are just two of them. And both have different mental models when accessing information.
One limitation of any information environment is that there’s only a limited number of information that can be displayed all at once, at the same time. Besides, a user could focus only on a limited number of information at once.
Clicking and scrolling could be combined, though, to optimize the interaction—meaning, the easier for the user to perceive and get to the information, the better.
Good UX design is more of influencing the users’ moods and behaviors than controlling or manipulating their minds.
It’s good to revisit several concepts in HTML for the purpose of optimally structuring it—for all kinds of usage and accessibility.
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
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
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.
- 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)
- Visual Design
- Nature (style of the element as a standalone)
- Layout (style of the element in relation to other elements)
- Colors (with nature and layout alone, the design should be able to work even in black and white colors)
- Graphics (border, border-radius, box-shadow)
- Typography (style of text)
- 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.