Teeman suunnitteleminen

Tekniset vaatimukset

Sivujen ulkoasun suunnittelun voi toteuttaa haluamallaan tavalla ja ohjelmalla. Suosittuja tekstieditoreja ovat muun muassa Atom ja Sublime Text.

Suosittelemme, että käytät aikaa ja vaivaa säästääksesi teemasi pohjana MyCashflow'n Barebones-oletusteemaa, joka sisältää monia hyödyllisiä työkaluja suunnittelijan avuksi:

  • CSS-gridi
  • SASS-tyylit
  • Valmiit JavaScript-pluginit esim. AJAX-toimintojen toteuttamista varten
  • Font Awesome -kuvakkeet

Tutustu myös mycashflow-sync-työkaluun, jonka avulla voit helposti kääntää SASS-tyylit CSS-kielelle ja synkronoida tekemäsi muutokset automaattisesti kehittämäsi kaupan tiedostohakemistoon.

Huolimatta toteutustavasta lopputuloksen on kuitenkin oltava toimiva HTML-sivu, joka täyttää tekniset vaatimukset. Voit katsoa mallia oletusteemasta tai jo aiemmin tehdyistä kaupoista. Myös kilpailijoiden teemakauppoja kannattaa vakoilla.

Barebones-teeman ja sen eri variaatiot voit ladata ilmaiseksi Teemakaupasta. Barebones-teemaa kehitetään aktiivisesti, ja Teemakaupassa on aina saatavilla sen ajantasainen versio.

Koodi validia

Teeman HTML-koodin on oltava validia. HTML-merkkausversion voit kuitenkin valita itse (nykyään kuitenkin HTML5 on yleisimmin käytetty versio). Myöskään CSS-tiedostossa ei saa olla kriittisiä virheitä. Selaintoimittajien etuliitteet ja yleisesti tunnetut selainfiltterit sallitaan.

Koodin on oltava yleisesti ottaen siistiä ja rakenteeltaan selkeää. Koodi tulee kommentoida hyvin jotta sitä on helppo muokata. Käytä kommentoinnissa englantia ja yleisesti käytössä olevia termejä kuten header, sidebar ja footer.

Teeman JavaScript-koodin pitää toimia virheittä. Koodi pitää tarkistaa JavaScript Lint -työkalun avulla, joka tarkistaa koodin ihmissilmää perusteellisemmin. Koodin pitää olla yleisesti ottaen selkeää ja johdonmukaista. Suositeltavaa on, että noudatat suunnittelussa esimerkiksi jQueryn tyyliopasta.

Yleisimmät muotoilutagit

Varmista, että kaikki yleisimmät muotoilutagit on määriteltynä tyylitiedostossa. Näitä ovat mm. h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset ja address. Tällä varmistetaan se, että tekstit ja eri elementit näyttävät samalta koko teemassa.

Lomakkeet

Kaikki verkkokaupassa tulostettavat lomakkeet noudattavat MyCashflown lomakesääntöjä. Jos muokkaat lomakkeita niiden oletustulostuksesta teemassasi, niin varmista että ne tulostuvat sääntöjen mukaisesti. Lomakkeiden toiminta halutaan pitää mahdollisimman universaalina, jotta ne toimivat hyvin myös tulevilla päivityksillä.

Bannerit

Banneripaikkoja on hyvä löytyä teemasta vähintään yksi. Useammasta banneripaikasta ei ole haittaa – päin vastoin: tämä antaa teeman käyttäjälle (eli kauppiaalle) lisää joustoa verkkokaupan käytössä. Bannerit ovat yleinen ja hyödyllinen mainontakeino verkkokaupassa, joten niiden käyttöön kannattaa panostaa.

Bannerien tulostamiseen käytetään Banners-tagia, joka tulostaa yhden banneriryhmän kaikki bannerit. Huomioi että banneri toimii pelkkänä tekstinäkin jos siinä ei ole kuvaa.

Koodin tiivistäminen (minify)

Teeman CSS- ja JavaScript-koodit kannattaa tiivistää (minify). Tällä tarkoitetaan automaattista prosessia, jossa koodi optimoidaan mahdollisimman nopeasti suoritettavaksi pienentämällä tiedostojen kokoa.

MyCashflow'ssa JavaScript- ja CSS-koodi tiivistetään hakemalla skripti- ja tyylitiedostot käyttämällä MinifyJS- ja MinifyCSS-tageja. Tageilla on attribuutti mode, joka arvolla 'production' tiivistää kaikki haettavat tiedostot yhdeksi tiedostoksi. Arvolla 'development' tiedostot haetaan yksittäin ja tiivistämättöminä.

Helpperit

Koodin staattiset osat (kuten header ja footer) kannattaa sijoittaa helper-tiedostoihin, jotka haetaan sivulle käyttämällä Helper-tagia.

Näin voit uudelleenkäyttää samanlaisena pysyvää sisältöä kautta teeman. Koodin pilkkominen myös helpottaa sen muokkaamista. Jos sinun tarvitsee tehdä muutoksia footeriin, sinun tarvitsee tehdä muutos vain footerin omaan helper-tiedostoon, jolloin muutos päivittyy kaikille sivuille, joille footer haetaan Helper-tagin avulla.

Selaintuki

Teeman täytyy olla visuaalisesti yhtenäinen ainakin seuraavilla selaimilla:

  • Firefox
  • Chrome
  • Safari
  • Internet Explorer (v. 11:destä ylöspäin) ja Microsoft Edge

Modernit selaimet voivat hyödyntää CSS3-tekniikkaa siirtymisissä ja visuaalisissa efekteissä.

Tarkista pitkät tekstit

Teeman tarkoitus on palvella verkkokaupan sisältöä, joten varmista että teema toimii hyvin erilaisten sisältöjen kanssa:

  • Testaa kaikki tekstikentät läpi pitkillä teksteillä, jotta näet kuinka layout käyttäytyy pitkien tekstirivien ja suuren sisältömäärän kanssa.
  • Tee päävalikosta todella laaja, kirjoita pitkiä otsikoiden nimiä siten että ne rivittyvät
  • Luo valikkoon alatasoja ainakin neljännelle tasolle asti. Katso että valikko ei silti hajoa ja kaikki teksti on luettavissa. Tee sama testaus myös infovalikolle.
  • Testaa tuotteet pitkillä tuotenimillä, miten nimi käyttäytyy tuotelistauksessa ja itse tuotesivulla, entä ostoskorissa?
  • Mitä jos tuote maksaa paljon, esim. 12 000,00 €? Ota myös huomioon hinnan desimaaliosan vaatima tila. Laita tuote alennukseen, jolloin sille tulee kaksi hintaa. Tuotteen voi maksaa myös osamaksulla, jolloin hinnan lisäksi tulee vielä uusi vaihtoehto kuukausisummasta. Miltä tämä nämä kolme hintaa näyttävät tuotelistauksessa ja tuotekortissa?
  • Tuotekortissa tuotteelle voi antaa tuotekuvauksen ja vielä tarkan tuotetiedon. Kokeile näitä hyvin laajoilla teksteillä.

Vähän tai ei ollenkaan sisältöä

Samalla kun teemaa testataan pitkillä teksteillä, on hyvä kokeilla myös tosi lyhyitä tekstejä. Mitä jos teemassa on todella vähän sisältöä, tai paikoitellen ei ollenkaan? Testaa, että teema toimii hyvin jos uutisia ei ole yhtään, infosivuja vain yksi ja tuotemerkkejä nolla.

Käytä tageilla before- ja after-attribuutteja. Niiden avulla saat esim. yhteensopivien tuotteiden otsikon piiloon jos sellaisia tuotteita ei ole ollenkaan.

Tarkista suuret kuvat

Kaikille kuville asetetaan maksimikoot teemaan käyttäen kuvatagien (esim. ProductThumbnailsheight- ja width-attribuutteja. Näin varmistetaan, että teeman käyttäjä ei pääse hajottamaan teeman ulkoasua ja kuvat skaalautuvat sopivan kokoisiksi teemassa. Koko asetetaan mm. logolle, bannereille, tuotekuville, tuoteryhmän kuvalle ja tuotemerkeille.

Ilmoitukset ja varoitukset

Kaupassa annetaan virheilmoituksia ja varoituksia monessa paikassa. Ilmoitus tulee kun yhteydenottolomake tai asiakastiedot kassalla on täytetty väärin, tuotteita ei ole ostoskorissa tai tuote poistetaan sieltä, salasana on väärin kun kirjaudutaan tilausseurantaan jne.

Kaikki ilmoitukset eivät ole kuitenkaan varoituksia, vaan myös onnistuneista toiminnoista ilmoitetaa (esim. tuotteen lisääminen ostoskoriin).

Muista suunnitella ilmoituksille erilaiset visuaaliset tyylit. Varoitukset ovat yleensä punaisia ja onnistumisviestit vihreitä.

URL-osoitteet

Käytä suhteellisia osoitteita teemassa. Teeman tulee toimia itsenäisesti eri palvelimella eikä siinä voi olla viittauksia ulkopuolisiin tiedostoihin. Myös teeman nimi voi vaihtua, joten sen tilalta käytetään Theme-tagia, joka tulostaa teeman nimen.

Jos sinun tarvitsee luoda teemaan kiinteitä linkkejä joillekin verkkokaupan sivulle, käytä tähän Link- tai LinkUrl-tageja.

Resoluutiot ja skaalatuvuus

Teeman on oltava täysin responsiivinen. Sen on toimittava hyvin yleisimmillä mobiililaitteilla ja -selaimilla sekä työpöytäkoossa. Teeman käytettävyys ei saa kärsiä tarpeettomasti pienen näyttökoon vuoksi, vaan navigaation on oltava selkeä ja kaupassa asioinnin tulee olla mahdollisimman vaivatonta kaikilla laitteilla.

Käyttämällä Barebones-oletusteemaa teemasi pohjana helpotat responsiivisuuden toteuttamista huomattavasti. Barebones on suunniteltu lähtökohtaisesti responsiiviseksi, ja se sisältää paljon hyödyllisiä ominaisuuksia, jotka tukevat responsiivista suunnittelua.

Footerin pakolliset tiedot

Sivuille tulee suunnitella footer, mielellään sivujen alaosaan, jossa esitetään kaupan nimi ja MyCashflown tekstimainos. Kaupan nimi tulostetaan tagilla ShopName ja MyCashflow'n tekstimainos tagilla MyCashflowTextAd. Footer voi olla hyvinkin pienellä ja huomaamattomasti tehty, jos sinne ei ole tarpeen lisätä enemmälti sisältöä.

Halutessaan suunnittelija saa lisätä oman krediittinsä footerin tekstimainoksen perään. Krediitti voi olla muotoa ”Suunnitellut Mainostoimisto Oy” tai englanniksi ”Designed by Comany Ltd”. Tekstin voi laittaa linkiksi omalle nettisivulle.

Logo

Logo tulee toimia myös ilman kuvaa. Kun teema asennetaan ensimmäistä kertaa, ei logoa ole vielä välttämättä asennettu. Tällöin logon paikalla näkyy yrityksen nimi.

Tekijänoikeudet

Älä käytä tekijänoikeuksien alaista materiaalia teemassa. Sinun täytyy varmistaa että grafiikka, fontit, koodikirjastot yms. sallivat jälleenmyynnin osana teemaa.

Jos lataat materiaalia kuvapankeista, kuvien yhteydessä on yleensä tieto siitä, missä tarkoituksessa niitä on luvallista käyttää.

Fontit

Teemassa on käytettävä fontteja jotka toimivat kaikilla laitteilla ongelmitta. Leipätekstinä suositellaan käytettävän web safe -fontteja. Tämä tarkoittaa perusfontteja jotka löytyvät kaikilta käyttöjärjestelmiltä ja toimivat siis myös kaikilla selaimilla. Näitä ovat mm. Arial, Georgia, Times New Roman ja Verdana.

Erikoisfontteja voi käyttää kunhan niiden lisenssiehdot ovat kunnossa. Varma valinta on Google Web Fonts, joka tarjoaa fontteja käytettäväksi ilmaiseksi. Erikoisfontteja ei kannata käyttää liikaa, koska niiden liiallinen viljely hidastaa sivua ja syö näin ollen käytettävyyttä. Usein kaiken tekstin voi esittää yhdellä fontilla, mutta yleinen ratkaisu on myös käyttää yhtä fonttia navigaatiossa ja toista leipätekstissä.

Älä missään tapauksessa esitä staattista tekstiä kuvien avulla. Teeman tulee tukea monikielisyyttä, joten kaikille kielille ei tällöin voida tehdä omia käännöksiä. Tekstin esittäminen kuvissa ei myöskään auta hakukonenäkyvyydessä lainkaan, ja kuvan skaalautuminen pienillä näytönleveyksillä voi tuoda omia haasteitaan.

Monikielisyys ja valuutanvaihdon tuki

Teeman on toimittava verkkokaupan kielestä huolimatta. Kaikki teemassa käytettävä staattinen teksti lisätään sivupohjiin Text-tagin avulla. Tagille annetaan koodi, joka hakee tekstin verkkokaupan sanakirjasta. Tällöin kyseinen teksti näytetään aina asiakkaan valitseman version kielellä (olettaen että tekstille on sanakirjassa käännös).

Sivuille pitää myös tehdä paikka kielivalikolle, joka tulostetaan käyttämällä LanguageNavigation-tagia.

Lisäksi teemaan on lisättävä valuuttavalikko, joka tulostaa Currency Converter -laajennuksen kautta valittavissa olevat valuutat. Valuuttavalikko lisätään tagilla CurrencyNavigation.

Laajennukset

Teeman on tuettava MyCashflow'n laajennuksia. Tämä tapahtuu lisäämällä teemaan Extensions-tagi, joka tulostaa laajennuksien käyttämät skriptit. Tagi lisätään eri attribuuteilla sekä head- että body-elementteihin.

Teeman asetukset -tiedosto

Teemakohtaiseen theme.xml -tiedostoon tallennetaan teeman asetukset. Tässä vaiheessa vielä tallennetaan vain kuvien koot. theme.xml -tiedostoa tullaan laajentamaan tulevaisuudessa kattamaan muitakin teeman asetuksia.

Lue lisää asetuksista teemaoppaassa.

Ostoskorisi on tyhjä