Web Design

Responsive Web DesignAdaptive Web Design
Description: This approach adapts the website to the screen size using flexible grids and CSS media issues. All page elements change proportionally to accommodate different screen sizes (for example, for mobile devices on desktops).Description: This approach creates different versions of the page for different devices. This approach uses fixed sizes for each screen type (mobile devices, tablets, desktops). The page selects the appropriate version according to the user’s device.
Advantages: suitable for a wide range of equipment. Wide range of devices.Advantages: each device gets a tailored version of the website for a better user experience.
Cons: Could be more time to develop and test on different devices.Cons: Need to create multiple versions of the website, which increases development and maintenance time.

Example for Responsive web design:

/* Üldised stiilid kõigile seadmetele */
body {
    font-family: Arial, sans-serif;
}

header, footer {
    background-color: SlateGray;
    color: GhostWhite;
    text-align: center;
    padding: 10px;
}

main {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

section {
    background-color: LightSlateGray;
    padding: 20px;
    margin: 10px;
    width: 30%;
}

/* Meediaküsimus mobiilseadmete jaoks */
@media (max-width: 768px) {
    section {
        width: 100%; /* Mobiilseadmetel võtavad elemendid kogu laiuse */
    }
}

/* Meediaküsimus tahvelarvutite jaoks */
@media (max-width: 1024px) {
    section {
        width: 45%; /* Tahvelarvutitel on reas kaks elementi */
    }
}

Example for Adaptive web design:

/* Stiilid mobiilseadmete jaoks */
body.mobile {
    font-family: Arial, sans-serif;
}

header.mobile, footer.mobile {
    background-color: SlateGray;
    color: GhostWhite;
    text-align: center;
    padding: 10px;
}

main.mobile {
    display: block;
}

section.mobile {
    background-color: LightSlateGray;
    padding: 20px;
    margin: 10px;
    width: 100%;
}

/* Stiilid tahvelarvutite jaoks */
body.tablet {
    font-family: Arial, sans-serif;
}

header.tablet, footer.tablet {
    background-color: SlateGray;
    color: GhostWhite;
    text-align: center;
    padding: 15px;
}

main.tablet {
    display: flex;
    justify-content: space-between;
}

section.tablet {
    background-color: LightSlateGray;
    padding: 20px;
    margin: 10px;
    width: 45%;
}

/* Stiilid lauaarvutite jaoks */
body.desktop {
    font-family: Arial, sans-serif;
}

header.desktop, footer.desktop {
    background-color: SlateGray;
    color: GhostWhite;
    text-align: center;
    padding: 20px;
}

main.desktop {
    display: flex;
    justify-content: space-between;
}

section.desktop {
    background-color: LightSlateGray;
    padding: 20px;
    margin: 10px;
    width: 30%;
}

Conclusion:

If you need to support a wide range of devices and reduce the number of website versions, Responsive Web Design is the optimal choice. This approach allows for flexibility to adapt page elements to different screen sizes using media and receptive (flex) containers, which simplifies development and testing.

Link to my work

Below is a link where you can check out the custom Responsive project:

Work