Avainsana: <span>sivuston toteutus</span>

Tampereen ammatti­korkea­koulun opiskelija­kunta (Tamko)
Portfolio Web

Tampereen ammattikorkeakoulun opiskelijakunta (Tamko) on opiskelijalähtöinen edunvalvoja, joka pitää huolen siitä, että opiskelijoiden ääni kuuluu.

Kumu Communicationsin kanssa päästiin pitkästä aikaa tekemään yhdessä projektia. Kumu veti projektia, määritteli asiakkaan kanssa kohderyhmät jne. Sivuston ulkoasun suunnitteli Tanja Ritvanen. Minä toteutin WordPress-teeman ja integraatiot. Yhteyttä pidettiin projektin edetessä Kumun Slackissä.

Sivusto suunniteltiin täyttämään saavutettavuusstandardin WCAG 2.0 AA-taso, ja toteutuksen edetessä varmistin teknisen saavutettavuuden sekä WebAIMin WAVE-palvelulla että Chromeen asennettavan aXe-lisäosan avulla. Sivusto täyttää kriteerit teknisen saavutettavuuden osalta, ja sisällöntuottamisessa on apuna sekä ennaltamääritellyt saavutettavat väriyhdistelmät että muutama räätälöity lohkotyyppi WordPressin lohkomuokkaimelle.

Sivujen muokkauskokemus nojaa kokonaan WordPressin uuteen Gutenberg-lohkoeditoriin, joka on ottanut huimia askeleita eteenpäin. Sisäänrakennettuja lohkoja muokattiin projektia varten, ja muutama oma lohko tehtiin vain Tamkolle. Lohkojen ulkoasu on muokkauspuolella mahdollisimman identtinen julkisen puolen kanssa.

Opiskelijaravintola Campusravitan ruokalista integroitiin osaksi etusivua. Ruokalistan saa JSON-syötteenä ruokatuotantopalvelu Jamixin pilvestä. Ruokalista tallennetaan WordPressin välimuistiin eli transienttiin, jolloin vältetään useat rajapintakyselyt.

Etusivun someseinä toteutettiin Taeggien palvelun avulla; Taeggieen voi määritellä halutut sosiaalisen median tilit, ja palvelu tarjoaa niistä aggregoidun JSON-syötteen, joka luetaan ja muotoillaan asiakkaan tyylein ja värein.

Kiitos Kumun Elina ja Auli, Tanja sekä Tamkon Katriina, Jenni & Emmi! Mahtava projekti!

Tampereen ammattikorkeakoulun opiskelijakunta (Tamko) on opiskelijalähtöinen edunvalvoja, joka pitää huolen siitä, että opiskelijoiden ääni kuuluu. Kumu Communicationsin kanssa päästiin pitkästä aikaa tekemään yhdessä projektia. Kumu veti projektia, määritteli asiakkaan kanssa… Lue artikkeli ”Tampereen ammatti­korkea­koulun opiskelija­kunta (Tamko)” kokonaan »

tamko.fi
Tampereen ammatti­korkea­koulun opiskelija­kunta (Tamko)

Kehys-Art Seinäjoki
Portfolio Web

Seinäjokelaisen kehys- ja taidetarvikeliike Kehys-Artin sivuston uudistus pohjautui tarpeeseen korvata valmisteemalla toteutettu, aikaisemman omistajan alullepanema ulkoasu uudella, minimalistisella ilmeellä. Samalla vaihdettiin webhotellin palveluntarjoajaa, ja uusi koti löytyi jälleen Shellit.orgista.

Sivuston sisältö päätettiin toteuttaa yhden sivun turvin ja projektin budjetti pidettiin tarkoituksella niukkana. Tätä silmälläpitäen valitsin toteutustavaksi täysin WordPressin uuteen visuaaliseen lohkoeditoriin, Gutenbergiin, pohjautuvan toteutuksen. Kevyen perusteeman päälle toteutin Gutenbergin sisäänrakennetuilla lohkoilla eli visuaalisilla rakennuspalikoilla kevyen kokonaisuuden, johon nostettiin asiakkaan logosta korostusvärit.

Sivuston muokkauskokemus lohkoeditorissa on visuaalisesti yksi yhteen julkisen puolen kanssa; samat välistykset ja marginaalit, kirjasimet ja koot, värit yms. Näitä varten tein lohkoeditoriin räätälöidyt väripaletit ja kirjasinkokovalinnat. Lisäksi editoriin ladataan käyttöön sama tyylitiedosto kuin julkisellekin puolelle.

Sivuston suoristuskyvyn takaamiseksi tein muutaman perusratkaisun; logo on SVG-muodossa ja kirjasin on myös natiivi Arial, ei siis ulkoisia riippuvuuksia. Kuvat ladataan laiskasti (lazy loading), ja se onkin ainoa toiminnallinen lisäosa sivustolla. Sivusto onkin varsin nopea ja saa Google PageSpeed Insights -testissä täydet 100 pistettä. Kuvien kokoja en vielä osannut Gutenbergin osalta räätälöidä, tuossa ja muissa sen uusissa aspekteissa riittää opeteltavaa.

Instagram-kuvien automatisoituun hakemisteen toteutin kevyen rajapintaintegraation Instagram Basic Display APIa hyödyntäen. Sen avulla saadaan tuoreimmat Instagram-kuvat haettua sivulle automaattisesti.

Kiitos projektista ja onnea uusille sivuille, Eija-Tiina!

Seinäjokelaisen kehys- ja taidetarvikeliike Kehys-Artin sivuston uudistus pohjautui tarpeeseen korvata valmisteemalla toteutettu, aikaisemman omistajan alullepanema ulkoasu uudella, minimalistisella ilmeellä. Samalla vaihdettiin webhotellin palveluntarjoajaa, ja uusi koti löytyi jälleen Shellit.orgista. Sivuston… Lue artikkeli ”Kehys-Art Seinäjoki” kokonaan »

kehysart.fi
Kehys-Art Seinäjoki

Business Design HUG
Portfolio Web

Business Design HUG on ystäväni Yukakon uusi yritys, joka auttaa brändejä kansainvälistymään ja yrityksiä pääsemään Japanin markkinoille.

Yukako itse on käsityöläinen ja hänen ensimmäiset edustamansa brändit ovat myös tekstiilialan toimijoita. Lähdin suunnittelemaan siis näyttävää etusivua, jossa asiakkaiden värikkäät kuosit ja promokuvat pääsisivät framille. Etusivun kuvaseinään ladataan satunnainen otos promokuvia.

Muu sivusto on minimalistinen ja käsittelee itse palveluita sekä brändejä. Myöhemmin on tulossa myös blogi. Sisältö on tarjolla aluksi sekä englanniksi että japaniksi.

Teknisen toteutuksen osalta brändit ovat oma räätälöity sisältötyyppinsä, jonka tietoja pääsee täydentämään ACF:llä luoduilla kentillä. ACF:ää käytetään myös tuottamaan etusivun hero-kuvan sisältö. Isot kuvat ladataan vasta muun sisällön jo latauduttua, joten tuntuma pysyy reippaan vauhdikkaana. Lisäosien määrä on erittäin pieni (Polylang monikielisyyteen, ACF sisältökentille), eikä ulkoisia riippuvuuksia integroitua lazysizes-skriptiä lukuunottamatta ole.

Domo arigato, Yukako!

Business Design HUG on ystäväni Yukakon uusi yritys, joka auttaa brändejä kansainvälistymään ja yrityksiä pääsemään Japanin markkinoille. Yukako itse on käsityöläinen ja hänen ensimmäiset edustamansa brändit ovat myös tekstiilialan toimijoita…. Lue artikkeli ”Business Design HUG” kokonaan »

businessdesignhug.fi
Business Design HUG

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