Skip to content
    Flow-alerta.cab

    Adaptive Web Design

    UX & accessibility
    Editorially reviewed on: 1 source
    Your reading view

    In short

    Adaptive Design uses targeted layout variants for particular usage situations.

    Try it yourself

    Responsive

    Fluid layout

    One base layout responds to the available width.

    Adaptive

    Targeted variant

    A different arrangement is used for the chosen size.

    Simplified layout demo: the same content, arranged differently. Device selection affects only this preview.

    Your learning path: layouts for every device

    1. 1Responsive Web DesignOpen term
    2. 2Adaptive Web DesignYou are here
    3. 3BreakpointsOpen term
    4. 4Mobile-First ApproachOpen term

    Understood? A quick question

    A shop uses a separate card view on phones and a table on desktop. Which approach is shown here?

    Related terms

    Matching Flow-alerta service

    Websites & web applicationsWebsites & web applications

    Matching tool / use case

    View use casesUse case: UX and accessibility assessment

    Memory card

    Adaptive Web Design

    Adaptive web design provides different presentations specifically for particular device characteristics or usage contexts. Several layout variants are often used. Responsive elements can be added within these variants.

    • Losing content or functions between variants.

    https://flow-alerta.cab/en/glossar/adaptive-web-design · 09 October 2026

    In context

    Adaptive Web Design
    Responsive Web DesignMobile-First ApproachBreakpoints

    Questions about this term

    What does Adaptive Web Design mean?

    Adaptive Design uses targeted layout variants for particular usage situations.

    What mistakes should be avoided?

    Losing content or functions between variants.

    All details and background

    Adaptive web design provides different presentations specifically for particular device characteristics or usage contexts. Several layout variants are often used. Responsive elements can be added within these variants.

    ELI5 – Explained simply

    Like different, deliberately designed arrangements for different devices.

    Why it matters in practice

    Helps make websites understandable, operable and usable for more people.

    Example

    Possible example: A complex data view is given a simpler presentation on mobile devices.

    Pitfalls and limits

    • Losing content or functions between variants.

    Origin & history

    NN/g distinguishes responsive and adaptive approaches by how they adapt to devices and usage contexts. Adaptive variants and responsive elements can work together in one implementation.

    Use in mid-sized companies

    • Possible application in small and medium-sized businesses: A complex data view is given a simpler presentation on mobile devices.

    Sources

    • www.nngroup.comNielsen Norman Group, Mobile Websites: Mobile-Dedicated, Responsive, Adaptive, or Desktop Site?

    Quellen geprüft am 09.10.2026. Redaktionelle Anwendungsbeispiele sind hypothetisch; kein Nachweis realer Kundenergebnisse.

    Editorially reviewed on:

    Next step

    Put knowledge into practice

    Discuss your projectView use cases