Veebidisain

Responsive	Adaptiivne
Kasutajaliidese skaleerimine vastavalt kasutaja seadmele media-queries ehk CSS3-mooduli abil, mis võimaldab määrata erinevaid stiile (või isegi stiililehti) sõltuvalt ekraani resolutsioonist, suurusest ja muudest omadustest.	Kuigi reageeriva disaini tehnoloogiaga loodud saidid näevad olenemata seadme suurusest välja ühesugused – kohanduv ressurss tuvastab, millisest seadmest kasutaja saidile ligi pääseb, ja kuvab saidi versiooni, mis on spetsiaalselt selle seadmetüübi jaoks loodud.
Üks kujundus kõigi seadmete jaoks.	Kasutab mitut fikseeritud paigutust, mis lülituvad sõltuvalt seadmest ümber.
Muudatused tehakse ühele disainilahendusele.	Põhineb serveripoolsel või kliendipoolsel loogikal kujunduse valikul.
Sobib akna dünaamilise suuruse muutmiseks (nt brauseri suuruse muutmisel).	Võimaldab seadmespetsiifilisi funktsioone (nt puuteekraan).

Kokkuvõte

Ma eelistan Responsive’i, sest vaatamata selle puudustele, nagu „võib olla aeglasem, sest kogu sisu laaditakse, sealhulgas pildid, mis ei pruugi väiksemate ekraanide puhul kuvada“, on see minu jaoks mugavam kui Adaptive.

Vaatamata erinevusele jõudluses, usun, et adaptiivset disaini on keerulisem rakendada. Mitme kihi kasutamine erinevate seadmete jaoks ei tundu hea mõte, sest see suurendab arendus- ja toetuskulusid.

Responsive näide

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

Adaptiivne näide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adaptive Design Example</title>
    <style>
        /* Styling for mobile devices */
        @media (max-width: 600px) {
            body {
                background-color: lightblue;
                font-size: 14px;
            }
            img {
                width: 100px;
            }
        }

        /* Styling for tablets */
        @media (min-width: 601px) and (max-width: 1024px) {
            body {
                background-color: lightgreen;
                font-size: 18px;
            }
            img {
                width: 200px;
            }
        }

        /* Styling for desktop */
        @media (min-width: 1025px) {
            body {
                background-color: lightcoral;
                font-size: 22px;
            }
            img {
                width: 300px;
            }
        }
    </style>
</head>
<body>
    <h1>Adaptive Design Example</h1>
    <p>This example changes the style and size of images depending on the device.</p>
    <img src="example.jpg" alt="Example">
</body>
</html>

Rakendasin Responsive design’i minu index.html’ile
https://timurbasirov23.thkit.ee/