Flash-sivustotkin saa löytymään Googlen kärkipaikoita, kun tekniikka on hallussa. Flash-sivustot rakennetaan perinteisesti visuaalisuuden ja ”käyttökokemuksen” ehdoilla. Näin perinteiset kylmät faktat jäävät usein toissijaiseksi sivustossa.

Näin ei kuitenkaan tarvitse olla.

Flash hakukoneoptimointi

Rio Digital on kehittänyt Flash hakukoneoptimointiin konseptin ja tekniikan, jolla pääset hyötymään Flash toteutuksen visuaalisuuden hienouksista, kuitenkin niin että perinteiset hakukoneoptimointimenetelmät ovat vielä käytössä.

FSEO ratkaisu

Rion ratkaisussa julkaisujärjestelmällä päivitetään sisältöä, joka ohjataan kahteen eri käyttöliittymään, perinteiseen HTML-sivustoon ja Flash-sivustoon. Molemmissa on täsmälleen sama sisältö.

Näin Flash hakukoneoptimointi onnistuu ja sivusto saadaan kärkisijoille kun sen aihepiiristä haetaan tietoa. Lue lisää FSEO-ratkaisusta.

Lisää aiheesta tai sen vierestä

• Onko kampampanjasivustot oikea ratkaisu?
• Web-standardien konsepti: erota sisältö, toiminnallisuus ja visuaalisuus
• Flash ja sisällön erottaminen käyttöliittymästä

Tiedän toki että Flash-sivustot pääsevät nykyisin Googlen indeksiin, mutta niiden hakukoneoptimoiminen kärkeen kilpailuilla termeillä on liian työlästä. Samoin kuin esimerkiksi PDF-dokumenttia voi hakukoneoptimoida, se ei yleisesti ottaen kuitenkaan ole järkevää.

[ Jos luet tätä postausta RSS-lukijalla, hyppää suoraan sivuille niin näet jotain muuta. ]

Verkkopalvelut kautta maailman osallistuvat web-standardien levittämiseen Dustin Diazin ideoimalla meemillä. Päivän idea on näytää sivusto yhden vuorokauden ajan ilman tyylitiedostoja. Hyvin suunnitellut sivut toimivat moittetta myös ilman visuaalista pintaa.

Sivuston luonne muuttuu kun sisällöstä jää jäljelle vain rakenne. Miltä oma sivustosi näyttää ilman tyylitiedostoja?

Inventive osallistui meemiin myös viime vuonna – Alaston totuus.

Mikroformaattien hyödyt

Mikroformaatit ovat jo iäkkäitä, mutta niiden hyöty käyttäjille on ollut melkoisen marginaalista, sillä niiden tuki on ollut hyvin vajavaista. Nykyisin Mikroformaattien suurin hyöty on siirtää verkkosivun sisältämät yhteystiedot tai tapahtuman aika ja paikka suoraan sähköposti- tai kalenteriohjelmaan.

Nyt tilanne on kuitenkin muuttunut, tai oikeastaan muuttumassa, sillä mikroformaateista hyötyy nörttien ja edelläkävijöiden lisäksi hakukoneoptimoijat ja hakukokoneiden loppukäyttäjät.

Hakukoneet ymmärtävät mikroformaatteja

Yahoon aluevaltaus on melkoinen kilpailuetu Googleen nähden ja ei tarvita kummoisia ennustajan lahjoja että iso G seuraa nopeasti perässä.

Hakukoneiden käyttäjille tämä tarjoaa osuvampia hakuja. Haku ”seth godin the dip book review” tuottaa huomattavasti älykkäämpiä hakutuloksia, kun hakukoneet osaavat suoraan arvottaa kirja-arvostelut omaksi kategoriakseen ja niiden joukosta ne kirjat joiden kirjoittajaksi on merkitty Seth Godin.

Lukijat voisivat kommentoida jonkin paremman ja selkeämmän esimerkin.

Selaimet tukevat mikroformaatteja

Mikroformaateista on konkreettisempaa hyötyä uusien, niitä tukevein selainten myötä. Firefoxin uusin versio tukee mikroformaatteja. Lataa Firefoxin 3 beta ja kokeile itse.

Mitä sitten?

Näennäisesti pieni muutos verkkopalvelun teknisessä toteutuksessa saattaa saada aikaan melkoisen teknologisen vallankumouksen ja siirrymme vihdoin oikeaan web 2.0 verkkoon semanttisen webin myötä.

Miltä mikroformaatit näyttävät?

Mikroformaatit ovat joustavia ja ne kiinnittävät huomiota vain tiedon merkkauksen ei siihen miltä tieto näyttää. Alla esimerkki Vcard mikroformatin mukaisesta yhteytiedosta tältä sivulta:

<p class="vcard">
  <span class="org">www.inventive.fi</span> © 2004 - 2008 |
  <a rel="nofollow"  href="mailto:info@inventive.fi"
  class="email">info@inventive.fi</a>  |
  <span class="adr">
    <span class="street-address">Huopalahdentie 5 A</span>
    <span class="postal-code">00330</span>
    <span class="locality">Helsinki</span>
  </span> |
  <span class="tel">+358 50 369 8023</span> |
  <a href="http://www.inventive.fi/sivukartta">Sivukartta</a>
</p>

Lisää aiheesta täällä

• Web ei ole visuaalinen media

Lisää aiheesta ja sen vierestä muualla

• http://bergie.iki.fi/blog/semantic_web_is_here-yahoo-and_microformats.html
• http://www.amdesign.fi/pieni-on-kaunista

7 Yhä ajankohtaista artikkelia

Neljässä ensimmäisessä perehdytään nykyaikaisen, vastuullisen verkkopalvelujen suunnittelun periaatteisiin ja hyötyihin.

• Paranna maailmaa lisäämällä kävijöitä sivuillesi
• Onko sivustosi Da Vinci -koodia Googlelle?
• Kuinka lisätä kävijöitä web-standardien avulla
• Web ei ole visuaalinen media
• 10 asiaa jota olet aina halunnut tietää verkkosuunnittelusta, mutta et ole jaksanut Googlata
• Onko web 2.0 kupla?
• Kannattaako verkkoluetteloihin ja yrityshakupalveluihin sijoittaa?

Piditkö artikkeleista? Tilaa tulevat artikkelit RSS-lukijaasi (Mikä on RSS?) tai sähköpostitse uutiskirjeenä.

Kaikki merkittävät selaimet samalla työpöydällä.

Eri selaimet näyttävät www-sivut eri tavoin. Verkkopalvelujen suunnittelijalle tästä on päänvaivaa, mutta selainten erilaisuudet voidaan testata ja poistaa hyvien suunnittelutapojen avulla.

Ennen selaintestaus täytyi tapahtua useammalla koneella. Useamman tietokoneen hankkiminen vain selaintestaukseen on investointi, johon ei helposti rahojaan laita. Nykyisin on parempia tapoja tehdä selaintestausta.

Apple on julkaissut julkisen beta version Safari selaimestaan PC:lle ja Macille. Näin jokainen halukas saa testata sivujen toimivuutta kaikilla selaimilla PC:llä.

Julkaistu Safari on kuitenkin vasta beta asteella, ja se on ihan oikeasti keskeneräinen kehitysversio. Safari on saanut haukkuja tietoturvallisuudesta ja siitä ettei se toimi kaikilla PC koneilla laisinkaan, kuten tässä koneessa, tai että se näyttää sivu varsin toisin kuin Macin Safari.

Apple korjaa pian selaimen lastentaudit ja sen voi ottaa yhdeksi selaimeksi muiden joukossa selaintestaukseen.

Automaattiset kuvakaappaukset eri selaimilla

Selaintestausta helpottamaan on palveluita, jotka pyörittävät joukkoa selaimia ja ottavat pyynnöstä kuvakaappaukset toivotuista sivuista tarkasteltavaksi.

Kuinka saat kaikki Internet Explorerit samalle koneelle

Eolas-patenttikiistan (2003) myötä seurasi jotain hyvääkin, sillä se sai Microsoftin julkaisemaan tiedon miten asentaa useita versioita Internet Explorer selaimesta samalle koneelle. Internet Explorer on eniten selainhuolia aiheuttava selain ja siksi tämä onkin erinomainen apu selaintestaukseen.

Miten saan Internet Explorerin eri versiot samalle koneelle.

Hyvää juhannusta

Irrotan itseni juhannukseksi internetistä, joten en muutamaan päivään vastaa viesteihin.

Kuluttajia palveleva Posti pysyy Postina. Kysymyksiin vastataan kampanjasivustolla.

Käyttöliittymän rakentamisesta

Toteutuksella oli erittäin kireä aikataulu, joten toiminnallisuuksissa pitäydyttiin valmiissa koodikirjastoissa ja jo hyviksi toteutetuissa toimintatavoissa. Valitettavasti ensimmäinen valinta koodipohjaksi Lightbox ei tue videoita. Nopean tutkinnan ja testaamisen jälkeen päädyin samankaltaiseen LightWindow koodiin.

Visuaalisesti näyttävä ja toiminnallinen käyttöliittymä

Sivulla olevat videot avautuvat sivun päälle animoituina.

Saavutettava sisältö kaikille

Sivu toimii myös ilman erikoisefektejä. Sivuston toiminnallisuudet on lisätty hyvien suunnittelutapojen mukaisesti erottamalla sisältö, ulkonäkö ja toiminnallisuus toisistaan. Sisältö on saavutettavissa ilman kehittynyttä toiminnallisuutta tai visuaalisuutta.

Mikäli käyttäjän selaimessa ei ole Javascript päällä, sivulla olevat vastaukset eivät mene piiloon vaan näkyvät alla olevan kuvan kaltaisesti. Mikäli taas selain ei tue CSS-tyylejä tai ne ei jostain syystä ole päällä, on sisältö silti saavutettavaa, kuten alla olevassa kuvassa oikealla.

Vasemmalla sivunäkymä ilman Javascriptiä ja oikealla ilman CSS-tyylitiedostoa.

Sivun päälle Lightwindowlla avautuva video toimii tavallisena linkkinä jos Javascript ei ole päällä.

Portfolio: Postin nimenmuutos Itellaksi

Title on tärkein yksittäinen elementti verkkosivulla

Mikäli muistat tästä sivusta vain yhden asian, sen on parasta olla: ”Tärkein asia sivullasi on title-elementti”. Se näkyy hakutuloksissa ja selaimen tehtäväpalkissa. Titlen merkityksestä ja kuinka valita hyvä otsikko on kirjoitettu huimasti, eikä syyttä.

Title on usein ainoa näkyvä ja luettu osa sisältöä. Sisältöäsi käytetään niin paljon myös muualla kuin suoraan sivultasi.

• Sosiaalisen media sivustot näyttävät pääsääntöisesti linkeissään vain otsikon
• RSS-lukijat näyttävät vain otsikon ja kenties hieman sivun tai descriptionin alusta
• Käyttäjä on uskomattoman kärsimätön. Miltei kaikki lukevan sivun otsikon, mutta vain pieni osa lukee koko sisällön.

Uskon myös että title ja sivulla näkyvä ykkösotsikko on oltava sama. Tämä lisää johdonmukaisuutta sivuilla.

Jokaisella sivulla tulee olla uniikki title-elementti. Google ei pidä sisällöstä joka toistuu sivustolla useaan kertaan. Sama sisältö saattaa saada aikaan vakavan vaikutuksen Googlen hakukonenäkyvyydessä. Älä siis pelleile samalla sisällöllä sivustollasi. Tämä pätee niin titleen kuin muihin sivuilta toiseen toistuviin elementteihin, kuten pitkiin copyright teksteihin.

Okei nyt uskot että title on tärkeä, entäs ne muut metatiedot?

Description-elementillä kiinnität hakijan huomion

Muiden kuin title meta-tietoja on pitkään pidetty miltei hyödyttöminä hakukoneoptimoinnin kannalta. Tilanne on jälleen muuttunut.

Selkeästi hyödyllisin metatieto on sivua kuvaama description-elementti. Google käyttää sitä sivujen arvottamisessa ja näyttää hakutuloksissa pääsääntöisesti title ja description elementit. Houkuttelevalla ja osuvalla description tekstillä saatat nostaa sivujen kävijämäärää enemmän kuin nostamalla sijoitusta pykälällä.

Näillä sivuilla käytin pitkään samaa description-elementtiä kaikilla sivuillani. Syynä oli laiskuus. Wordpressin add-meta-tags lisäosa ei toiminut sivuillani, ja annoin sen vain olla. Nyt olen kuitenkin korjannut meta descriptionin toimimaan kaikilla sivuillani.

Onko muilla meta-tiedoilla merkitystä?

Tuskin merkittävästi, mutta käytän osaan niistä silti. Näillä sivuilla on copyright, author, description ja keyword meta-elementit.

Näistä keywordilla lienee jotakin merkitystä hakukoneiden algoritmeissa, muut ovat lähinnä lukijoille suunnattua tietoa.

Kuinka lisään meta-tiedot sivuilleni

Meta-tiedot lisätään sivun head osaan. <meta name="metatiedonnimi" "content="metatiedonarvo" /> Esimerkiksi näin <meta name="description" content="Kuinka parannat sivusi hakukonenäkyvyyttä meta-tiedoilla." />.

Helppoa ja yksinkertaista. Alla vielä esimerkkinä tämän sivun meta-tiedot:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fi" />
<meta name="copyright" content="Copyright (c) Inventive Design" />
<meta name="author" content="Lasse Larvanko" />
<meta name="description" content="Kuinka parannat sivusi hakukonenäkyvyyttä meta-tiedoilla." />
<meta name="keywords" content="hakukoneoptimointi, hakukonenäkyvyys, meta-tiedot, hakukonemarkkinointi" />


Meta-tiedoilla parannat hakukonenäkyvyyttä muokkaamatta sivujesi ulkoista muotoa

Jokaisella sivulla on oltava oma title ja description elementit. Meta-tiedoilla parannat hakukonenäkyvyyttä, saat enemmän osumia hauista ja vältät joutumasta Googlen kakkosluokan sivustoksi.

Hakukoneoptimointi tekemällä nämä muutokset julkaisujärjestelmääsi on todennäköisesti suhteellisen kivutonta. Wordpressillä automaattiset meta-tiedot saat sivuillesi käyttämällä add-meta-tags-pluginia. Kiitän vielä pluginin tekijää, George Notarasia neuvoista pluginin toimimaan saattamisesta.

Internetissä kaikki ihmiset ovat niin ihanan avuliaita.

Haluatko parantaa sivustosi hakukonenäkyvyyttä? Tuloksen hakukoneoptimointi palvelu auttaa.

Visuaalisesti samannäköisen sivun saa tuotettua lukemattomilla tavoilla. Visuaalisuus ei kuitenkaan ole oikea lähtökohta verkkopalvelun käyttöliittymän rakentamiseen. Web ei ole vain visuaalinen media, vaan asioiden merkitys määrää kuinka käyttöliittymä tulisi rakentaa. Esimerkiksi kuvan käyttö otsikkona ilman oikeaa rakennetta hävittää otsikon semanttisen merkityksen ja ilman alt-tekstiä otsikon tietokaan ei välity verkkosivua ei-visuaalisesti lukevalle, kuten Googlelle.

Mitä hyötyä on web-standardeista ja automaattisista oikeellisuuden tarkistajista

Ilman laatuprosessia jää käyttöliittymäkoodin laadun tarkastaminen helposti tekemättä. Web standardien automaattiset tarkistustyökalut ovat kuitenkin nopeita keinoja laadun tarkistamiseen. Aikaisemmin olen jo kertonut web-standardien hyödyistä:

• Verkkopalvelun ylläpito ja kehitys on hallittua laatukriteeristön ansiosta
• Verkkopalvelu on saavutettavampi web-standardien avulla
• Verkkopalvelun on hakukonelöydettävämpi web-standardien avulla

Kuinka tarkastat verkkopalvelun laadun

W3c tarjoaa verkkosivun rakenteen ja tyylitiedoston oikeellisuuden tarkistamista automaattisella työkalulla.

Verkkopalvelun rakenteen tarkistaminen

Verkkopalvelun rakenteen, oli se sitten html tai xhtml, onnistuu osoitteessa validator.w3.org. Kerroin tästä jo artikkelissa Onko sivusi Da Vinci-koodia Googlelle.

Laadun tarkkailussa pyritään virheettömään toteutukseen. Sivun ollessa merkinnältään virheetön, on selaintestaus ja verkkopalvelun kehittäminen huomattavasti yksinkertaisempaa. Validi sivun näkyy selaimissa pääasiassa samoin tavoin selaimista toiseen. Vaikka poikkeavuuksia selaimissa on paljonkin, on näiden eroavaisuuksien löytäminen ja korjaaminen huomattavasti helpompaa validilla merkinnällä.

Verkkopalvelun visuaalisuuden – tyylitiedoston tarkistaminen

Myös sivun visuaalisuuden määrittelyn tekevä css-tyylitiedosto voidaan tarkistaa automaattisesti. Toiminto on hyvin samanlainen kuin merkinnän tarkistajallakin.

Verkkopalvelun saavutettavuuden tarkistaminen

Saavutettavuuden tarkistaminen on jo hankalampaa, kuin pelkästään web-standardien käytön oikeellisuuden tarkistaminen. Erilaisia saavutettavuuden kansainvälisiä ohjeistoja löytyy useita, samoin kuin kansallisia ohjeita: Tieken Esteettömyysopas, Esteetön sisällöntuotanto, JHS.. Automaattisiakin tarkistajiakin on listattu monta. Mitä näistä siis kannattaa käyttää? Minä käytän niitä joiden käyttö on niin nopeaa että tarkistus tulee tehtyä. Siinä auttaa huomattavasti seuraava.

Kuinka testaat nopeasti ja pienellä vaivalla

Lisää Firefox selaimeesi automaattisen testaamisen työkaluksi web developer toolbar. Tämä lisäosa on enemmän kuin painonsa arvoinen kultaa. Käyttöliittymän tutkimiseen ja kehittelyn lisäksi se on paras ja nopein tapa testata verkkosivun rakenteen ja css:n oikeellisuus.

Lataa web developer ja asenna se.

Kuinka web developeria käytetään

Web developer toolbar käytössä.

Kuvassa 1:llä merkitty alue on varsinainen web developer toolbar, josta kaikki toiminnallisuudet valitaan. Tool valikossa on mm validate css, validate html, validate wai, validate section 508.

Tämän lisäksi oikeassa alanurkassa 2:lla merkityssä kohdassa on sivun rakenteen validoinnin tulos. Mikäli sivu näyttää vihreää, on kaikki kunnossa. Jos taas sivu näyttää keltaista varoituskolmiota on sivulla joitakin virheitä. Varoituskolmiota klikkaamalla aukeaa sivun lähdekoodi virhelistalla, ja virhelistaa klikkaamalla pääsee kyseiselle riville katsomaan missä virhe on. Näin virheiden löytäminen on todella nopeaa. Ne kaksi muuta vihreää ovat tails, mikroformaattien tunnistaja sekä Firebug-kehitystyökalu.

Tekeekö automaattitestaus autuaaksi?

Automaattiset tarkistajat ovat vain yksi tapa lisätä käyttöliittymän laatua. Ne ovat kuitenkin varsin yksinkertaisia ja nopeita tarkistusmetodeja, jotka eivät korvaa hyvää suunnittelua. Itse käytän niitä hyvin paljon laadun tarkkailussa ja virheiden etsinnässä.

Pidä kuitenkin mielessä että, automaattiset tarkistajat eivät takaa hyvää laatua, ne takaavat koodin oikeellisuuden. Se on jo hyvä alku ja loistava laatukriteeri. Verkkopalvelu tulee kuitenkin suunnitella vastuullisesti ja merkitä semanttisesti oikein. Automaattiset työkalut eivät tee eroa huonosti tehdyn, mutta oikeellisen ja vastuullisen, semanttisen koodin välillä.

Esimerkiksi:

<div id="nosto">
<div id="iso-punainen-otsikko">
Kuinka ratkaiset verkkopalveluiden laatuongelmat</div>
</div>

on aivan yhtä oikein koodillisesti kuin:

<h1>Kuinka ratkaiset verkkopalveluiden laatuongelmat</h1>

Mutta jälkimmäinen on lisäksi semanttisesti oikein, eli se arvotetaan mm hakukoneissa sivun pääotsikoksi ja se toimii oikein ruudunlukulaitteilla. Semanttinen koodi on saavutettavampaa ja hakukoneystävällisempää.

Yhteenveto

Web-standardien oikeellisuuden tarkistaminen on hyvin helppo, mitattavia tuloksia antava laatukriteeri verkkoon. Oikeellisuuden tarkistaminen on nopeaa automaattisella työkalulla ja siksi onkin osa vastuullisen suunnittelijan ja kehittäjän verkkopalvelun rakennusprosessia.

1. Mitä on saavutettavuus

Verkkopalvelun saavutettavuudella tarkoitetaan yhdenvertaista mahdollisuutta palvelun käyttöön ja osallistumiseen. Tämä saavutetaan esteettömillä sivuilla, joiden käyttö onnistuu erilaisilta ihmisiltä ja eri päätelaitteilla. Saavutettavuus ei siis tarkoita vain esimerkiksi sokeiden tai liikuntaesteisten palvelua. Yhä enemmissä määrin se tarkoittaa myös erilaisten koneiden ja päätelaitteiden palvelemista. Lue Onko sivustosi Da Vinci –koodia Googlelle.

Saavutettavat ja esteettömät sivut ovat vastuullisen verkkojulkaisun lisäksi myös hyvää bisnestä. Lue Paranna maailmaa lisäämällä kävijöitä sivuillesi.

2. Mitä ovat web-standardit

Web-standardeilla tarkoitetaan teknologioita, joilla verkkopalvelu rakennetaan. Web-standardit ovat perusta, joita kaikki selaimet ja päätelaitteet ymmärtävät. Perinteisin web-standardi on HTML, josta on kehitelty XML yhteensopiva XHTML merkintäkieli, jota pääasiassa käytetään nykyaikaisessa verkkopalvelujen rakenteen merkitsemisessä. Tämä rakenne saadaan visuaalisesti muotoiltua CSS-tyylitiedostoilla ja kuvilla. Lue Kuinka lisätä kävijöitä web-standardien avulla.

3. Mitä on (hakukone) löydettävyys

Sijoittuakseen hyvin hakukoneissa on sivuston oltava hakukoneiden saavutettavissa. Hakukoneet saavat tietonsa automatisoiduilta roboteilta, jotka lukevat sivujasi samaan tapaan kuin sokea käyttäjä. Esteettömät sivut ovat siis perusedellytys hakukonelöydettävyydelle. Hakukoneet tunnistavat huonosti muuta kuin tekstipohjaista sisältöä. Siksi informaation jättäminen vain kuvan, Flash-esityksen tai pdf-tiedoston varaan ei ole suotavaa.

4. Mitä on hakukoneoptimointi

Hakukoneoptimoinnin tarkoitus on nostaa optimoitavana olevan sivun näkyvyyttä hakukoneissa. Perustana hakukoneoptimoinnille on luoda käyttöliittymä kuntoon esteettömillä web-standardien mukaisilla sivuilla. Sivuston laadukas ja arvokas sisältö on lisäksi oltava verkkoon ja hakukoneisiin sopivaa. Hakukoneoptimoinnissa avainsanojen sijoittelu ja taivutusmuodot luovat omat haasteensa myyvälle kirjoittamiselle. Lue miten hakukoneoptimointi tehdään.

Hakukoneoptimointi ei kuitenkaan ole ihmeellistä kikkailua vaan hakukonenäkyvyys perustuu verkkopalvelun suunnittelun perusasioihin. Lue Viimeinkin selvyys hakukoneoptimoinnista.

5. Mitä on hakukonemarkkinointi

Hakukonemarkkinoinnilla eli hakusanamainonnalla tuotetaan mainoksia näytettäväksi hakutulosten vierellä tai yläpuolella. Näitä tekstipohjaisia mainoksia näytetään vain samaa aihepiiriä hakeville käyttäjille ja niistä maksetaan klikkausten mukaan. Hakukonemarkkinointi on hyvin kustannustehokas ja helposti seurattava tapa mainostaa, ja se sopii hyvin myös aivan pienimmille yrityksille. Mikäli hakukonemarkkinointiin käytetään merkittävästi rahaa, on hakukoneoptimointi oiva tapa nostaa hakutulossijoitusta ja täten vähentää tarvetta maksupohjaiselle hakukonemainostamiselle.

6. Mitä on viraalimarkkinointi

Paras markkinointi tulee muualta kuin suoraan lähteeltä. Viraalimarkkinoinnilla yritetään saada ideasta niin houkutteleva että muut hoitavat markkinoinnin puolestasi. Parhaita esimerkkejä tästä on Iphone, josta on kirjoitettu ja kohistu uskomattoman paljon (Google löytää yli 50 miljoonaa sivua iphone haulla), vaikka puhelinta ei ole vielä kaupoissa.

Haluttava ja kenties himottavan sisällön luominen on tietysti vaikeaa, mutta vaivan arvoista. Himottava sisältö saa aikaan kuhinaa, nostaa sivuston mainetta ja vahvistaa brändiä. Merkittävä sisältö saa aikaan linkkejä, näkyvyyttä ja se on pitkäikäistä. Nämä parantavat sivun hakukonenäkyvyyttä ja samalla sivuston ja sen tekijöiden uskottavuutta alan asiantuntijoina.

7. Mitä on web 2.0

Web 2.0 on Tim O’Reillyn luoma markkinointisana yhteisöllisemmälle verkolle. Verkko ei ole pitkään aikaan ollut omimmillaan puskemaan tietoa yhteen suuntaan, vaan sen vahvuus on nimenomaan yhteisöllisyydessä. Käyttäjien mahdollisuus osallistua niin kommenttien kuin varsinaisen sisällöntuotannon kannalta lisää verkkopalvelun potentiaalia huimasti. Web 2.0 mullisti markkinoinnin. Cola-Ollin seikkailut YouTubessa ovat jo saaneet eeppisiä piirteitä. Tim O’Reilly jatkaa tässä Podcastissä web 2.0 mahdollisuuksista.

8. Mitä ovat mikroformaatit

Mikroformaatit ovat helppoja ja yksinkertaisia web standardeja, jotka on luotu helpottamaan koneiden ymmärrystä tiedosta. Tälle hetkellä käytetyin mikroformaatti lienee tämänkin sivun yhteystiedoissa käytetty hcard. Firefoxin Tails lisäosalla selain tunnistaa kaikilta sivuilta hcard tyyppisesti merkityt yhteystiedot, joka helpottaa yhteystietojen siirtämistä ja tallentamista. Tuki mikroformaateille on vielä vähäistä selaimissa, mutta se kasvaa tulevaisuudessa varmasti. Lue lisää mikroformaateista baabelin kirjastossa.

9. Mitä on sosiaalinen media markkinointi

Sivustot kuten blogispotti.fi, kerro.fi ja herq.fi keräävät netin mielenkiintoisimpia sivuja muille jaettavaksi. Sivuja voi kommentoida ja äänestää. Käyttäjien arvottamat, suosituimmat sivut nousevat näkyvämmin esille palvelussa. Sosiaaliset mediat saattavat kasvattaa kävijämääriä sivulle huomattavasti. Lisäksi tällaiset sosiaalisen media sivustot tuovat tunnettavuutta ja yleisöä, joka ei olisi muuten niche-sivuston tavoitettavissa. Isossa maailmassa digg.com saa aikaa todella merkittäviä kävijäpiikkejä.

Saadaksesi sosiaalisen median huomion, tai oikeastaan kenenkään huomion on parempi tehdä merkittävää sisältöä. Merkittävä sisältö tuo näkyvyyttä, joka tuo linkkejä, joka tuo puolestaan lisää kävijöitä ja lumipalloefekti on valmis. Seth Godin kertoo kuinka saada suosittelijoita.

10. Mitä on vastuullinen suunnittelu

Vastuullinen suunnittelu on ennen kaikkea käyttäjälähtöistä suunnittelua. Palvelu tehdään käyttäjille, joten heidän tarpeet tulee asettaa etusijalle. Vaikka palvelu olisikin tarkoitettu tarkasti rajatulle segmentille, täytyy palvelua suunnitella hiukan myös muille. Hakukoneet ja sosiaaliset mediat kaipaavat erikoishuomiota ja ne eivät pidä huonosti suunnitelluista palveluista (kukapa pitäisi).

Vastuullisessa suunnittelussa muistetaan myös että Web ei ole (vain) visuaalinen media, vaan palvelun on palveltava useassa käyttöliittymässä hyvinkin erilaiselle käyttäjäkunnalle.

Yhteenveto

Listassa ei puhuttu lainkaan visuaalisuudesta, Ajaxista tai uusimmista Javascript kirjastoista, sillä nämä ovat vain hyvin pieni osa suunnittelua. Verkko on pullollaan oppaita miten ottaa uusin teknologia käyttöön. Tämä on hienoa, sillä muuten niitä ei saataisikaan käyttöön. Verkkosuunnittelussa mennään kuitenkin usein liiaksi teknologiakeskeisesti eteenpäin ja unohdetaan perusasiat.

Vastuullisessa suunnittelussa keskitytään käyttäjään ja käyttäjän palvelemiseen.

Hyvä suunnittelu on hyvää bisnestä.

Lue jatkossakin hyvästä suunnittelusta. Tilaa Inventiven rss syöte

Päinvastoin kuin usein ajatellaan, verkko ei ole pääasiassa visuaalinen media. Visuaalisuus on vain yksi sivun käyttöliittymistä. Mikäli verkkosivut on rakennettu vain visuaalisuutta silmällä pitäen, syrjimme niitä käyttäjiä ja laitteita jotka vaativat toisenlaista käyttöympäristöä. Miten sivusto tulee rakentaa niin että ne toimivat päätelaitteista ja käyttötavasta riippumatta?

Verkkosivut tulisi rakentaa niin että niiden sisältö, visuaalisuus ja toiminnallisuus on erotettu toisistaan.

Vastuullisesti suunniteltu ja toteutettu verkkosivuston toimii kaikilla päätelaitteilla ja on siten kaikkien käytettävissä. Tätä kutsutaan saavutettavuudeksi. Yleensä saavutettavuus tarkoittaa myös paremmin toimivia ja käytettävämpiä sivuja. Lisäksi hyvä rakenne parantaa sivun löydettävyyttä hakukoneissa.

Rakenne kuntoon

Hyvä rakenne  merkitään web-standardeja käyttäen niin, että sivuston varsinainen sisältö on kuvattu yhdessä xhtml-tiedostossa. Tämä sisältää sivun tekstit, metatiedot, videot, kuvat ja muun varsinaisen sisällön. Tämä tiedosto myös määrittää mistä sivulle haetaan ulkonäkö ja kohennettu toiminnallisuus.

Graafinen suunnittelija on vapaa visualisoimaan rakenteen haluamallaan tavalla

Visuaalisuus rakennetaan css-tyylitiedostoilla. Tyylitiedostossa sivun elementit asetellaan paikoilleen, määritellään typografia ja värimaailma. Sivuston rakenne ei suoranaisesti määrää sivuston visuaalisuutta. Tyylitiedostoilla voidaan muokata sivusto aivan toisennäköiseksi vain tyylitiedostoa vaihtamalla. Tästä paras esimerkki on csszengarden, jossa yhdellä sisällöllä on useampi sata eri suunnittelijoiden ulkoasua. Kaikissa näissä sivuissa on sama xhtml-rakenne, vain tyylitiedosto ja sen tuomat taustakuvat vaihtuvat visuaalisuudesta toiseen. Käy kokeilemassa csszengardenia.

Visuaalisuus voi muuttua mediasta toiseen

Tyylitiedostoilla voidaan suunnitella sivuston ulkonäkö mediakohtaisesti. Verkkosivu voidaan suunnitella näyttämään visuaalisesti toisenlaiselta verkkosivua tulostettaessa, perinteisenä verkkosivuna selaimessa, kännykässä tai muussa mobiililaitteessa.

Pienemmissä laitteissa ja tulostettaessa suurikin sivusto toimii paremmin yksipalstaisena. Tulostettaessa voidaan myös piilottaa tulostimessa turhat navigaatioelementit sekä kenties lisätä linkkeihin sivujen osoitteet, jotta linkkien kohteet olisivat tiedossa myös paperilla. Hyvä opas tulostustyylitiedoston rakentamiseen Alistapartissa.

Toiminnan kohentaminen sivuja rikkomatta

Javascript ei saisi koskaan olla pääasiallinen käyttöliittymän määrittäjä. Rakenteen ja tyylitiedoston ollessa kunnossa, voidaan sivuston toimintaa kuitenkin kohentaa JavaScriptillä. Tämän tulee tapahtua niin, että sivut toimivat vaikka jostain syystä päätelaite ei tue javascirptiä. Erinomainen ja selkeäsanainen esitys vastuullisesta scriptauksesta unobtrusivejavascript.

Vastuullisen www-suunnittelun hyödyt

Vastuullinen verkkosivujen rakentaminen parantaa saavutettavuutta, käytettävyyttä ja lisäksi hakukoneet löytävät hyvin tehdyt sivut paremmin. Myös sivujen kehitys ja ylläpitäminen on halvempaa ja helpompaa, kun sivuston rakennuspalikat on eroteltu toisistaan. Tällöin yhtä rakennuspalikkaa voidaan vaihtaa tai muokata koskematta muihin osioihin.

Vastuullisen suunnittelun muistilista

• Erota rakenne, visuaalisuus ja toiminnallisuus toisistaan
• Käytä web standardeja ja testaa koodisi
• Rakenne ei määrää visuaalisuutta
• Käytä Javascriptiä parantamaan käytettävyyttä vastuullisesti ja sivun toimintaa rikkomatta
• Muista myös muut tavat käyttää sivuja: tulostaminen, kännykät, ruudunluku apuvälineet ja hakukoneet

Lisää aiheesta

• Viisi tapaa parantaa verkkosivun käyttöliittymää web standardeilla
• Kuinka lisätä kävijöitä web standardien avulla

Piditkö artikkelista? Tilaa seuraavat artikkelit rss-lukijaasi tai uutiskirjeenä sähköpostiisi.