Responsiivinen suunnittelu

Responsiivinen suunnittelu

• kohtuullinen käyttökokemus, vaikka..
  • laitteen koko vaihtelee
  • käyttäjä muuttaa ikkunan kokoa
• tavoite on
  • ei näkymätöntä sisältöä
  • ei sotkeutuneita käyttöliittymiä
  • käytettävyys kosketusnäytöillä

Mitä ongelmia responsiivinen suunnittelu ratkaisee?

→

• https://dequeuniversity.com/library/responsive/1-non-responsive

Huonon suunnittelun ominaisuudet

Testaamiseen: Vaihda laitepalkki

• tunnetaan myös nimellä "Laitetila" tai "Responsiivinen tarkastaja".
• simuloi eri näytön kokoja ja resoluutioita.

• avaa Chromessa ja Edgessä painamalla Ctrl + Shift + M.
• mahdollistaa esiasetettujen laitteiden (esim. iPhone, Pixel) valinnan ja manuaalisen koon muuttamisen.
• emuloi kosketusnäyttöjä, laitteen pikselisuhteita (DPR) ja muita mobiiliominaisuuksia.
• hyödyllinen mobiiliystävällisten asettelujen testaamiseen ja responsiivisen suunnittelun ongelmien korjaamiseen.

Edistystä!

Asettelun toteutus on kehittynyt merkittävästi, siirtyen pois työläistä prosesseista.

• Nykyaikaiset CSS-edistysaskeleet:
  • Flexbox ja Grid joustaville ja vankkarakenteisille asetteluille.
  • Funktionaaliset CSS-funktiot kuten min(), max(), minmax() ja clamp() responsiivista suunnittelua varten.
• Suositut CSS-kirjastot:
  • Bootstrap:
    laajalti käytetty sen kattavan komponenttikirjaston ja responsiivisen ruudukkojärjestelmän vuoksi.
  • Tailwind CSS:
    erittäin joustava utility-first-kehys mukautettaviin ja skaalautuviin malleihin.
  • Bulma:
    kevyt, pelkkään CSS:ään perustuva Flexbox-kehys.
  • Material UI (MUI):
    suosittu React UI -kehys, joka toteuttaa Googlen Material Designin.

Responsiiviset (fluid) yksiköt

Absoluuttiset vs. suhteelliset yksiköt

• Unohda pikselintarkka (px) absoluuttinen paikannus
• Käytä suhteellisia yksiköitä, jotka mukautuvat eri näytön kokoihin
• Absoluuttiset yksiköt: kiinteä koko, riippumaton kontekstista (esim. px, cm, in)
• Suhteelliset yksiköt: joustava, mukautuu näkymäporttiin, yläelementtiin tai fonttikokoon

Näkymäportin meta-tagi & näkymäportin yksiköt

<meta name="viewport" content="width=device-width, initial-scale=1.0">

.element { width: 50vw; height: 30vh; }

Miksi? Luo responsiivisia asetteluja, jotka mukautuvat saumattomasti eri näytön kokoihin ja suuntiin.

Muut yleiset suhteelliset yksiköt

Responsiiviset, fluid-funktiot kokojen asettamiseen

Näitä funktioita voidaan käyttää leveyden lisäksi myös fonttikokoihin, ruudukkoasetteluihin ja muihin.

Esimerkki: Fonttikoon skaalaaminen responsiivisesti

body {
                    font-size: clamp(1rem, 2.5vw, 2rem);
                }

Tämä varmistaa, että teksti on vähintään 1rem, skaalautuu näkymäportin leveyden mukaan (2.5vw), mutta ei ylitä 2rem.

Responsiivinen flex/grid

flex-wrap ja flex-grow

Flex tekee tempun kääriytymällä, kasvamalla ja kutistumalla tarpeen mukaan

.cluster{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    transition: width 3s;
    width: 100%;
}
.cluster:hover {
    width: 10%;
}
.cluster-item{
    background-color: rgba(0,0,255,0.3);
    border: 1px solid blue;
    flex-grow: 1; #tasainen jako
    #tila varataan suhteellisesti
}

Responsiivinen grid

Demo: responsiivisuus grid-template-columns:illa

• auto* toistuvat elementit kääriytyvät siististi
• ei leikkausviivoja tai ylivuotoja

Vie hiiri tutkiaksesi, viimeinen sarake näyttää vastaavat asetukset:

Osa (fraction) yksikkönä

• fr on lyhenne sanasta fraction (osa)
• sarakkeen leveys suhteena, eli osana:
• käyttää käytettävissä olevaa tilaa, ottaa myös raot huomioon flexissä ja gridissä

grid-template-columns: 1fr 1fr 1fr 1fr 3fr;

• Harjoitellaan sarakkeiden asettamista,
  • kuten osia ja yhdistelmää absoluuttisten arvojen kanssa, esim.

grid-template-columns: 250px 100px 100px 3fr 1fr;

Responsiivisuus grideissä mahdollistajien avulla

• fr on askel suurempaan responsiivisuuteen, Käytän sen osan mitä on jäljellä
• on kolme muuta responsiivista vaihetta otettavaksi:
  1. repeat()
  2. minmax()
  3. auto-fill/auto-fit

1. repeat()

• Sarakkeiden leveydet voidaan määritellä seuraavasti:

• grid-template-columns: 1fr 1f 1fr 250px;

• 1fr tautologia voidaan poistaa seuraavasti:

• repeat(3, 1fr)

grid-template-columns: repeat(3, 1fr) 250px;

2. toisto: koko minmax()-funktion avulla

• koko voidaan tehdä vieläkin joustavammaksi
• minmax() määrittelee alueen
  • voi olla sekoitus absoluuttisia ja murtoarvoja, esim.
    • minmax(100px, 1fr)
• Yhteenvetona:

grid-template-columns: repeat(3, minmax(100px, 1fr)) 250px;

minmax-funktion logiikka:

• 1fr < 100px, silloin leveys on min-width: 100px;
  minmax() yrittää taata riittävän tilan sisällölle
• 1fr > 100px, silloin 1fr toteutuu

Viimeinen osa (250px) lisää "joustavuuspuskuria". Se ottaa sen, mitä jää jäljelle 3 * minmax() -funktiosta, jos tila < laskettu leveys.

Auto-fill ja Auto-fit CSS Gridissä

• Kun tilaa ei ole riittävästi, ruudukon kohteet alkavat ylivuotaa.
  • Äärimmäisissä tapauksissa ruudukon kohteet voivat tulla täysin piilotetuiksi.
• Todella responsiivisen ruudukon luomiseksi raidan koon on sopeuduttava käytettävissä olevaan tilaan.
• Auto-fill ja auto-fit mahdollistavat selaimen määrittää dynaamisesti ruudukon raitojen määrän.

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) 250px;

Huomautus:

• auto-fill luo mahdollisimman monta raitaa, vaikka ne olisivat tyhjiä
• auto-fit kutistaa tyhjät raidat

Liiallisen tilan käsittely: auto-fill vs. auto-fit

• Kun käytetään minmax(100px, 1fr) -funktiota, käyttäytyminen vaihtelee riippuen valinnasta auto-fill tai auto-fit:
• auto-fill: Selain luo mahdollisimman monta saraketta, mukaan lukien tyhjät. Jokainen sarake säilyttää vähimmäiskoon 100px, ja ylimääräinen tila jää käyttämättä
• auto-fit: Vain tarvittavat sarakkeet luodaan, ja kaikki ylimääräinen tila jaetaan niiden kesken, jolloin kohteet voivat laajentua jopa 1fr:ään ja täyttää käytettävissä olevan tilan

Responsiivinen muistisääntö

Media queryt

@media CSS:ssä

• @media kuuluu at-rules -ryhmään (muita esimerkkejä: @import, @property, @supports).
• @media -säännön sisällä määrität media queryn, joka määrittää, milloin sisällytetyt tyylit tulee ottaa käyttöön.
• Media queryt kirjoitetaan sulkeiden sisään ().

Media Query -vaihtoehdot

1. Mediaominaisuudet: Ehdot, jotka tarkistavat laitteen ominaisuudet, kuten:
   • min-width: 900px - Näytön vähimmäisleveys
   • resolution: 720dpi - Laitteen resoluutio
   • orientation: landscape - Näytön suunta
2. Mediatyypit: Määrittele kohdelaitteen tai -ympäristön:
   • screen - Pöytäkoneet, kannettavat tietokoneet, tabletit ja puhelimet
   • print - Tulostettavien asiakirjojen tyylit
   • speech - Näytönlukijoiden tyylit
   • all - Koskee kaikkia mediatyyppejä
3. Käyttäjän asetus queryt: Tunnetaan myös saavutettavuuteen liittyvinä media queryina. Nämä vastaavat käyttäjän asetuksiin käyttöjärjestelmässä tai selaimessa:
   • prefers-reduced-motion - Vähentää animaatioita ja siirtymiä
   • prefers-color-scheme - Mahdollistaa tumman tai vaalean tilan (dark | light)
   • prefers-contrast - Lisää tai vähentää kontrastia
   • prefers-reduced-transparency - Vähentää läpinäkyvyyttä paremman luettavuuden vuoksi
4. Yhdistelmät: Käytä loogisia operaattoreita (and, or, not, only) monimutkaisten ehtojen luomiseen:

   @media screen and (min-width: 600px), (orientation: landscape) {
       body {
           background-color: lightblue;
       }
   }

Media query: mediaominaisuudet

width | min-width | max-width | height | min-height | max-height| aspect-ratio | color | resolution | orientation | scan ...

@media (min-width: 768px) { css-rule }

@media (min-width: 768px) and (max-width: 991px) { css-rule }

Media query: mediatyyppi

all | aural | braille | handheld | print | projection | screen | tty | tv | embossed | speech ...

@media (print) { css-rule }

@media (min-width: 700px), handheld and (orientation: landscape){ css-rule }

Lisätietoja tältä sivustolta W3Schools materiaali

Tyypillinen media query

• Perustyylisäännöt ja erityiset tyylisäännöt tietyille näytön leveyksille.
• Ensin määrittelemme säännöt, jotka koskevat ikkunan leveydestä riippumatta.
• Media queryilla muutamme perustyylisääntöjä tai lisäämme uusia sääntöjä tietyille tilanteille.

p {
    color: blue;
}
/* Muista, ei päällekkäisiä leveyksiä!*/
@media (min-width: 1200px) {
    //säännöt vain leveille näytöille
}
@media (min-width: 992px) and (max-width: 1199px) {
    //säännöt kannettavan tietokoneen kokoisille näytöille
}

Tyypilliset näkymän leveydet

Pieni puhelin	< 600px
Puhelin	600px - 767px
Tabletti	768px - 991px
Pöytäkone	992px - 1199px
Leveä pöytäkone	>= 1200px

Nämä viisi katkaisupistettä on esitetty W3Schools:n toimesta hyvin hyväksyttynä de facto -standardina ja ne ovat hyvin lähellä Bootstrapin kaltaisten kehysten käyttämiä katkaisupisteitä.

Bootstrap

Bootstrap (getbootstrap.com)

• Tehokas, laajennettava ja ominaisuuksiltaan runsas front-end työkalupakki
• Käytä valmiiksi rakennettua ruudukkojärjestelmää (flexbox-pohjaista)
• Komponenttipohjainen "Atominen" arkkitehtuuri

• Bootstrap on suosittu avoimen lähdekoodin front-end kehityskehys
• Twitterin kehittämä ja julkaistu vuonna 2011
• Käytetään responsiivisten, mobiili edellä suunniteltujen verkkosivujen suunnitteluun käyttämällä valmiiksi määritettyjä luokkia

	Bootstrap	Tailwind CSS	Bulma	Materialize
Suunnittelutapa	Komponenttipohjainen	Hyötyluokka edellä	Flexbox-ruudukko	Material Design
Mukauttaminen	Keskitaso	Korkea	Keskitaso	Matala
JS-ominaisuudet	Kyllä	Ei	Ei	Kyllä
Käyttötapaus	Yleiskäyttö, nopea prototyyppaus	Mukautettu käyttöliittymä, suuret projektit	Kevyet sivustot	Google Material UI
Arvioitu suosio	Erittäin korkea	Erittäin korkea	Keskitaso-korkea	Matala-keskitaso

Bootstrap - templaatti

<!doctype html>
<html lang="en">
    <head>
    
    
    
    
    </head>
    <body>
    
Hello, world!
    
    </body>
</html>

Responsiivisuus ruudukkojärjestelmän avulla

• Ruudukkojärjestelmä käyttää 12 sarakkeen asettelua, joka on rakennettu flexboxilla (ja gridillä)
• Ruudukkojärjestelmässä on kuusi responsiivista katkaisupistettä:
  • Katkaisupisteet ja vähimmäisleveydet:

    Katkaisupiste	Vähimmäisleveys
    xs (erittäin pieni)	Ei mitään (Oletus)
    sm (pieni)	576px
    md (keskikokoinen)	768px
    lg (suuri)	992px
    xl (erittäin suuri)	1200px
    xxl (erittäin erittäin suuri)	1400px

  • Kun näkymän leveys kasvaa, asettelu mukautuu suurempiin katkaisupisteisiin:
    • Esimerkiksi col-md-* -säännöt tulevat voimaan, kun näkymä saavuttaa 768px
    • pysyy voimassa, kunnes toinen tarkempi sääntö tulee voimaan:
      Responsiivinen sarake

      
          
      Responsiivinen sarake
      

Ruudukon visualisointi ja katkaisupisteet

Bootstrap 5 ruudukkojärjestelmä (col-*, nykyinen versio)

• col-md-*- kelvolliset arvot vaihtelevat välillä 1..12.
• Sarakkeen leveys allokoidaan suhteellisesti määritetyn arvon perusteella.
• Sarakkeiden arvojen kokonaissumman odotetaan olevan 12, mutta se ei ole ehdottoman välttämätöntä.

Bootstrapin display-luokilla 🚀

Hallitse näkyvyyttä ja asettelua Bootstrapin d-*-luokilla!

Responsiivinen näkyvyys

Näytä/piilota elementtejä näytön koon perusteella.

<p class="d-none d-md-block">Näkyvissä MD+ -näytöillä!</p>

Flex-hyötyluokat

Käytä d-flex:iä flexboxin mahdollistamiseen

<div class="d-flex justify-content-center">
    <button class="btn btn-primary">Keskitetty painike</button>
</div>

12 sarakkeen ruudukkojärjestelmä toiminnassa

• col-hyötyluokat lueteltu kullekin laitetyypille
• resize tai zoom in/out nähdäksesi vaikutuksen

    

        Ensimmäinen
    
    

        Vaihtelevan levyinen sisältö
    
    

        Viimeinen
    



    

        Ensimmäinen
    
    

        Vaihtelevan levyinen sisältö
    
    

        Viimeinen
    

Bootstrap ja saavutettavuus

• Bootstrap tarjoaa sisäänrakennetun tuen useille ARIA-attribuuteille saavutettavuuden parantamiseksi:
  • aria-label: Lisää otsikon elementille, jolta puuttuu näkyvä otsikko, tarjoten kontekstin avustaville teknologioille:

    <button aria-label="Sulje dialogi">×</button>

    ×
  • aria-describedby: Liittää kuvauksen elementtiin auttaakseen käyttäjiä ymmärtämään sen tarkoituksen tai toiminnon:

    <p id="username-desc">Syötä käyttäjänimesi.</p>
                    <input type="text" id="username" aria-describedby="username-desc" class="form-control">

    Syötä käyttäjänimesi.

  • aria-expanded: Ilmaisee, laajeneeko vai kutistuuko elementti sisältöä:

    <button data-bs-toggle="collapse" aria-expanded="false" class="btn btn-primary">Näytä tiedot</button>

    Näytä tiedot
  • aria-haspopup: Määrittää, onko elementillä ponnahdusikkuna tai valikko.
    Esimerkki:

    <button aria-haspopup="true" class="btn btn-info">Avaa valikko</button>

    Avaa valikko
  • aria-hidden: Piilottaa elementin avustavilta teknologioilta (esim. näytönlukijoilta).
    Esimerkki:

    <div aria-hidden="true" class="alert alert-warning">Koristeellinen kuva</div>

    Koristeellinen kuva
• Käyttämällä näitä ARIA-attribuutteja Bootstrap varmistaa, että sen komponentit ovat kaikkien käyttäjien saavutettavissa, mukaan lukien vammaiset.

Saavutettavuus

Standardit ja työkalut

Mahdollisuuksien tasa-arvo

• yhtäläinen mahdollisuus saada tietoa kaikille
• viralliset organisaatiot on velvoitettu noudattamaan saavutettavuusohjeita
• joissakin maissa tämä oikeus on kirjattu lakiin
  • Suomessa Laki digitaalisten palvelujen tarjoamisesta (2019)
• lisäksi saavutettavat sivustot sijoittuvat hakukoneissa paremmin ja ovat yleisesti ottaen käyttäjäystävällisempiä.

W3C:n aloitteet

• Useat standardit ja hankkeet pyrkivät parantamaan saavutettavuutta
  1. Verkkosisällön saavutettavuusohjeet (WCAG)
  2. WAI-ARIA (W3C)
  3. https://a11yproject.com/ tarjoaa yhteisön tuottamia artikkeleita ja tietoa saavutettavuudesta

HTML-saavutettavuus

• kirjoita HTML saavutettavuus huomioiden
• tarjoa käyttäjälle selkeä tapa navigoida ja käyttää sivustoasi: tärkeimpien asioiden on oltava helposti saavutettavissa
• tee HTML-koodista mahdollisimman semanttinen, jotta se on helppo ymmärtää sekä käyttäjille että ruudunlukijoille
• huomaa, että väärin käytetty ARIA voi olla haitallisempi kuin sen käyttämättä jättäminen – semanttinen merkintä on usein riittävä

https://www.w3schools.com/html/html_accessibility.asp

Saavutettavuusohjeet

• Näppäimistönavigoinnin on aina oltava mahdollista
  • looginen ja johdonmukainen elementtien järjestys
    • erityisesti otsikoissa
      • tärkein ensin
    • fokuksen hallinta tabindexillä:

      tabindex=0

      tekee elementistä fokusoitavan. Älä käytä tabindex-arvoja, jotka ovat suurempia kuin nolla
  • piilota piilotettavat elementit (aria-hidden="true")
• Visuaalinen suunnittelu on tärkeää, kuten kontrasti ja värit (värisokeille)
  • Dev Tools: värivalitsin tai CSS -yleiskatsaus
  • Kontrastin tarkistusväline
  • WAVE-saavutettavuuden arviointityökalu - Firefox- ja Chrome-laajennus:
    Lataa Chrome-laajennus tästä
  • Koko sivun testaus selaimessa täällä

Saavutettavuusstandardit ja -työkalut

• WAI-ARIA tarkoittaa "Web Accessibility Initiative - Accessible Rich Internet Applications". Katso lisää W3C:stä.
• Testaa ruudunlukijoilla
  • NVDA (Windows, ilmainen)
  • Jaws (Windows, kaupallinen)
  • VoiceOver (Apple)
  • ChromeVox (tekstistä puheeksi)
  • TalkBack (Android)
  • Orca (Linux)

Saavutettavuuden "linttaus" osana työkaluketjua

• axe, pa11y ja DigitalA11Y voivat tarkistaa saavutettavuuden sekä HTML:stä että JavaScriptistä.