Responsive Design

[ ui testing ]

Responsive Design — a method for creating websites that look and function well on any device, from smartphones to wide monitors.

Responsiveness is achieved through the use of flexible layouts, grids, and CSS.

UI Elements adjust their size and position depending on the screen.

Responsive Design Example

As a simple example of responsive design, notice how blocks rearrange when the window size changes:

Blocks stack vertically
Images resize while maintaining their proportions

Block 1

Block 3

Testing Responsiveness with DevTools

The device toggle in DevTools allows you to test responsiveness and layout adaptation across different device types and screen sizes — from mobile phones to widescreens.

Open DevTools F12
Click the device icon to the left of Elements or use the keyboard shortcut:
- Windows/Linux — Ctrl + Shift + M
- macOS — Cmd + Shift + M
Select a device from the list Dimensions or specify a custom resolution using the option "Responsive"

Checklist for Testing Layout Responsiveness

Device Selection: UI elements display correctly on devices of various types and screen sizes.
Device Rotation: the layout adapts when the device orientation changes (portrait/landscape).
To rotate the device in DevTools, click the icon with two arrows.
Checking Fonts and Images: fonts and images scale according to screen size.
Checking Navigation Elements: the mobile "hamburger" menu displays and functions correctly.
Checking Interactive Elements: buttons, forms, and other elements work correctly across devices.

Task