Sivuston uudistuksesta opittua

Uudistin tämän sivuston toimimaan kokonaan WordPressin ja uuden teeman (ulkoasun) varassa. Tässä matkalla opittua.

Remontoin sivustoni kunnolla edellisen kerran vuonna 2006 kun siirryin Movable Typestä WordPressiin. Silloin tekemäni ulkoasu oli  käytössä tähän asti, vaikka pieniä uudistuksia teinkin vuosien mittaan. Nyt oli korkea aika uudistaa sivuston perusteellisemmin.

biomi.org 8.2.2014

Vanha sivusto

WordPressista CMS

Aikaisemmin käytin WordPressia (WP) pelkästään blogin hallintaan ja tein loput sivut staattisina html-tiedostoina. Sopisiko WP koko sivuston sisällönhallintajärjestelmäksi (CMS)? WP:ia kritisoidaan välillä pelkäksi blogiohjelmistoksi, mutta nykyominaisuuksiltaan se sopii mainiosti ainakin pienehkön sivuston ainoaksi CMS:ksi.

Navigointivalikoiden hallinta oli ainoa asia joka osoittautui hankalaksi. Valikoiden tekemiseen tarkoitetut pluginit tuntuvat joko keskittyvän ulkoasun säätämiseen tai ovat turhan monimutkaisia pienelle sivustolle. Päädyin käyttämään toistaiseksi vain WP:n sisäänrakennettua Menu-toimintoa. Se sopii muutamien kymmenien sivujen hallintaan, mutta suuremmilla sivumäärillä etenkin valikon järjestely on hankalaa.

Responsiivinen ulkoasu moderneilla apuvälineillä

Halusin sivustolle nykyaikaisen, eri laitekokoihin mukautuvan responsiivisen ulkoasun. Koska halusin tehdä ulkoasusta myös kokonaan omanlaiseni, en ottanut käyttöön valmista responsiivista WP:n teemaa, vaan lähdin rakentamaan ulkoasua astetta alempaa. Pohjaksi otin yksinkertaisen Underscores-pohjateeman ja Foundation-frameworkin (suomeksi kai ’kehikko’?). Samalla pääsin käyttämään CSS:n hallinnassa SASS:ia ja Compass-frameworkia.

SCSS oli helppo oppia ja tuntuu nyt korvaamattomalta. Aluun pääsemisen oli kuitenkin hankalaa: Compassin asentamisessa meni puolisen päivää: Windowsille sain sen lopulta, Macilla se ei toimi vieläkään (dependency hell; käyttöjärjestelmä vaatinee päivitystä.)

Foundation tarjosi helpot työkalut grid-pohjaisen ulkosasun rakentamiseen sekä aikaa säästäviä valmiita asetuksia mm. typografiaa varten. Pieneksi hankaluudeksi muodostui CSS:n monimutkaisuus: nyt Underscoresin, Foundationin ja itse tekemäni tyylimäärityksen kilpailevat keskenään prioriteeteissa. Erityisesti fonttikoot ja elementtien marginaalien/paddingin säätäminen vei aikaa. Chrome-selaimen Developer Tools -työkalut olivat tämänä setvimisessä tarpeellisia.

Fontit sain Google Fonts-palvelusta, jota oli huomattavan miellyttävä käyttää. Lisäksi käytin aiemminkin logossa käyttämääni ilmaista Fontin-fonttia.

Navigointivalikko oli tässäkin asia, johon en löytänyt itseäni tyydyttävää ratkaisua. Päädyin tekemään sen mobiilitoiminnallisuuden itse. (Katso miten valikko toimii kun kavennat sivua riittävästi.) Tuloksena on responsiivinen ulkoasu, joka mukautuu (toivottavasti) hyvin kännykälle, tabletille ja suuremmalle näytölle. Kovin monella laitteella en ole vielä päässyt sitä testaamaan.

Sisältö ja rakenne

Näin aluksi päädyin siirtämään vanhojen sivujen sisällön lähes sellaisenaan WordPressiin. Siirto meni sujuvasti copy-pastella, WordPress säilytti tyylit kiitettävän oikein (mitä nyt välillä pienensi ensimmäisen kappaleen fonttikokoa).

Rakenteen juuret ovat kuitenkin viime vuosituhannella, jolloin blogeista ei ollut vielä tietoa. Nykyään olisi loogisempaa käyttää ”sivuja” vain jatkuvasti ajan tasalla pidettävälle sisällölle, ja julkaista kaikki muut blogissa. Kuten vanhat opiskelutyöt, jotka sinänsä ovat vielä kelvollisia ja keräävät yllättävän paljon lukijoita.

Twitter

Aiemmin lisäsin uusimmat twiittini näkymään etusivulla Twitterin widgetillä. Olisin kuitenkin halunnyt twiitit sivulle saumattomasti, ilman widgetin määräämää ulkoasua. Twitterin API:n muutosten takia tämä ei olisi ilmeisesti onnistunut, paitsi kikkailemalla.

Onko twiittien esittäminen omilla sivuilla lopulta oleellista? Päädyinkin vain näyttämään linkin Twitteriin etusivulla, yhdessä muiden some-linkkien kanssa. Jospa lukijoiden ohjaaminen Twitteriin lisää interaktiota.

Laajempi kysymys some- ja muiden palvelujen käytössä on, että kannattaako oma sisältö hajauttaa erikoistuneisiin palveluihin (esim. valokuvat Flickriin, lyhyet ajatukset Twitteriin, pidemmät ehkä Tumblriin), vai pitää ’omassa hallinnassa’ omilla sivuilla? Riippuu siitä mitä haluaa; erikoispalvelut toisivat enemmän näkyvyyttä, mutta vaativat mm. sitoutumaan käyttöehtoihin ja palvelun ominaisuuksiin.

Lopuksi

Uudistus oli hyvä tapa palauttaa mieleen www-suunnittelua ja oppia uusien työkalujen käyttöä (kuluneiden 416 koti-isyyspäivän jälkeen.) Vielä pitää ainakin parantaa latausnopeuksia. Sitten seuraavan WordPress-projektin kimppuun!