UI Responsive Media

Responsive design adapts layout, priorities and interaction model to the device. It is not just a smaller desktop.

Process

Decide what information and actions are needed first on small screens.
Design content flow before choosing breakpoints; use flex/grid/min/max/container constraints.
Prefer one responsive implementation unless mobile and desktop interaction models are genuinely different.
Convert dense desktop patterns intentionally: tables to cards, filters to drawers/bottom sheets, sidebars to contextual nav, detail panels to separate screens or expanded cards.
Use max-widths and additional context on desktop instead of stretching mobile layouts.
Set stable dimensions or aspect ratios for images, videos, iframes, avatars, thumbnails, charts and media placeholders.
Test real viewport sizes, landscape mobile, zoom, long text, touch, keyboard, soft keyboard and safe areas.