Tiistaina, 10.6.2019

Dude.fi loi nahkansa Рesittelyssä uusi sivusto

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, tästä juttua myös Vierityspalkissa. Yrityksen tietynlaista kasvua ja mentaliteettia haluttiin tuoda myös uuden sivuston kautta esille. Vaikka olemme rento ja leppoisa jyväskyläläistoimija, löytyy myös laadukkuutta ja särmää. Vanhat sivut eivät enää parhaalla mahdollisella tavalla palvelleet nykytilannetta.

Mitäs muuta?

Talon sisällä on ainakin vielä tarjouspohja sekä handbook kehittymässä uuden ilmeen näköiseksi. Tätä varsinaista sivustoa rämpätään vielä meidänkin päässä, mutta pistä ihmeessä viestiä jos spottaat bugin! niitä nimittäin saattaa vielä löytyä, julkaisusta on aikaa muutama päivä.

Blogin kommentointia meillä ei ole nykyään enää käytössä, sinne ei tullut mitään vuoteen. Keskustelu käydään Twitterissä, Facebookissa ja Instagramissa. Alta voit kuitenkin antaa vapaamuotoista palautetta sivustosta, joka tulee suoraan meille.

Pullopostia?

Koottuja kuulumisia sisältävä bittivirtojen pulloposti saapuu rantaasi noin kolmen kuukauden välein.