Responsive design
Responsive design is building one website that adapts its layout, images and type to every screen size, instead of making separate sites for phones and desktops.
How Xodia makes sites responsive: the canvas shows your page at each breakpoint, and the Style panel writes your site's own responsive classes or CSS as you style, so one site fits phones, tablets and desktops.
Updated
On this page
What it is
A responsive page uses flexible grids, images that scale and media queries at breakpoints. Content may stack on a phone and sit side by side on a laptop, and touch targets and text sizes stay comfortable everywhere.
Most visits to many sites come from phones, so a layout that only works on a desktop loses people. Responsive design also covers touch: buttons and links need enough room to tap without hitting their neighbour.
In Xodia
Xodia's canvas shows your page at each breakpoint, and the Style panel edits a style for every size or from one size up, writing your site's own responsive classes or CSS. Your AI's verify skill checks changes on phones and desktops before it hands them back.
The Plan tab's wireframes can be viewed at desktop, tablet and phone width before anything is built.
Read more
Related terms
- BreakpointA breakpoint is a screen width at which a website's layout changes, such as moving from one column on phones to two columns on tablets.
- Fluid typeFluid type is text whose size grows smoothly with the width of the screen between a minimum and a maximum, usually written with the CSS clamp() function.
- WireframeA wireframe is a simple drawing of a page's layout, in grey boxes and placeholder lines, that shows what goes where before any design or copy is final.