DoX CMS antaa julkaista verkkosisältöjä myös WebHelp-formaatissa, jossa HTML-julkaisu asetetaan valmiiksi määritettyjen kehyksien sisään. Olen aiemmin kertonut, kuinka kyseisen kehyksen ulkoasua voi säätää täällä. Tässä yhteydessä käyn puolestaan läpi seikkoja, jotka on syytä huomioida kehyksen ulkoasun määrityksissä, kun WebHelp-julkaisu halutaan sovittaa mobiilikäyttöön. Sen tyylin oletusarvoissa on määreitä mobiilipäätteille, mutta nämä keinot antavat parantaa tällä tavoin julkaisemienne sisältöjen mobiilikäytettävyyttä.
Nämä ohjeet eivät kerro suoraan, kuinka juuri teidän ohjeenne saadaan sovitettua mobiilikäyttöön niiden aiempien tyylien puitteissa. Pyrin kuitenkin myös paljastamaan tilanteita, joissa aiemman tyylitiedoston yksityiskohdat voivat rajoittaa sisällön mobiilikäytettävyyttä, jollei mobiilikäyttöön määritetä muita arvoja.
Kuten edellisessä artikkelissa aiheesta, keskityn myös tässä artikkelissa ensisijaisesti CSS-tyylitiedostoihin. Näistä tiedoista on siis eniten hyötyä henkilöille, jotka osaavat kirjoittaa ja muokata tyylitiedostoja ennestään.
Sisällön muotoilu mobiilikäyttöön
Mobiilikäyttöön ihanteellisesti soveltuva sisältö poikkeaa muuhun verkkokäyttöön tai sivutettuihin julkaisuihin sopivasta sisällöstä. Tästä syystä on syytä huomioida myös sisällön muotoilu, jos se tullaan julkaisemaan mobiilikäyttöön. Käyn alla läpi tällaisia huomioita.
Taulukot
Taulukot ovat tärkeä tiedon järjestelyn keino. Niiden toimiva käyttö kuitenkin vaatii usein enemmän tilaa kuin on saatavilla mobiilipäätteillä. Päätteen ollessa pystysuunnassa on sisällölle käytettävissä merkittävän vähän vaakasuuntaista tilaa, jota useampia sarakkeita sisältävät taulukot vaativat. Päätteen ollessa puolestaan vaakasuunnassa taulukosta ei näy välttämättä kerralla edes kokonaista riviä, jos siinä on paljon sisältöä tai sen sisältö on pakattu kapeisiin mutta korkeihin soluihin.
Uusi sisältö
Jos kirjoitat mobiilikäyttöön tulevan sisällön alusta alkaen, vältä taulukoita, joiden soluissa on kokonaisia lauseita. Poikkeus tältä osin ovat kaksisarakkeiset taulukot, jos niissä lauseet sisältäville soluille jää lähes normaali vaakasuuntainen tila. Jos taulukkoihin tulisi kolme tai useampia sarakkeita, käytä taulukoiden sijaan esimerkiksi määritelmälistoja (dl), joissa määritelmä (dd) sisältää listan rivin soluja vastaavista eri kohdista. Voit myös käyttää taulukoita, joissa yhtä kohtaa vastaava sisältö on jaettu useammalle riville, joista osa koostuu yhdistetyistä soluista lisätilan pitkille sisällöille saamiseksi. Kuva ylla esittää esimerkkejä näistä sisällön järjestelyn malleista.
Vanha sisältö
Jos sovitat aiempaa rakenteista sisältöä mobiilikäyttöön ja se sisältää mobiilipäätteilla heikosti luettavissa olevia taulukoita, joudut luultavasti lisäämään näille osiolle ehdollistukset niiden käyttötavan mukaisesti. Tähän löytyvät ohjeet alempaa.
Voit lisätä mobiilikäyttöön tulevia julkaisuja varten yllä kuvatun kaltaisia vaihtoehtoja ja ehdollistaa ne alla kuvatulla tavoin. Koska kaikki DoX CMS:n käyttämän LW-DITA-formaatin taulukot sisältävät tekstikappaleita (p), voit käyttää isoa osaa valmiista sisällöistä uudelleen sisältöviitteinä (conref). Tämä vaatii, että alkuperäiset solujen sisällöt soveltuvat käytettäviksi esimerkiksi listan kohtina (tai erillisenä tekstikappaleena listan kohdan sisällä) sellaisenaan. Lisää taulukoiden solujen sisällä oleville tekstikappaleille (p) ID-arvot ja lisää uuden sisällön vastaaviin tekstikappaleisiin (p) viitteet näihin elementteihin niiden Conref-kenttien arvoiksi. Tällöin molemmissa versioissa pysyvät näiltä osin käytössä samat sisällöt ilman lisätyötä, vaikka niihin tehtäisiin myöhemmin muutoksia.
Kuvat
Kuten korostan suhteessa tyylitiedoston muotoiluun alempana, mobiilikäyttö käytännössä vaatii kaikkien metrimittaisten yksiköiden (samoin kuin tuumien) käytöstä poistamista. Tämä koskee myös elementtejä, joille on annettu tällaiset arvot editorin kautta eli käytännössä kuvia. Ihanteellisesti kuvien koko julkaisuvaiheessa on sen sijaan sidottu elementtiluokkiin sen hallinnoimiseksi tyylitiedoston kautta kaikissa eri käyttöyhteyksissä ja kaikille niistä yhdellä kertaa. Jos kuvien mitat on kuitenkin annettu editorin kautta skaalaamattomissa yksiköissä kuten millimetreissä, täytyy sinun muuttaa nämä arvot skaalautuviksi mobiilijulkaisuja varten. Voit ajaa niiden yli myös tyylitiedoston kautta antamalla mobiilikäyttöön määreet eri yhteyksissä käytettäville kuvien enimmäismitoille. Ohjeet tältä osin löytyvät alempaa.
Ehdollistaminen
Tageilla ehdollistaminen antaa tehdä julkaisuja, joissa valitset käyttöön vain mobiilikäyttöön soveltuvat vaihtoehdot yllä mainitun kaltaisissa tilanteissa. Voit käyttää tällä tavoin ehdollistettuja julkaisuja joko verkkojulkaisemiseen ylipäätään, koska sovitukset mobiilikäyttöön eivät rajoita muuta käyttöä merkittävästi, tai erikseen vain mobiilikäyttöön tarkoitetuille julkaisuille.
Käytännössä tätä varten täytyy lisätä uusi tagikategoria, johon sinun täytyy määrittää erilliset tagit mobiilijulkaisuille sekä muille julkaisumuodoille. Sinun täytyy sitten ottaa nämä tagit käyttöön editorissa julkaisujen osille, joille on tehty vaihtoehtoiset versiot mobiilikäyttöön. Anna mobiilikäyttöön määritetyille elementeille tällöin mobiilijulkaisujen tagi ja niitä vastaaville vaihtoehdoille muille julkaisuille tarkoitettuja saman kategorian tageja. Sinun täytyy tällöin määrittää kussakin julkaisupohjassa erikseen, onko kyse mobiilijulkaisusta vai pohjajulkaisusta. Ota kussakin tapauksessa käyttöön vastaava tagi muun sisällön pois suodattamiseksi.
Voit säätää tageilla merkittyjen sisältöjen näkyvyyttä myös tyylitiedoston avulla kuten käyn läpi täällä ja täällä. Kerron siksi alempana, kuinka tällä tavoin ehdollistetut sisällöt saa näyttämään samasta julkaisusta vain oikean version käytetyn päätteen perusteella käyttämällä siihen tyylitiedostoa.
Tyylitiedoston muotoilu mobiilikäyttöön
WebHelp-julkaisujen ensisijainen sovittamistapa mobiilikäyttöön perustuu tyylitiedostoihin. Onneksi mobiilipäätteille voi määrittää erillisiä sääntöjä, jotka tulevat vain niiden käyttöön. Jos olette jo tyytyväisiä aiempaan tyyliin muissa käyttöyhteyksissä, voit määrittää vain poikkeukset mobiilipäätteitä varten ja lisätä ne osaksi aiempaa tyyliä. Jos haluatte pitää oletusarvoisen tyylin tyylitiedoston mahdollisimman selkeänä, voit tehdä nämä lisäykset joko sen loppuun tai erilliseen tyylitiedostoon.
Mobiilinäkymän katselmointi
WebHelp-julkaisuja ei voi katselmoida suoraan Esikatselu-toiminnon avulla. Nämä julkaisut täytyy julkaista ensin, ja niitä voi sen jälkeen katselmoida selaimessa. Tämä tapahtuu lähes poikkeuksetta pöytäpäätteellä mobiilipäätteen sijaan. Tällöin sisällöt tulisi myös asettaa erikseen verkkosijaintiin niiden katselmoimiseksi mobiilipäätteellä. Onneksi ainakin osa selaimista kuten Chrome ja sen johdannaiset antavat kuitenkin tehdä mobiilipäätekatselmoinnin suoraan pöytäpäätteeltä ilman sisällön siirtämistä verkkoon.
Yllä näytetty kuva näyttää, kuinka Tarkista-toiminto antaa näyttää erilaisten mobiilipäätteiden mukaisen sivun. Käytännössä se tapahtuu tällä tavoin:
- Avaa WebHelp-julkaisu selaimessa index.html-tiedoston kautta.
- Napsauta jotakin näkymän elementtiä hiiren oikealla painikkeella ja valitse avautuvasta listasta Tarkista-komento.
- Napsauta Kytke Laitteen Työkalupalkki Päälle/Pois -komennon ikonia DevTools-palkin vasemmassa yläkulmassa.
- Määritä haluamasi päätteen mitat ja käännä tällöin näytetyn näkymää yläpalkin kautta.
Tämä näkymä sallii muutokset tyylitiedostoihin niiden vaikutuksien kokeilemiseksi, ennen kuin muokkaat varsinaisia tyylitiedostoja DoX CMS:ssä. Ota kuitenkin huomioon, että kaikki muutokset tämän näkymän kautta eivät välttämättä heijastu täysin vastaavina uusiin julkaisuihin vastaavalla tavoin muutettujen tyylitiedostojen kanssa. Ne täytyy aina katselmoida erikseen epäyhteneväisyyksien riskin vuoksi.
Mobiilikohtaiset haasteet
Minä en ole mobiilikehittäjä. Täten tyylin sovittaminen mobiilikäyttöön oli ajoittain turhauttava kokemus siihen sisäänrakennettujen toimintojen vuoksi. Nämä toiminnot vaikuttavat ulkoasuun, mutta niiden vaikutus ei näy tyylitiedostoissa. Nämä huomiot eivät välttämättä edes kata kaikkia tällä tavoin toimivia osuuksia. Ota siis huomioon, että muutoin selittämätön käyttäytyminen luultavasti johtuu jostakin vastaavasta erosta, joka liittyy nimenomaan mobiilipäätteiden toimintaan.
Skaalatut fonttikoot
Enemmistö mobiilipäätteiden selaimista skaalaa fonttikokoa käytettävissä olevan tilan mukaisesti osana oletustoiminnallisuuttaan. Lisätietoja aiheesta löytyy täältä. Tällä tavoin nämä selaimet pyrkivät riittävän toiminnallisuuden säilyttämiseen myös erikseen mobiilipäätteille suunnittelemattomilla sivustoilla. Tämä skaalautuminen tapahtuu elementtikohtaisesti käytettävissä olevan tilan, varsinkin vaakasuuntaisen tilan, perusteella. Tästä syystä osan elementeistä fonttikoot voivat heitellä näennäisesti selittämättömillä tavoin.
Törmäsin tähän seikkaan itse, kun selvitin, miksi oman oppaamme osioiden numerotunnisteiden fonttikoot eivät vastanneet itse otsikoiden kokoa. Riippuen siitä, oliko näkymä pystysuuntainen vai vaakasuuntainen, numerotunnisteet olivat joko suhteessa pienempiä tai suurempia. Lopulta syyksi paljastui, että numerotunnisteiden kenttä .titleNumberWrapper oli määritetty esitettäväksi inline-box-muodossa. Tämä antoi sille piiloreunat, joiden puitteissa sen koko täytyi määrittää. Tilanne korjautui vaihtamalla esitystavaksi (mobiilissa) inline-muodon.
Tältä osin on myös tärkeää huomioida, että joskus ei-toivotulla tavalla muusta sisällöstä erottuva sisältö voi itse asiassa vastata sille annettuja määreitä ja toivotunlaisesti käyttäytyvä sisältö on itse asiassa tämän toiminnon eri tavoin skaalaamaa. Vastaus tällöin on tarkistaa näiden elementtien fonttikoko ja säätää se toivotunlaista tulosta vastaavaksi.
Jos haluat varmistaa, että tulokset ovat ennakoitavissa tältä osin tai haluat varmistaa, johtuuko ongelma fonttikoon kanssa tästä ominaisuudesta, voi fonttikokojen automaattista skaalaamista hallinnoida tyylitiedoston kautta. Tämän ominaisuuden voi ottaa käyttöön tai sen asetuksia voi vaihtaa valitsijakohtaisesti sitä tukevissa selaimissa. Vaihtoehtoisesti sen voi ottaa kokonaan pois käytöstä. Lisätietoja aiheesta löytyy täältä. Esitän kuitenkin alla, kuinka tämän toiminnallisuuden saa täysin pois käytöstä.
* {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}Pystymarginaalit ja flexbox
Tämä osuus ei liity suoraan mobiilipäätteisiin. Flexbox on kuitenkin tehokas keino säätää näkymää mobiiliystävälliseksi. Se antaa määrittää elementeille joustavasti vaihtuvat suhteelliset mitat ja järjestellä niitä uudelleen. Esimerkiksi alempana antamani neuvo WebHelp-julkaisujen siirtymäpainikkeiden siirtämiseksi näkymän yläosaan perustuu siihen. Lisätietoja aiheesta löytyy täältä.
Huomioi kuitenkin tältä osin, että flexboxin elementit eivät noudata aivan kaikkia normaaleja asettelun sääntöjä muilta osin. Olennaista tältä osin on, että niiden pystymarginaalit eivät asetu päällekkäin. Normaalisti sisältöjen pystymarginaalit laskostuvat tavalla, joka jättää niiden väliksi ainoastaan isoimman kyseiseen kohtaan asettuvan arvon yhteenlaskettujen arvojen sijaan. Tämä koskee sekä sisäkkäisien että peräkkäisten elementtien marginaaleja. Tämä on oletusarvoisen lohkoasettelumallin piirre. Lisätietoja lohkoasettelumallista löytyy täältä. Flexbox kuitenkin näyttää kaikki tällä tavoin esitettujen elementtien pystymarginaalit kokonaisuudessaan. Lisätietoja marginaalien laskostumisesta löytyy täältä.
Tästä syystä sisältöjen pystymarginaalit on syytä tarkistaa, jos käytät flexbox-asettelua mobiilissa (tai muutoin). Alkuperäistä vastaavan asettelun voi säätää käyttöön antamalla peräkkäisille samanlaisten marginaalien erottamille elementeille puolitut pystymarginaaliarvot tässä käyttöyhteydessä. Tällaisten osuuksien ääripäissä olevilta elementeiltä voi poistaa käytöstä pystymarginaalit pienemmän pystymarginaalin omaavilta elementeiltä. Jos tämä muutos tulee käyttöön vain mobiilipäätteillä, voit määrittää nämä pystymarginaalien arvot vain mobiilikäyttöön alempana esitetyllä lisävalitsijalla.
Kosketusnäytöt
Mobiilipäätteiden käyttäjät eivät useimmiten kytke niihin erillisiä osoittimia. Ilman osoitinta on mahdotonta olla tekemisissä sisällön kanssa osoitinta vaativalla tavalla. Yleisimmin käytössä oleva tällainen tapa perustuu osoittimen siirtämiseen elementin ylle. Sille voi määrittää omat sääntönsä :hover-määreen valitsijassa avulla. Lisätietoja :hover-määreestä löytyy täältä.
Jos sisällön asettelu tai tyyli käyttävät tällaisia määreitä sellaisilta osin, että kosketusnäytön käyttäminen rajoittaa sisällön käytettävyyttä, tulee nämä määreet korjata. Tämä voi usein vaatia laajempaa asettelun uudistamista. Joissakin tapauksissa voi tosin riittää, että lisäät samoihin yhteyksiin vaihtoehdoksi myös :active-määreen. Tällöin määritetyt säännöt astuvat voimaan, kun kyseinen elementti on valittuna. Valitseminen kosketusnäytön avulla on mahdollista painamalla kyseistä sijaintia hetken aikaa pelkän kosketuksen sijaan. Lisätietoja :active-määreestä löytyy täältä.
Mobiilipäätekohtaiset tyylit
Tietyt tyylit voi määrittää käyttöön vain määrätynlaisille päätteille. Useimmiten määreinä tältä osin käytetään ruudun kokoa. Esimerkiksi WebHelp-julkaisujen DoX CMS:ssä oletustyyli sisältää määreitä, jotka ovat käytössä ainoastaan
- 1279 pikseliä tai alle leveiden päätteiden tapauksessa,
- 1023 pikseliä tai alle leveiden päätteiden tapauksessa, ja
- 767 pikseliä tai alle leveiden päätteiden tapauksessa.
Kukin näistä katkaisupisteistä on määritetty erikseen osana oletustyylitiedostoja, ja niistä jokaiseen liittyy omat sääntönsä.
Tällaisten lisävalitsijoiden kirjoittamiseen käytetään @media-valitsijaa ja siihen kytkettyjä lisämääreitä. Lisätietoja aiheesta löytyy täältä. Tämän valitsijan voi määrittää ylemmän tason valitsijaksi, jonka sisään kirjoitetaan omat sääntönsä kuin erilliseen tyylitiedostoon: nämä sisennetyt osuudet sisältävät sekä valitsijat että niihin liittyvät säännöt. Valitsijoita @media-määreen sulkeiden sisällä voi olla useampia, ja niillä kaikilla täytyy olla omat sulkeensa. Esitän alla esimerkin, jossa olen määrittänyt enintään 1279 pikseliä leveillä päätteillä kaikkien otsikkosisältöjen käyttöön punaiset taustat vaakanäkymässä ja keltaiset taustat pystynäkymässä. Lisäksi asetan tekstin oletusväriksi valkoisen vaakanäkymässä. Tällaiset äärimmäisen ilmeiset arvot antavat kokeilla käytettyjen @media-määreiden toimivuutta ja rajoja. Poista ne ennen kuin jatkat tyylitiedoston muokkaamista.
@media only screen and (max-width: 1279px) and (orientation: landscape) {
body {
color: white;
}
.topicWrapper {
background-color: red;
}
}
@media only screen and (max-width: 1279px) and (orientation: portrait) {
.topicWrapper {
background-color: yellow;
}
}Tilankäytön parantaminen
Mobiilipäätteillä on käytettävissä tuntuvasti vähemmän tilaa kuin pöytäpäätteillä. Tästä syystä tilankäytön osalta on syytä leikata pois tarpeettomat tyhjät tilat. OIetusasetukset DoX CMS:n WebHelp-pohjassa eivät tee niin riittävästi mobiilikäytön tarpeisiin. En voi tarjota kaikkiin käyttötilanteisiin soveltuvia oletusarvoja tältä osin. Nämä arvot täytyy säätää teidän oppaidenne kannalta toimiviksi.
Enimmäismitat
Ihanteellisesti käytätte esimerkiksi kuvien kokojen ja taulukoiden sarakkeiden leveyksien hallintaan jo elementtiluokkia editorin kautta tehtävien asetuksien sijaan. Tällöin voitte säätää niiden arvot suoraan tyylitiedoston kautta. Mobiilipäätteillä käytetyt arvot voi tällöin tarvittaessa asettaa mobiilikäyttöön yllä esitetyllä tavalla kirjoittaa tilannekohtaisia asettelua koskevia sääntöjä. Jos näin ei kuitenkaan ole, voit ainakin määrittää mobiilikäyttöön rajoitteet sekä enimmäis- että vähimmäismitoille eri tilanteissa. Tällöin nämä arvot ylittävät mitat rajataan näihin arvoihin. Esimerkiksi kuvat eivät tällöin voi olla liian isoja mobiilikäytössä, vaikka niiden koko olisi alkujaan määritetty painatuskäyttöön skaalautumattomissa yksiköissä kuten millimetreissä.
Voit määrittää nämä enimmäismitat erikseen eri yhteyksiin, jos esimerkiksi taulukoiden sisällä käytetyt kuvat täytyy pitää niille saatavilla olevan tilan puitteissa. Tällöin voit antaa niiden enimmäismitan taulukoiden solujen sisällä prosenttiosuutena, koska solun koko määrittää tällöin kuvan enimmäiskoon. Toki tämä pitää paikkansa vain, kun taulukoissa käytettävissä oleva tila on määritetty ensin. Jos taulukot asettuvat sisältöjensä mukaisesti, täytyy kuvien enimmäismitat sen sijaan antaa niistä riippumattomissa yksiköissä kuten fonttikokoihin suhteutetuissa yksiköissä (rem tai em) tai pikseleinä. Voit antaa vastaavat määreet myös esimerkiksi kuville välittömästi kuvakehyksien (fig) tai listojen sisällä.
Yksi avainarvoista tältä osin on sisällön osuuden enimmäisleveys. Jos käyttöön halutaan tietynlaiset asettelut eri yhteyksissä kuten joko pysty- tai vaakasuuntaisessa mobiilinäkymässä, tämä arvo on yksi määrittävimmistä tekijöistä siltä osin. Koska oletustyylitiedostossa on arvo tältä osin, täytyy erikseen kirjoitetun arvon yhteydessä käyttää !important-määrettä alkuperäisen arvon korvaamiseen. Esitän alla keinon tämän tekemiseen käyttäen tätä oletusarvoa, jota voit säätää tilannekohtaisesti ylös- tai alaspäin.
.topicWrapper {
max-width: 750px !important;
}Marginaalit
Kun tilaa on vähän, tarpeettomat marginaalit ovat ensimmäisinä leikkauslistalla. Tässä yhteydessä marginaalit kattavat kaiken elementtejä ympäröivän tyhjän tilan eivätkä ainoastaan margin-komennon arvoja. Varsinkin näkymän vakioelementtien eli sisältöön kuulumattomien osuuksien marginaalit täytyy säätää käyttötapaa vastaaviksi. Muussa tapauksessa pienellä mobiilipäätteellä sisältöä voi näkyä vaakanäkymässä puoli riviä kerrallaan, ja sitä ei voi myöskään selata tilan puutteen vuoksi.
Tältä osin sinun kannattaa säätää esimerkiksi sisällön otsikkojen pystymarginaaleja, varsinkin vaakanäkymässä. Voit myös poistaa koko WebHelp-julkaisua kehystävät marginaalit mobiilinäkymistä. Esitän alla arvot, jotka otin käyttöön tältä osin DoX CMS:n omassa oppaassa. Voit säätää niitä oman tyylitiedostonne kanssa yhteensopiviksi.
@media only screen and (max-width: 1279px) {
.tocTitleWrapper {
padding: 12px 20px !important;
}
.paginationWrapper {
margin-top: 10px !important;
}
body {
padding: 0 !important;
}
h1, h2, h3, h4, h5, h6, h7, h8 {
line-height: 1em !important;
margin: 10px 0 10px 0 !important;
}
.documentBodyWrapper {
padding: 20px !important;
}
p {
margin: 0.6rem 0 !important;
}
}Siirtymäpainikkeiden siirtäminen
Oletusarvoisesti siirtymäpainikkeet edelliseen ja seuraavaan osuuteen näkyvät näkymän pohjalla. Pystysuuntaisessa näkymässä mobiilipäätteellä tämä voi jättää ne syrjään, kun kyseinen sisältö ei kata koko pystysuuntaista näkymää. Näkymän uudelleen järjesteleminen tämän korjaamiseksi vaatii flexboxin käyttämistä. Tästä syystä saatat joutua määrittämään sisältöjen pystymarginaalit uudelleen, jos käytät tätä ratkaisua. Lisätietoja flexboxista ja pystymarginaaleista löytyy ylempää. Näytän alla keinon siirtää nämä siirtymäpainikkeet sisällön otsikon yläpuolelle.
.topicWrapper {
display: flex;
flex-direction: column;
}
.paginationWrapper {
order: 1;
}
.titleWrapper {
order: 2;
}
.topicBodyWrapper {
order: 3;
}Sisältöjen vaihtaminen mobiiliversioihin
Koska sisällöille jäävät käyttöön niiden tagit ja tageilla voi hallinnoida sisällön näkyvyyttä kuten kerroin täällä, sama julkaisu voi sisältää sekä mobiilikäyttöön tarkoitetut elementit että muuhun käyttöön tarkoitetut elementit. Järjestelmä näyttää tällöin vain tilannekohtaisesti soveliaat versiot kyseisistä sisällöistä.
Ehdollista sisällöt ensin niiden käyttötavan mukaisesti yllä ehdottamallani tavoin. Valitse julkaisun käyttöön jokainen tagi, jolle määrität tilanteet, missä ainoastaan kyseisellä tavalla ehdollistettu sisältö näytetään. Esimerkiksi sama sisältö voi olla käytössä sekä oletusarvoisessa näkymässä että vaakasuuntaisessa mobiilipäätteen näkymässä, mutta pystysuuntainen mobiilipäätteen näkymä käyttäisi eri versioita. Alla esittämässäni esimerkissä kaikissa mobiilinäkymissä ovat käytössä samat, vain mobiilikäyttöön määritetyt sisällöt.
Alla esittämäni esimerkki käyttää esimerkkitageja. Jos lisäät nämä säännöt, käytä arvoja, jotka vastaavat omia tagikategorioitanne ja sen tageja. Voit myös vaihtaa perusteita eri käyttötilanteille. Tämä esimerkki käyttää samoja tunnisteita mobiilikäyttöön kuin myös muut oletusarvoiset erot DoX CMS:n kautta julkaistuissa WebHelp-julkaisuissa.
*[data-doxattribute-usecase="mobile"] {
display: none;
}
@media only screen and (max-width: 1279px) {
*[data-doxattribute-usecase="mobile"] {
display: initial !important;
}
*[data-doxattribute-usecase]:not([data-doxattribute-usecase="mobile"]) {
display: none !important;
}
}Yhteenveto
Kaikenlaiset sisällöt ja sisältöjen asetukset eivät sovellu mobiilikäyttöön. Jos siis tiedät julkaisuja käytettävän tällä tavoin, voit muotoilla ne soveltuviksi mobiilikäyttöön. Voit joko käyttää mobiilikäyttöön soveltuvaa muotoilua tai lisätä erilliset versiot mobiilikäyttöön. Suurin ongelma tältä osin ovat monisarakkeiset taulukot. Voit käyttää niiden sijaan esimerkiksi määritelmälistoja. Jos käytät eri versioita sisällöistä mobiilikäyttöön, voit käyttää tageja niiden erottamiseen oletusarvoisista versioista. Sisältöviitteet (conref) ovat helpoin keino yhdenmukaistaa molempien versioiden sisällöt käyttämällä oletussisältöjä lähdeversioina. Kuvien koko on parasta määrittää elementtiluokkien avulla, mutta niiden mittojen osalta varsinkin editorissa on tärkeintä on välttää metriyksiköitä ja tuumia.
Kun alat muokata tyylitiedostoa mobiilikäyttöön, voit katselmoida tuloksia selaimen Tarkista-toiminnolla. Ainakin Chrome ja sen johdannaiset antavat myös näyttää, miltä sama sisältö näyttää erilaisilla mobiilipäätteillä. Huomioi kuitenkin, että selaimen kautta tehdyt muutokset eivät välttämättä saavuta täysin vastaavia tuloksia, kun lisäät samat muutokset tyylitiedostoon ja julkaiset sisällön uudelleen. Katselmoi tulokset aina uudelleen muutoksien jälkeisessä julkaisussa.
Tärkein työkalu WebHelp-julkaisujen mobiilikäyttöön sovittamiseen ovat tyylitiedostot. Niiden muokkaamiseen liittyy tosin omia haasteitaan kuten ainoastaan mobiilipäätteiden käytössä oletusarvoisesti oleva fonttikokojen skaalaaminen. Kosketusnäytöt eivät myöskään salli käyttää osoittimen sijaintiin perustuvia toimintoja. Näihin haasteisiin voi kuitenkin vastata tietämällä niistä etukäteen.
Voit määrittää mobiilipäätteille omat sääntönsä mediakutsujen sisään asetetuilla joukoilla valitsijoita ja niihin liittyviä sääntöjä. Tältä osin on tärkeää vähentää turhaan tilaa vieviä marginaaleja suuremman osuuden käytettävissä olevasta tilasta vapauttamiseksi sisällöille sekä määrittää enimmäismitat erilaisille elementeille. Tällä tavoin esimerkiksi tulostuskäyttöön kymmenen senttimetriä leveäksi määritetty kuva ei jää yhtä leveäksi myös viisi senttiä leveällä älypuhelimen näytöllä. Lisäksi on syytä pohtia asettelua ja sitä, millaiset muutokset parantavat asettelun käytettävyyttä mobiilipäätteillä. Esimerkiksi siirtymäpainikkeiden siirtäminen näkymän yläosaan flexboxin avulla parantaa niiden käytettävyyttä, kun näyttöä voi kääntää. Tällöin vaarana ei ole, että nämä painikkeet jäävät erilleen muusta sisällöstä.
Kaikkein rajuin mobiilinäkymän sovittamisen muoto perustuu ehdollistettuihin sisältöihin, joiden näkyvyyttä hallinnoidaan tyylitiedoston kautta. Tällöin sisällöt ehdollistetaan niiden käyttötavan mukaan. Julkaisu kuitenkin sisältää kaikki kyseiset sisällöt. Niistä näytetään kulloinkin ainoastaan tilannekohtaisesti soveltuvat versiot piilottamalla muilla saman kategorian tageilla merkityt osuudet tyylitiedoston kautta.