Web Design

Eesti keele leht

Comparison of Responsive and Adaptive Web Design

AspectResponsive DesignAdaptive Design
DefinitionUses flexible layouts, fluid grids, and CSS media queries to dynamically adjust content across screen sizes.Uses multiple fixed layouts specifically designed for different screen resolutions or devices.
FlexibilityHighly flexible; works seamlessly across all devices, including new screen sizes not initially accounted for.Limited flexibility; optimized only for predefined screen sizes, requiring updates for new devices.
User ExperienceProvides a uniform experience across all devices, ensuring content looks consistent regardless of screen size.Offers a tailored and potentially superior experience on supported devices but may lack optimization on others.
Development EffortEasier to implement and maintain due to a single design approach. Requires less time and resources for updates.Requires more effort to develop and maintain because multiple layouts must be created and updated for each target device.
PerformanceMay load unnecessary elements or large images on smaller devices, slightly impacting performance.Optimized for specific devices; smaller assets and tailored layouts can improve loading times.
Use CasesBest for content-heavy websites, blogs, e-commerce, and any site needing broad compatibility.Ideal for specialized applications, such as device-specific platforms or apps with unique interaction requirements.
My page using responsive design

Responsive design code examples:

Flexible Grid Layout with Media Queries

.box {
            flex: 1 1 200px; 
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }
        @media (max-width: 600px) {
            .box {
                flex: 1 1 100%; 
            }
        }

Responsive Navigation Bar

nav {
            display: flex;
            justify-content: space-around;
            background-color: #333;
            padding: 10px;
        }
        nav a {
            color: white;
            text-decoration: none;
            padding: 10px 20px;
        }
        nav a:hover {
            background-color: #575757;
        }
        @media (max-width: 600px) {
            nav {
                flex-direction: column;
                align-items: center;
            }
            nav a {
                padding: 15px;
            }
        }

Responsive Image

img {
            max-width: 100%;
            height: auto; 
            border: 2px solid black;
        }
        @media (max-width: 600px) {
            img {
                border: none;
            }
        }

Adaptive design code examples

Responsive styles via separate CSS files

<link rel="stylesheet" href="style-desktop.css" media="screen and (min-width: 1024px)">
<link rel="stylesheet" href="style-tablet.css" media="screen and (min-width: 768px) and (max-width: 1023px)">
<link rel="stylesheet" href="style-mobile.css" media="screen and (max-width: 767px)">

Changing the image for different screens

<picture>
    <source srcset="image-desktop.jpg" media="(min-width: 1024px)">
    <source srcset="image-tablet.jpg" media="(min-width: 768px)">
    <img src="image-mobile.jpg" alt="Responsive Image">
</picture>

Media queries with different styles for devices

/* Desktop */
body {
    font-size: 18px;
    margin: 20px;
}

/* Tablet */
@media (max-width: 1024px) {
    body {
        font-size: 16px;
        margin: 15px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        margin: 10px;
    }
}

Scroll to Top