Tiesitkö, että yli puolet Wikian vierailuista tapahtuu mobiililaitteiden kautta? Tämä osoittaa, että on hyvin tärkeää varmistaa, että sivut näkyvät hyvin mobiililaitteilla. Jos sivu ei ole yhteensopiva mobiililaitteiden, yli puolet wikiasi vierailijoista ovat kykenemättömiä lukemaan sitä kunnolla. Tämä pätee myös etusivuihin: etusivu, joka toimii hyvin pöytäkoneella, ei välttämättä toimi yhtä hyvin mobiilina, mikä tarkoittaa, että ihmiset voivat nähdä rikkinäisen sivun katsoessaan etusivuasi.
Yhteensopivuuden tarkistaminen mobiililaitteiden kanssa[]
Esikatselu etusivun mobiiliversiosta.
On helppo tarkistaa toimiiko sivu hyvin mobiiliversiona, myös etusivut. Muokkaat vain etusivua käyttämällä klassista muokkainta, napsauttamalla "Esikatselu"-painiketta, ja valitsemalla "Mobile" esiin ponnahtavan pudotusvalikon yläosasta. Tämä näyttää täysin miltä sivu näyttää mobiililaitteella, ja auttaa sinua määrittämään mitkä osat etusivustasi eivät ehkä toimi mobiiliversiona. Huomaa, että tätä ominaisuutta ei voi käyttää visuaalisessa muokkaimessa, koska WYSIWYG-käyttöliittymä poistaa tarpeellisuuden artikkelin esikatselulle.
Jos suosit enemmän visuaalista muokkainta, tai haluaisit nähdä miltä etusivu näyttää eri resoluutioilla, useat selaimet tarjoavat usein mahdollisuuden mobiiliselaimen emulointiin. Google Chromen mukana tulee ilmaiset emulointityökalut, joihin on mahdollista päästä käsiksi suunnittelijan konsolin kautta. (Lisätietoa Googlen mobiiliemulaation käytöstä löytyy täältä.) Safarin käyttäjät voivat mahdollistaa samanlaisen toiminnan valitsemalla valikkoriviltä Safari > Asetukset…, sitten valitse Asetukset-ikkunasta Lisävalinnat > "Näytä Kehitys-valikko valikkorivillä". Kun asetus on tarkistettu, Safarin käyttäjä voi valita emuloitavat selaimet, mukaan lukien Safarin iOS-version valitsemalla Kehitys > Käyttäjäagentti.
Tavanomaiset ongelmat mobiilietusivujen suhteen[]
Mobiilietusivujen kanssa sattuu useita tavanomaisia ongelmia, jotka voivat vaikuttaa niiden käytettävyyteen. Tämä osio luettelee nämä ongelmat ja tarjoaa niihin ratkaisut.
Kuvaotsikot[]
Kuvien muodossa olevat otsikot, jotka ajetaan CSS:n kautta, eivät näy mobiilimuodossa. Lisäämällä ne suoraan kuvia käyttäen [[Tiedosto:]] -tunnisteita ei tarkoita, että näkyvät. Kokonsa vuoksi ne eivät toimi usein kunnolla mobiilimuodossa. Helpoin tapa korjata tämä on lisätä aivan kuvaotsikon alle piilotettu "mobiiliotsikko" joka näkyy mobiiliversiossa, mutta ei pöytäkoneella. Sanotaanko, että meillä on kuvaotsikko, joka sanoo "Tervetuloa", ja se on lisätty CSS:n kautta:
Esimerkki kuvaotsikon käytöstä CSS:n avulla
HTML
<h2 title="Tervetuloa" class="mainpage-header-welcome"></h2>
CSS
.mainpage-header-welcome {
background: url("http://static.wikia.com/middleearthshadowofmordor7723/images/6/66/Mainpage-Header-Welcome.png") no-repeat scroll 0 0 transparent;
border-bottom: medium none !important;
height: 28px;
margin: 21px auto 8px 12px !important;
padding-bottom: 0px !important;
width: 99%;
}
Otsikko pöytäkoneella
Lisäämällä yksikertaisesti piilotetun otsikon kuvaotsikon alle, teksti näkyy mobiilimuodossa. Kuten:
Esimerkki kuvaotsikosta mobiiliotsikolla
HTML
<h2 title="Tervetuloa" class="mainpage-header-welcome"></h2> <h2 style="display:none;">Tervetuloa</h2>
Mobiiliversion otsikko
Huomaat varmaan, että h2-tunnisteeseen on lisätty tyyli "display:none", mikä kertoo selaimelle, että tätä elementtiä ei näytetä sivulla. Vaikka mobiiliversiossa taustaulkoasu poistaa kaikki tyylit (ja CSS-osuudet) tunnisteista, elementti näkyy kuitenkin myös mobiiliulkoasulla. Tämä on erittäin helppo tapa piilottaa elementit pöytäkoneelta, mutta näyttää ne mobiiliversiona. Jos kuvaotsikot ovat suoraan asetettu tiedostotunnisteita käyttävälle sivulle, harkitse niiden asettamista CSS:ään sekä piilotettujen mobiiliotsikoiden käyttämistä varmistaaksesi että otsikot toimivat hyvin sekä pöytäkoneilla että mobiililaitteilla.
JavaScriptiä tai CSS:ää käyttävät elementit[]
Jotkin wikiat käyttävät JavaScriptiä ja CSS:ää lisätäkseen mukautettuja ominaisuuksia etusivuille tai tyylittelemään jo olemassa olevia ominaisuuksia. Jotkin tyylittelyistä toimivan hyvin pöytäkoneella, mutta valitettavasti ne eivät toimi hyvin mobiiliversiossa, kuten alla näkyy.
Esimerkki edistyneestä ja muotoillusta ominaisuudesta pöytäkoneilla ja mobiilissa
Koska mukautetut JavaScript- ja CSS-koodit eivät lataudu mobiiliulkoasussa, ei helppoa saada moiset ominaisuudet toimimaan mobiilisivustolla. Paras tapa ratkaista ongelma on piilottaa nämä mukautetut ominaisuudet mobiiliversiolta. Tämä metodi vaatii (lisätietoa) <verbatim> -tunnisteisiin liittyen sekä ymmärrystä CSS:stä.
Piilottaaksesi nämä ominaisuudet mobiiliversiosta, luo uusi MediaWiki-sivu ja lisää se sivulle käyttäen verbatim-tunnisteita (klikkaa täältä oppiaksesi tekemään niitä), lisää sitten <style>-tunnisteet MediaWiki-sivulle varmistaaksesi, että sivun sisältöä käsitellään kuin CSS-tyyliä. Sitten piilota elementit, joiden et halua näkyvän mobiiliulkoasussa asettamalla niiden "display"-tyyliksi "none". Varmistaaksesi, että piilotat elementit vain mobiiliversiosta, varmista, että käytät valitsimessa "wkMobile"-tunnistetta. Esimerkiksi, jos haluat piilottaa mobiiliversiosta luokkaan "example" kuuluvan elementin, käytä seuraavaa koodia:
CSS:llä tehty esimerkki elementin piilottamisesta mobiiliversiolla
HTML
<div class="example">Tämä elementti on mobiiliversiolla piilotettu.</div>
MediaWiki-sivun sisältö
<style>
.wkMobile .example {
display: none;
}
</style>
Verbatim-tunnisteet asettuvat suoraan MediaWiki-sivun sisältöön etusivulle ilman, että yksikään sen tunniste poistetaan, ja tyylitunnisteiden sisällä olevaa mukautettu CSS:ää on myös sovellettu MediaWiki-sivulla mobiiliulkoasuun. Valitsin soveltuu vain Mobiili-luokkaan, joten pöytäkoneversio jää koskemattomaksi, kuten myös mukautettu CSS-koodi.
Katso myös[]
Lisäohjeet ja palaute[]
- Lisää ohjeita löydät sivulta Ohje:Sisällöt.
- Vieraile Yhteisöwikissä saadaksesi lisätietoja ja tukea >>
- Ongelmia tai epäselvyyksiä? Ota meihin yhteyttä!
- Opi käyttämään Fandomia Fandom Universityn kautta: lyhyitä opastusvideoita kaikenlaisiin kokemuksiin