Medialehti | Artikkeli | 25.09.2026

Mobiilissa toimiva digiesite syntyy, kun puhelimen pieni näyttö huomioidaan jo alkuperäisen esitteen suunnittelussa. Sivulle ei pidä mahduttaa liikaa tekstiä, fontin on oltava luettavissa ilman jatkuvaa lähentämistä ja tärkeimpien viestien tulee löytyä nopeasti. Myös kuvat, taulukot, linkit ja sivujen vaihtaminen on testattava oikealla puhelimella. Hyvä PDF on vahva lähtökohta, mutta tiedoston muuttaminen verkkojulkaisuksi ei yksin korjaa liian pientä tekstiä tai täyteen ahdettua sivua.

Paperille suunniteltu sivu ei kutistu ongelmitta

Painettu A4-esite tarjoaa huomattavasti enemmän näkyvää pinta-alaa kuin pystyasennossa pidettävä puhelin. Kun kokonainen paperisivu pienennetään näytölle, otsikot voivat vielä erottua, mutta leipäteksti, kuvatekstit ja taulukoiden numerot muuttuvat helposti liian pieniksi.

Lukija voi joissakin julkaisuissa suurentaa sivua, mutta jatkuva lähentäminen, sivuttainen siirtäminen ja näkymän palauttaminen tekevät lukemisesta raskasta. W3C:n uudelleenrivittämistä koskevan ohjeen taustalla on sama käytännön tavoite: suurennettua tekstiä pitäisi pystyä lukemaan ilman jatkuvaa vierittämistä kahteen suuntaan.

Selattava julkaisu ja tavallinen verkkosivu eivät käyttäydy aina samalla tavalla. Kiinteän sivuasettelun täydellinen uudelleenrivittäminen ei välttämättä ole mahdollista, jos sivun visuaaliset suhteet halutaan säilyttää. Siksi mobiililuettavuus kannattaa rakentaa mahdollisimman pitkälle jo lähdetiedostoon.

Aloita lukijan tilanteesta, älä PDF-tiedostosta

Ennen taittotyötä kannattaa miettiä, missä ja miksi julkaisua luetaan. Messuvieras voi avata esitteen QR-koodista seisten. Asiakas saattaa vilkaista tuotekuvastoa bussissa, ja yhdistyksen jäsen voi lukea toimintakertomusta kotisohvalla tabletista.

Näissä tilanteissa lukija ei välttämättä etene kannesta viimeiselle sivulle. Hän etsii tiettyä tuotetta, päivämäärää, yhteystietoa tai vastausta yhteen kysymykseen. Selkeät otsikot, lyhyet tekstiosuudet ja helposti tunnistettavat sivut auttavat löytämään tiedon ilman pitkää selaamista.

Tarkista nämä asiat ennen muuntamista

• Yksi päätarkoitus sivua kohti: älä yritä esitellä samalla sivulla koko yritystä, kaikkia palveluita ja täydellisiä yhteystietoja.
• Riittävän suuri teksti: arvioi luettavuutta aidolla puhelimella, älä ainoastaan taitto-ohjelman suurennetussa työskentelynäkymässä.
• Selkeä otsikkohierarkia: pääotsikon, väliotsikon ja leipätekstin pitää erottua toisistaan myös pienennettynä.
• Vahva kontrasti: varmista, että teksti erottuu taustasta ja ettei valokuvan levoton kohta vaikeuta lukemista.
• Rajattu tekstimäärä: siirrä yksityiskohtainen lisätieto tarvittaessa verkkosivulle ja jätä esitteeseen päätöksen kannalta olennaisin sisältö.
• Yksinkertaiset taulukot: vältä erittäin leveitä taulukoita ja pieniä numeroita, joiden ymmärtäminen vaatii jatkuvaa lähentämistä.
• Toimivat linkit: käytä linkeissä kohdetta kuvaavia ilmauksia ja varmista, että osoitteet ovat oikein.
• Terävät mutta kohtuulliset kuvat: käytä julkaisuun sopivaa tarkkuutta ilman tarpeettoman raskaita alkuperäistiedostoja.

Rakenna silmäiltävä sivu

Puhelimella luettava sivu hyötyy selkeästä painopisteestä. Yksi hallitseva kuva, napakka otsikko ja rajattu tekstikokonaisuus toimivat tavallisesti paremmin kuin monta keskenään kilpailevaa elementtiä. Lukijan pitäisi ymmärtää muutamassa sekunnissa, mitä sivu käsittelee.

Palstojen määrää kannattaa vähentää. Kolme kapeaa tekstipalstaa voi näyttää tyylikkäältä painettuna, mutta pienellä näytöllä niiden lukeminen vaatii useita lähennyksiä ja siirtymisiä. Yksi leveä palsta tai kaksi lyhyttä sisältöaluetta säilyvät usein selkeämpinä.

Myös tyhjä tila on hyödyllinen suunnitteluelementti. Se erottaa sisältöryhmät toisistaan ja auttaa katsetta löytämään tärkeän tiedon. Jokaisen vapaan kohdan täyttäminen kuvalla, nostolla tai koristeella ei lisää julkaisun arvoa.

Tekstin kontrasti ratkaisee enemmän kuin näyttävä tausta

Vaalea teksti vaalean kuvan päällä ja tumma teksti varjoisessa valokuvassa voivat kadota, vaikka yhdistelmä näyttäisi suurella näytöllä hienolta. W3C:n WCAG 2.2 -ohjeessa tavallisen tekstin vähimmäiskontrastiksi määritellään 4,5:1. Suurelle tekstille raja on 3:1.

Kontrastisuhdetta ei tarvitse arvioida silmämääräisesti, sillä sen tarkistamiseen on saatavilla mittaustyökaluja. Jos teksti sijoitetaan valokuvan päälle, kontrasti on tarkistettava kuvan eri kohdissa. Turvallisempi ratkaisu on usein rauhallinen yksivärinen tausta tai riittävän peittävä väripinta tekstin alla.

Hyvä kontrasti ei yksin tee julkaisusta saavutettavaa. Myös lukemisjärjestys, tekstin tekninen toteutus, linkkien nimet, kuvien vaihtoehtoiset kuvaukset ja julkaisualustan käyttö näppäimistöllä tai avustavilla teknologioilla voivat vaikuttaa saavutettavuuteen.

Pidä toimintakehotukset selkeinä

Digiesitteen etu painettuun esitteeseen verrattuna on mahdollisuus ohjata lukija suoraan seuraavaan vaiheeseen. Tuotesivulle, ilmoittautumiseen tai yhteydenottoon johtavan linkin pitää kuitenkin kertoa kohteensa. Pelkkä ”klikkaa tästä” ei auta lukijaa ennakoimaan, mitä linkistä avautuu.

Yhdellä sivulla ei yleensä tarvita useita keskenään kilpailevia toimintakehotuksia. Jos sivun tavoitteena on saada lukija pyytämään tarjous, yhteydenottolinkin kannattaa olla näkyvä ja yksiselitteinen. Toissijaiset linkit voidaan sijoittaa sivun loppuun.

Jos digiesitteessä käsitellään oppimista tai lapsille suunnattuja sisältöjä, siihen voidaan liittää myös aihetta tukeva käytännön esimerkki, kuten kertotaulupeli netissä.

Kahdeksan vaiheen mobiilitarkistus

1. Avaa alkuperäinen PDF puhelimella. Tarkista, pystytkö lukemaan otsikot, leipätekstin ja kuvatekstit ilman jatkuvaa suurentamista.
2. Katso sivuja sekä pysty- että vaaka-asennossa. Selvitä, missä asennossa sisältö toimii luontevimmin.
3. Etsi tärkein tieto. Yritä löytää esimerkiksi yhteystieto, hinta tai tapahtuma-aika mahdollisimman nopeasti.
4. Kokeile linkkejä. Varmista, että linkki avaa oikean sivun ja että sen ankkuriteksti kuvaa kohdetta.
5. Tarkista kontrastit. Mittaa erityisesti valokuvien tai väripintojen päälle sijoitetut tekstit.
6. Testaa hitaammalla yhteydellä. Kohtuuttoman raskaat kuvat voivat tehdä ensimmäisestä avauksesta tarpeettoman hitaan.
7. Pyydä ulkopuolinen testilukija. Sisällön suunnittelija tietää jo, mistä asiat löytyvät, mutta uusi lukija paljastaa epäselvät kohdat.
8. Tee uusi testi valmiissa julkaisussa. Muuntamisen jälkeen on tarkistettava uudelleen sivut, linkit, suurentaminen ja navigointi.

Milloin esite kannattaa suunnitella uudelleen?

Pieniä puutteita voidaan korjata suurentamalla tekstiä, vähentämällä sisältöä ja yksinkertaistamalla sivuja. Kokonaan uusi taitto on järkevä, jos alkuperäinen esite perustuu hyvin pieniin tekstipalstoihin, leveisiin taulukoihin tai monimutkaiseen painoasetteluun.

Samaa julkaisua ei aina tarvitse pakottaa palvelemaan jokaista käyttötapaa. Painotuotteelle voidaan tehdä näyttävä versio ja mobiililukemista varten tiiviimpi vaihtoehto. Tärkeintä on, että versiot sisältävät samat olennaiset tiedot ja että lukija löytää ajantasaisen julkaisun.

Testaa ensin lukukokemus, sitten julkaise

Mobiilissa toimiva digiesite ei synny pelkästä tiedostomuodon vaihdosta. Se vaatii selkeää rakennetta, rajattua tekstimäärää, luettavaa typografiaa, riittävää kontrastia ja toimivia linkkejä. Paras testi on yksinkertainen: avaa julkaisu tavallisella puhelimella ja yritä käyttää sitä kuten kiireinen asiakas käyttäisi.

Kun lähdeaineisto on kunnossa, Medialehti voi muuntaa PDF- tai JPG-esitteen verkossa selattavaksi digijulkaisuksi ja toimittaa jakamista varten valmiin linkin. Seuraava askel on tarkistaa esite mobiililistalla, korjata hankalat sivut ja lähettää valmis aineisto muunnettavaksi.