On monia erilaisia wikitekstin käytäntöjä, jotka ovat hyödyllisiä korkeatasoisille käyttäjille pöytäkoneella, mutta valitettavasti häiritsevät sitä miten sisältö näkyy mobiilialustoilla. Sisäkkäiset taulukot ovat hyvä esimerkki.
- Muistutuksena mobiilin parhaista käytännöistä: voit aina esikatsella miltä muokkauksesi näyttävät mobiililaitteilla lisäämällä koodin
?useskin=wikiamobilewikian osoitteen perään, tai jos käytät klassista muokkainta, voit esikatsellessasi muokkauksia valita, ‘Mobile’ pudotusvalikosta, joka on esikatseluikkunan yläreunan vasemmalla puolella.
- Muistutuksena mobiilin parhaista käytännöistä: voit aina esikatsella miltä muokkauksesi näyttävät mobiililaitteilla lisäämällä koodin
Mitä ovat sisäkkäiset taulukot?[]
Sisäkkäiset taulukot ovat yksinkertaisesti taulukoita taulukoiden sisällä.
- Tässä esimerkki sisäkkäistä taulukoista Brave Frontier -yhteisössämme. Huomaa ero siistin pöytäkonenäkymän ja vähemmän optimaalisen mobiilinäkymän välillä.
Miksi sisäkkäiset taulukot ovat huonoja?[]
Sinun pitäisi välttää sisäisten taulukoiden käyttöä niin usein kuin mahdollista. Yleensä taulukot ovat niin kapeita kuin voivat olla ja laajentuvat pystysuunnassa, kun vaakasuuntainen tila on rajoitettu. Mutta jos taulukko on lisätty toisen taulukon sisään, se pakottaa solujen leveyden mukautumaan lisätyn taulukon mukaisesti. Pohjimmiltaan tämä pakottaa koko taulukon rakenteen paljon leveämmäksi kuin tila sallii. Tämä on erityisen huono asia mobiiliversiossa, koska näytön koko on niin paljon pienempi.
Lopputulos: Tämä aiheuttaa mobiiliversiossa paljon vaakavieritystä (huono käyttäjäkokemus), ja iso osa tauluko näkyvyydestä on piilotettu. Jos hajottaa sisäiset taulukot useiksi itsenäisiksi taulukoiksi, tieto näkyy pystyvierityksellä vaakavierityksen sijaan.
Tämä tekee jokaisesta taulukosta entistä dynaamisemman. Sisällön muotoilu edellyttää mobiilinäytön kokoa. Siksi selain siirtää taulukoita siten, että niiden näkyminen parantaa sisällön vierityksen yleistä kulkua.
Mitä tehdä, jos yhteisösi käyttää sisäisiä taulukoita[]
Rohkaise heitä hajauttamaan sisäkkäiset taulukot sekä yrittämään luoda infrastruktuuri, joka ei ole riippuvainen taulukoista taulukoiden sisällä. Pinoamalla taulukot toistensa päälle saa usein aikaan saman lopputuloksen. Jos sisältö voidaan esittää parhaiten taulukkomuodossa, voit aina säätää soluja niin, että muistuttavat toista taulukkoa taulukon sisällä, mutta on silti vain yksi iso taulukko.
Sisäkkäisten taulukoiden välttämisen parhaat käytännöt[]
Mistä tunnistaa sisäiset taulukot?[]
Lähdekoodissa taulukot alkavat aina wikitekstistä {| tai HTML-koodilla <table>. Taulukot suljetaan vastakkaisella koodilla: |} tai </table>. Siitä syystä, jos näet alun taulukosta ja ennen kuin näet saman taulukon loppusulkeet, kohtaat taulukon toisen alun, mikä tarkoittaa taulukon olevan sisäkkäinen toisen taulukon kanssa. Tämä voi laskea useita kerroksia syvemmälle.
- Tässä on lähdekoodiesimerkki sisäkkäisestä taulukosta:
Miten hajauttaa sisäkkäiset taulukot?[]
Ensimmäinen vaihe on selvittää kuinka monta taulukkoa on sisäkkäin päätaulukon kanssa.
Toinen vaihe on löytää kauimmainen sisäkkäinen taulukko (tai syvimmälle juurtunut) taulukko, ja vetää se pois sisäkkäisten taulukoiden ketjusta.
Nyt, katso esikatselua, ja ymmärrät ajatuksen siitä miltä taulukko näyttää yksittäisenä.
Katsoessasi esikatselua, voit määrittää taulukoiden viat, niin etteivät ne näytä odotetuilta tarkistaessasi taulukon parametrejä (koodi, joka seuraa heti taulukon avaamista: {|)
Kun olet vetänyt kaikki sisäkkäiset taulukot pois päätaulukosta, pystyt poistamaan alkuperäisen taulukkokoodin. Nyt taulukot pitäisi pinota uutta mobiiliversioon optimoitua näkymää varten.
Kuinka pitää yllä pöytäkonenäkymää, kun taulukkosi ovat erillisiä[]
Taulukot pitäisi pinota päällekkäin tai sivuttain. Tämän kautta voit mobiiliselaimesi kautta työntää ja liikuttaa taulukoita sopimaan varattuun tilaan mobiililaitteesi näytöllä. Jos taulukot ovat sivuttain, ne eivät mahdu mobiilinäytölle, joten selaimesi työntää automaattisesti viimeisen taulukon alemmas.
Kuitenkin, suurin haasteesi kuitenkin minkä kohtaat tässä vaiheessa, jos kompromissin löytäminen niiden pyötäkonenäkyvyyden ja mobiilinäkyvyyden välillä. Tämä saattaa vaatia upotetun CCS:n säätämistä hallitsemaan taulukoiden näkyvyyttä pöytäkoneilla. CSS:n kirjoittaminen taulukkosi wikitekstiin vaikuttaa vain pöytäkoneversioon, joten mobiiliversio näkyvyys on yhä niin kuin pitääkin. Jos tarvitset taulukoiden asetteluun muunlaista apua, katso sivun alaosassa lueteltuja artikkeleita.
Lisää hyödyllistä tietoa sisäkkäisistä taulukista[]
Pidä mielessäsi, että jos taulukkoa käytetään näyttämänä yksi taulukko useilla sivuilla, sisäkkäisen taulukon korjaaminen korjaa myös mobiilinäkymän kaikilla sivuilla. Tämä tarkoittaa, että harjoittaessasi kyseisen optimoinnin käyttämistä mallineittesi kehittämiseen, saatat siten vaikuttaa suuresti koko yhteisöön.
Kuvilla varustetut taulukot yksittäisissä soluissa saattavat pakottaa solun mukautumaan kuvan koon mukaisesti. Tämän vuoksi kuvat on skaalattava mobiiliystävälliseen kokoon, tai vedettävä kokonaan pois taulukon soluista. Jos kuva on erittäin iso ja taulukon ulkopuolella, mobiiliselain skaalaa sen automaattisesti sopimaan näytölle.
Brave Frontierin yhteisötapaustutkimus[]
Brave Frontierin yhteisö tarpeeksi hieno salaliittotovereillemme sisäkkäisten taulukoiden poistamiseksi. Pystyimme löytämään tasapainon sisäkkäisten taulukoiden hajauttamiseen yhden tärkeimmän mallineen (hahmomalline) kannalta säilyttäen samalla niiden näkyvyyden pöytäkoneilla. Tuloksena on huomattavasti parantunut mobiiliulkoasu suurelle määrälle artikkeleita yhteisössä. Katso itse:
Jos olet teknisempi ylläpitäjä ja haluat nähdä täsmälleen mitä muutoksia Brave Frontierin lähdekoodiin oli tehty sen optimoimiseksi mobiili-ikkunaan, voit katsoa lähdekoodia ennen tai jälkeen tekemiesi muutosten:
- Huomautus: tämä koodi suojattu epätoivotuilta muutoksilta. Jos haluat kopioida mallineen omaan käyttöösi, kopioi koodi ja liitä omaan yhteisöösi tai hiekkalaatikkoosi.
Lisätietoa[]
- Ohje:Taulukot
- Ohje: Ohje:Globaali CSS ja JS
- Ohje:Mobiili
- Foorumi:Getting Technical board (englanniksi)
Yhteydenotto Wikian henkilökuntaan[]
Tarvitseko apua yhteisösi sisäkkäisten taulukoiden käsittelyssä? Ota yhteyttä näiden ohjeiden mukaisesti. Muista kuitenkin kirjoittaa otsikkoon Mobiili: Sisäkkäiset taulukot.