Mikrogramma Design ja uudet vaatteet 2017

Itselle kun tekee, ei meinaa tulla valmista sitten millään; jokaista yksityiskohtaa pitää viilata paljon ja monta kertaa. Päätin, että olen nyt tyytyväinen tähän uuteen ulkoasuun, ja laitoin sen tulille.

Etusivulle laitoin ensimäiseksi itse pihvin; yritän keskittyä nyt ainoastaan WordPress-suunnitteluun ja kehittämiseen. Jonkun verran teen toki edelleen käyttöliittymäsuunnittelua ja grafiikkaa. Sitten alle muutama ote työnäytteistä ja pari uusinta blogitekstiä (juu, tämä blogi nyt mukana ensimmäistä kertaa).

Teknisesti sivusto pyörii WordPressin päällä, kuten kaikki asiakasprojektinikin. Olen pyrkinyt vähentämään ulkoisten riippuvuuksien määrän minimiin.

  • Minimalistinen ja rauhallinen ulkoasu.
  • Erityishuomio suorituskyvyssä ja keveydessä.
  • Kaikki mahdolliset kuvat ovat SVG-muodossa. Ne ovat nopeita ladata ja näyttävät hyvältä missä tahansa koossa.
  • Sivusto ei käytä webfontteja tai upotettuja @font-face -määrityksiä, vaan luottaa käyttöjärjestelmien omiin fontteihin.
  • Sivusto ei käytä jQueryä.
  • Sivusto toimii, vaikka JavaScript olisi estetty. JavaScriptiä käytetään ainoastaan isojen kuvien viivästettyyn lataamiseen (lazy loading).
  • WordPressin lisäosista ovat käytössä Crisp chattiä varten sekä WP Super Cache välimuistittamista varten. Jetpackistä on käytössä monitorointi ja brute force -kirjautumisten esto.

Miltä sivusto näyttää sinun mielestäsi? Mikä toimii, mitä voisi parantaa? Avaa chat alakulmasta ja kerro toki.

Hämeen Kesäyliopisto

Hämeen Kesäyliopisto tarjoaa avointa koulutusta kaikille kiinnostuneille ympäri vuoden.

Kesäyliopiston koulutuspäällikkö Hanna Salo otti yhteyttä huhtikuun lopussa. He olivat kuulleet minun toteuttaneen loppuvuodesta 2016 Etelä-Pohjanmaan Kesäyliopiston uusille WordPress-pohjaisille sivuille rajapintaintegraation Asion koulutuskalenteriin osana seinäjokelaisen Valakia Interactiven toteuttamaa sivustouudistusta.

Kesäyliopisto pyysi minua freesaamaan jo valmiiksi WordPressin päällä pyörineet vanhat sivunsa uudelle aikakaudelle. Lähdin hakemaan inspiraatiota kesäyliopiston koulutusesitteen raikkaasta ilmeestä, jonka on suunnitellut forssalainen Mainossatama. Lähetin ensimmäisen luonnoksen toukokuun alussa, ja kesäkuussa päästiin avaamaan uudet sivut. Melko nopealla sykkeellä saatiin siis projekti maaliin.

Mikrogramman kanssa toteutettu nettisivujen uudistusprojekti sujui joustavasti, nopeasti ja vaivatta! Toteuttajana Mikrogramma oli erittäin luotettava ja joustava yhteistyökumppani.

Uudistuksen yhteydessä tehtiin myös integraatio Asion kurssitietojärjestelmään. Tätä kautta Asion järjestelmään syötetyt kurssitiedot voitiin hakea osaksi sivujen omaa sisältöä. Tavoitteena oli saada enemmän kävijöitä kesäyliopiston omille sivuille kasvaneen hakukonenäkyvyyden ja selkeämpien, yksilöllisten kurssiesitesivujen osoitteiden kautta. Etusivulle upotettiin Asion nettikalenteri vielä erikseen omana elementtinään.

Nettisivu-uudistuksen yhteydessä toteutettu rajapintatyö kurssihallintajärjestelmäämme sujui ongelmitta. Yhteydenpito hoitui suoraan Mikrogramman toimesta kurssihallintajärjestelmätahoon.

Tiedot haetaan Asion rajapinnasta JSON-muodossa, ja tallennetaan WordPressin tietokantaan välimuistiin (transient) halutun pituiseksi ajaksi. Tämä nopeuttaa sivulatauksia huomattavasti, koska tietoja ei tarvitse hakea jokaista kävijää varten erikseen ulkoisesta järjestelmästä.

Sivuston uudeksi kodiksi valittiin yhteistuumin Seravon WP-Palvelu, joka huolehtii WordPress-pohjaisten sivujen ylläpidosta todella mallikkaasti; sivut latautuvat nopeasti ja muutenkin tietoturvaan ja suorituskykyyn on kiinnitetty erityistä huomiota. WP-Palveluun on myös mahdollista luoda ulkopuolisten katseilta piilossa olevia ”varjoja”, joissa voi helposti testata uutta ulkoasua tai sisältöä ennalta.

Yhteistyöhön ja lopputulokseen olemme erittäin tyytyväisiä! Suosittelemme Mikrogrammaa nettisivutoteutuksiin!

Kiitos Hanna ja muu Hämeen Kesäyliopiston porukka, että sain olla alusta asti kokonaisvastuullisesti suunnittelemassa ja toteuttamassa tätä! Ja kiitos myös Asion spesialistieille avusta ja reagoinnista rajapinnan osalta.

Hämeen Kesäyliopisto tarjoaa avointa koulutusta kaikille kiinnostuneille ympäri vuoden. Kesäyliopiston koulutuspäällikkö Hanna Salo otti… Lue lisää »

hameenkesayliopisto.fi
Hämeen Kesäyliopisto

Harkkokivitalo

Harkkokivitalo.fi on betoniteollisuuden ja harkkovalmistajien informaatiosivusto harkkokivitalojen rakentajille.

Projektia veti — ja ulkoasun suunnittelusta vastasi — Roban Konna. Pääsin toteuttamaan kokonaan uutta sivustoa valmiin ulkoasusuunnitelman pohjalta.

Etusivulle toteutettiin harkkokivitalon vaiheittainen rakennusopas JavaScriptillä ja transitioilla.

Kiitos Roban Konnan Riku Lehtoselle ja Pasi Virtakarille hienosta yhteistyöprojektista!

Harkkokivitalo.fi on betoniteollisuuden ja harkkovalmistajien informaatiosivusto harkkokivitalojen rakentajille. Projektia veti — ja ulkoasun suunnittelusta… Lue lisää »

harkkokivitalo.fi
Harkkokivitalo

Vuoden Viinit 2017

Vuoden Viinit -kilpailun sivuston ulkoasu uudistettiin täysin vastaamaan vuoden 2017 kisan uudistettua tulostenjulkistustaktiikkaa.

Etusivulla on kisan edetessä täydentyvä listaus eri sarjojen tuloksista. Myös sivun ylälaidassa oleva graafi — ”sarjapiirakka” — täydentyy sitä mukaa, kun tuloksia julkistetaan.  Graafin ulkoasun suunnitteli hyvä ystäväni ja lahjakas graafinen suunnittelija Mika Hakala. Teknisesti piirakka on toteutettu SVG-kuvana, jota muokataan lennossa JavaScriptin avulla.

Maahantuojille on oma kirjautumista edellyttävä extranet, jonka avulla he voivat ilmoittaa edustamiaan viinejä kilpailuun suoraan sivustolta löytyvän lomakkeen avulla. Viinit menevät WordPressissä omiksi sisältötyypeikseen (custom post type), ja niitä voidaan kisan järjestäjän puolesta monipuolisesti muokata ohjausnäkymässä.

Toteutin viinien ilmoittamisen helpottamiseksi järjestelyn, jossa maahantuoja syöttää lomakkeelle ensin Alkon tuotenumeron, ja lomake esitäytetään automaattisesti Alkon tietokannasta haettavien tietojen avulla.

Vuoden Viinit -kilpailun sivuston ulkoasu uudistettiin täysin vastaamaan vuoden 2017 kisan uudistettua tulostenjulkistustaktiikkaa. Etusivulla… Lue lisää »

vuodenviinit.fi
Vuoden Viinit 2017