Responsiivininen sivu, helppo tapa tehdä tyylikästä saavutettavuutta

• Miten niin ratkaistu?
• Taloudellisuus
• Ole trendijohtaja, älä perässähiihtäjä
• Käytettävyys
• Artikkelissa olleita avainsanoja

Saavutettavan sivun, etenkin jos sivulta vaaditaan WCAG 2.1 ohjeidenmukainen tasoista saavutettavuutta, voi sen toteuttaa responsiivisuudella. Sen avulla sivusta saadaan yksinkertainen ja tyylikäs. Samalla monet saavutettavuuteen liittyvät asiat on jo otettu huomioon.

Miten niin ratkaistu?

Yksi ongelma on ollut sivujen leveys. Tämä on ongelma myös mm. pieniä tabletteja tai kännyköitä käyttäville. Sivulla joutuu monesti liikkumaan sivusuunnassa, jotta saa näkyviin kaiken siinä olevan tiedon. (Tekstin kokoa voidaan muuttaa tavalla, joka ei vaadi käyttäjää vierittämään tekstiä vaakasuunnassa rivin lukemiseksi)

Skaalautuvuus on tapa tehdä sivusta saavutettavampi ja samalla toimivampi myös mobiililaitteiden käyttäjille. Kun sivusto tehdään skaalautuvaksi, siitä ei tarvitse tehdä erillistä mobiiliversiota.

Responsiivisuus, jolla skaalataan sivua, on ajatusmalli. Siinä sivuston suunnittelun pohjana käytetään eri sivukokoja mm. mobiilisivua. Malli on hyvä, sillä html5-arkkitehtuuri on tuonut käyttöön tarvittavat työvälineet ja responsiivisen sivupohjan tekemiseen on kehitetty hyviä työkaluja.

Taloudellisuus

Suunnittelija, joka hallitsee responsiivisuuden, voi nopeasti ja edullisesti tuottaa näyttäviä sivumalleja, joita on helppo muokata asiakkaan toiveiden mukaisesti. Mallipohjan nopeampi valmistuminen ja sen suora soveltuvuus sekä mobiililaitteille ja samalla saavutettavampia sivustoja tarvitseville tuo kustannussäästöjä.

Responsiivisuus kohtaa samoja ongelmia kuin skaalautuvat sivut. Tällainen on esim. kuinka käsitellä kuvia niin, että mobiililaitteessa ja isolla ruudulla saadaan sama kuva näkymään terävänä. Html5-standardi, jota nykyiset selaimet pystyvät toteuttamaan, auttaa osittain ratkaisemaan näitä ongelmia.

Myös Flash-pohjaiset, näyttävät efektit, voidaan korvata html5-elementeillä. Flashsin suurin ongelma on ollut sen haavoittuvuus erilaisten haittaohjelmien kautta. Nykyisin kaikki mobiililaitteet eivät tue Flash-teknologiaa.

Kun sivun käyttöliittymää aletaan suunnitella myös mobiilikäyttäjän näkökulmasta ja mobiililaitteen rajoitusten puitteissa, tulee samalla otettua huomioon monia saavutettavuuteen liittyviä näkökulmia. Monesti näin suunniteltu sivusto saadaan varsin helposti myös saavutettavaksi.

Ellei palveluntarjoaja pysty tarjoamaan responsiivista vaihtoehtoa, on hyvä kysyä, kuinka paljon lisäkustannuksia tulee, kun sivusto ei mm. palvele mobiilikäyttäjiä.

Ole trendijohtaja, älä perässähiihtäjä

On helppoa katsoa, mitä kilpailijat ovat tehneet. Siten voi saada monia hyviä ajatuksia. Kyse on kuitenkin yrityksen, yhdistyksen tms. ulkoisesta näkymästä, joka sisältää värit, fontit ja kaiken muun sivuston suunnittelusta alkaen. Hyvä design responsiivinen suunnittelija voi luoda helposti puhtaan html-mallin, joka on upotettavissa julkaisujärjestelmään.

Aiemmin sivujen suunnitteluun on käytetty paljon aikaa ja rahaa. Suunnittelun tuloksena on saatu pdf-pohjaisia malleja tai yhteen näyttökokoon sopiva html-malli. Html-mallin suunnittelussa eivät ehkä ole olleet lähtökohtina verkon tarjoamat mahdollisuudet, vaan perinteisempi ajattelu. Tällöin visuaalisen mallin muokkaaminen vaatii aikaa ja rahaa.

Jos sivua lähdetään suunnittelemaan suoraan responsiiviseen mallijärjestelmään, on mahdollista saada hyvinkin näyttävä ja verkon ehdoilla toimiva mallipohja. Asiakkaan pyytämät muutokset voidaan tehdä nopeasti ja helposti ja näin tuottaa valmiit leiskat eri sivupohjista.

Lopuksi saadaan suoraan valmista standardien mukaista käyttöliittymää, joka toimii suoraan eri näyttölaitteissa.

Responsiivisuus tukee hyvin nykyaikaista vesiputousmallista suunnittelua, jossa tarkoituksena on tuottaa nopeasti yksi asia kerrallaan. Kun nähdään yhden vaiheen tulokset, voidaan katsoa seuraavaa vaihetta. Voi olla, että seuraava vaihe on jotain muuta kuin oli aluksi ajateltu.

Käytettävyys

Jotta sivuista saadaan toimivia ja käyttäjälle selkeitä, on niiden suunnittelun perusajatuksena pidettävä käytettävyyttä. Perinteisiä ajatusmalleja ei ole suositeltavaa siirtää suoraan uusiin sivupohjiin. Myöskään saavutettavuus ei saisi olla käytettävyyden esteenä.

Artikkelissa olleita avainsanoja

Skrollaus
(Näytön vieritys) = Sivulla liikkuminen sivusuunnassa tai alaspäin, jolloin kaikki sivun aineisto saadaan esille.

Suurennusohjelma
Ohjelma, joka suurentaa halutun osan tietokoneen näytöllä olevasta informaatiosta. wikipedia.org/wiki/Suurennusohjelma

Skaalautuvuus
skaalautuva sivu taipuu erilaisille näytöille ja päätelaitteille materiaalin ja sivun eri osion supistuessa tai laajentuessa tarpeen mukaan. Vastine on kiinteälevyinen sivu, jossa sivun rinnakkaisilla elementeillä on kiinteä mitoitus.

Responsiivisuus
Responsiivinen design (responsive design) = Sivu mukautuu eri päätelaitteille ja sisällön rakenne ja asettelu suunnitellaan niin, että se sopii hyvin laitteen normaalille käyttötavoille. Responsiivisuutta voidaan kutsua parannelluksi mukautuneeksi sivuksi.

Vesiputousmalli
Vesiputousmalli on vaiheellinen ohjelmistotuotantoprosessi, jossa suunnittelu- ja toteutusprosessi etenee vaihe vaiheelta alaspäin kuin vesiputouksessa. wikipedia.org/wiki/Vesiputousmalli

HTML
(Hypertext Markup Language) = Hypertekstin lähinnä sivujen rakenteen (ja ulkoasun) kuvaukseen käytettävä merkintäkieli.

html5
perustuu HTML kielen, CSS3:n ja JavaScriptin yhdistämiseen ja on uusi versio HTML-merkintäkielestä. wikipedia.org/wiki/HTML5

CSS
Www-sivujen ulkoasun määrittelytekniikka (Cascading Style Sheets, CSS). Tyylitiedostolla määritellään sivuston ulkoasu. Kun sivuilta viitataan samaan tyylitiedostoon, saadaan sivustolle yhtenäinen, helposti ylläpidettävä ja muokattava ulkoasu.

Eheys
(Integrity) Tiedon yhtäpitävyys alkuperäisen tiedon kanssa. Esimerkiksi mobiilisivulta löytyvät kaikki tiedot eikä vain supistettua versiota.

Saavutettavuus
(accessibility) Tieto on saatavilla myös toimintarajoitteisille esim. näkövammaisille.

Saavutettavuus
(Accessibility) (reachability?) Ominaisuus, joka kertoo kuinka helposti järjestelmä, laite, ohjelma tai palvelu on saatavilla käyttäjälle. Osittainen synonyymi saavutettavuudelle.

Saatavuus
tavoitettavuus

Käytettävyys
(Usability) = Ominaisuus, joka ilmentää, miten järjestelmä, laite, ohjelma tai palvelu soveltuu suunniteltuun käyttöönsä kaikille käyttäjille. esimerkiksi sivustossa liikkuminen on selkeää ja helppokäyttöistä.

Ymmärrettävyys
(understandability) = Tekstin kieli ja terminologia on ymmärrettävää ja selkeää.

Selainriippumattomuus
Standardeja käyttävä sivu, jolloin sivua voi lukea millä tahansa selaimella.

Esteettömyys
rakennetun ympäristön toimivuus