Structural Design

Responsive Design

An approach to designing digital interfaces that adapt layout, content, and interaction behavior across screen sizes, devices, and contexts.

Concept facts

Responsive design is an approach in which digital interfaces adapt to different screen sizes, devices, input methods, and viewing conditions while preserving usability and access to core content and tasks.

Also known as
Responsive web design, adaptive layout, multi-device design, fluid layout
Used in
Websites, service portals, learning platforms, public-service systems, forms, dashboards, mobile-first interfaces
Interpret with
Screen size, input method, content priority, task continuity, accessibility, performance, device constraints, and context of use

Plain-language explanation

Responsive design helps an interface work across different devices and screen sizes. It may adjust layout, navigation, text wrapping, images, forms, tables, and content priority.

Responsive design is not only about making a page fit a small screen. It should preserve the user’s ability to understand information, complete tasks, use controls, navigate, and recover from errors.

In high-consequence services, responsive behavior must be tested carefully. A form that looks acceptable on desktop may become confusing on a low-end mobile phone if labels, validation messages, document uploads, or confirmation steps are rearranged poorly.

Why it matters

Many users access digital services through mobile phones, shared devices, or unstable connectivity. If a service works only on a large desktop screen, it can exclude users or increase dependence on staff assistance.

Responsive design affects readability, navigation, form completion, accessibility, and trust. It also affects whether users can complete tasks in real conditions, not only in a design preview.

For institutional systems, responsive design can reduce access barriers but may also introduce new risks if complex tables, document uploads, status messages, or multi-step workflows collapse poorly on small screens.

Use contexts

  • Public-service portals
  • Course and learning platforms
  • Application and registration forms
  • Mobile-first service journeys
  • Enterprise dashboards
  • Document upload workflows
  • Accessibility and device-compatibility review

Application guidance

Start with task priority and content hierarchy. Decide what users must understand and do at each screen size.

Test responsive behavior on realistic devices and conditions. Check navigation, forms, tables, labels, error messages, uploads, focus order, and confirmation states.

Avoid hiding important information only because the screen is small. If content is critical for eligibility, payment, consent, or safety, it must remain accessible and understandable.

Practical example

A social safety net portal is redesigned for mobile access because many applicants use shared smartphones rather than desktop computers.

On desktop, the benefit eligibility table is clear. On mobile, the table collapses into stacked cards, but the income threshold and required document note become separated. Users misunderstand eligibility and submit incomplete applications. Responsive redesign must preserve the relationship between criteria, documents, and next steps across devices.

Interpretive boundaries

  • Responsive design is not only screen resizing.
  • Mobile-friendly appearance does not guarantee mobile usability.
  • Important content should not disappear at smaller breakpoints.
  • Responsive behavior must account for forms, tables, errors, focus order, and assistive technologies.
  • Device adaptation should support task accuracy, not only layout flexibility.

Applied at Userhub

Responsive design is relevant when Userhub evaluates whether websites, forms, portals, dashboards, and learning systems remain usable, accessible, and understandable across devices and use contexts.

See Userhub UX Lab for applied UX research and evaluation context.

Sources and references

  • Marcotte, E. (2011). Responsive Web Design. A Book Apart.
  • ISO. (2018). Ergonomics of human-system interaction — Part 11: Usability: Definitions and concepts (ISO Standard No. 9241-11:2018). International Organization for Standardization.
  • ISO. (2020). Ergonomics of human-system interaction — Part 110: Interaction principles (ISO Standard No. 9241-110:2020). International Organization for Standardization.
  • W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation. https://www.w3.org/TR/WCAG22/

# UX Reference v3 Approved Expansion Content — Batch H

Cite this entry

APA

Userhub. (2026). Responsive Design. UX Reference. https://userhub.com.bd/reference/responsive-design/