Maanantaina, 10.6.2019

Dude.fi loi nahkansa – esittelyssĂ€ uusi sivusto

Puristettiin uudet sivut kasaan kevÀÀllÀ 2019 vaikka vÀkisin. TÀssÀ kirjoituksessa avattu projektin tavoitteet ja lopputulos auki niin koodin kuin visujenkin osalta.

TÀmÀ kirjoitus saattaa sisÀltÀÀ vanhentunutta tietoa, sillÀ se on julkaistu yli 3 vuotta sitten.

Blogin hiljaiselosta huomaa, ettÀ kevÀt on ollut touhua tÀynnÀ. Joka ukko on kiinni asiakashommissa, mutta silti kuin ihmeen kaupalla on saatu venytettyÀ vuorokautta ja viikkoa sen verran, ettÀ omaa uutta sivustoa on kehitetty pÀivÀtasolla eteenpÀin. TÀllÀkin kertaa avaamme blogissamme mikÀ tÀssÀ meidÀn saitissa on nyt sitten niin uutta ja hienoa. Nyt on vihdoin aika esitellÀ työn hedelmÀt.

Julkaisimme sivuston perjantaina itseironisesti, emme nimittÀin perjantaijulkaisuja tee. Viikonloppuna ei kuitenkaan isompia tulipaloja syttynyt, joten nyt kehtaa avata sivustoa vÀhÀn enemmÀn auki kaikelle kansalle.

LÀhtökohdat

Edellinen sivusto työstettiin 2016-2017 ja julkaistiin tammikuussa 2017. Tuolloin saatiin Duden brÀndin elementit melko kokonaisvaltaisesti kasaan fontteja myöten. 2-3 vuotta on kuitenkin todella pitkÀ aika sivustolle, varsinkaan jos sitÀ ei jatkokehitÀ sÀÀnnöllisesti. Duden silloisissa sivuissa alkoi tökkimÀÀn mm. turha kikkailu esimerkiksi valikoissa ja elementtien tyyli, jossa tekstiÀ lÀntÀttiin kuvien pÀÀlle.

TehdÀÀn asiat kerrankin ”oikein”

PerÀÀnkuulutamme asiakkaallekin sisÀllön tÀrkeyttÀ. TekstiÀ ja kuvia olisi suotava olla lÀjÀpÀin valmiina ennen kuin mitÀÀn aletaan suunnittelemaan. Muuten tulee sitÀ Lorem ipsumia joka paikkaan ja lÀhdetÀÀnkin tunkemaan massoittain tekstiÀ pienille alueille, jotka eivÀt sitten vÀlttÀmÀttÀ edes palvele sitÀ lopullista kÀyttötarkoitusta.

LÀhdimme siis työstÀmÀÀn sivustoa kerrankin sisÀltö edellÀ. NÀin olisi pitÀnyt tehdÀ kautta aikojen, mutta parempi myöhÀÀn kuin ei milloinkaan. Pidimme ensimmÀisen sisÀltöpalaverin huhtikuun alussa. LauantaipÀiviÀ piti tÀhÀn varata, koska arkipÀivisin oli sen verran kiire, ettei kaikkia ukkoja saanut saman pöydÀn ÀÀreen millÀÀn pÀÀ tÀysillÀ mukana menossa.

EnsimmÀisiÀ etusivun hahmotteluja.

Tiukat tavoitteet aikataulun ja laadun suhteen

SiitÀkin huolimatta ettÀ elettiin jo pitkÀllÀ huhtikuuta, asetimme talon sisÀiseksi deadlineksi kesÀkuun ensimmÀisen viikon. Se tavoite tÀytettÀisiin vaikka pÀÀllÀmme pomppien. Leiska syntyi muutamassa viikossa ja koodihommat aloitettiin 9.5., julkaisupÀivÀksi muodostui lopullisesti 7.6.2019.

NÀin tiukkaan tulokseen pÀÀstiin yksinkertaisesti oikomalla mutkia suoriksi asioissa, joihin tiesimme ettÀ aikaa ei kannata kÀyttÀÀ. Esimerkiksi jokaisen palaverin agenda oli suunniteltu etukÀteen. Jokainen sai tehtÀvÀkseen kirjoittaa tietyn sivun tekstit tai miettiÀ kuvia.

ViimeisiÀ bugeja metsÀstÀmÀssÀ.

Varsinaisen työstön osalta keskeisin aikaa sÀÀstĂ€vĂ€ tekijĂ€ oli se, ettĂ€ yksinkertaisesti kovakoodasimme suurimman osan asioista. TiedĂ€n, meitĂ€kin se vĂ€hĂ€n ellotti, mutta onko tarkoituksenmukaista toteuttaa tĂ€ysiverisille tekijöille samanlainen toteutus kuin asiakkalle – siis tĂ€ysin pĂ€ivitettĂ€vissĂ€ oleva sivusto, etenkin kun kuka tahansa meistĂ€ pystyy pĂ€ivittelemÀÀn sisĂ€ltöjĂ€ vaikka GitHubin kautta suoraan koodiin? tekstit pĂ€ivittyvĂ€t sen verran harvoin, ettĂ€ ei ole mitÀÀn mieltĂ€ kĂ€yttÀÀ kymmeniĂ€ tai jopa satoja tunteja taustajĂ€rjestelmĂ€n rakentamiseen.

Varsinaiseen koodaamiseen aikaa meni 120 tuntia, 55 minuuttia. Vertailukohteena voi kĂ€yttÀÀ viime julkaisun mÀÀreitĂ€: 201 tuntia, 9 minuuttia – aika paljon nopeammin hoitui siis!

Visuaalinen suunnittelu takaisin ja palvelut uusiin kuosiin

Aiemmin palveluitamme olivat Verkkosivut ja Verkkokaupat. Jotkut jopa ihmettelivÀt kun kuulivat, ettÀ meiltÀ saa leiskat ja logotkin. NiitÀhÀn me ollaan aina ennenkin tehty, ei olla pelkÀstÀÀn tekninen toteuttaja. LisÀksi perusteltiin aiemmin tyhmÀsti sitÀ miksi WordPress on hyvÀ, eikÀ sitÀ miksi meiltÀ kannattaa se WordPress palveluna ostaa.

SiispĂ€, Visuaalinen suunnittelu on nyt oma palvelukokonaisuutensa ja Verkkosivut -puolella puhutaan siitĂ€ miten me tehdÀÀn enemmĂ€n kuin siitĂ€ mitĂ€ WordPress on – se kun on kaikille jo jokseenkin tuttu alusta. Ja hommahan rokkaa.

Minimalistisuus

Aiemmat sivustommekin ovat olleet melko hillittyjĂ€, mutta nyt mentiin alusta asti ”vĂ€hemmĂ€n on enemmĂ€n” -mentaliteetillĂ€. Niin sivuston ylĂ€- kuin alaosastakin karsittiin turhat asiat pois. Esimerkiksi tukisĂ€hköpostiamme emme viljele enÀÀ sivuston puolella, sinne tuli aina silloin tĂ€llöin viestejĂ€, jotka eivĂ€t liittyneet yllĂ€pitoon tai kĂ€yttötukeen.

Samalla kaavalla karsittiin henkilöesittelyistÀ turhat numerot ja nippelitiedot pois. Se oli silloin kolme vuotta sitten ihan hauska ajatus, mutta nyt jopa vanha somesankari oli valmis luopumaan pakkomielteisistÀ statseista.

BrÀndi ja kuvat

Aiemmin tehostevÀrinÀmme on vilahdellut lohenpunaista tai haalean keltaista, mutta tÀnÀ vuonna palasimme juurillemme, mustavalkoisuuteen. TehostevÀrejÀ emme juuri enÀÀ kÀytÀ, sillÀ yksinkertainen toimii tÀssÀkin. VÀriÀ ja tehokeinoja haetaan valokuvien kautta. TÀllÀkin kertaa valokuvamme otti maanmainio hovikuvaajamme Emmi Virtanen. Valokuvasta ja kuvapankista tuli aivan tÀydellinen. Kiitos Emmi!

Kuvituskuvaa tuloillaan.

Otettiin me pari omaakin kuvituskuvaa, esimerkiksi ylhÀÀltÀ kuvatut pÀÀkuvat palveluiden alla oikeassa laidassa ovat itse ottamiamme:

Fonttina sÀilytettiin Neuzeit Grotesk, joka on ollut aiemmin leipÀtekstikÀytössÀ. Fontista kÀytetÀÀn enimmÀkseen Light (300) -leikkausta ja ohuenahan tuo tuntuukin toimivan kaikista parhaiten.

Anarkistisuus

Kaikki sivustot alkavat nykyÀÀn valkoisella taustalla ja tekstillÀ. Kuvat ovat yhÀ enemmÀn pienemmÀssÀ roolissa, wall of text hallitsee. Me pÀÀtimme pistÀÀ jyrkÀsti tÀtÀ trendiÀ vastaan ja laittaa sivuston lÀhdön mustaksi.

Copywriting eli teksti

TekstiĂ€ suollettiin porukalla. Suunnittelijamme Juhan lentĂ€vĂ€t lauseet jĂ€ivĂ€t moneen paikkaan elĂ€mÀÀn, koska paras teksti on sellainen, jota lueskellessa hymyilyttÀÀ tai jopa naurattaa sopivasti. Vuoden 2019 sloganimme onkin ”Rennosti, mutta tosissaan”, kuten yritysesittelysivullamme seisoo.

Ulkoasu

Olemme hiljalleen siirtyneet pois perinteisestÀ Adobe Photoshop-maailmasta prototyyppaustyökaluihin, joista Adobe-tuoteperheen XD on osoittautunut kenties kÀtevimmÀksi. Spec-nÀkymÀ antaa devaajalle valmiiksi joitakin parametreja ja työkalulla saa aikaan kliksuttelueventtejÀ ja muita kivoja juttuja vielÀkin nÀppÀrÀmmin kuin esimerkiksi Invision Appissa.

Leiskahahmotelmia.

Optimointi

TÀllÀkin sivustolla on keskitytty sivuston latausnopeuteen. Kuvat eivÀt lataudu kerralla, vaan ladataan customin lazyload.js:n kautta ainoastaan silloin kun kÀvijÀ on kuvan kohdalla selaamalla. TÀtÀ lataamisprosessia on tehty kivemman nÀköiseksi animoimalla kuvan latautuminen utuisen elementin tilalle.

Taustalla hyrrÀÀ perinteisten nginx-pagespeedien ja php-cachejen lisÀksi Redis-vÀlimuistitustekniikka, jolla saadaan lisÀÀ pökköÀ pesÀÀn. Testausta tehdÀÀn yhÀ, jotta saadaan tÀstÀ vielÀ sutjakkaampi.

Saavutettavuus

A11y (Accessibility, ”a + 11 kirjainta + y”) eli saavutettavuus on Dudelle hengen asia. Screen-reader-text, landmarkit ja aria-mÀÀreet ovat joka projektissa aktiivisessa kĂ€ytössĂ€. MikĂ€ tĂ€rkeintĂ€, selkeĂ€sti rakennettu HTML. Huom, sana on nykyÀÀn ”saavutettavuus” (”esteettömyys” viittaa rakennelmiin ja ei-tietoekniseen):

Saavutettavuus on yhdenvertaisuuden edistÀmistÀ. Saavutettavuus tarkoittaa kohteen tai verkkopalvelun helppoa lÀhestyttÀvyyttÀ kaikille ihmisille. Saavutettavuudella on useita eri osa-alueita.

Haitarit, valikot ja muut ovat selattavia nÀppÀimistöillÀ ja ruudunlukulaitteilla. Kokeile vaikka, alt + tab, shift + alt + tab, enter esc, nuoli ja space-nÀppÀimillÀ. Et tarvitse hiirtÀ.

Yhteisö & koodi

Tarkkaavaisimmat huomaavat, ettĂ€ ”Koodiluola” -easter egg on poistunut valikosta ja sen tilalle on tullut mystinen ”Yhteisö & koodi” -sivu. TĂ€llĂ€ sivulla esittelemme yhteisöön osallistumistamme, handbookiamme sekĂ€ avoimen lĂ€hdekoodin toteutuksiamme. Sivusta tehtiin hieman yksinkertaisempi kuin aiemmin, turhat hötöt pois ja pelkkÀÀ asiaa tilalle. Sivu on myös pohjana Vierityspalkin kolmen tĂ€hden ansiomerkille.

TÀmÀkin sivusto löytyy muuten avoimena GitHubista.

Gutenberg

Jep, meillÀ on WordPressin uusi editori kÀytössÀ. Mutta vain bloggauksissa ja työnÀytteissÀ. Editorilla on kÀtevÀmpi lisÀtÀ esimerkiksi tekstipalstojen ulkopuolelle kuvia. Leiskan rakentamiseen on yhÀ kivoin kÀyttÀÀ omia tuttuja ACF-kenttÀryhmiÀ kuin lÀhteÀ rakentelemaan Gutenberg-blockeja.

Muutokset yrityksessÀ

Dudesta on kasvanut isompi vuoden sisÀÀn niin toimiston kuin henkilöstönkin osalta,