Fandom

Suomen Wikia

Kommenttia0

Rakenteen muutokset: Raja-arvot ja typografia

CAJH 16. huhtikuuta 2015 Käyttäjän blogi:CAJH
Breakpoints-blogheader.png


Hei kaikki, viime vuonna artikkelin rakenteen prototyypissä testasimme useita eri asioita ja saimme paljon palautetta, joka on avuksi siinä miten yritämme ja siirrymme eteenpäin. Prototyyppi auttoi meitä oppimaan tärkeitä asioita siitä mikä toimii ja mikä (esimerkiksi, oikean kaiteen poistaminen oli hyvin häiritsevää). Aiomme silti päästä eteenpäin tekemällä artikkelin rakenteeseen asteittaisia lisäyksiä, mutta suunnitelmamme on keskittyä rakenteen merkittäviin yksityiskohtiin vaiheittain. Prosessi samanlainen kuin tapa, jolla globaali navigointi päivitettiin tammikuussa, mutta vie pidemmän aikaa saada kaikki muutokset artikkelien rakenteiseen tehtyä.

Ensimmäisenä luettelossa on raja-arvojen lisääminen Wikian herkkään rakenteeseen, ja aihetta koskeviin päivityksiin typografiassa. Muutokset typografiassa tapahtuvat vain suurimmassa raja-arvossa, mitä me kutsumme nimellä Desktop XL, määritelty näkymään leveämpänä kuin 1575 pikseliä. Alapuolella oleva galleria näyttää joitakin ennen-ja-jälkeen -esimerkkejä siitä mikä muuttuu Desktop XL -rakenteen koossa. Klikkaa gallerian läpi ja jatka selaamista lukeaksesi tarkemmin muutoksista, joita teemme raja-arvoihin ja typografiaan.

Raja-arvot

Näin siirrymme pois "fluidista" rakenteesta ja määritämmekin raja-arvot sallimaan ennalta arvattavamman käyttäytymisen, jolloin tietyt mallineet eivät enää mene rajojen yli tai näytä olevan 'pois käytöstä'. Tavoittemme on asettaa sivustolle raja-arvot vastaamaan niin, etttä sivut sopeutuvat suuremmille näytöille, ja tämä määritellään selaimen näkökulmasta. Huomioithan, että vierityspalkit pidetään näytön mittauksissa rajojen ulkopuolella.

Luettelo kaikista raja-arvoista ja vastaavista näytön leveyksistä:

Updated breakpoints-table.png

Typografia

Haluamme keskittyä luettavuuteen ja rajan pituuteen, joka seuraa modernin käyttäjäkokemuksen parhaita käytäntöjä ja tämä tarkoittaa kokemuksen mukauttamista näkymään. Tänä päivänä Wikiassa vain rivipituus muuttuu, mutta ei fontin koko tai rivikorkeus. Typografian päivityksen myötä, fontin koko ja rivikorkeus muuttuvat Desktop XL -raja-arvojen mukaisesti, ja näet yksityiskohdat lueteltuna alapuolella. Pöytäkoneiden/tablettien raja-arvoille, tekstikoko Wikiassa on tällä hetkellä vakio. Tämä vain lisää Desktop XL -kokoon siirtymistä.

Luettelo typograafisista muutoksista jokaiseen raja-arvoon:

Typography-table.png


Tarkoituksemme on soveltaa nämä muutokset vain otsikoihin, leipätekstiin, ja peruslainauksiin. Yksi vastaan tuleva ongelma on, että tietyt mallineet eivät ole oikeassa luokassa, ja niihin soveltuneet typografian muutokset saattavat rikkoa mallineen. Olemme alkaneet luetella potentiaalisia virheitä, niiden vaikutuksia ja ehdotettuja ratkaisuja. Useimmat ongelmat pitäisi olla ratkaistavissa joko antamalla näille mallineille luokkien nimet tai säätämällä niitä oman CSS-koodisi kautta. Luettelo siihen löytyy täältä ja sitä työstetään yhä enemmän, kun kaltaisesi käyttäjät tekeävt muokkauksia Wikiassa uudella rakenteella.

Miten katsoa raja-arvoja ja typografiaa

Jos haluat katsoa miltä asiat näyttävät hiekkalaatikossasi tai wikiassa, tarvitset vain kyselymerkkijonoparametrin. katso alapuolella olevia ohjeita nähdäksesi jokaiselle elementille tarvittavat parametrit.


Esikatselu raja-arvoista ja typografiasta:
Lisää ?oasisbreakpoints=1&oasistypography=1 URL-osoitteen perään
Esimerkiksi: http://gameofthrones.wikia.com/wiki/Tywin_Lannister?oasisbreakpoints=1&oasistypography=1


Raja-arvojen muutokset astuvat voimaan tiistaina 19. toukokuuta koko sivustolla. Jos huomaatte jotain vioittunutta tai epätavallista, tarkistakaa ensin ohjesivu nähdäksenne onko ratkaisu dokumentoituna sinne. Jos ei, ilmoita meille kommenttien kautta alapuolella tai sivun Toiminnot:Contact kautta.

Päivitys 21. toukokuuta 2015

Korjataksemme vierityspalkkiin liittyvät bugit, olemme lievästi muuttaneet raja-arvoja. Raja-arvo Desktop on nyt muutettu 1084 pikseliin, ja raja-arvo Desktop XL 1595 pikseliin. Pääblogijulkaisun taulukot sekä ohjeisivun tiedot ovat päivitetty ajankohtaisiksi.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Ympäri Wikian verkkoa
Hae mainospaikkaa

Satunnainen wiki