Responsive Design"
From Documentation
(Created page with "{{ZKDevelopersReferencePageHeader}} This section describes general concepts regarding responsive design, and how to apply these concepts to ZK pages and components. {{ZKDeve...") |
|||
| Line 2: | Line 2: | ||
This section describes general concepts regarding responsive design, and how to apply these concepts to ZK pages and components. | This section describes general concepts regarding responsive design, and how to apply these concepts to ZK pages and components. | ||
| + | |||
| + | ==Definitions== | ||
| + | *Layout: “Layout” in responsive design refer to the logical relationships between UI elements. Notable relationships in this context are: | ||
| + | **Parent – Child: an element located inside another. | ||
| + | **Ancestor – Descendant: a structurally superior of inferior element along a chain of Parent-Child relationships. | ||
| + | **Sibling – Sibling: two (or more) elements located in the logical structure as children of the same Parent element. | ||
| + | *Fluid design: Any UI designed to adapt to the current viewing device by resizing some of its elements to provide a suitable experience. Its characteristics are: | ||
| + | **Adaptive: Changes the UI experience based on the screen size. | ||
| + | **Static layout: Fluid design changes properties of elements, but the layout doesn’t change. The relationship between the elements are not altered between versions of this design. | ||
| + | *Responsive design: Any UI designed to adapt to the current viewing device by providing a different layout for the page elements. Its Characteristics are: | ||
| + | **Adaptive: Changes the UI experience based on the screen size. | ||
| + | **Dynamic layout: Responsive designs will provide different layouts and even different components altogether depending on the current screen size. | ||
{{ZKDevelopersReferenceHeadingToc}} | {{ZKDevelopersReferenceHeadingToc}} | ||
{{ZKDevelopersReferencePageFooter}} | {{ZKDevelopersReferencePageFooter}} | ||
Revision as of 08:38, 23 April 2024
This section describes general concepts regarding responsive design, and how to apply these concepts to ZK pages and components.
Definitions
- Layout: “Layout” in responsive design refer to the logical relationships between UI elements. Notable relationships in this context are:
- Parent – Child: an element located inside another.
- Ancestor – Descendant: a structurally superior of inferior element along a chain of Parent-Child relationships.
- Sibling – Sibling: two (or more) elements located in the logical structure as children of the same Parent element.
- Fluid design: Any UI designed to adapt to the current viewing device by resizing some of its elements to provide a suitable experience. Its characteristics are:
- Adaptive: Changes the UI experience based on the screen size.
- Static layout: Fluid design changes properties of elements, but the layout doesn’t change. The relationship between the elements are not altered between versions of this design.
- Responsive design: Any UI designed to adapt to the current viewing device by providing a different layout for the page elements. Its Characteristics are:
- Adaptive: Changes the UI experience based on the screen size.
- Dynamic layout: Responsive designs will provide different layouts and even different components altogether depending on the current screen size.