Responsiivinen design

Responsiivisella designilla tarkoitetaan käyttöliittymäsuunnittelua, jonka avulla yhtä web-sivuja voi käyttää eri laitteilla ilman että käyttökokemus merkittävästi kärsii.

Samaa verkkosovellusta tai verkkosivua voi siis käyttää huolimatta siitä, onko käyttäjällä kännykkä, tabletti tai läppäri. Responsiivisen toteutuksen tekeminen on mahdollista käyttäen HTML5-kuvauskieltä, CSS3-tyylimääritteitä ja javaScriptiä. Responsiivisessa designissa käytetään hyödyksi mm. flexboxia ja mediaqueryjä (=CSS:n mediasääntöjä, joilla määritetään käytettävän näyttölaitteen suuruus ja sivun käyttäytyminen).

Nykyisin sivuston vaatimus on, että sen tulisi toimia kaikenlaisilla webin selaamiseen tarkoitetulla laitteella.

ss

Kun näytön leveys pienenee, niin rinnakkais asettelusta siirrytään peräkkäiseen

Miten responsiivisuus toteutetaan?

1. Tee sivun ulkoasusta sekä html-koodista selkeää ja riittävän yksinkertainen

2. Aseta vievport-tagi sivyn head-osaan

Vievport-tagi antaa selaimelle ohjeet sivun laitteen näytön koosta ja siitä, kuinka sivua skaalataan.

viev

3. Tee käyttöliittymästä (lay-outista) joustava

4. Mediaqueryt eli mediakyselyt

Responsiivisessa suunnittelussa ulkoasun uudelleenasemointi tehdään media-kyselyjen avulla. Mediakyselyjen avulla määritän uudet tyylit, jotka tulevat myös silloin voimaan.

mediaquery
   
 @media screen and (max-width: 1250px) {
      nav ul {
        width: 100%;
                }
      nav li a {
        font-size: 0.9em;
      }
}

5. Sääda kuvat käyttäytymään oikein ja myös tekstit

Toimiva yleissääntö kuville on seuraava:

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

Tämän avulla saamme kuvat mukautumaan emo-elemntin kokoon, mutta tässä kuva ei kuitenkaan pääse kasvamaan ylitse sen todellisen koon.

Kun mennään pienempään näyttökokoon niin voit myös asettaamediaqueryihin otsikoile ja muille isokokoisille teksteille pienemmän fonttikoon, että ne mahtuisivat paremmin näytölle

 

6. Flexbox

Flexbox-sääntöjen avulla saat asemoitua html elementit rinnakkain. Flexboxilla saat myös tehtyä sivusta selleisen, että rinnakkaiset elementit menevä peräkkäin, kun emo-elementin leveys pienenee.

desktoptabletmobile

wrapper{

display: flex;
justify-content:space-between;
flex-wrap: wrap;

}

 

7. Navin muokkaaminen pystynaviksi

navi

8. Priorisoi

"Ei niin tarpeelliset"elementit voit jättää pois näkyvistä pienellä näyttökoolla.

elementti {

diplay: none;

}