Web Design & Coding

Kaksi uutta verkkosivua

 

ethical_800

Kirjoitan hieman taustaa kuinka kaksi uutta verkkosivuani valmistuivat nopeasti tämän maaliskuun aikana.

Etsin jonkin aikaa sopivia WordPress-teemoja sekä portfoliosivuani sekä Natja K. Ethical-sivuani varten. Minulla oli tiettyjä vaatimuksia, jotka ratkaisivat minkä teeman valitsin. Halusin Natja K. Ethical-sivuston etusivulle koko Macbookin näytön täyttävän sliderin ja portfolio-sivulle halusin sosiaalisen median ikonit ylälaitaan.

Natja K. Ethical

Natja K. Ethical sivullani on käytössä ilmainen versio Zebrathemesin teemasta Photozilla. Teema on rakennettu Twitterin Bootstrap-teknologiaa käyttäen. Muokkasin teeman ulkoasua erilaiseksi aika paljon, mutta bootstrap-tiedostoihin ei tarvinnut koskea juurikaan. Editorial-sivun kuvagalleriaan käytin Nextgen Gallery-lisäosaa, joka on WordPressin suosituin galleria-lisäosa.

Otsikoihin käytin ilmaista fonttia Fjalla ja kappaleisiin käytin fonttia Open Sans, joista molemmista tein verkkofontteja verkkofonttigenaraattorilla.

Linkki sivuilleni: natjak.com/ethical

Portfolio

Portfoliosivuni teema on ilmainen versio teemasta Inkness, josta on saatavilla myös maksullinen versio. Tein portfolioni nopeasti parissa päivässä alkamatta muuttaa teeman ulkoasua paljonkaan. Minulla on tarkoitus tehdä uusi keväinen slider-kuva huhtikuun aikana ja uusia slider-kuvia jatkossakin aika ajoin. Teema on rakennettu käyttäen Bootstrap 3.0-teknologiaa, eikä tämänkään teeman ulkoasua muokatessa tarvitse koskea paljonkaan bootstrap.css-tiedostoon.

Sosiaalisen median ikonit ylälaidassa kuuluvat teeman omaan frameworkiin myös WordPressin käyttöliittymän puolella ja vaikka etsin ikoneiden kuvia teeman sisältä myös selaimen “Inspect Element”-toiminnolla, en löytänyt niitä. Teemaan ei siis voinut lisätä haluamiani Behancen ja WordPress-blogin sosiaalisen median ikoneita lisäämällä samanlaisia koodinpätkiä lisää, koska ikonit eivät ole teemassa kuvina, vaan teeman sisällä vektoreina. Halusin kuitenkin tehdä portfolio-sivuni tällä kertaa helposti ja lisäsin linkit Behanceen ja tähän blogiin About-välilehdelle.

Otsikkoihin käytin fontin Oswald regular-leikkausta ja kappeleisiin fonttia Tikal Sans, joista molemmista tein verkkofontteja.

Linkki sivuilleni: natjak.com

 

natjak_800

Uutiskirjeiden toteutus pienille kohderyhmille

 

Vähän yli vuosi sitten tutkin, kuinka toteuttaa ja lähettää uutiskirjeitä pieniä määriä ilmaiseksi. Tässä postissa kerron uutiskirjeiden teknisestä toteutuksesta empiirisesti oppimiani asioita. Tämä blogiposti antaa varmasti hyödyllistä tietoa niille, jotka ajattelevat itse uutiskirjeiden toteutusta ensimmäistä kertaa.

Verkosta löytyy palveluita, joilla uutiskirjeitä voi toteuttaa ja lähettää ilman koodaamistaitoja, mutta niiden ominaisuuksiin ja mahdollisuuksiin tutustuminen vie aikaa. Ilmaisia palveluita ei kovin monta löydy ja palvelujen hinta, teknisen osaamisen tarve ja ammattimaisuus vaihtelevat paljon. Kerron seuraavaksi muutamista uutiskirjeiden lähettämiseen liittyvistä perustavanlaatuisista asioista.

SMTP – Simple Mail Transfer Protocol

Simple Mail Transfer Protocol (SMTP) on sähköpostien lähettämiseen käytettävä internetstandardi. Uutiskirjeiden lähettämiseen tarvitaan SMTP-palvelin. Sähköpostien lähettämiseen palvelin käyttää nykyisin lähinnä TCP-porttia (Transmission Control Protocol) 587, mutta hyväksyy myös portin 25. Näiden asioiden tietäminen voi tulla helposti eteen uutiskirjeiden lähettäjälle riippuen käytetystä palvelusta.

Sähköpostipalvelut, mitä käytämme normaalisti tavallisten sähköpostien lähettämiseen eivät ole uutiskirjeiden lähettämiseen tarvittavia SMTP-palvelimia, joka on vain lähettämiseen käytettävä protokolla. Tavallisen sähköpostin lähettäminen toimii “työntämällä” teksti vastaanottavan sähköpostin avattavaksi. Näitä tavallisten sähköpostien protokollia ovat tavallisesti Post Office Protocol (POP) ja Internet Message Access Protocol (IMAP). POP ja IMAP avaavat myös uutiskirjeet ja näyttävät ne sekä niiden kuvallisessa muodossa että tekstinä (Wikipedia.org).

Uutiskirjeiden koodaus

Uutiskirjeet koodataan erotuksena tavallisiin sähköposteihin ja ne avautuvat juuri siksi kuvallisessa muodossa. Uutiskirjeiden koodaaminen toteutetaan taulukkokoodina, joka on enintään html4:ää ja CSS1:htä. Uutiskirjeisiin käytettävällä CSS:llä ei voi toteuttaa kuin perusasioita, eli niiden teknisessä toteutuksessa ole käytössä juuri mitään verkkosivuilla vuosia yleisessä käytössä olevia muotoiluja tai teknisiä ratkaisuja. Esimerkiksi linkkien hoverin (hiiri linkin päällä) tai aktiivisen linkin näyttämiseen koodissa ei ole juuri muita mahdollisuuksia kuin alleviivaus, esim. border-bottom: 1px solid #000;

Uutiskirjeiden layoutien suunnittelussa pitää siis ottaa huomioon tekniset rajoitteet. Siitä huolimatta uutiskirjeistä on mahdollista suunnitella nykyaikaisen näköisiä, kun tietää mitä on mahdollista teknisesti toteuttaa. Taulukkokoodin ja uutiskirjeiden koodaamiseen voi tutustua tutkimalla valmiiden uutiskirjeiden lähdekoodeja. Alla on pari esimerkkiä uutiskirjeistä, jotka ovat toteutettu taidokkaasti koodin rajoitteista huolimatta. Vasemmalla on MyFonts-sivuston uutiskirjeen yläosa ja oikealla Trendland-sivuston uutiskirjeen yläosa.

uutiskirje1_800

Ilmaiset uutiskirjepalvelut

Kokemukseni mukaan useimmissa uutiskirjepalveluissa SMTP-palvelimen käyttö ja koko uutiskirjeiden lähettäminen pieninäkään määrinä on maksullista. Reilu vuosi sitten päädyin käyttämään Mailchimp-palvelua, joka on täysin ilmainen eikä sen käytössä tarvitse ajatella lainkaan SMTP-palvelinta. Olin koodannut ulkoisella editorilla uutiskirjeen valmiiksi jo Mailchimpin ulkopuolella, mutta palvelun sisällä on myös koodausta lainkaan osaamattomille mahdollisuus muokata siellä olevia uutiskirjepohjia jonkin verran. Palvelun vähemmän ammattimaisiin miinuspuoliin kuuluu, että uutiskirjeiden alareunassa näkyy Mailchimpin logo pienellä.

Palvelu, johon seuraavaksi lähtisin tutustumaan halutessani lähettää ilmaisia uutiskirjeitä pieniä määriä on Reachmail ja sen sisarpalvelu Easy-SMTP. Reachmail-uutiskirjepalvelun käyttäjät olivat kyselleet ilmaisen SMTP-palvelimen perään, koska ne yleensä osoittautuvat maksullisiksi palveluiksi ja sitä varten luotiin Easy-SMTP. Se toimii pilvipalveluna, eli käyttäjän ei tarvitse ostaa sitä varten mitään. Easy-SMTP:llä voi lähettää 10 000 ilmaista uutiskirjettä kuukaudessa ja siitä ylöspäin portaittain maksullisesti. Kun kyseessä kuitenkin on SMTP-palvelin, tekniseltä osaamiselta ei voi välttyä. Alemmassa kuvassa on ruutukaappaus Easy-SMTP:n Getting Started-välilehdeltä, joka kertoo juuri sitä tietoa, mitä ensimmäisenä uutiskirjeen toteutusta itse ajatteleva ei ajattelisi tarvitsevansa.

uutiskirje2_800
uutiskirje3

Uutiskirjeiden tilaajien tavoittaminen

Kaikkien palveluiden sisällä Mailchimpistä lähtien on hyvät tilastot uutiskirjeiden avaus- ja klikkaus-prosenteista, joilla uutiskirjekampanjan toimimista voi seurata. Tietenkin kaikki maksulliset uutiskirjepalvelut ja SMTP-palvelimet mainostavat, kuinka heidän palveluillaan uutiskirjeiden tilaajien saavuttaminen toimii paremmin kuin ilmaisilla palveluilla. Ratkaisevampana uutiskirjeiden avausprosenttien muodostumisessa pidän kuitenkin vastaanottajien sähköpostipalveluita, joihin uutiskirjeiden lähettäjät eivät voi vaikuttaa.

Esimerkiksi Gmail, joka on todennäköisesti maailman suosituin ilmainen sähköpostipalvelu, muutti sähköpostien suodatusta vuoden 2013 puolivälissä niin, että sähköpostit jakaantuvat kolmeen eri kansioon, Primary, Social and Promotions, jolloin uutiskirjeet menevät suoraan Promotions-kansioon. On huomattavasti epätodennäköisempää, että sähköpostin käyttäjä avaa uutiskirjeen, joka on valmiiksi mainospostikansiossa, eikä ensimmäiseksi kirjautumisen jälkeen avautuvassa näkymässä henkilökohtaisten sähköpostien seassa. Lähivuosina olen käyttänyt Microsoftin sähköpostipalveluita, joissa sähköpostien automaattinen lajittelu ei ollut vielä niin tiukkaa kuin nykyisessä Gmailissa.

En ole itse tutustunut pitkiin aikoihin muihin ilmaisiin sähköpostipalveluihin kuin Gmailiin, mutta (About.com) on rankannut 11 parasta ilmaista sähköpostipalvelua ja kertonut niiden ominaisuuksista. Useimmissa palveluissa on jonkinlaista postien automaattista lajittelua kansioihin, kuten roskapostin suodatus, mutta se ei ole yhtä tiukkaa kuin Gmailissa. Sähköpostien jakaminen eri kansioihin on jätetty enemmän käyttäjän tehtäväksi. Uutiskirjeiden saavuttamisprosentti riippuu siis enemmän käyttäjistä itsestään ja heidän käyttämänsä sähköpostipalvelun ominaisuuksista kuin uutiskirjepalvelusta.

Front-end koodausta ja muita projekteja

 

Huomasin, että on korkea aika kirjoittaa muista töistäni kuin vaatesuunnittelusta ja valokuvauksesta, ettei koko työnkuvani profiloituisi pelkästään vaatesuunnitteluun. Aloin viime syksynä tekemään Natja K. vaatemallistoa juuri vastapainoksi pitkään jatkuneelle koodaukseen keskittyneelle ajanjaksolle, jota oli kestäny yhteensä 14 kuukautta yhteen menoon. Olin toki käyttänyt päivittäin Photoshopia koko tuon jakson ajan ja pitkiä pätkiä Illustratoria ja InDesignia, mutta koodaus oli vienyt kaikkein eniten aikaa. Kerron tässä postissa jotakin siitä, kuinka olen kehittynyt koodaajana ja esittelen lyhyesti yhden videoprojektin.

Koodaus on osa-alue, jota ei yleisölle näy ja olen käyttänyt lukemattomat yksinäiset tunnit sen lisäopetteluun omaan koulutukseeni kuuluneen perus-HTML- ja CSS-koodauksen lisäksi. Pääasiassa olen tehnyt WordPress-sisällönhallintajärjestelmällä verkkosivuja, joka minun kohdallani on tarkoittanut sitä, että en käytä vain olemassaolevien teemojen rakenteita, vaan toteutan oman tai jonkun muun suunnitteleman leiskan koodaamalla teemasta uuden teeman. Ainoastaan toiset WordPressillä sivuja paljon sivuja tehneet voivat tunnistaa tutkittuaan lähdekoodiani, minkä teeman perusrunko on ollut sivujen pohjana.

Koulutukseeni ei kuulunut lainkaan responsiivisen koodauksen opetusta ja lähdin tutkimaan sitä samalla, kun aloin tutustumaan kunnolla WordPress-sisällönhallintajärjestelmään heinäkuussa 2012. Responsiivisten sivujen toteuttamiseen olen löytänyt suhteellisen helposti fluid-CSS:ää, jota osaan nykyään muokata toimimaan lähes mihin muotoon tahansa. Fluid-CSS saa tekstipalstat kapenemaan selainikkunaa pienennettäessä saumattomasti niin, että sanat hyppivät selainikkunan koon mukaan kapeammiksi riveiksi. Minulla kesti jonkun aikaa ymmärtää yksinään, mihin kuvien saumaton prosentuaalinen skaalaus perustuu koodissa ja mitä tarkoittaa fluid-teknologiat, mutta ymmärrettyäni mihin ne perustuvat olen kokenut sen helpoksi.

Pääasiassa kaikki mitä koodaan itse on front-endiä, eli sitä, mikä näkyy internetin käyttäjille. Php:tä tai muuta ohjelmointia en kirjoita juuri lainkaan itse, mutta WordPressin php:tä muokkaan toimimaan eri tavoin. WordPress itsessään toimii php:llä, joten WordPressillä layoutien koodaamisessa ei voi välttyä php:n muokkaamiselta. Olen ehdottomasti ensimmäisenä visuaalinen ja käyttöliittymien suunnittelija, mutta saan toteutettua nykyään niin hyvin verkkosivuista halutun näköisiä ja responsiivisia, että voin kutsua itseäni myös front-end koodaajaksi. JavaScriptiä nollasta en osaa kirjoittaa, mutta hyödyntää ja muokata JavaQueryja.

koodaus_2_800

Bootstrap

Olen opetellut käyttämään jonkin verran myös Bootstrap front-end teknologiaa, joka on itsenäinen responsiivisen koodin ja JavaScriptien koodipaketti. Bootstrap on ladattavissa sen omilta sivuilta ja alun perin sen on kehittänyt Twitterin suunnittelija ja kehittäjä vuonna 2010. Bootstrap julkaistiin avoimen lähdekoodin ladattavana koodipakettina ensimmäisen kerran 2011 ja versio 2:stä lähtien se on ollut responsiivinen.

Bootstrap perustuu valmiisiin nimettyihin palstajakoihin ja sitä käytettäessä div-nimet ovat vakioita. Bootstrap vaatii tutustumista sen kooditiedostoihin ja toimintaan, mutta kun hallitsee ne, voi keskittyä vain sivuille tulevien elementtien ulkoasujen koodaamiseen ja kaikki responsiiviset eri levyiset palstat ovat koodissa valmiina.

koodaus_1_800

 

Video HSL:lle venäläisiä matkailijoita varten

Lopuksi esittelen viime kesäkuussa Xtrem Media -osuuskunnan kautta toteutetun videon, jonka käsikirjoitin ja ohjasin. Video on tehty Youtube-videoksi, jossa esitellään HSL:n joukkoliikennettä ja näytetään miten vuorokausilippua voi hyödyntää. Videon on kuvannut, äänittänyt ja editoinut Jarno Paavola.