Toteutuneita töitä

WordPress-editorin kustomoidut lohkot

Verkkosivuja rakentaessa tulee huomioida tulevan sivuston ylläpitäjät ja heidän tarpeensa. Toisaalta on hyvä huolehtia myös siitä, että sivustolle suunniteltu ulkoasu pysyy tietyissä raameissa, vaikka sisältöä muokattaisiinkin jälkikäteen.

Gutenberg-editori

WordPressin uusi Gutenberg-editori perustuu lohkoihin (block), ja antaa sisällöntuottajalle aivan uusia mahdollisuuksia vaikuttaa sivujen sisällön asetteluun. Tästä voi kuitenkin seurata tilanteita, joissa huolella suunniteltu ulkoasu pääsee rakoilemaan riittävän monien päivitys- ja asettelumuutosten jälkeen.

Asiakaskohtaisten lohkojen luominen

Advanced Custom Fields -niminen lisäosa on ollut pitkään kehittäjien suosiossa sen monipuolisuden ansiosta. Tuoreimmasta 5.8 versiosta alkaen ACF (Pro) on tarjonnut mahdollisuuden omien lohkojen luomiseen. Nämä lohkot toimivat WordPressin editorissa käytännössä natiivien lohkojen tavoin, ja avaavat kehittäjälle kohtalaisen helpon tavan laajentaa ja hallita sisätöeditorin tarjoamia mahdollisuuksia.

Lohkot voidaan rekisteröidä acf_register_block_type()-funktion avulla, ja niille koodataan omat mallineensa, joiden avulla määritellään niiden ulkoasu ja rakenne.

Usein toistuvista kokonaisuuksista kannattaa luoda omia lohkoja. Kuvassa ACF:n avulla luotuja lohkoja, joista löytyvät valmiit paikat tietyille sisällöille.

Hyöty asiakkaalle

Usein toistuvia sisältökokonaisuuksia varten luotu sekä kuvaavasti nimetty lohko helpottaa vaikkapa toistuvien, melko samantyyppisten elementtien tuomista osaksi WordPress-sivujen sisältöä. Esimerkiksi artikkelia luodessa on helppo keskittyä sisällön tuotantoon ja käyttää valmiita ennalta sovittuja lohkoja tietyissä paikoissa tukemassa viestiä.

Lohkojen käyttöä on mahdollista rajoittaa artikkelin kategorian tai kirjoittajan mukaan vaikkapa niin, että Matin kirjoittaessa omia leivonta-aiheisia artikkeleitaan, tarjolla ovat kyseiseen aihepiiriin räätälöidyt valmiit tai puolivalmiit elementit.

Kätevää, eikö?

🙂

Oman lohkon kenttäryhmä ACF:n editorissa. Lisäksi lohko rekisteröidään ja sille koodataan oma template, joka lopulta määrää, miltä lohko näyttää sivustolla.

Webhotelli kotisivuille ja sähköposti

WordPress kotisivuja varten hankitaan levytilaa verkkopalvelimelta. Usein helpoin ja sopivin tapa on tilata webhotellipaketti eli palvelu, joka pitää sisällään kaiken tarvittavan, jotta sivusto voidaan julkaista verkossa.

Webhotellipaketti on myös turvallinen vaihtoehto, sillä tällöin palvelimen toimivuudesta huolehtii kellon ympäri joukko alan ammatilaisia.

Monilla palveluntarjoajilla on käytössä cPanel-käyttöliittymä, jolla onnistuvat esim. postitilien ja tietokantojen luonti, tiedostojen selaaminen ja muokkaaminen ynnä muut tarvittavat toimenpiteet.

Sähköposti

Monet webhotellipaketit pitävät sisällään mahdollisuuden luoda sähköpostitilejä omalla verkkotunnuksella. Sähköpostit voidaan noutaa webhotellin postipalvelimelta omalle tietokoneelle ja kännykkään.

Webhotellin postipalvelimen sähköposteja pystyy lukemaan ja lähettämään myös esimerkiksi Googlen gmail-palvelua käyttämällä.

Myös erillisen postipalvelut, kuten Googlen Gsuite tai Microsoftin Office 365 on mahdollista ottaa käyttöön. Tällöin webhotellin postipalvelimen sijaan postit ohjautuvat näihin palveluihin.

Oletko teettämässä kotisivuja?

Pyydä tarjous Sivusepältä, ja katsotaan samalla webhotelliasiat kuntoon.

cPanel-käyttöliittymä Suomen Hostinpalvelun webhotellissa

Yhteisöllisen työhuoneen verkkosivut

Lähtökohta:

Tampereella toimiva yhteisöllinen työtila Työhuone Kulma päivitti verkkoilmettään ja kotisivujaan, ja koska satun työskentelemään kyseisellä työhuoneella, niin kotisivuprojektin toteuttajaa ei tarvinnut etsiä kaukaa 🙂

Sivut ovat ulkoasultaan modernin yksinkertaiset, ja sen ansiosta oleellinen sisältö nousee pääosaan. Työhuoneen sivujen sisällön määrä päätettiin pitää kohtuullisena, ja näin ollen yksisivuinen esittelysivu oli luonnollinen ratkaisu.

Sivut toimivat erittäin hyvin myös mobiililaitteilla.

https://tyohuonekulma.fi

Kotisivut tamperelaiselle työhuoneelle

Kotisivut ja logo valmentajalle

Lähtökohta:

Pyykkilauta liikunta- ja hyvinvointipalveluiden yrittäjä Roope Kylmäkoski päätti siirtyä henkilökohtaisen valmentajan urallaan täysipäiväiseksi yrittäjäksi, ja samalla palvelut piti tietenkin viedä löydettäväksi myös verkkoon.

https://pyykkilauta.fi

Täsä vaiheessa oli oiva sauma suunnitella myös toiminnan luonnetta ilmentävä logo.

Yritysilme ja logo

Roopella oli alusta saakka selkeä kuva siitä, mitä hän sivustoltaan halusi. Hän on erikoistunut muiden lajien fysiikkavalmennuksen lisäksi erityisesti ratamoottoripyöräilijöiden kausikohtaisiin valmennusohjelmiin, ja logoon ja muuhun ilmeeseen haettiinkin heti kunnon ralli-fiilistä. Roope erottuukin yritysilmeellään perinteisistä personal trainer -yrittäjistä.

Sivustoprojekti toteutettiin tiiviissä yhteistyössä, ja Roope kommentoi ja ohjasi kehityksen suuntaa tavoitteensa mukaisesti.

Kotisivut Personal Trainerille
Kotisivut liikunta- ja hyvinvointipalveluile

Selkeä tarjous

”Mikon kanssa toimiessa homma oli alusta alkaen mutkatonta ja tuli tunne, että homma on luotettavissa käsissä. Työstä sai kattavan ja selkeän tarjouksen ja vaivaa oli nähty hahmottelemalla yrityksen logosta esimerkki jo osana tarjousta.”

Kirkkaasti parempaa

”Mikon tekemät ratkaisut paransivat selkeästi palveluiden kuvauksia, loivat yritykselle haetun verkkoimagon sekä selkiyttivät myös omia ajatuksia yrityksen tarjonnasta.”

Ketterää kehitystä

”Sivujen kehittely tapahtui hyvässä yhteistyössä ideoita pallotellen ja Mikko reagoi palautteeseen hyvin nopeasti vieden kehitystä asiakkaan haluamaan suuntaan.”

Lisäarvoa tekemiseen

”Arvoa syntyi siis enemmän kuin oikeastaan lähdettiin pelkillä www-sivuilla hakemaan. Työ valmistui aikataulussa, budjetti pysyi tarjouksen mukaisena ja lopputulos oli juuri sen mukainen kuin lähdettiin hakemaan.”

-Roope Kylmäkoski, henkilökohtainen valmentaja

Kotisivut ja logosuunnittelu

Lähtökohta:

Pirkanmaan Saneerauspalvelun verkkoilme ja logo kaipasivat uudistusta. Aika oli ajanut verkkosivuston ulkoasun ohi, eikä sivusto skaalautunut mobiilaitteille.

Pidimme asiakkaan kanssa palaverin kahvikupposten äärellä. Toin tapaamiseen alustavan hahmotelmani sivuston tyylistä ja logosta.

Palaverin annin pohjalta lähdin suunnittelemaan sivuston tarkempaa sisältöä, käytettävyyttä ja ulkoasua.

Sovimme myös, että asiakas toimittaa teksti- ja kuvamateriaalia, jota sitten muokkaan sivuston tarpeisiin.

Logo

Logoon hain modernia ilmettä. Käytin yrityksen nimen lyhennettä tyylitellyn talon sisällä. Moni yrityksen vakiasiakkaista käyttää kirjainlyhennettä, joten se on luonnollinen elementti logossa. Oranssi väri toimii huomionherättäjänä.

WordPress

Asensin WordPress-alustan asiakkaan palvelintilaan alihakemistoon. Näin siksi, että vanha sivusto toimisi normaalisti, kunnes uusi sivusto olisi valmis julkaistavaksi.

Valitsin pohjaksi teeman, joka taipuu luonnostaan hyvin myös mobiilikäyttöön, ja soveltuu muutenkin hyvin tähän tapaukseen.

Kotisivut yritykselle - Sivuseppä
Referenssityö - Pirkanmaan saneerauspalvelu Logo
Pirkanmaan Saneerauspalvelulle suunnittelemani logo

Eläkesäätiön kotisivut ja logo verkkoon

Lähtökohta:

Uusi sivusto suunniteltiin palvelemaan eläkesäätiön jäsenistöä toimimalla tiedostuskanavana ja tietopankkina.

Sivuston yläosaan nostettiin selkeät linkit eläkkeen hakemiseen liittyville sivuille, joissa käyttäjä pääsee käsiksi esitteisiin ja hakulomakkeisiin.

Logo

Sivustoa varten suunnittelin logon, joka kruunaa sivuston ulkoasun ja samalla luo mielleyhtymän eläkesäätiön ja jäsenistön työnantajan välillä.

Tekniikkaa

Suunnittelin sivuston ulkoasumallin kuvankäsittelyöhjelmalla, ja rakensin sen pohjalta etusivua varten oman WordPress-sivupohjan. Sivusto pyörii hieman tavallista nopeammassa WordPress-käyttöön optimoidussa palvelintilassa, ja kevyt sivusto onkin mukavan nopea käyttää.

kotisivut eläkesäätiölle

One Pager -sivusto ja logo

Lähtökohta:

Uusi valmennuskonsepti tarvitsi tuekseen verkkosivun ja logon. Alkuvaiheessa sivusto toteutettiin yksisivuisena, josta sitä on mahdollista laajentaa myöhemmin lisäämällä alisivuja.

Sivustolla on tehty niin sanotulla fullpage-tyylillä, eli se vierittyy kokonainen ruutu kerrallaan.

Pienempiruutuisilla laitteilla sivusto vierittyy kuitenkin tavalliseen tapaan.

https://movescoaching.fi

Logo

Logoa suunnitellessani tein muutamia eri versioita sen pohjalta, mitä asiakkaan kanssa olimme asiasta jutelleet. Logoon haettiin sporttista ilmettä, ja suunta alkoi muotoutua fontin valinnan jälkeen.

Jotain siitä vielä tuntui puuttuvan, joten pyörittelin logoa ja hamottelin erilaisia asetelmia. Päädyin lopulta tuunaamaan v-kirjainta, ja useiden muotojen kautta nykyinen vauhdikas kaksiosainen ja kaksivärinen sakarapari löytyi.

Kotisivujen nopeus

Eri yrityksilä on erilaisia tarpeita kotisivujen toiminnallisuuksien osalta. Kuitenkin muutamat perusominaisuudet voidaan ajatella lähes pakollisiksi, jotta sivuston löydettävyys ja käytettävyys olisivat riittävällä tasolla.

Miksi kotisivujen latausnopeus on täkeä?

Sivuston latausnopeus on yksi merkittävä käytettävyyteen vaikuttava tekijä. Hidas sivusto käännyttää asiakkaat muualle, ja myös esimerkiksi Google nostaa nopean sivuston korkeammalle sijalle hakutuloksissaan.

On useita toimenpiteitä, joiden avulla sivuston http-pyyntöjen määrää ja ladattavia kilotavuja on mahdollista karsia.

  1. Kuvien pakkaaminen ja muuttaminen käyttötarkoitukseen sopivaan kokoon
  2. Ylimääräisten ei-niin-pakollisten ominaisuuksien säästeliäs käyttö
  3. Skripti- ja tyylitiedostojen yhdistäminen
  4. Staattisen html-version tarjoaminen selaimelle

Myös webhotellin palvelin on avainasemassa, sillä siitä riippuu paljon, kuinka nopeasti sivustoa tarjoillaan selaimelle.