Responsive Design

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.