WebDesign Deniss Gorjunov WebDesign Deniss Gorjunov

WebDesign Deniss Gorjunov

Responsive web design ja adaptive web design on kaks erinevat lähenemist veebilehtede loomiseks, mis pakuvad optimaalset kuvamist erinevatel seadmetel ja ekraani resolutsioonidel. Siin on nende peamised erinevused:

Reageeriv veebidisain (RWD):

Paindlikkus: Vedeliku paigutus hõlmab veebilehel olevate plokkide suuruse määramiseks fikseeritud väärtuste asemel suhteliste mõõtühikute (nt protsentide) kasutamist.

See lähenemisviis ei tööta kõigi ekraanide puhul.

Kohanduv veebidisain (AWD):

Fikseeritud kujundused: AWD kasutab mitmeid fikseeritud kujundusi, mis on mõeldud konkreetsete seadmekategooriate jaoks. Kui kasutaja avab saidi, tuvastab server seadme ja saadab sobiva kujunduse.

Suurem täpsus konkreetsete seadmete jaoks: AWD võib pakkuda täpsemaid ja optimeeritud kujundusi konkreetsete seadmete, näiteks mobiiltelefonide, tahvelarvutite või lauaarvutite jaoks.

Kui valite RWD (tundliku veebidisaini) ja AWD (tundliku veebidisaini) vahel, kaaluge iga lähenemisviisi mõningaid aspekte.

RWD (tundlik veebidisain):

Veebiressursside lehtede disain, mis tagab kõigi ressursielementide identse kuvamise erineva suuruse, tüüpi ja kuva eraldusvõimega seadmetes.

AWD (tundlik veebidisain):

Seadmepõhine optimeerimine: AWD võimaldab teil luua erinevatele seadmetele optimeeritud paigutusi, mis võivad olla kasulikud, kui teil on eri seadmekategooriatele (nt mobiiltelefonid, tahvelarvutid, lauaarvutid) erinõuded.

Täpsem juhtimine: AWD annab täpsema kontrolli selle üle, kuidas teie veebisaiti erinevates seadmetes kuvatakse, mis võib olla oluline optimaalse kasutuskogemuse loomisel.

Valik taga- ja nelikveo vahel sõltub teie eesmärkidest ja prioriteetidest. Kui teile on olulised mitmekülgsus ja paindlikkus. Kui teil on erinevate seadmete optimeerimiseks erinõuded ja vajate hoolikamat juhtimist, võite eelistada AWD-d.

Fluid Layout (Voolav kujundus):

Kirjeldus: Voolav kujundus hõlmab suhteliste mõõtühikute (protsentide) kasutamist fikseeritud väärtuste asemel veebilehe plokkide suuruste jaoks.
CSS-i näide:

.container {
    width: 80%; /* Protsentide kasutamise näide paindlikkuse saavutamiseks */
    margin: 0 auto;
}

Grid Systems (Ruudustikusüsteemid):

Kirjeldus: Ruudustikusüsteemid võimaldavad veebilehe jaotada veergudeks ja ridadeks, lihtsustades elementide paigutust. RWD puhul kasutatakse sageli ruudustikusüsteeme, et luua kohanduvaid kujundusi.
CSS-i näide (Flexboxi kasutamisega):

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1; /* Elemendid võtavad konteineri laiusest võrdselt ruumi */
    margin: 10px;
}

Flexible Images (Paindlikud pildid):

Kirjeldus: Paindlikud pildid kohanevad konteineri suurusega, vältides piltide kärpimist või deformatsiooni erinevatel seadmetel.
CSS-i näide:

img {
    max-width: 100%;
    height: auto;
}

Media Queries (Meedia päringud):

Kirjeldus: Meedia päringud võimaldavad rakendada CSS-i stiile sõltuvalt seadme omadustest, nagu ekraani laius, eraldusvõime jne.
CSS-i näide:


@media screen and (max-width: 600px) {
    /* Stiilid, mis rakenduvad ainult ekraani laiuse korral kuni 600 pikslit */
    body {
        font-size: 14px;
    }
}

Media (Meediaelemendid):

Kirjeldus: RWD kontekstis võivad meediaelemendid hõlmata pilte, videosid, helisid ja muid multimeediumiressursse, mis kohanevad erinevate seadmetega.
Kasutamise näide:

<picture>
    <source media="(min-width: 600px)" srcset="suur-pilt.jpg">
    <img src="väike-pilt.jpg" alt="Alternatiivne tekst">
</picture>

Need elemendid koos töötavad, tagades paindliku ja kohanduva veebilehe erinevate seadmete ja ekraanide eraldusvõimetega. Need võimaldavad luua universaalseid veebisaite, mis näevad välja ja toimivad hästi nii laua- kui ka mobiilseadmetel.

Responsive Web Design (RWD) Näide:

RWD

<!DOCTYPE html>
<html lang="et">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Näidis RWD</title>
</head>
<body>

<div class="container">
    <header>
        <h1>Minu RWD</h1>
    </header>
    <nav>
        <a href="#">Avaleht</a>
        <a href="#">Meist</a>
        <a href="#">Teenused</a>
    </nav>
    <main>
        <h2>Tere tulemast!</h2>
        <p>See on näidisveebisait, loodud kasutades Responsive Web Design'i. Veebisait kohandub erinevate ekraanisuurustega.</p>
    </main>
    <footer>
        &copy; 2023 Minu RWD Veebisait
    </footer>
</div>

</body>
</html>

width: 600px

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

.container {
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    margin: 20px auto;
    max-width: 1200px;
}

header, nav, main, footer {
    margin-bottom: 20px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

nav a {
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    margin: 0 10px;
    border-radius: 5px;
    background-color: #555;
}

width: 300px

Märkame, et kõik liigub lihtsalt teisele lehele, nagu kumm

Adaptiivne veebidisain (AWD) Näide:
max-width: 600px

AWD

Ma kasutan meediaküsimusi, et kohandada stiilid ja kujundused erinevatele ekraanisuurustele. Kolm stiiliklassi (.mobile-layout, .tablet-layout, .desktop-layout) valitakse vastavalt ekraani suurusele.

(min-width: 601px) and (max-width: 1024px)

(min-width: 1025px) WebDesign Deniss Gorjunov

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

.mobile-layout, .tablet-layout, .desktop-layout {
    width: 80%;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

header, nav, main, footer {
    margin-bottom: 20px;
}

header, footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

nav {
    background-color: #ddd;
    padding: 10px;
}

nav a {
    text-decoration: none;
    color: #333;
    padding: 5px 10px;
    margin: 0 10px;
    border-radius: 5px;
    background-color: #fff;
}

@media screen and (max-width: 600px) {
    .tablet-layout, .desktop-layout {
        display: none; /* Varjata tahvelarvuti ja töölaua kujundus seadmetes, mille ekraani laius on kuni 600px */
    }

    .mobile-layout {
        display: block; /* Näita paigutust mobiilseadmete jaoks */
    }

    nav {
        text-align: center;
    }

    nav a {
        display: block;
        margin: 5px auto;
    }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
    .mobile-layout, .desktop-layout {
        display: none; /* Peida mobiil- ja töölauakujundused seadmetel, mille ekraani laius on vahemikus 601px kuni 1024px */
    }

    .tablet-layout {
        display: block; /* Näita paigutust tahvelarvutite jaoks */
    }
}

@media screen and (min-width: 1025px) {
    .mobile-layout, .tablet-layout {
        display: none; /* Peida mobiil- ja tahvelarvutite kujundused seadmetel, mille ekraani laius on vahemikus 1025px */
    }

    .desktop-layout {
        display: block; /* Näita töölaua paigutust */
    }
}

Siin ma kasutan erinevaid display,margin,padding,media

Üldiselt on mõlemal lähenemisviisil omad eelised ja puudused ning

WebDesign Deniss Gorjunovõige valik sõltub teie projekti spetsiifilistest nõuetest.

WebDesign Deniss Gorjunov

https://moodle.edu.ee/my/