Maanantaina, 8.2.2021

Verkkosivujen visuaalinen suunnittelu РNykyaikainen front end, CSS ja käyttöliittymät

Nyt puhutaan hieman koodia, mutta ei mitä tahansa koodia, vaan nimittäin tyylittelyä. Miten nykyaikainen leiskan taitto tapahtuu? On CSS, SCSS ja Visual Studio Code -editori. Tarvitaanko muuta? Lue lisää alta.

Dudelle on alusta asti ollut tärkeää tekeleiden tyylikkyys ja laadukkuus, jotka kulkevat käsi kädessä. Sillä on väliä miltä sivusto näyttää. Tästä syystä emme koskaan tule käyttämään valmisteemoja tai muita valmispaketteja, vaan tyylittelemme kaiken itse tekemällä puhdasta suomalaista käsityötä.

Verkkosivuja suunnittelevana digitoimistona suunnittelemme ulkoasut itse. Suunnittelun kulmakivet lähtevät visuaalisesta suunnitelmasta, eli miltä asiat näyttävät. Projektin kickoffin, eli aloituspalaverin määrittelyn jälkeen tämä on heti ensimmäinen vaihe, jossa suunnittelija hahmottelee toiveiden ja omien ajatustensa perusteella sivuston ulkoasun (alatermein leiskan, engl. layout) näkymä kerrallaan. Työstön aikana otetaan huomioon visuaalisten elementtien taustalla olevat toiminnallisuudet ja tyylittelyasiat käymällä niitä läpi kehittäjien, eli koodareiden kanssa.

Koodareita on yleens√§ kahdenlaisia, niinsanottuja ”fronttareita”, ”fronttaajia” tai ”fronttikoodareita” (engl. front-end developer) ja ”b√§kk√§reit√§” tai taustakehitt√§ji√§ (engl. back-end developer). Fronttikoodarin voi my√∂s jossain m√§√§rin mielt√§√§ visuaaliseksi suunnittelijaksi, sill√§ fronttaajalla on usein visuaalista silm√§√§, h√§n on tiiviiss√§ tekemisiss√§ suunnitteluprosessissa suunnittelijan kanssa ja toisinaan jopa suunnittelee kokonaisia leiskan osia itse, jos visuaalinen suunnittelija ei ole leiskannut n√§kymi√§ tai leiskoja ei syyst√§ tai toisesta ole j√§rke√§ erikseen kyseiseen kohtaan visualisoida.

Joissakin yrityksissä taitava fronttikoodari saattaa hoitaa sekä visuaalisen suunnittelun että koodaamisen kokonaan itse. Onneksi meillä on kuitenkin kaksi maailmanluokan suunnittelijaa, koska kaksi näin massiivista osa-aluetta on melko iso pala kakkua yhdelle ihmiselle. Freelancerit, jotka liiketoiminnan pyörittämisen lisäksi hoitavat leiskaamisen, koodaamisen, julkaisemisen ja vielä palvelimetkin ovat yleensä yksisarvisia (engl. full stack developer), joilla on riskinä palaa loppuun ilman apukäsiä.

Tämä artikkeli käsittelee visuaalisuuden toista osaa, fronttikoodausta eli käytännössä CSS:ää, HTML:ää, vähän JS:ää ja käyttöliittymiä, jotka olivat aikoinaan 10-vuotiaan meikäpojan ensi-ihastus web-koodailussa.

Valmiit visuaaliset ratkaisut vs. oma koodi

On totta, ett√§ etenkin nyky√§√§n 2020-luvulla open source jatkaa voittokulkuaan ja netti on pullollaan erilaisia palikoita, joista ty√∂st√§√§ verkkosivuja. WordPress-maailmassa WordPress-teemoja l√∂ytyy kirjoittamishetkell√§ teemakirjastosta yhteens√§ 3943 kpl, joista yksi on meid√§n aloitusteemamme Air-light (muistutan t√§ss√§ kohtaa, jos k√§yt√§t teemaamme, √§l√§ k√§yt√§ sit√§ WP-teemakirjaston kautta vaan suoraan GitHubin ohjeiden mukaisesti). Valmiissa teemoissa on kuitenkin omat ongelmansa, joita on avattu mm. edelleen paikkaansa pit√§v√§ss√§ kirjoituksessamme WordPress-verkkosivut ‚Äď r√§√§t√§lille vai markettiin? (2017).

Netist√§ l√∂yt√§√§ pikkusummilla ”valmiita” ulkoasuja, esim. Themeforestista, mutta v√§it√§n niinkin t√∂rke√§sti, ett√§ vain laiskat rahastajat k√§ytt√§v√§t n√§it√§. Valmiista on yleens√§ ty√∂l√§√§mp√§√§ l√§hte√§ raapimaan tauhkaa pois, kun tarvitaan oikeasti r√§√§t√§l√∂ity√§.

Tyylittelyn apupaketteja, esimerkiksi erilaisia CSS frameworkeja löytää helposti ilmaiseksi GitHub-haulla, mutta emme käytä edes näitä. Joskus alkuvaiheessa oli jokin bootstrapin pikkupalikka mukana nykyistä pohjateemaamme edeltävässä aloitusteemassa, mutta sekin putosi pian pois kun löysimme tavan tehdä samat asiat itse. Suositut Bulma, Tailwind ja Milligram ovat nykyään parempia ja kehittyneempiä vaihtoehtoja Bootstrapin ja Foundationin tilalle, mutta ulkopuolinen CSS framework monimutkaistaa asioita liikaa ja tuo asennettaviin paketteihin lisää painolastia. Meillä on minimalistisuutta syleilevä asenne koodiin ja sama pätee myös tyylittelypuolella Рvähemmän on enemmän, käytetään vain asioita, joita tarvitaan ja kehitetään itse niin paljon kuin mahdollista.

Bootstrap ei ole tätä päivää.

Toisinaan korkealuokkainen ”tee se itse” -n√§k√∂kulma tuottaa ”ylilaatua”, eli saatamme joskus tehd√§ hiotumpaa j√§lke√§ kuin mihin olisi kaikkien projektien puitteissa ”varaa” liiketoimintamieless√§, mutta pitk√§ll√§ j√§nteell√§ koen ett√§ t√§m√§ menetelm√§ on maksanut itsens√§ takaisin moneen kertaan. Nimitt√§in kun pohja on hiottu, ei tarvitse joka projektissa hakata p√§√§t√§ sein√§√§n yht√§ paljon kuin edellisell√§ kerralla.

Miten Duden front end eroaa muista?

Yll√§ olevien asioiden lis√§ksi (r√§√§t√§l√∂id√§√§n niin paljon itse kuin mahdollista) k√§yt√§mme paljon aikaa s√§√§st√§vi√§ tapoja ja ty√∂kaluja, joita on avattu auki my√∂s julkisessa operointimanuaalissamme mm. kohdissa Kehitt√§j√§lle ja Ty√∂kalut & Workflow ja kirjoituksessamme viime vuodelta (WordPress-kehitys p√§ivitt√§isen√§ osana arkea ‚Äď n√§in kehitykseen k√§ytetty aika ei sy√∂ asiakasprojektien budjettia). Operointimanuaalista l√∂ytyy oikeastaan kaikki fronttiin liittyv√§ aina nime√§misk√§yt√§nt√∂ihin asti. Pohjateeman lis√§ksi pyrimme pit√§m√§√§n n√§it√§ ajan tasalla. Dude-laadun tunnistaakin siit√§, ett√§ emme mene siit√§ mist√§ aita on matalin, mutta pyrimme silti s√§√§st√§m√§√§n aikaa asioissa, joissa voimme. Tehon ja laadun yhdistelm√§ toimii kaikista parhaiten.

Itse tekemisessä kehittyy valtavasti. Minimalistisuusnäkökulma korostuu kun huomaa, että asioita saa tehtyä ilman tuhatta riviä koodia. CSS (Cascading Style Sheets), eli selaimessa näkyvät tyylit mahdollistavat nykyaikaisen leiskan nettisivumuotoon taittamisen. SCSS (Syntactically Awesome Style Sheets, Sassy CSS) laajentaa perinteisen CSS:n toiminnallisuutta ja mahdollistaa mm. erilaisten apuohjelmien käyttämisen (gulp-tehtäväajot, mixinit ja funktiot).

CSS itsessään kehittyy SCSS:n rinnalla, näiden yhdistelmällä asioista saa moninkertaisen tehon irti.

Vaikka pelkällä CSS:lläkin saa paljon aikaan, SCSS tuskin tulee kuolemaan ihan lähiaikoina. SCSS + PostCSS + CSS mahdollistaa paljon yhdessä, joka onkin Duden front end designin tärkeimmät kulmakivet.

SCSS/PostCSS avulla saa aikaan mm. saavutettavia asioita automaattisesti, esimerkiksi tämä kahden rivin pätkä luo kohdistettavalle elementille aina erottuvan tekstin värin taustavärin perusteella (samalla pätkällä saa toki mihin tahansa elementtiin halutessaan automaattisen tekstin värin):

SCSS-funktio käytännössä.

Uusimmasta kehityskaaresta mainittakoon mm. uusin Stylelint, joka tarkistaa ja niuhottaa koodatessa mm. seuraavista asioista (jos olet koodari, voit katsoa .stylelintrc -asetustiedostoa suoraan täältä):

  • Varmistaa ett√§ kaikki CSS-muuttujat on oikeasti k√§yt√∂ss√§
  • Varmistaa, ett√§ kaikilla v√§reill√§ on muuttuja (t√§m√§ siksi, ett√§ ei tarvitse vanhanaikaisesti etsi√§ ne sata kohtaa miss√§ v√§ri on m√§√§ritely, vaan voi vaihtaa ainoastaan yhden kohdan ja v√§ri muuttuu joka paikkaan automaattisesti)
  • Varmistaa ettei kissanviikset ole liian tiiviisti, ei esimerkiksi .luokka{ vaan .luokka {. Katsoo my√∂s ett√§ rivinvaihdot ja sisennykset on oikein. N√§m√§ muuten tiedoston tallentaminen korjaa automaattisesti.
  • Varmistaa ja korjaa automaattisesti isot hexat pienill√§. Muuntaa my√∂s shorthandit (esim. punainen #ff0000 on #f00) ja poistaa turhat nollat (opacity: 0.5 on sama kuin opacity .5). S√§√§styy merkkej√§ ja voi raapia isossa kuvassa tiedostokoosta paljon pois n√§ill√§.
  • Korjaa automaattisesti esimerkiksi useammat luokat omille riveilleen luettavammaksi.
  • Ilmoittaa, jos k√§ytt√§√§ liian tarkkoja m√§√§rittelyj√§ tai sisent√§√§ liian syv√§lle (Inception-s√§√§nt√∂: Ei kolmea tasoa syvemm√§lle, leffatiet√§j√§t tiet√§√§).
  • Katsoo tietyt dude-keskeiset muotoilut, esimerkiksi k√§ytet√§√§n aina yks√∂isheittomerkkej√§ ja muistetaan ne heittomerkit background-image -arvoille selkeyden vuoksi.
  • Ei k√§ytet√§ huonoja k√§yt√§nteit√§ kuten :not ja !important, jotta koodi ei mene spagetiksi.
  • Uusimpana: Kirjoitetaan m√§√§rittelyt aakkosj√§rjestyksess√§, align-items ensimm√§isen√§ ja z-index viimeisen√§. N√§m√§ j√§rjestyy automaattisesti tallentaessa. Helpottaa asioiden hahmottamista kun esimerkiksi kaikki background- ja border-m√§√§reet ovat j√§rjestyksess√§.
  • Uusimpana: display: none; ja outline: 0 katsotaan virheiksi saavutettavuuden vuoksi. Ei haluta tahallaan piilottaa asioita tai reunuksia, jos ei ole aivan pakko. N√§ist√§ ilmoitetaan aina erikseen ja n√§m√§ perustellaan hyvin, jos k√§ytet√§√§n.
  • Kermana kakun p√§√§ll√§: Kiellet√§√§n kaikki yliajavien shorthandien kuten background, animation ja font k√§ytt√§minen kokonaan. K√§ytet√§√§n niiden sijaan tarkempia longhandeja, esim. background-color ja background-image.

Tässä joitakin pintaraapaisuja siitä miten automatiikan saa hoitamaan joitakin asioita puolestasi. On tehty koodaaminen helpoksi nykyään!

Stylefmt + Stylelint yhdessä ovat lyömätön yhdistelmä. Tässä kehittämäni VSCode-lisäosan havainnevideo:

VSCode-stylefmt -lisäosa VSCodelle
Automaattinen muotoilu on nykyaikainen tapa tehdä koodia.

Visual Studio Coden asetukset ja kaikki muukin yllä mainituista löytyvät GitHubistamme, jos kiinnostaa.

Tyylittelymaailmassa oppii lisää jatkuvasti. Hienot löydöt tai oivallukset aiheuttavat tämänkaltaisia reaktioita yrityksemme Slack-keskustelukanavalla:

#dev-kanavallamme perjantaina 5.2.2021.

Siinäpä pintaraapaisu fronttiarkeemme. Eipä sitten muuta kuin koodailemisiin!

Pssst. Liiketoimintahenkinen CTO:n pirulainen kuiskuttelee vielä perään, kiinnostaisiko yritystäsi laadukkaat verkkosivut? Jos heräsi pakottava tarve saada Dudet suunnittelemaan, rimpauta tai lähetä lomake!

Lue myös nämä

Miten rakentaa tavoitteelliset verkkosivut markkinoinnin ja myynnin tueksi

Lue digimarkkinoinnin asiantuntijan Sanna Virtasen neljä erilaista näkökulmaa siihen, miten voit arvioida verkkosivuston uusimisen tarvetta.

Mikä niissä verkkosivuissa oikein maksaa?

Verkkosivujen hinnat puhuttavat aina. Aiheeseen on otettu kantaa meidänkin blogissa pariin otteeseen.

Näin Duden sivustouudistus tapahtui, vaihe vaiheelta

Tämä versio Duden nettisivuista oli mahtava yhteistyöprojekti. Sivustolla on jokaisen neljän ukon mieltymyksiä ja tuotoksia tasapuolisesti ja toivomme, että se näkyy.