Olbedesignilta upeat parallax-kotisivut yritykselle (2/3)

Suuren yritysilmeuudistuksen toinen vaihe, eli nyt tehtiin kotisivut yritykselle

Tämä kirjoitus jatkaa tarinaa Lentoreppu-nimisen yrityksen reippaasta yritysilmeuudistuksesta. Uudistin yrityksen logon heti ensimmäisenä. Siitä voit lukea tarkemmin jutun ensimmäisessä osassa. Seuraavaksi oli vuorossa kotisivut yritykselle, eikä siinäkään vielä kaikki.

Heti kun liikemerkki oli päivitetty, alkoi kuumottava luonnostelu selkeästi erottuvan verkkosivuston luomiseksi. Siinä päädyin käyttämään harvoin käytettyä, niin kutsuttua parallax-tekniikkaa.

Työn edetessä ymmärsin myös tekniikan hyvät ja huonot puolet. Ja välillä hieman harmittikin.

 

suomen ensimmainen parallax-sivusto
Tästä kaikki alkaa. Tervetuloa-osiossa on myös latausindikaattori joka häviää, kun sivusto on täysin latautunut.

 

”Nmhh.. E-ei tämä nyt kyllä ollut aivan ensimmäinen. Ei täsmää.”

Kuulen juuri akateemisten ajattelijoiden vaikerruksen etusormensa kuumeisesti korjatessa kakkuloiden sijaintia silmillään. Ajatuksena tämä ”parallax” on toki vanha. Se tarkoittaa taustaa ja elementtejä, jotka liikkuvat eri nopeudella ja kiihtyvyydellä toisiinsa nähden. Näin luodaan näennäistä syvyysvaikutelmaa. Tämä oli käytössä jo 1980-luvun tietokone- seikkailupeleissä.

Tuoreimpana esimerkkinä voitaneen käyttää kaikille tuttuja Angry Birds -pelejä. Niissä taustaelementit liikkuvat eri tahdissa jolloin ne näyttävät siltä kuin etualalla olevat rojut olisivat lähempänä kuin taustakuvassa ja linnut jossakin siinä välimaastossa.

Itse hieman sovelsin tätä. En lähtenyt hakemaan erityisen vahvaa syvyysvaikutelmaa, halusin vain elävyyttä. Eli putoamisen tunteesta aiheutuvia kuolemanpelkotuntemuksia ei ehkä ole odotettavissa.

Niille teistä, joita matematiikka ja teoreettiset toteamukset kiinnostaa enemmän kuin cocktail-bileissä munasillaan uima-allasalueen läpi kirmaaminen bikinimimmien veikeästi silmäillessä, teille löytyy aiheesta lisää Wikipediasta. Nam.

 

suomen ensimmainen parallax-sivusto

Tiettävästi ensimmäinen parallax-sivusto Suomessa

En kiihkeistä etsinnöistäni huolimatta löytänyt yhtäkään Suomessa luotua parallax-sivustoa. Voitaneen siis hyvinkin sanoa, että Olbedesign on toteuttanut *ensimmäiset parallax-kotisivut yritykselle Suomessa! Nättiä.

Maailmalla on lukuisia mainioita esimerkkejä tekniikan hyödyntämisestä. Niistä ensimmäinen (ja edelleen paras) oli aikanaan Nike Better World. Siitä se kaikki lähti.

 

suomen ensimmainen parallax-sivusto

 

Harvinaisen runsaasti maistuvaa materiaalia

Koska yrityksen tarjonta on näin mielenkiintoinen ja kaikin puolin kiehtovampi kuin perushikiset jumppasalitreenit, minulle toimitettiin tietysti iso kasa myös fiiliksiä nostattavaa kuvamateriaalia. Hienoa! Lisäksi sain myös täysin vapaat kädet kuvien käsittelyyn (lue: pilaamiseen) ja toiveena olikin orgaaninen, syksyn sävyjä huokuva ilme. Ensin olin että ”Jes! Tämähän on juurikin minun juttuni!”, kunnes ymmärsin, ettei homma taidakaan olla aivan yksiselitteisen helppo.

”Tätä ei nyt jumankauta saa vesittää tavanomaisuudella.”
— Olli itse

suomen ensimmainen parallax-sivusto

 

Tavanomaisuuden välttelemisen vaikeus

Kun käytettävissä oli näinkin kiehtovaa materiaalia, ei sitä voinut vain roiskaista sivulle miten helpoiten ehtii. Sivuston suunnittelu- ja luonnosteluvaihe oli jo itsessään melko haastavaa. Lopulta useiden päivien ja luonnosten jälkeen päädyin tarjoamaan näytille seitsemännen luonnosversion. Se riitti.

”Jatkamme ehdottomasti tästä.”
— Lentorepun Ahti Aalto luonnokseni nähdessään

Luonnokselleni näytettiin välittömästi vihreää valoa. Näytin luonnoksen ohessa myös esimerkkisivuston, miltä saattaisi näyttää parallax-toteutus.

Joku alan mies saattaisi sanoa, että osoitin varsin typerää bisnestajua ja amatöörimäisyyttä ehdottaessani itse tällaista uutta tekniikkaa sivuston pohjaksi. Sehän ei todellakaan ole tehokasta opetella alati uutta, kannattavampaa on kopioida vanhaa pohjaa uutta tehdessä.

Totta. Ei se varmastikaan tehokasta ole, toisin kuin kolmen markan bulkkisivujen tauoton jyystäminen, mutta eipä tälle saitille ole myöskään kilpailijaa. Lisäksi ihan kelpo työnäytekin.

 

Haasteita täysin yllättäen ja pyytämättä

Kun sitten aloin tutustumaan toden teolla tähän tarunhohtoiseen parallax-tekniikkaan, törmäsin seinään. Ja monesti. Sivuston rakenne osoittautuikin odotettua haastavammaksi toteuttaa. Tosin tämä kerrotaan kyllä ihan suoraan liki kaikissa aihetta käsittelevissä artikkeleissa.

Responsive fail

Olin lapsekkaasti ajatellut kikkailevani niin, että tuloksena olisi ”responsiivinen parallax-sivusto”. Lopulta jouduin toteamaan, ettei se onnistu. Tämä siksi, että osilla täytyy olla koko ajan tietty korkeus ja sijainti. Mukautuvassa suunnittelussa elementit sen sijaan ”uivat” sivulla limittäin.

Hipelöintiä ei tueta

Myös rullaus kosketusnäytöllä osoittautui olevan hankalasti toteutettavissa. Kokeilin tähän useita erilaisia jQuery-liitännäisiä, joilla saadaan kosketusnäyttö käyttöön, mutta mikään ei toiminut tämän kanssa yksiin. Näin kokemus saattaa olla hieman kankeahko kosketusnäytöllä tarkasteltuna. Tämä korjataan jatkossa, mikäli löydän yhteensopivan kikkareen.

Optimaalisin katselukokemus isommalla ruudulla

Ja, koska kaikkien elementtien mitat ja sijainnit on tarkkaan määrätty, oli tehtävä päätös, mikä on sivuston optimaalisin katselukokemus. Arvelin, että perus 22″ näyttö saattaisi vähimmillään olla se aparaatti, jollaisella makkarinnurkissa lojuvat tietokoneet lienevät yleisimmin varustettu. Siispä mitat ovat sellaisella tarkasteltuna juurikin sopivat. Myös iPadilla ja muilla tableteilla sekä miniläppäreillä sivun pitäisi näkyä suht mielekkäästi.

Pienillä ja kapeilla mobiililaitteilla rajoitettu sisältö

Tällä hetkellä mobiiliversiona toimii kevennetty versio, jossa taustakuvia on vain pari erilaista eikä parallax-skriptiä aktivoida laisinkaan. Seuraamme asiakkaan kanssa palautetta ja sivustolle saapuvaa liikennettä. Tarvittaessa suunnittelemme oheen erillisen, pelkistetyn mobiilisivuston mikäli nykyinen kevytversio ei riitä. Vielä se ei ollut ajankohtainen.

Esimerkiksi iPhonella sisältöosiot näkyvät ilman navigaatiota, infopalikoita ja fiilistelykuvia. Lisäksi joitain pieniä fiboja saattaa siellä täällä esiintyä kännykän ruudulla tarkasteltuna, älä siis hätkähdä. Syy ei ole sinussa.

 

suomen ensimmainen parallax-sivusto
iPhonella näet vain palveluiden tekstisisällön. Myös kaikki parallax-elementit jäävät pois. Sorry.

 

Nätti ja painava, lähinnä työpöytäympäristöön

Sivusto on myös jonkinverran raskas, sillä valokuvia on hyödynnetty erittäin paljon. Kuvat olen pyrkinyt optimoimaan mahdollisimman pieneksi ilman, että niistä tulee täysin epämääräistä puuroa. Läpinäkyvyys ja suuri koko tuovat aina omat rajoitteensa.

Tiedostan toki, että tässä keveyden hinnalla nautitaan näyttävyydestä, mutta nyt se oli tietoinen ratkaisu. Nyt haluttiin mennä Suomen näyttävin elämyssivusto ja fiilistely edellä.

 

suomen ensimmainen parallax-sivusto
Kyllähän se melko raskas on. Sivuston kokonaiskorkeus on hulppeat 19 722 pikseliä. Revipä siitä sitten huumoria.

Pienistä ongelmista huolimatta mainio lopputulos

Asiakkaan luottamus palkittiin jälleen. Sain vapaat kädet ja näin onnistuin toteuttamaan työn, joka uskoakseni erottuu edukseen muista aktiviteetteja tarjoavien yritysten sivustoista. Kuten toiveena olikin.

Olet varmasti jo kämmenet hiessä odottanut, että pääset näkemään, mistä on kyse. Käy nyt tutustumassa Lentorepun palveluihin ja tilaa samalla vaikkapa polttariaktiviteetit ensi kesäksi!

Sivusto löytyy osoitteesta: www.lentoreppu.fi.

Lue myös juttu yrityksen uusitusta logosta.

 

*EDIT: Kiitos Villelle, joka Facebookissa häikäilemättä osoitti, ettei tämä ollutkaan ensimmäinen parallax-sivusto Suomessa. Tiettävästi ainakin helsinkiläisellä Gaijin-ravintolalla on varsin maittava ja simppeli parallax-sivu myös. Mahtavaa!

 

Katso myös nämä projektit blogissa:

Koivun Tyrnitilalle täysin uudistettu yritysilme
Verkkokauppa ja kotisivut yritykselle Nouseva Myrsky

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Huomaathan, että arvostan omalla nimelläsi jättämääsi vastausta hassunhauskojen nimimerkkien takaa huutelemista korkeammalle. Sähköpostiosoitettasi ei julkaista eikä paljasteta NSA:lle, mutta se mahdollistaa yhteydenottoni tarvittaessa — jospa kommentissasi olisi uuden jutun aihetta? Tarkistan ensimmäisen viestisi aina käsin roskapostin ja laittomuuksien varalta, mutta pääsääntöisesti kaikki kommentit kyllä julkaistaan sisällöstä tai mielipiteestä riippumatta kun vain maltat odottaa. Relax.