Avainsana: <span>svg</span>

Woittola
Portfolio Web

Woittola on perinteikäs pohjalainen hoiva-alan huonekalujen maahantuontiin myyntiin erikoistunut yritys.

Uuden WordPress-pohjaisen sivuston tavoitteena oli luoda edustettuja tuotteita esittelevä sivusto verkkokauppamaisesti, ilman verkkokaupan ostotoimintoja. Woittolan edellinen sivusto oli myös WordPress-alustalla, käyttäen valmisteemaa.

Visuaalisessa suunnittelussa lähdin jälleen ”kuvat edellä”, koska edustetuista tuotteista on hyviä kuvia saatavilla. Olemassaoleva logo väritettiin uusin sävyin ja otettiin mukaan luonnollisesti SVG-vektorikuvana.

Sivuston saavutettavuuteen kiinnitin erityistä huomiota. Sivusto täyttää lähes täysin WCAG (eli Web Content Accessibility Guidelines) AA-tason vaatimukset, mukaanlukien tarjouspyynnön ponnahdusikkuna (integroitu A11y-dialog). Saavutettavuutta testasin Chrome-selaimeen asennettavalla axe-lisäosalla.

Harmikseni en löytänyt saavutettavuusvaatimuksia täyttävää selattavaa kuvagalleriaa, joten PhotoSwipe-kirjaston avulla toteutettu tuotekohtainen galleria on valitettavasti saavutettava vain osittain (fokus ei näppäimistöllä selatessa pysy avautuvan gallerian sisällä). Tätä täytyy tutkia lisää.

Kokeilin tässä projektissa ensimmäistä kertaa CSS-muuttujien hyödyntämistä (CSS custom properties) SASS-muuttujien sijaan. Homma pelasi todella hienosti, ja aioin käyttää tätä lähestymistapaa tulevissa projekteissa.

Kiitos hienosta projektista, Sami!

Woittola on perinteikäs pohjalainen hoiva-alan huonekalujen maahantuontiin myyntiin erikoistunut yritys. Uuden WordPress-pohjaisen sivuston tavoitteena oli luoda edustettuja tuotteita esittelevä sivusto verkkokauppamaisesti, ilman verkkokaupan ostotoimintoja. Woittolan edellinen sivusto oli myös WordPress-alustalla,… Lue artikkeli ”Woittola” kokonaan »

woittola.fi
Woittola

LABeauty
Portfolio Web

Hius- ja hyvinvointipalveluita tarjoava jurvalainen LABeauty aloitti toimintansa maaliskuussa 2019. Yrittäjänä toimii perheystävämme Seliina Niemistö. Hiusklinikka tarjoaa apua hiustenlähtöön ja hiuspohjaongelmiin. Laboratoriossa voidaan suorittaa laaja-alaisia tutkimuksia ja näytteenottopalveluita. Parturi-kampaamo Mirvan puolella tarjolla ovat parturi-kampaamopalvelut.

Toteutin yritykselle WordPress-teeman käsityönä. Sivuston modulaarinen toteutus pohjautuu jälleen kerran Advanced Custom Fields -lisäosan avulla toteutettuhin joustavan sisällön osioihin. Alustin sivustoa varten kahdeksan erilaista sisältöelementtiä päätasolla palstoitusta varten ja niiden sisältö on mahdollisuus rakentaa palikoista kuten wysiwyg-editori, Facebook-feedi, kartta, lomake ja karuselli.

Tilaajan näkökulmasta verkkosivujen toteutus oli todella sujuvaa valmiin designin pohjalta, eikä kompromisseja tarvittu missään vaiheessa. Kaiken lisäksi aikataulu piti hyvin. Sain nähtäväkseni juuri tilauksen mukaiset sivut ja todella hyvän ohjeistuksen sivujen päivitykseen. Mikko oli tehnyt helposti ymmärrettävät sisältöelementit WordPressiin ja kirjallisen ohjeen lisäksi kävimme konkreettisesti läpi ominaisuuksia. Uskon, että näillä ohjeilla sivuston päivittäminen onnistuu hyvin itseltänikin, mutta jos eteen tulee kysymyksiä, tiedän Mikon osaavan vastata. Olen kaiken kaikkiaan äärimmäisen tyytyväinen saamaani tuotteeseen ja palveluun ja suosittelen Mikrogramma Designia kaikille, jotka tähtäävät räätälöityyn verkkosivutoteutukseen.
Seliina Niemistö / yrittäjä, LABeauty

Sivujen ulkoasun suunnittelijaksi Seliina oli valinnut Veera Anttilan. Sain Veeralta valmiit suunnitelmat sekä desktoppiin että mobiiliin ohjeistuksineen. Veera teki myös kaikki kuvankäsittelytyöt. Mukavaa yhteistyötä uuden ihmisen kanssa!

Työskentely Mikrogamma Designin kanssa sujui erinomaisesti. Useamman vuoden alakokemuksella rohkenen sanoa, että Mikko on ehdottomasti yksi parhaista koodariyhteistyökumppaneista. Pedantti ja tehdään-mitä-luvataan asenne työhön on yksi ehdoton vaatimus kun valikoin niitä, joiden kanssa yhteistyötä teen ja Mikolta tätä löytyy.

Sivusto toteutui prikulleen suunnitelmien mukaan ja missään vaiheessa työnjälkeen ei tarvinnut puuttua. Aion käyttää Mikon palveluita jatkossakin ja suositella häntä myös kontakteilleni.

Veera Anttila / Design VA

Etusivun otsikkokuvassa käytin pientä kikkaa, sillä kuva häipyy täysin läpinäkyväksi (fade to transparent) alalaitaa kohti. Tämä onnistui käyttämällä kuvaan SVG-ominaisuuksia linearGradient ja mask:

<linearGradient id="alphaLinear" x1="0" x2="0" y1="0" y2="1">
  <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0%" />
  <stop offset="40%" stop-color="#FFFFFF" stop-opacity="0%" />
  <stop offset="100%" stop-color="#000000" stop-opacity="100%" />
</linearGradient>

<mask id="Mask">
  <rect x="0" y="0" width="100%" height="100%" fill="url(#alphaLinear)" />
</mask>

Onnea matkaan Seliina!

Hius- ja hyvinvointipalveluita tarjoava jurvalainen LABeauty aloitti toimintansa maaliskuussa 2019. Yrittäjänä toimii perheystävämme Seliina Niemistö. Hiusklinikka tarjoaa apua hiustenlähtöön ja hiuspohjaongelmiin. Laboratoriossa voidaan suorittaa laaja-alaisia tutkimuksia ja näytteenottopalveluita. Parturi-kampaamo Mirvan… Lue artikkeli ”LABeauty” kokonaan »

labeauty.fi
LABeauty

Vastuullinen eränkäynti
Portfolio Web

Vastuullisuus on teema, joka puhuttaa vuonna 2019 myös eräihmisten maailmassa. Nordic Distribution Oy avasi aiheeseen liittyvän blogin yhdessä yhteistyökumppaneidensa kanssa. Sain toteuttaa sivuston ilmeen.

Ilme suunniteltiin yhdessä asiakkaan ja Emilian kanssa. Ilme on metsäisen vihreä ja ruskea höystettynä kultaisilla yksityiskohdilla. Sivuston rakenteessa tuotiin esille blogimaisuus jaoteltuna ”vastuullisen eränkävijän polun” neljään askeleeseen.

Graafiset elementit ovat SVG-muodossa latauskeveyden takaamiseksi. WordPress-teeman toteutuksen pohjana on Digitoimisto Duden kepeä air-light -startteri.

Liity mukaan vastuulliseen eräkäyntikeskusteluun.

Vastuullisuus on teema, joka puhuttaa vuonna 2019 myös eräihmisten maailmassa. Nordic Distribution Oy avasi aiheeseen liittyvän blogin yhdessä yhteistyökumppaneidensa kanssa. Sain toteuttaa sivuston ilmeen. Ilme suunniteltiin yhdessä asiakkaan ja Emilian… Lue artikkeli ”Vastuullinen eränkäynti” kokonaan »

vastuullinenerankaynti.com
Vastuullinen eränkäynti

Koskenkorvan Trahteeri
Portfolio Web

Koskenkorvan Trahteerin tuleva isäntä ja seremoniamestari, Jaakko, otti puheeksi josko toteuttaisin uudet sivut. WordPress oli heille jo tuttu alusta, joten valinta oli helppo.

Ulkoasun suunnitelijaksi valikoitui alunperin seinäjokelainen, sittemmin Belgiaan muuttanut lahjakas Emilia Kaupinmäki. Emilia oli tuttu ensimmäisestä Seinäjoki WordPress meetupista, ja oli kiinnostavaa lähteä tekemään hänen kanssaan yhteistyötä ensimmäistä kertaa ja vieläpä etänä.

Emilia toimitti kaikkien sivujen ulkoasut Photoshop-tiedostoina eri ruudunleveyksille optimoituina. Niistä oli helppo lähteä rakentamaan modulaarista järjestelmää, jonka avulla asiakas voi itse kasata ulkosun heille toteutetuista sisältöelementeistä.

Kaikki ikonit, logot ja reunakuvioinnit toteutettiin kevyinä SVG-vektoreina. Niiden täyttöväriä muokataan ohjelmallisesti noudattamaan sen sisältömodulin värimaailmaa, mihin ne on upotettu. SVG-tiedostoja käytetään myös maskaamaan esimerkiksi henkilökuvia ja majoitustilojen pienoiskuvia.

Kevyt landing-sivu siirrettiin toteutettuna WP-Palveluun. Varsinaista sivustoa ryhdyttiin rakentamaan verhojen takana hyödyntäen WP-Palvelun kehittäjille tarkoitettua staging-ominaisuutta.

Sivuston kaikki elementit tehtiin myös lokalisoitavaksi englannin kielelle Polylangin avulla. Muita kieliä on jatkossa helppo lisätä mukaan.

Koskenkorvan Trahteerin sivujen uusimisessa oli tavoitteena saada alusta ajan tasalle teknisesti, sisältö helposti päivitettäväksi ja erityisesti saada kävijöille perille millainen paikka oikein olemme. Mikko auttoi meitä suuresti löytämään oikeat keinot tähän ja muuntamaan kunnianhimoisen designin toimivaksi sivustoksi. Erityisesti arvostan Mikon luomaa modulaarista rakennetta sivujen päivittämiselle: saamme luotua helposti hyvän näköisiä, graafisen ohjeiston mukaisia sisältöjä sivulle ilman kuvien yms manuaalista asettelua tai muuta säätöä.Jaakko Koskenkorva

Onnea matkaan, Trahteerin uusi sukupolvi, Jaakko ja Sari! Ja kiitos Emilia loistavasti sujuneesta etäprojektista!

Koskenkorvan Trahteerin tuleva isäntä ja seremoniamestari, Jaakko, otti puheeksi josko toteuttaisin uudet sivut. WordPress oli heille jo tuttu alusta, joten valinta oli helppo. Ulkoasun suunnitelijaksi valikoitui alunperin seinäjokelainen, sittemmin Belgiaan… Lue artikkeli ”Koskenkorvan Trahteeri” kokonaan »

trahteeri.fi
Koskenkorvan Trahteeri

AVA Finland -konserni
Portfolio Web

AVA Finland -konsernin sivustouudistuksessa usealle toimialasivustolle luotiin yhtenäinen, raikas ja moderni ilme. Ilmeen suunnittelusta vastasi Graafinen toimisto Serian Tomi. Samalla sivustot tuotiin WordPress-julkaisualustalle.

Toimialasivustot toteutettiin WordPressin multisite-ominaisuudella. Yksittäiset sivustot käyttävät kaikki samaa teemaa, jonka värimaailman ja logot asiakas voi itse määritellä sivustokohtaisesti WordPressin ohjausnäkymässä. Kaikki sivustot esittelevä landing-sivu pidettiin erittäin yksinkertaisena.

Tässä projektissa otin ensimmäistä kertaa työn alle kevyen ”page builderin”, jonka avulla asiakas voi itse luoda alasivujen ilmeen WordPressin ohjausnäkymässä sitä varten luoduista moduleista eli sisältöosioista. Sivulle voi siis valita asetettavaksi esimerkiksi otsakekuvaa, artikkelisyötettä, henkilöstön jäseniä, lomaketta, Facebook-feediä tai Google-karttaa. Moduleita lisätä ja poistaa, ja raahailla halumaansa järjestykseen helposti. Järjestely perustuu Advanced Custom Fields -lisäosan joustavan sisällön hyödyntämiseen. Se onnistuikin yli odotusten, ja olen käyttänyt tätä lähestymistapaa jatkossa.

Henkilöstövuokraukseen keskittyvää toimialasivustoa varten loin uuden räätälöidyn sisältötyypin työpaikkailmoitusten syöttämiseen. Sen avulla työpaikkojen kategorisointi onnistuu helposti paikkakuntakohtaisesti.

Suorituskyvyn optimointia silmälläpitäen kyselyjen ja lisäosien määrä on jälleen minimoitu, ja sivustolla käytetään pääasiassa vektorimuotoisia, kevyitä SVG-logoja. Sellainen toistuu itse asiassa toimialasivustoilla etusivun otsakekuvan taustalla, huomasitko? Kuvaan uppoava kolmikirjaiminen ”AVA” jakaa otsakekuvan kolmeen itsenäiseen alueeseen omine taustakuvineen.

Sivustolle integrointiin myös Facebook-feedit ja niiden ulkoasu räätälöitiin vastaamaan muuta ilmettä.

Ulkoasukoodin tekniikan osalta tämä lienee ensimmäinen projektini pitkään aikaan, missä en ole pohjannut Foundationiin. Otin pohjalle testiin Digitoimisto Duden Air -starter-teeman ja muokkasin siitä sopivan kokonaisuuden. Responsiivisuus on totetettu siis Jeet-gridillä ja höystetty tarvittavilta osin flexboxilla.

Kiitos AVAn Takulle, Sakulle ja Mirvalle sekä Serian Tomille!

AVA Finland -konsernin sivustouudistuksessa usealle toimialasivustolle luotiin yhtenäinen, raikas ja moderni ilme. Ilmeen suunnittelusta vastasi Graafinen toimisto Serian Tomi. Samalla sivustot tuotiin WordPress-julkaisualustalle. Toimialasivustot toteutettiin WordPressin multisite-ominaisuudella. Yksittäiset sivustot käyttävät… Lue artikkeli ”AVA Finland -konserni” kokonaan »

avaprorent.fi
AVA Finland -konserni