A target area in a website or app is an area that enables a user to interact with the interface through touch or a pointing device such as a mouse.
Examples are links, buttons, form elements, etc.
According to Fitts’s law, “the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target”.
For a target area to be easily tapped or clicked by the user, its area must be adequate enough to be interacted upon.
Visually, it may appear small (such as an icon), however, it could still have an adequate target area.
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.