Avainsana: responsiivinen

Kehys-Art Seinäjoki

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

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

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

Vastuullinen eränkäynti

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

Suomen riistakeskus

Suomen riistakeskuksen sivustouudistusta lähdettiin suunnittelemaan joulukuussa 2017 starttipalaverilla keskustoimistolla Helsingin Tapanilassa. Tavoitteena oli tehdä sivustosta käytettävämpi rakenteellisesti, modernisoida ulkoasua ja tuoda uutisia ja muita tärkeitä toimintoja näkyvämmäksi

Yhteyshenkilönä riistakeskuksen puolelta toimi viestintäsuunnittelija Tero Kuitunen. Hän on tuttu jo monen vuoden ajalta, toimiessaan entisessä tehtävässään Riista-lehden päätoimittajana (toteutin lehden sivut urani alkupuolella).

Sivusto sisältää satoja alasivuja ja artikkeleita neljällä eri kielellä. Lisäksi sivustolla on monia räätälöityjä toimintoja kuten koulutus- ja yhteystietohakuja. Näitä toimintoja on alunperin laadukkaasti toteuttanut H1 (nykyinen Zeeland Family).

Tein ulkoasusuunnitelman ja toteutuksen itse. Keskiössä olivat kauniit kuvat, ajankohtaiset uutiset ja tärkeät nostot sisällöstä. Toteutus on jälleen asiakkaankin näkökulmasta modulaarinen, eli toteutetuista sisältöelementeistä voi rakentaa haluamiaan ulkoasuja helposti. Olemassaolevat toiminnot säilytettiin, muotoilut uudelleenrakentaen.

Olin jo pitkään halunnut tehdä jotain fullscreen design -periaatteella; elementit täyttävät ruudun laidasta laitaan isollakin resoluutiolla, ja silti sivusto mukautuu hienosti myös mobiiliin. Valu Digitalin toimari on kirjoittanut hyvin fullscreen designista. Tässä siis oli oiva projekti ottaa käyttöön koko ruutu.

Uutuutena sivustolle integroitiin ennakoiva hakumoottori AddSearchin avulla. Tämä korvaa WordPressin oman hakumoottorin ja mahdollistaa esimerkiksi hakutulosten painottamisen. Hakumoottori indeksoi sekä pääsivuston että Riistainfon ja näyttää hakutuloksia ristiin kummastakin. Tulokset tulevat salamannopeasti jo parilla alkukirjaimella esikatselukuvan kera — kokeile hakua ihmeessä!

Sisältöä sivustolle haetaan useista rajapinnoista, kuten Oma Riista -palvelun rajapinnasta (metsästyskiintiöt) sekä Viidakkomonitorin mediaseurantatuloksista.

Valu Digital vastasi sivuston kanssa lähes käsi kädessä julkaistun Riistainfon suunnittelusta ja toteutuksesta. Sivustojen ulkoasua pyrittiin yhtenäistämään yhdessä Valun asiantuntijoiden kanssa, jotta ne näyttäisivät mahdollisuuksien mukaan saman toimijan sisarsivustoilta.

Suomen riistakeskuksen riista.fi-sivusto palvelee metsästäjiä ja kaikkia riista-asioista kiinnostuneita. Merkittävän osan sivuston sisällöstä on oltava kansalaisten saatavilla helposti  ja ajan tasaisena.

Tätä taustaa vasten ajatus sivuston uudistamisesta aiheutti meissä tiettyä hermostuneisuutta, joka kuitenkin karisi nopeasti projektin käynnistyttyä. Kaikki eteni aikataulussa ja myös matkan varrella ilmaantuneet ideat toteutettiin leppoisassa ilmapiirissä.

Saimme haluamamme, ilman turhia sydämentykytyksiä.

Tero Kuitunen

Kiitos Suomne riistakeskuksen väelle; Terolle, Mirjalle ja Klausille. Jatketaan tästä kehitystyötä eteenpäin!

 

Suomen riistakeskuksen sivustouudistusta lähdettiin suunnittelemaan joulukuussa 2017 starttipalaverilla keskustoimistolla Helsingin Tapanilassa. Tavoitteena oli tehdä sivustosta käytettävämpi rakenteellisesti, modernisoida ulkoasua ja tuoda uutisia ja muita tärkeitä toimintoja näkyvämmäksi Yhteyshenkilönä riistakeskuksen puolelta… Lue artikkeli ”Suomen riistakeskus” kokonaan »

riista.fi
Suomen riistakeskus