Rollemaa.org uudistui – katso miten kaikki muuttui

Kirjoittanut . Liittyy aiheisiin , , , , , , , .

Arkistomatskua

Otathan huomioon, että tämä on yli 4 vuotta vanha artikkeli, joten sisältö ei ole välttämättä ihan ajan tasalla. Olin artikkelin kirjoittamishetkellä 26-vuotias.

Tulipas iltalehtimainen otsikko, mutta en voinut sille mitään, koska olen niin innoissani. Olin pitkään suunnitellut tätä uudistusta, mutta en vaan töiltäni saanut tehtyä mitään. Pääsiäisviikon olen kuitenkin lomalla, joten päätin ottaa projektiksi saada taustalla kytenyt uudistus valmiiksi.

Aloitin työstön lauantaina 12.4. puhtaalta pöydältä. Nyt on torstai 17.4. ja olen ”valmis” (lainausmerkit siksi, koska Rollemaa ei ole koskaan täysin valmis).

Edellinen Rollemaan WordPress-teema koodinimeltään ”Soil” oli rakennettu alunperin jossakin 2008-2009-taitteessa. Sen jälkeen olen jälkikäteen lisäillyt vähän sitä sun tätä, isoimpina uudistuksina responsiivisuuden ja HTML5-merkkauksen niiden tultua mukaan kuvioihin. Kaikki oli kuitenkin todella levällään. Tarkastellaanpa vielä miten vanha oli rakennettu:

  • Alunperin XHTML Transitional
  • Ei gridejä (niitä ei ollut vielä silloin juurikaan), kaikki koodi täysin omaa
  • Ei valokuvia ulkoasussa, vaan omaa käsin toteutettua grafiikka
  • Paljon vanhaa koodia ja javascriptiä
  • Paljon kuollutta koodia, kuten mm. Woopra-seurantascripti, joka oli silloin ilmainen, nykyään maksullinen
  • Vähän liikaa kaikkea kun tein lisäyksiä milloin mihinkin. Leiska ihan levällään.

Rollemaa on aina ollut blogi. Siksi halusin nyt painottaa enemmän tekstiin ja tehdä uudesta versiosta modernin, nykyisiä taitojani vastaavan, hieman ammattimaisemman ja ennen kaikkea selkeämmän.

Tämä Rollemaan versio on koodinimeltään ”New Era” ja pitää sisällään seuraavaa.

  • Logon redesign
  • Gridinä yksi lemppareistani, responsiivinen Bootstrap 3.1.1
  • Pohjana oma Dude starter teema, joka pohjautuu _s underscoresiin. Ei pohjana vielä täydellinen, mutta hiljaa hyvä tulee.
  • Typografia paremmassa roolissa, yksiköt enimmäkseen moderni ja joustava rem (emphemeral unit)
  • Workflowna oma stackini wpstack-rolle, jota käytän töissäkin.
  • CSS Authoring frameworkina Compass. SASS on ihanaa.
  • Macbook Pro à Sublime Text 3, CodeKit ja kymmenen muuta elämää helpottavaa ja tekemistä nopeuttavaa sovellusta.
  • Selkeämpi, parempi, upeampi, nopeampi.
  • Artikkelikuvat keskiössä. Jos kuvaa bloggaukseen ei ole määritetty, näkyy satunnaisesti lempparikuvakokoelmastani.

Esteetön versio jäi nyt pois, koska sivusto on jo oletuksena melko esteetön (parantelen vielä). Koko versio oli peruja ajalta, jolloin ei esim. ollut responsiivisuutta vaan erillinen mobiiliversio sen sijaan. Hyvästi erilliset versiot, tervetuloa tulevaisuus!

Plugineiden määrä on enää kolmasosa, sillä koodasin itse asiat joihin ei alunperinkään olisi pluginia tarvinnut. Lisäksi optimoin joitakin plugineja, kuten leffasivuani. Osa kirjoituksista saattaa sisältää rikkinäisiä videoita tai lyhytkoodeja, jotka eivät toimi. Ilmoitathan näistä, jos en tajua korjata. Pitäisi ajaa ainakin [youtube-video]:lle joku mysql-search-and-replace.

Aiemmin oltiin maan kamaran alla, nyt ikään kuin tultu maan pinnalle. Silti edelleen Rollemaassa vallitsee lempparisäätilani: lämmin, kesäinen, mutta ei liian kuuma, vaan sateisen melankolinen. Tuulee kovasti niin että se näkyy ruohonkorsissa ja viljapelloissa. Tuuli on silti lämmittävä, samalla pieni sade hieman viilentävä. Taivaalla on tummia pilviä, mutta jostain tulee auringon pilkahdusta, lupaus toivosta. Tämä on ollut Rollemaan keskeinen filosofia aina, näin säätilametaforana kuvattuna.

Kuvat tekevät paljon ja täysi digitaaligrafiikka tuntuu olevan jo aika lailla kuollut. Siksi rakensinkin ulkoasun löytämäni kuvan ympärille. Hullua, että löysin juuri täydellisen kuvan. Voi olla, että vaihtelen kuvaa silloin tällöin.

Okei, ei tämä vielä ole 100%-valmis, sillä todo-listani sanoo että 81% on toteutettu. Ja noidenkin jälkeen tulee varmasti lisää, onhan tämä harrastukseni ja ikuisuusprojektini. Tämä on vasta ensilaunch ja uusi sivusto on vielä täysin testaamatta. Oikeastaan kaikki on kirjoitettu uudestaan.

Ei mitään hajua miten pelittää Internet Explorer -selaimilla tai esim. Operalla. Ei myöskään mitään tietoa miten toimii iPhonella. Testasin iPadilla ja HTC Onella nopeasti. Ilmoittelethan mahdolliset bugit. Vaikka tosin viilailen silti jatkossa aina kun jaksan. Spritet ja validointi pitäisi tehdä ainakin seuraavaksi jossain vaiheessa.

Artikkelikuvat ja kuvat muutenkin vanhemmissa bloggauksissa saattavat näyttää oudolta, ilmoitathan myös näistä, en kaikkea huomaa.

Ettei jäisi vain muistoihin elämään, tässä vielä liitteenä kuvia siitä miltä Rollemaa on näyttänyt aiemmin.

2009-2014
2009-2014 – Koodinimi ”Soil”.
2006-2009 - Koodinimi "FALLing". Tästä on vain englanninkielinen screenshot tallessa. Yläosa vaihtui vuodenajan mukaan hauskasti tässä leiskassa.
2006-2009 – Koodinimi ”FALLing”. Tästä on vain englanninkielinen screenshot tallessa. Yläosa vaihtui vuodenajan mukaan hauskasti tässä leiskassa.
2005-2006.
2005-2006.
2004-2005. Tätä kauemmaksi en tahdo edes mennä, enkä jaksa kaivella kuvankaappauksia. 3D-grafiikka oli tuolloin kova sana.
2004-2005. Tätä kauemmaksi en tahdo edes mennä, enkä jaksa kaivella kuvankaappauksia. 3D-grafiikka oli tuolloin kova sana.

Mitä mieltä? kommentoi!

Kuva Roni Laukkarisesta

Roni Laukkarinen

Kirjoittaja on 30-vuotias elämäntapanörtti, ammatiltaan yrittäjä itse perustamassaan digitoimistossa ja SaaS-palvelua kehittävässä startupissa, verkkosivujen tekijä, sosiaalisen median asiantuntija ja koukussa kirjoittamiseen 5-vuotiaasta. Suurin osa päivästä kuluu hevimusiikin ja koodaamisen parissa, mutta arkea piristyttää myös vaimo ja kaksi lasta. Twitter, leffat ja erikoisoluet lähellä sydäntä.

Lue Rollesta lisää

Reaktiot

Vaadittu kenttä

 

8 kommenttia

  1. Pia Mielonen

    Hienolta näytttää näin nokian lumialta katsottuna fasen sivujen kautta, itse mobiilisivuja en käytä, kun on niin, höh,no vajaat, tai sit en osaa käyttää tätä luuria…

  2. Rolle

    Kiitos kommentista Pia! Mukava kuulla että pelittää Lumiallakin. Mistäköhän mobiilisivuista mahdat puhua? Rollemaassa on responsiivinen ulkoasu, joka mukautuu käyttäjän näytön mukaan, eikä mitään pitäisi olla ”vajaana”. Ilmoittelethan jos joku ei näy mobiilissa miten pitäisi. Suosittelen myös lukemaan kirjoittamani aiheeseen liittyvän artikkelin.

  3. Sami

    Moro Rolle! Spritet saat kätevästi tehtyä Compassilla suoraan :) tekee kaikki x-y koordinaatit ja yhdistelmäkuvan suoraan, määrität vain kansion mistä kuvat otetaan. http://compass-style.org/help/tutorials/spriting/

  4. Rolle

    Moro Sami! Tiedossa on, jäi vaan vielä julkaisuvaiheesta pois :)

  5. Mikko Ahlroth

    Hurraa, ei enää harmaata tekstiä mustalla taustalla. \o/ Voisin sanoa että hieman helpommin luettava tämä nykyinen.

  6. Martti Laine

    Erittäin hyvä redesign, seuraa nykyajan blogien linjaa. Tuo pomppiva hiiri alakulmassa vie tosin huomion heti artikkeliin saavuttua.

  7. Rolle

    Mukavaa että pidätte! Helppolukuisuus ja nykyaikaisuus olikin tavoitteena. Martti, mietin itseasiassa tuota hiirtä (pädillä ja puhelimella se on muuten touch-sormi-tyyppinen kuvake) että tajuaako nykyihminen rullata alas. Ehkä aliarvioin käyttäjää turhankin usein. Voisihan sitä pienentää, vaihtaa nuoleksi tai ottaa pois. Kiitos palautteesta.

  8. Iiro Vierimaa

    Näyttää toimivan maniosti myös iPhonen näytöltä. Vaaka -ja pystytasossa. Uusi ulkoasu miellyttää väsyneitäkin silmiä.