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. Sääda kuvat käyttäytymään oikein

Toimiva yleissääntö kuville on seuraava:

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

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

5. 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

6. 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;
      }
}