MyCashflow blogi

Miska kirjoitti 24.2.2011 kategoriaan Interface-merkkaus avainsanoilla bannerit Interface-merkkaus: 0

Bannerit ulkoasun suunnittelijan näkökulmasta

Kävimme bannereita hieman läpi viimeisimmässä oletusulkoasun päivitysuutisessamme, mutta se kosketti vain kauppiaita ja nyt aiommekin paikata tämän puutteen ja käsitellä asiaa hieman toiselta kantilta.

Bannerit alkavat olla tehokas työkalu ulkoasun suunnittelijoille. Kyseessä kun ei ole pelkkä anna-kuva-ja-toivo-parasta tyyppinen toteutus, vaan bannereita MyCashflow’ssa voidaan käyttää moninaisilla tavoilla, joista käymme alla läpi vain muutaman.

Kuvakarusellit

Kuvakarusellit ovat hyvä tapa näyttää useita isompia bannereita kerralla uhraamatta tarkoitukseen kokonaista sivua. Karusellin perusperiaate on liu’uttaa isäntäelementin – joka on asetettu piilottamaan ylimenevä sisältö – näkyvään osaan sen sisällä olevaa sisältöä. Tässä tapauksessa yksittäinen banneri.

Oletusulkoasussa menetelmää on käytetty etusivulla bannereiden kanssa hieman monimutkaisemmin, koska bannereiden tiedot ja navigointi näytetään vain jos hiiri on bannereiden päällä. Yksinkertaisimmillaan karusellin toteuttaa esimerkiksi jQueryn SerialScroll tai jQuery Tools scrollable pluginilla ja muutamalla rivillä koodia. Kannattaa ladata uusin oletusulkoasu ja tutkia kuinka asia on siellä tehty ja tehdä oma tulkinta aiheesta noudattamalla valitsemansa pluginin ohjeita.

Bannereiden tekstikentällä ihan mitä vaan

Bannereilla on myös tekstikenttä, johon sisältöä voidaan syöttää rajattomasti, jolloin bannereista voidaan ottaa paljon enemmän irti kuin pelkästä kuvabannerista. Alla muutamia näppäriä asioita joita tekstikentällä voit tehdä.

Tekstinostot

Kuka käskee että bannerin pitää olla kuva? Entä jos haluat etusivulle moniosaisen tekstinostoelementin, jossa otsikoista voidaan avata alla oleva sisältö.

Tämän voisi tehdä kyllä infosivuillakin, mutta bannerit ovat tähän huomattavasti kevyempi työkalu. Banneriryhmän tulostus on kätevä muokata helper attribuutilla, jolloin yksittäisen bannerin tulostuksen saa tehdä juuri kuten haluaa ja tulostuksessa voi käyttää tai olla käyttämättä kuvaa.

Tekstinostojen käyttöliittymää voi piristää vaikka jQueryUI:n mukana tulevalla haitari-pluginilla.

Tyylimäärittelyjä bannereiden läpi

Tätä tekniikkaa hyödynnetään tovi sitten julkaistussa oletusulkoasussa seuraavasti:

<style type="text/css" media="all">
  {BannerText(name:'head-styles')}
</style>

Kun hallintaan syötetään oletusulkoasua käytettäessä banneri jonka koodinimi on head-styles, niin tämän bannerin tekstikentän sisältö kirjoitetaan style tagien sisään teeman head elementtiin. Tällä voidaan muokata teemaa kevyesti ilman, että sitä täytyy asentaa omaan kauppaan muokattavaksi. Muista kuitenkin bannerin tekstikentän alkuun kirjoittaa notextile.. komento, jottei sekaan tule Textilen tekemiä <p> tageja.

Ulkoasun elementit kokonaan bannereilla

Yksi vaihtoehto on toteuttaa ulkoasun osia suoraan bannereiden läpi, jolloin asiakas voi järjestellä bannereita oman ryhmänsä sisällä tai vaihtaa niiden ryhmiä ja tämä heijastuu suoraan ulkoasun rakenteeseen. Suunnittelija voisi tehdä esimerkiksi banneriryhmät Vasen palsta ja Oikea palsta, joiden sisällä on bannereita, kuten Ostoskori, Tuotenosto, Suositut tuotteet, Kategorianavigaatio ja niin edelleen. Esimerkiksi Kategorianavigaatio bannerin tekstikenttä voisi näyttää tältä:

notextile..
<div id="CategoryNav" class="LayoutModule">
  {Categories(before:'<h2 class="LayoutModuleHeader">Tuoteryhmät</h2>')}
</div>

Tyylitiedostossa voisi olla sitten tarvittavat säännöt, jotta kaikki LayoutModule elementit toimivat missä järjestyksessä tahansa sivupalstoissa. Tällön asiakas saisi itse järjestellä ja muutella ulkoasua mielensä mukaan. Toiminto on tässä mainittu lähinnä kuriositeettina, koska saavutettu hyöty tästä jää hyvin minimaaliseksi ellei olla myymässä ulkoasuja valmistemplate-tyyliin, eikä asiakasta varten suunniteltuna.

Esimerkissä oleva “notextile..” on tärkeä rivi silloin, kun kirjoitetaan html-merkkausta MyCashflow’n tekstikenttiin tai muuten Textile käärii sisällön <p> tagin sisälle. Lisätietoa html-merkkauksen kirjoittamisesta Textilen sekaan löytyy Textilen kattavasta ohjeesta.

Siinäpä muutamia käyttötapoja bannereille, joilla pääsee kyllä alkuun, mutta ei bannereiden käyttö näihin vielä rajoitu. Työkalu on yksinkertaisuudessaan kuitenkin erittäin monikäyttöinen ja sille varmasti ajan mittaan tullaan keksimään mitä mielikuvituksellisimpia käyttötarkoituksia.

Ismo kirjoitti 6.2.2010 kategoriaan Automaattiset päivitykset Markkinointi avainsanoilla alennuskupongit bannerit Markkinointi uudet ominaisuudet uutiskirjeet: 0

Uudet ominaisuudet: Markkinointi

MyCashflow uudistus sisältää merkittäviä päivityksiä verkkokaupan markkinointiin, joilla viet nettikauppasi markkinoinnin uudelle tasolle.

Uudistetut uutiskirjeet

MyCashflown uutiskirjeet saivat merkittävän päivityksen, kun sähköpostit muutettiin template-pohjaisiksi. Käytännössä tämä tarkoittaa, että uutiskirjeen ulkoasun muokkaamiseen on entistä vapaammat kädet ja uutiskirjeessä on mahdollista käyttää Interface tageja. Uudistuksen ansiosta voit mm.

• Listata uutiskirjeessa uusimmat ja myydyimmät tuotteet
• Listata verkkokaupan uusimmat uutiset
• Hallita graafisia elementteja helpommin (tästä lisää alempana)

Tekstiviestimarkkinointi

Tekstiviestimarkkinointi toiminnolla voit lähettää viestejä suoraan asiakkaidesi matkapuhelimeen, kun he ovat antaneet suostumuksensa tiedotteiden vastaanottoon. Tekstiviestien etuja ovat mm. reaaliaikaisuus ja se, että lähes jokainen viesti tulee luetuksi.

Bannerit

Bannerit ovat verkkokaupan sisäiseen mainontaan tarkoitettu toiminnallisuus. Voit luoda banneriryhmiä – esim. etusivu, vasen palsta, uutiskirje jne – joita listataan verkkokaupan puolella. Kun kampanjasi vaihtuvat, niin sinun on helppo käydä vaihtamassa bannereita hallintatyökalun kautta koskematta ulkoasun teeman lähdekoodeihin.