Silloin tällöin tarina palaa mieleeni kun katson nykyisiä työmenetelmiä ja työnkulkuja erityisesti websuunnittelun parissa. Suunnittelun työvälineinä käytetyt työvälineet (Photoshop tai pahimmillaan Power Point) eivät tue työnkulkua suunnittelijalta kehittäjälle. Leiskan suunnitteleminen Photarilla ja luovuttaminen .psd tiedostona kehittäjälle HTML-taittoa varten, ei suuresti eroa leiskan luovuttamisesta kehittäjälle paperilla. Mikä muuten ei ole harvinaista sekään! Olen moneltakin suunnittelijalta kuullut, että he luovuttavat leiskan tai käyttöliittymäsuunnitelman kehittäjille paperille tulostettuna. Onneksi kuitenkin tarkentavine ohjeineen.

Vaikka miljoona websuunnittelijaa, graafikkoa, visualistia ym. taiteilijaa haluaakin suunnitella websivut ja käyttöliittymät Photoshopilla, ei se tarkoita että he olisivat oikeassa. Meillä on vain valtava joukko “hyviä työmiehiä”, jotka hakkaavat nauloja sillä vatupassilla.

Järkevä työnkulku edellyttäisi, että jo suunnitteluvaiheessa tehty työ olisi hyödynnettävissä lopullisessa toteutuksessa myös tiedostotasolla. Nyt se ei sitä ole! Sivuston toteuttavat koodarit aloittavat oman työnsä omasta lähtöruudustaan. Usein täysin nollapisteestä designerilta saamansa kuvan pohjalta. Oikein toimien, saisi koodari tulevaa HTML-taittoa varten esimerkiksi sivun ulkoasun määrittävät CSS-säännöt, jos ei yhdellä, niin kahdella hiiren napsautuksella suunnittelussa käytetyn sovelluksen tiedostosta.

Syyllistä etsimässä

Kenen vika sitten on, että työskentelyssä käytetään edelleen tehottomia menetelmiä? Itse asiassa syyllisiä olemme kaikki, jotka alistumme nykyiseen toimintamalliin. Esimerkiksi Photoshopin käyttö suunnitteluvälineenä on ymmärrettävää siksi, että kun web-suunnittelua aloiteltiin, ei ollut muita järkeviä työkaluja. Silloiset suunnittelijat käyttivät työkalua, jonka osasivat ja joka oli saatavilla. Uudet alalle tulevat vain apinoivat kokeneempia ja mukisematta käyttävät samoja välineitä ja tekniikoita. Näin ei tarvitsisi olla. Nykyisin on muitakin vaihtoehtoja.

Designer

Suunnittelijat ovat usein sanoneet minulle, etteivät halua opetella uutta sovellusta. OK, inhimillistä kyllä. Meillä on kaikilla kiire ja työn pitäisi tuottaa mutta juuri tuottavuuden tehostamiseksi minä sitä opettelemista olen ehdottanut. Työkalun vaihtamisella voi olla muitakin etuja. Mikäli käytössä on aidosti websuunnitteluun tarkoitettu työväline, voi se tarjota apuja myös luovuuteen ja toteutuksen valintaan. Ja sitä paitsi; vain yhdentyökalun käytössä on myös hankaluutensa. Jos käytössä on vain vasara, alkaa näkemään ympärillään vain nauloja! Joku muu työkalu voi itse asiassa boostata luovuutta ja auttaa parempiin tuloksiin.

Hyvät designerit! Kokeilkaa muuttaa työtapojanne. Tutustukaa Adobe Fireworksiin, joka on nimenomaan websuunnitteluun tarkoitettu työkalu. Vektoripiirto-ohjelmana sen omaksuminen ei ole iso juttu yhdellekään ammattitaitoiselle suunnittelijalle. Kunhan vain avaa ohjelman. Opetelkaa hieman HTML ja CSS koodia. Suhteellisen pienellä opiskelulla pystyy jo jopa suunnittelemaan suoraan selaimessa. Ja ellei sitä halua tehdä, niin se auttaa myös viestimään koodarien kanssa.

Developer

Älkää syyttäkö designereita väärien työkalujen käytöstä jos itse ette ole osanneet vaatia muuta kun psd-tiedostoa tai olette tyytyneet leiskaan paperilla. Sitä voisi hyvin avata suunsa ja kertoa suunnittelijoille miten työ etenee kun työ siirtyy suunnittelijalta teille. Tutustuminen myös suunnittelun välineinä käytettäviin ohjelmiin voisi hyödyttää koodareitakin. Ellei muuten, niin valistakaa niitä suunnittelijoita omasta työstänne. Ja ennen kaikkea – vaatikaa päästä mukaan suunnitteluprosessiin jo ajoissa.

Hyvä koodari osaa vaikuttaa design-prosessiin lopputulosta hyödyntäen ja samalla tehostaen työnkulkua vähentämällä turhaa työtä ja asian pallottelua designer-developer rajapinnassa.

Pomot

Ellette ole vielä kiinnittäneet huomiota designer-developer rajapinnan aiheuttamaan katkokseen työnkulussa, niin nyt olisi aika. Vaatikaa työntekijöiltänne prosessien tehostamista ja työvälineiden oikeaa käyttöä. Tarjotkaa työntekijöille mahdollisuus koulutukseen ja antakaa heille hetken opiskelurauha oikeiden työvälineiden käytön opiskeluun ja työnkulun hiomiseen. Se maksaa taatusti itsensä takaisin suoraan viivan alle jäävänä lukuna mutta myös parantuneena elämänlaatuna kaikille.

Työnkulun toteuttaminen oikein on meidän kaikkien yhteinen asia. Prosessiin osallistuvista yksi taho ei voi muuttaa ja tehostaa työnkulkua yksin, vaan siihen tarvitaan kaikkien yhteistä tahtoa ja yritystä. Kyse ei ole vaikeasta asiasta vaan hyvästä tahdosta.

Järjestelmien huono suunnittelu voi olla paljon pahempi ongelma kun alkuun voisi kuvitella. Oma “lempilapseni” tällä saralla on työpaikalla käytössä oleva matkalaskujärjestelmä jonka kömpelyys on jo kovin koomista. Esimerkkinä meili jossa ilmoitetaan uudesta tapahtumasta järjestelmässä. Viestissä on linkki järjestelmään kirjautumiseen. Ja sitten perässä teksti “älä käytä tätä linkkiä järjestelmään kirjautumiseen”….?!?.

Varsinainen järjestelmä on kovin -90 lukuinen ja toimii kyllä mutta käyttölogiikka on omituinen ja takaperoinen. Mutta se ei ole suorastaan vaarallista, ainoastaan ärsyttävää ja tuottavuutta kampittavaa.

Matkalaskujärjestelmän käyttökokemus

Vaara vaanii rivinvaihdossa

Tämä seuraava uutinen Lääkärilehdessä oli taas jo paljon huolestuttavampi: Vaara vaani rivinvaihdossa .

Sähköisessä reseptijärjestelmässä on huonon suunnittelun vuoksi suuri vaara käyttäjävirheisiin joilla voi olla aivan kriittisiä seurauksia. Käyttäjä  (lääkäri) voi tehdä asiat monella tavalla, mutta vain “oikein” toimimalla varmistetaan virheetön lääkemäräys! Vaikka lääkäriltä voidaan ammmatissaan vaatia poikkeuksellista täsmällisyyttä, ei se saa tarkoitta sitä että tietojärjestelmissä tehdyt, yleensä normaalit, tekstinkäsittelytoimet voivat sotkea reseptien oikeellisuutta.

“On myös lähtökohtaisesti väärin, ­että monimutkaiseksi rakennettu järjestelmä vaatii käyttäjältä täydellistä erehtymättömyyttä.”

Kyllä järjestelmään pitää olla koodattuna malli joka estää virheellisen toiminnon käyttäjän sellaista yrittäessä.

Parantamalla järjestelmiä voitaisiin saavutta merkittävää etua myös hoidon määrän suhteen: puoli miljoonaa vastaanottoaikaa. Mitään hyötyä ei varmaan ole siitäkään että järjestelmistä ei pidetä.

Arkea muuallakin

Ensimmäinen esimerkkini matkalaskujärjestelmästä kertautuu suomalaisissa yrityksissä loputtomasti. On erilaisia toiminnanohajusjärjestelmiä, erppejä, sappeja, tilitys, varastonhallinta, CRM jne. sovelluksia joiden käyttökokemusta ja sujuvuutta ei normaalisti ole tuunnattu tehokkaimmaksi mahdolliseksi.

Kuvassa muutama näkökulma, lähde Etnoteam:

Viidakon lait ja kilpailu, miten käy räätälöidyn sovelluksen?

Ajta saattavat olla muuttumassa. Räätälöityjen business sovellusten sijaan yhä enemmän käytetään erilaisia valmiita täsmäsovelluksia eri tarpeisiin. Yleensä näissä on kovilla markkinoilla  haettu kilpailuetua hiotulla ja selkeällä käyttökokemuksella. Kyllä yritysosvelluskin voi olla hauska ja intuitiivinen, tästä esimerkkinä Yammer joka tuo Facebookkimaisen käyttäjäkokemuksen osaksi yrityksen sisäistä toimintaa. Lisäksi näyttää siltä, että kosketusnäytöllä käytettävät mobiilivimpaimet ohjaavat sovelluskehitystä ylipäätään käyttäjäystävällisempään suuntaan.

Suomalaisen sovelluskehityksen rimpuillessa koodaamisen siirtyessä halvempiin maihin kannattaa miettiä olisiko käyttökokemus-suunnittelusta meikäläisille osaajille työsarkaa tulevaisuudessa?

Mikä sitten muuttuu…?

Creative Cloud

Tuttun tapaan paketointeja on useampia, mutta aikaisemmaan verrattuna määrä on hiukan vähentynyt, Design &Web Premium paketti yhdistää  aikaisempia paketointeja yhteen. Linkki Adoben tuotesivulle: http://www.adobe.com/fi/products/creativesuite.html

Varsinainen uutuus on kuitenkin Creative Cloud lisensointimalli ja pilvipalvelu. Creative Cloud palvelussa on tallennustilaa pilvessä ja mahdolliuus lisensoida sovellukset kuukausimaksulla. Creative Cloud lisensointi pitää sisällään kaikki Master Collection paketin sovellukset sekä lisäsovelluksia kuten Adobe Edge jne. Sovellukset kuitenkin ladataaan ja asennetaan normaalisti työasemaan ja ainoastaan lisenssiä hallinnoidaan pilvipalvelussa. Tällä hetkellä Adobe tarjoaa Creative Cloud palvelua 12 kk. sopimuksella tutustumishintaan 59,03€/kk. (olisivat kyllä voineet pyöristää tuon 3 senttiä…). Hinta on kyllä edullinen, n. 2.5 euroa per työpäivä, monilla menee aamulatteen enemmän. Kyynikko sisälläni kyllä epäilee että hinta on jatkossa korkeampi mikäli konsepti lyö itsensä läpi.

Mitä uutta suunnittelijalle?

Mitä uutta uusi paketti sitten tarjoaa? Niinkuin aina Adoben päivityksissä, paljon juttuja joita on kovasti kaivattu, joitain hyödyllisiä työtä nopeuttavia pikkujuttuja (joita juuri kukaan ei sitten muista oikeasti hyödyntää) sekä osittain aivan yllättäviä oivalluksia joita ei osannut edes kaivata mutta jotka ilman muuta ovat hyödyllisiä. Ja tällä kertaa koko käyttöliittymän ulkoasu muttuu tummanpuhuvaksi Lightroomin tyyliin.

Varsin mielenkiintoisia juttuja on myös webbipuolella liittyen HTML 5 :een ja mobiilliin webbiin sekä Flashiin. Flashista voidaan nyt esim exportata HTML5 muotoon!

Tulemme käsittelemään näitä tarkemmin blogissa jatkossa, mutta seuraavassa muutamia poimintoja näin alkuun, linkit vievät Adobe evankelistojen videoihin aiheista:

InDesign

Content Collector työkalu on kätevän oloinen tapa kerätä sisältöä taitosta ja uudelleen käyttää sitä toisaalla. Käytännön kokemus vielä puuttuu,

Liquid layout on taas merkittävämpi uutuus. Kyseessä on uusi tapa suunnitella sivuja ja varautua eri muotoisten ja kokoisten versioiden tekemiseen. Tästä on erityisesti apua kun suunnitellan tablettijulkaisujen pysty/vaakasivuja. Tämä tulee jo pelkästään motivoimaan tablettijulkaisijat päivitykseen!

Lomaketyökalut olivat itselleni yllätys. Nyt sähköisiä PDF-lomakkeita voidaan suunnitella suoraan Indesignissa. Tätä en ollut itse osannut odottaa mutta onhan se loogista näin jälkikäteen ajatellen.

Illustrator

Illustrator on rakennettu kokonaan uusiksi “konepellin alta”. Tämä näkyy parempana suorituskykynä ja vakautena. Illustrator oli kuitenkin koodipohjaltaan vanhin paketin sovelluksista. Käyttölittymä on uudistunut ulkonäöltään, onneksi kaikki hanikat ovat kuitenkin tutuilla paikoillaan löydettävissä. Varsinaisia merkittäviä uusia toiminnallisuusksia on muutamai:

Jatkuvien kuvioiden suunnittelutyökalu tulee helpottamaaan monien esim. tekstiilisuunnittelijoiden elämää! Tätä on todellakin kaivattu, aiemmin jakuvien täyttökuvioiden tekeminen oli melkoista täsmäilyä.

Liukuvärejä voi nyt käyttää myös reunaviivaan! Tämä olisi kuulunut olla mahdollista  jo vaikka ajat sitten.

Rasterkikuvien vektorointityökalu on myös uusittu.

Photoshop

Photoshopin uudet ominaisuudet on lyhyesti esitelty jo tässäkin blogissa. Sisällön tunnistavaa (Content Aware) älykkyyttä on jälleen merkittävästi lisätty ja liikkuvan kuvan editointi on nostettu keskiöön. Klikkaamalla tagipilvestä Photoshop CS6 näet aiemmat kirjoitukset aiheesta.

Voiko sen jo ostaa?

Vielä uudet työkalut eivät ole hankittavissa. Ennakkotilauksia otetaan vastaan, mutta lopullista päivämäärää jolloin hankinnan voi tehdä ei ilmoitettu. Valistunut arvaus vois olla vaikkapa toukokuun aikana, mutta virallista tietoa ei siis ole.

Kiltamestareilla on käytössään CS6 esiversiot joten laitamme blogiin poimintoja uusista ominaisuuksista tässä matkan varrella.

Harvalla media-alan perusammattilaisella on kuitenkaan mahdollisuutta käyttää varsinaisia animaatio- tai videoeditointi-työkaluja, jolloin videon käyttämisen kynnys on ollut korkea.

Palveluna ostettu videotyö saatetaan kokea hintavana tai tarpeeseen sopimattona. Vaativissa videoproduktioissa toki kannattaa käyttää ammattilaisten apua, mutta pienimuotoisessa tuotannossa pärjätään vähäisilläkin taidoilla. Lähes jokaiselta löytyy jonkinlaista videokuvaa tallentava laite, johon nähden videota käytetään yllättävän vähän.

Sähköisen mediamaailman laajentuessa ja arkipäiväistyessä olisi toivottavaa, että liikkuvaa kuvaa ja sen viestinnällisiä mahdollisuuksia käytettäisiin enemmän ja mielikuvituksellisemmin. Tietenkään asioita ei pidä tehdä vain siksi, että haetaan väenväkisin liikettä sivuille, kun se kuulemma myy niin hyvin. Kaikilla yhdeksänkymmentä luvulla verkossa liikkuneilla on varoittavana kuvana mielessään sen aikaisia webbi-sivuja täyttäneet vilkkuvat ja välkkyvät gif-animaatioit, joilla ei ollut yksinkertaisesti mitään järkevää perustetta olemassaololleen. Kuten kaikessa muussakin, liikkuvan kuvan ja videon käytön on oltava perusteltua.

Videoita Photoshopilla

Adobe Photoshopissa on joidenkin versioiden ajan ollut mahdollisuus työstää videoita ja versio versiolta nämä mahdollisuudet ovat kasvaneet. Videon voi avata Photoshopiin aivan kuten kuvankin ja ohjelmassa voi käyttää tuttuja työkaluja ja säätimiä videon muokkaamiseen. Karkeasti ottaen ainoa ero normaaliin kuvankäsittelyyn on aikajanan käyttäminen, jonka haltuunottaminen on melko helppo lisäys vanhoihin Photoshop-taitoihin. After Effectsin, Flashin tai jonkin muun videoeditointi-ohjelman käyttäjille Photoshopin videokäyttö näyttää hyvinkin tutulta. Perinteisen videoeditoinnin lisäksi ohjelma osaa myös rakentaa tweenin, eli animoidun liikkeen aikajanalle asetettujen avainkuvien välille. Aivan kaikki asiat eivät Photoshopissa animoidu itsestään. Olisi aika hauskaa, jos esimerkiksi Puppet Warpia voisi käyttää tween-animaatioissa, mutta sellaiset on edelleen tehtävä kuva kerrallaan tai jollakin toisella animaatio-ohjelmalla.

Photoshopissa ei kannata käsitellä muutamaa minuuttia pidempiä videoita. Sen sijaan ohjelma soveltuu mainiosti lyhyiden efektimäisten videoiden käsittelyyn ja luomiseen. Esimerkiksi artikkeleiden kuvitusten animointi tai infografiikan monipuolistaminen ovat hyviä sovelluskohteita Photoshop-videoille. Kannattaa vilkaista Wired-lehden tablet-version artikkeleiden avaussivuja. Julkaisussa käytetään runsaasti kevyttä liikettä huomion herättämiseen, joka on erittäin hyvä keino pysäyttää lukija katsomaan sivua pidempään. Sivusuuntainen artikkeleiden selailu pysähtyy vaistonvaraisesti, kun silmä havaitsee liikkeen. Utelias mieli haluaa tietää että, mitäs nyt tapahtuu.

Tablet-julkaisuissa käytetään liikkuvaa kuvaa monella tapaa. Videotiedostoja voidaan katsella sivuilla olevista videoikkunoissa tai koko ruudun näkymissä. Video-käsitteen voi laajentaa koskemaan myös erilaisia animaatioita ja kuvasarjoja, jotka elävöittävät muuten staattiseksi taitettua näkymää. Kannattaa pitää silmänsä auki ja katsella maailman liikettä. Innovatiivisuus ja lainaukset muista mediaympäristöistä ovat tervetulleita.

Ehkä periaatetta parhaiten kuvaan ohje:

Don’t shrink – rethink!

Vaihtoehtoja eri päätelaitteiden huomioimiseksi

On selvää, ettei verkkosivustoa kannata toteuttaa useana eri versiona ylläpidon ja sisällöntuotannon hankaloitumisen vuoksi. Asiat voitaisiin toteuttaa kerralla kaikille kohdelaitteille soveltuvina.

Ensimmäinen vaihtoehto on se, ettei tehdä mitään! Annetaan sivuston olla nykyisellään ja annetaan käyttäjän tuskailla sitä puhelimella käyttäessään. Tämä voi olla aivan perusteltu ja toimivakin ratkaisu; Modernien puhelinten uudet selaimet osaavat skaalata sivuja erittäin hyvin. Lopputulos on se, että sivusto on vain skaalattu pienemmäksi. Se on silti käytettävissä mutta käytettävyys ei ole parhaimmillaan pienellä kosketusnäytöllä. Mutta kuten totesin, joillekin sivuille tämä voi olla aivan riittävä ratkaisu.

Toinen vaihtoehto on toteuttaa täysin oma mobiililaitteille suunnattu sivusto.Tämä näkyy usein omana URL osoitteena kun sivulle tullaan vaikkapa älypuhelimella. Ratkaisu tarkoittaa erikseen mobiililaitteille suunnatun sivuston toteutusta ja ylläpitoa. Vähintään kaksinkertainen työ, muokattavuus ja ylläpito hankalampaa, eikä silti huomioida eri päätelaitteiden keskinäisiä eroja.

Kolmas vaihtoehto on Responsive design! Ehkä kuitenkin parhaana vaihtoehtona on käyttää olemassaolevia tekniikoita ja toteuttaa nykyinen sivusto siten, että se osaa huomioda sisältöä näyttävän laitteen ominaisuudet. Tällä tavoin yhdellä suunnitelulla ja toteutuksella tarjotaan paras käyttökokemus kaikille käyttäjille käytössä olevasta laitteesta riippumatta.

Responsive design

Kyse on suunnittelun metodeista, toteutustavasta ja halusta tehdä asiat joustavasti. Responsive web design sisältää toki joukon tekniikoita, joilla tavoite saavutetaan mutta tekniikkaa tärkeämpää on tapa, jolla sitä käytetään. Tekniikat ovat olleet olemassa jo pitkään. Joustavan toteutuksen aikaansaaminen vain edellyttää näiden tekniikoiden oikeanlaista käyttöä.

Tavoitteena on joustava sivustototeutus, jossa selaimen tai päätelaitteen näyttämän alueen (viewport) koko määrää sekä sisällön skaalautumisen että sisällön asemoinnin ja elementtien ulkoasun. Näin voidaan valita pienemmille näytöille erilainen sivustonavigaatio, asemoida sivun sisältö monen palstan sijaan vain kahdelle tai yhdelle sekä valita esitettävä sisältö. Nämä vain muutamia esimerkkejä mainitakseni.

Kuva:Adobe

Suunnittelijan tehtävän merkitys korostuu, sillä tehtävänä on laatia “leiskat” eri kokoisille näytöille ja huomioida sekä pysty- että vaaka-asemointi. Mikään tekniikka ei itsessään tätä ongelmaa ratkaise. Valitettavan usein nämä eri mahdollisuudet on jätetty huomioimatta. Mikäli näitä ei ole huomioitu suunnittelussa, ei sivuston tekniikkaa toteuttava koodarikaan voi sitä tehdä.

Responsive (web) design on erityisesti suunnittelijoiden ajatustapaan vaikuttava muutos. Vaikka tuntuisi ahdistavalta, on nyt viimeistään yritettävä päästä eroon printistä periytyneiden keinotekoisten rajoitteiden perässäraahaamisesta ja avattava mielensä webin “rajattomille” mahdollisuuksille.

Mobile First -ajattelu

Mobile First mallilla tarkoitetaan suunnittelu- ja ajattelumallia, jossa verkkosivustojen ja palveluiden suunnittelussa huomioidaan mobiililaitteet alusta pitäen. Aiemmin mobiilisivusto suunniteltiin jälkeenpäin jos sittenkään. Käytännössä suunnittelu siis aloitetaan pieneltä näytöltä.

Viimevuosien muutokset ovat aiheuttaneet sen, että suunnittelun aloittaminen desktopista alkaa tuntua takaperoiselta toimintatavalta. Verkkosivut ja -palvelut tulisi suunnitella Mobile First periaatteella sillä se:

• valmistaa mobiilikäytön laajenemisen ja kasvun kautta syntyviin uusiin mahdollisuuksiin ja tuottoihin
• pakottaa suunnittelijan keskittymään suunnitteluun ja priorisoimaan ominaisuudet huomioiden mobiililaitteiden rajoitteet
• auttaa innovoimaan ja kehittämään uusia innovatiivisia käyttötapoja hyödyntämällä mobiililaitteiden omia uusia ominaisuuksia

Mobile First -ajattelua on noudatettu menestyksellä merkittävien palveluiden suunnittelussa. Alla muutama lainaus alan tekijöiltä:

Kevin Lynch, Adobe CTO
“We really need to shift to think about mobile first… This is a bigger shift than we saw with the personal computing revolution.”

Kate Aronowitz, Facebook Director of Design
“We’re jus now starting to get into mobile first and then web second for a lot of our products. What we were finding is that the designers on mobile are really embracing the constraints and that it’s actually teaching us a lot about how to design back to the desktop.”

Mobile First ajattelun toimivuus ja edut on todistettu jo suurissa projekteissa. Ehkä olisi aika miettiä menetelmän huomioimista omissakin tulevissa projekteissaan.

Adobe Muse on mielenkiintoinen ja joillain tahoilla ehkä odotettukin tuote. Kenelle ja mihin se soveltuu ei kuitenkaan ole aivan selvää. Yritän tässä artikkelissa valottaa asiaa ja helpottaa lukijoiden tilannetta heidän miettiessään työkalun käyttöönottoa. Alkuun on syytä todeta, että olen “koodari”. Mutta en ole milloinkaan ymmärtänyt monien koodinkirjoittajien ennakkoasenteita toimintaa automatisoivia työkaluja kohtaan. Työkalut ovat osa teknologiaa ja niiden oikea valinta sekä tehokas käyttö on vain järkevää.

Muse – InDesign for Web?

Musea voisi kuvailla webin InDesign:ksi. Musen käyttö tuo webbisivujen tuottamiseen printtitaittajille tutun työkalun käsitteet ja työtavat. Muse mahdollistaa verkkosivujen toteuttamisen printistä tutuin työtavoin. Tämä ei ole pelkästään hyvä asia!

Myös printtisuunnittelijoiden on viimeistään tässä vaiheessa syytä tiedostaa, että verkossa sisällön esittämisen säännöt eivät ole samat kuin printissä. Printti on aina tietyn kokoinen ja sitä luetaan pysty tai vaaka-asennossa sen mukaan kuin taittaja on päättänyt. Webissä nämä säännöt eivät enää päde eikä web suunnittelua pitäisi edes tehdä samoin käsittein. Webissä ei ole vastaavia fyysisiä käsitteitä eikä rajoitteita.

Printistä tutusta ajattelusta luopuminen on ainoa oikea tie kehittää verkkojulkaisua oikeaan suuntaan. Nykyisin ymmärretty responsive (web) design perustuu juuri printistä periytyneiden rajoitteiden poistamiseen. Sivua voidaan lukea erikokoisilla näytöillä, pysty tai vaaka-asennossa jne. Sisällön on sopeuduttava käyttäjän tarpeisiin ei päinvastoin. Valitettavasti Muse toimii juuri vastoin tätä ajatusta.

Muse generoi sivustosta sekä html että css -tiedostot. Tosin nämä tuotetaan vasta kun käyttäjä on valinnut “Export to HTML” -toiminnon. Tämän jälkeen Musen tuottaman sisällön voi siirtää omalle web-palvelimelleen. Siirrossa on huomioitava, että sivustolle on siirrettävä sellaisenaan kaikki mitä Muse on tuottanut.

Musen tuottamaa HTML ja CSS -koodia voi jälkeenpäin muotoilla millä tahansa tekstieditorilla. Tämä kuitenkin teoriassa, sillä Musen tuottama koodi ei ole mitenkään selkeää, eikä varsinkaan hyvää. Ei vaikka ei tarkastelisi sitä edes koodarin silmin. Selaimelle tosin on suhteellisen yhdentekevää miltä koodi näyttää mutta aivan merkityksetöntä se ei kuitenkaan ole.

Musen ominaisuuksista

Se, että Muse tarjoaa valmiit työkalut sisällön tuottamiseksi, asemoiseksi ja ulkoasun määrittelemiseksi ei ole pelkästään hyvä asia. Toki visuaalista ulkoasua on helppo toteuttaa mutta täytyy huomata, että Musen toimintatavan vuoksi se myös rajoittaa toteutuksen valittavissa oleviin ominaisuuksiin. Musella ei ole mahdollista toteuttaa sellaista mitä Muse ei itse osaa!

Musen avulla toteutat sivuston niillä ehdoilla, joihin Muse pystyy, et niillä mitä olet itse visioinut ja minkä koodissa voisi toteuttaa.

HTML5 ja CSS3 mahdollistavat monien näyttävien ja usein tarpeellistenkin ominaisuuksien käytön verkkosivuilla. Muse ei kuitenkaan näitä osaa. Ja muistutan edelleen, että Musen tuottaman koodin vuoksi näiden ominaisuuksien lisääminen jälkeenpäinkään ei ole mahdollista tai vaatii vaivaa sen verran, että samantien olisi tehnyt sivun ilman Musea.

Musen tuottamasta koodista

Musen tuottama koodi ei ole nykyisten suositusten mukaista. Onko sillä sitten merkitystä? Kyllä, vaikka selainta ei vähempää kiinnosta miltä koodi näyttää kunhan se on ymmärrettävässä muodossa ja renderöitävissä sivulla näytettävään muotoon.

Mitä haittaa tästä “huonosta koodista” sitten on?

• Koodin ylläpidettävyys on olematonta ellei peräti mahdotonta.
• Sivusto on sidottu Musen käyttöön myös ylläpidossa ja jatkokehityksessä
• sivujen “paino” kasvaa. Tämä on esimerkiksi hakukoneoptimoinnin kannalta huono asia
• Pienten selainkohtaisten “vikojen” korjaaminen vaikeaa ellei mahdotonta
• Musen sisältämättömien ominaisuuksien lisääminen vaikea ellei mahdotonta

Mihin Muse sitten soveltuu?

Muse soveltuu parhaiten suhteellisen staattisena säilyville sivustoille, sillä sivuston sisältö ei ole mitenkään helposti päivitettävissä. Tästä voidaan edelleen todeta, että sisällön ylläpito ei ole ulkoistettavissa asiakkaalle, jolle sivusto on toteutettu. Näillä ehdoilla Muse ei oikein sovellu kaupallista web-suunnittelua tekevälle graafiselle suunnittelijalle. Juuri sisällön ylläpidon helppouden vuoksi suurin osa nykyisin valmistettavista verkkosivustoista perustuu jonkin sisällönhallintajärjestelmän käyttöön. Musen avulla toteutetun sivuston muuttaminen esimerkiksi WordPressin teemaksi ei ole mahdollista.

Hyviä kohteita Musen käytölle ovat mm.

• tekijän omat verkkosivut
• yrityssivut, joille ei ole tarvetta sisällön päivittämiselle
• kampanjasivustot, joilla on tietty elinkaari
• valokuvagalleriat
• portfoliosivustot
• muun web-suunnittelun yhteydessä “leiskan” ja asiakkaalle esitettävän demosivuston toteuttaminen

Musen ei siis tarvitse olla lopullisen verkkosivun toteutustyökalu vaan se voi toimia työkaluna suunnittelu- ja kehitystyössä. Musen sivustolla voitaisiin joissain tapauksissa korvata Photoshopilla tehty leiska.

Musen avulla voi helposti esittää asiakkaalle tai koodarille mitä on suunnitellut, miten sivuston tulee toimia ja mitä halutaan. Kun lopputulos on hyväksytty voi koodari toteuttaa sen vaikkapa valitun CMS järjestelmän päälle. Musen tuottamaa koodia ei kuitenkaan voida uudelleenkäyttää.

Kenelle?

Muselta ei kannata odottaa sen ratkaisevan kaikkia web-suunnittelun tarpeita. Muse on vasta beta vaiheessa ja sen sisältämät ominaisuudet vielä varsin rajalliset. Muse on kuitenkin parasta mitä tällä rintamalla on milloinkaan toteutettu.

Muse ei ole koodareille! Musessa koodia ei edes pääse näkemään saati sitten muokkaamaan. Muse on silti tulevaisuutta, joka tosin ei realisoidu täydessä mittakaavassa lähiaikoina. Niille designereille, jotka nyt ajattelevat, ettei koodareille tai koodi opiskelulle ole enää tarvetta, voin sanoa, että väärässä ovat. Muse ei poista koodausosaamisen tarvetta.

Muselle on kuitenkin paikkansa. Toistaiseksi se soveltuu vain tietyn tyyppisten sivustojen toteutukseen. Web-tekniikoiden osaaminen; HTML ja CSS ovat edelleen tarpeen, nyt ja tulevaisuudessa.

Kannattaa myös muistaa, että Adobella on hyvin hallussaan sekä sisällöntuotannon työkalut että myös verkkojulkaisun tekniikat ja siten mahdollisuus kehittää Musea parempaan suuntaan. Museen saattaa ajanmyötä tulla mukaan ominaisuuksia, joiden puute tällä hetkellä voi olla ratkaiseva este sen käyttöönotolle.

Muse on näyttänyt selkeästi missä on webbisuunnittelun tulevaisuus mutta tällä tasolla se ei vielä korvaa muita välineitä. Webin anti on juuri sen monipuolisuudessa ja mahdollisuuksissa. Webbi kehittyy nopeasti eikä yksikään työkalu tule ratkaisemaan kaikkia tarpeita.

Kokeile itse

Kannattaa tutustua ja kokeilla ennen mielipiteen luomista. Meillä jokaisella on omat tarpeemme; minulle Muse ei sovellu mutta en epäile, etteikö se toimisi monen muun käytössä.

Muse on vielä betaversiona ilmainen ja vapaasti käytettävissä. Musen voi ladata osoitteesta http://muse.adobe.com/betadownload.html

Muse on saatavilla sekä Mac että Windows ympäristöihin.

Suomi on jäämässä sähköisen julkaisemisen takapajulaksi ja kehitysmaaksi. Tällainen tunnelma tulee kun keskustelee tahojen kanssa jotka rimpuilevat julkaisutoimintansa tuomisessa tablettiaikaan. Aiheeseen liitty suuri määrä epävarmuutta, pelkoja ja päättämättömyyttä joka pitempään jatkuessaan johtaa nämä julkaisijat (tai markkinoijat) vaikeuksiin toimintansa kanssa. Odottelemalla ja katsomalla mihin suuntaan maailma menee menetetään joka hetki x-määrä mahdollisuuksia.

Ei paperijulkaisu mihinkään häviä!

Ei häviäkään, eiväthän LP-levytkään ole “hävinneet”. Mutta käyrät eivät varsinaisesti ole nousussakaan ja  sekä tilaustulojen että mainoseurojen hankkiminen on yhä vaikeampaa. Sähköisen julkaisun muuttaminen tuloksi on epäonnistunut pahoin lehtien verkkopalveluissa. Tietokoneella ja selaimella lukeminen on käyttökokemukseltaan epämiellyttävää ja yleisö on tottunut saamaan sisällön ilmaiseksi.

Ajat kuitenkin ovat muuttumassa. Etelä-Korea ilmoitti korvaavansa koulukirjat tableteilla vuoteen 2014 mennessä. Libanonista kuului samanlaisia uutisia.

http://thenextweb.com/asia/2011/07/04/south-korean-schools-to-replace-all-textbooks-with-tablets/

Tabletitko siis pelastajaksi?

Mahdollisesti. Tablettilaitteilla, iPad etunenässä on yksi valtti hihassaan. Niiden käyttökokemus on alunperin suunniteltu sisällön kuluttamiseen. Ihmiset hankkivat niitä nimenomaan tuota tarkoitusta varten! Maailmalla on joitain satoja miljoonia tablettilaitteita  (arvio 450 milj. vuoden 2014 aikana). Suomessa on noin 200 000 iPadia. Määrät voivat tuntua pieniltä paperilehtien lukijamäärään, mutta jostain on aloitettava. On hyvä muistaa että alan pioneeri iPad on ollut markkinoilla vasta pari vuotta.

Tablettien käyttäjät ovat aikaisia omaksujia ja edelläkävijöitä. Lisäksi tabletit ovat vielä toistaiseksi kuluttajamarkkinoilla kalliita laitteita joten voi olla että niiden käyttäjätkin on ovat ns. korkean markkina-arvon asiakkaita. Wired lehden kokemusten mukaan sama kuluttaja voi hankkia saman sisällön sekä paperilla, että tabletille erillistä maksua vastaan. Siitäkin huolimatta että sama sisältö on maksutta heidän nettisvuillaan!

Miten aloitan?

1. Arvoi onko julkaisusi  ja lukijakuntasi valmiita sähköiseen aikakauteen
2. Jos vastaus on kyllä, niin tartu toimeen. Älä suunnittele siirtäväsi paperiversiota suoraan näköiskopiona tabletille. Ota selvää tablettijulkaisemisen uusista mahdollisuuksista ja työkaluista.
3. Kokeile rohkeasti. Adobella on ilmainen työkalu ja rajoitettu julkaisukanavakin Indesignista tabletille. Appstoreen julkaiseminen maksaa edullisimmillaan n.300 euroa/julkaisu. Vaihtoehtoisesti eDocker Tablet Publisherilla kynnys web-app julkaisemiseen on erittäin matala.
4. Kerää kokemuksia. Työ tekijäänsä opettaa. Jos jokin ei toimi kokeile siten jotain muuta!  Epäonnistuminenkin on tapa oppia. Tekemättä mitään ei saavuta mitään uuttakaan.
5. Oikeasti parhaat tulokset saavutetaan kun tablettijulkaisun suunnittelu kulkee samaa tahtia mahdollisen paperiversion kanssa eikä vasta sen jälkeen.
6. Kouluta itsesi tai tekijäsi alan edelläkävijöiksi maassamme. Nyt sen hyvinkin mahdollista monien vielä odotellessa mitä tuleman pitää.

Linkin takaa löydät Lyndan videoklipit joissa käydään uudet ominaisuudet läpi aika huolella. Katsokaa, voittaa asianharrastajalle kuitenkin tosi-TV:n 6-0!

Mukavaa viikonloppua,

Juha

http://labs.adobe.com/technologies/photoshopcs6/

Lataamiseen tarvitaan Adobe ID ja beta lakkaa toimimasta jonkin ajan kuluttua myyntiversion julkistamisesta. Kandee käyttää tilaisuus hyväksi ja tutustua! Lopuullisesta julkistusajankohdasta ei vielä ole tietoa.

Adobe on julkistanut pienen videopätkän jossa viitataan tulevan Photoshop version videoeditointi ominaisuuksiin. Tarkkaa julkista tietoa ei vielä ole mutta tämä vihjaa selkeästi siihen että tulevassa Photoshopissa on mahdolllisuus leikata ja muokata videomateriaalia ja luonnollisesti hyödyntää myös still-materiaalia seassa:

Onko tässä mitään järkeä?

Adobella on jo ennestäänkin valmiit ratkaisut videonkäsittelyyn; Adobe Premiere Pro ja Elements videon leikkaamisen ja After Effects on perinteisesti ollut “videon Photoshop”.
Miksi ympätä vielä kolmas ohjelma samaa soppaa hämmentämään?
Alkuhämmennyksen jälkeen olen valmis olemaan sitä mieltä että tolkkua on! Pari vuotta sitten sama hämmennys nähtiin kamerapuolella; Nikon ja Canon julkistivat järjestelmäkameransa joissa on HD-videon kuvausmahdollisuus. Webbifoorumit täyttyivät taivastelusta mutta luovat tekijät näyttivät suunnan. Moniin tilanteisiin DSLR video on avannut aivan uusia mahdollisuuksia tehdä vaikuttavaa jälkeä kustannustehokkaasti.

Samalla lailla kun kuvausvaiheessa teknologiat yhdistyvät on luonnollista että vastaavaa tapahtuu jälkikäsittelypuolella.

Kun julkaiseminen muuttuu yhä sähköisemmäksi on väistämätöntä että vanhat raja-aidat hieman tutisevat. Valokuvaajan on keikoilla pystyttävä tallentaamaan tilaneteen mukaan still- ja videomateriaali ja kokoamaan niistä mielekäs kokonaisuus kuhunkin tilanteeseen. median kuluttajan joka esim. tablettilaitteella tai webissä sisältöä käyttää tulokulma on aktiivisen passiivinen. Hänen kannaltaan kaikki toimii jokatapauksessa kunhan toteutus on tehty järkevästi ja huolella. Kun katson miten lapseni kuluttavat mediaa on liikkuva kuva heille ensisijainen valinta esim. netistä opiskeluun.

Tunnepohjainen vastustus kumpuaakin osin epävarmuudesta ja pelostakin. Mutta kuten businessvalmentajien latteuspassio kuuluu: “kasvu tapahtuu mukavuusalueen ulkopuolella.” Uudet mahdollisuudet kannatta ottaa avoimesti vastaan ja käyttää hyödyksi!