Internet suunnittelun niksejä.

Rakenna syöte Twitterin hakuja yhdistelemällä.

2010-02-12T22:39:00.008+02:00

Tämä on aika yksinkertainen esimerkki.

Twitterillä voi tehdä kaikenlaisia hakuja, mutta tiedon suodattaminen on vaikeaa. Tämä Yahoo Pipes työkalu on kätevä ainakin suomenkielisissä syötteissä.

http://pipes.yahoo.com/pipes/pipe.info?_id=660e754bd1e0a9ea2ba94a430826a69d

Tein esimerkki RSS-syötteen, joka hakee uutisia hakusanoilla: viihde, juorut, julkkikset, lyhensin URL:in bit.ly:llä.

http://bit.ly/9jsfid

Eli jos selaimesi tukee suoraan RSS-syötettä, sinun pitäisi nähdä syöte, joka poimii Twitteristä twiittaukset, joissa löytyy sana: viihde TAI juorut TAI julkkikset.

Etsin tuosta tehty kloonia, jossa olisi monipuolisempi roskaviestien filtteröinti, niin työkalua voisi käyttää myös englanninkielisten hakusanojen kanssa.

Delicious kirjanmerkit tehokäyttöön bloggauksessa.

2009-08-11T12:56:00.001+03:00

Tämä on hyvin yksinkertainen niksi.

Kun esimerkiksi Bloggerissa voi liittää gadgettina minkä tahansa ulkopuolisen rss-syötteen, on suhteellisen vaivatonta tuoda omat delicious-kirjanmerkit osaksi blogin sisältöä.

Koska kirjanmerkkejä on kuitenkin todennäköisesti laajalta aihealueelta, kannattaa sisältö segmentoida hieman tarkemmin. Tämä onnistuu tagaamalla jokainen kirjanmerkki tietyllä avainsanalla. Esimerkiksi; digimedia, kännykät, tekniikka, tiede, yhteiskunta jne.

Seuraavaksi menet delicious.com sivuille, klikkaat haluttua avainsanaa ja näet selaimen osoiterivin oikeassa reunassa rss-symbolin, viemällä kursorin symbolin päälle näet kyseisen avainsanan rss-syötteen osoitteen (esim. http://feeds.delicious.com/v2/rss/jukhau/web2.0?count=15 ). Katso toimiva esimerkki http://kuvataidetta.blogspot.com/ blogistani, avainsana delicious-kirjanmerkeille on tietenkin kuvataide.

Hyvin näppärää, jos ylläpitää useampia blogeja ja haluaa hyödyntää yhden delicious-profiilin kirjanmerkkejä osana jokaisen blogin sisältöä. Avainsanat kannattaa tietenkin valita huolella.

Lisävinkki edistyneemmillle: Todellinen tehokäyttäjä tekeekin Yahoo Pipesillä delicious-syötteistä rss-putken, johon on yhdistelty useampia avainsanoja yhdeksi syötteeksi.

Surffaa ja luo samalla sisältöä blogeihisi!

Esimerkki huonosta toteutuksesta - typenow.net

2009-07-15T16:15:00.003+03:00

Tässä yksi esimerkki huonosta toteutuksesta, käytettävyyden ja ensikäyttäjän saaman informaation suhteen. Kyseessä on siis sivusto jonka löysin yhteisöllisyyteen perustuvalla hakutyökalulla StumbleUponilla. Tämä oli sivu joka minulle tuli vastaan StumbleUponilla:

http://www.typenow.net/themed.htm

Tämä taas on palvelun etusivu:

http://www.typenow.net/

Tehtävä: Etsi vähintään viisi virhettä, ennenkuin luet eteenpäin.

Ensivaikutelma

Syy, miksi otin tämän sivun esimerkiksi oli että minulla kesti useampia sekunteja ennenkuin aloin päästä SU-selaamiseltani kärryillä mikä sivu eteeni oli tupsahtanut. Aiemmin on käsitelty juuri sitä, kuinka kriittisiä ensimmäiset sekunnit ovat uuden käyttäjän kannalta, jääkö hän sivuille vai jatkaako surffailua eteenpäin.

Domain ei sanonut minulle mitään, typenow? Type? Pekka Peruskäyttäjä olisi tässä vaiheessa jo hypännyt toisaalle, mutta minua alkoi kiinnostamaan mikä tässä on nyt vialla.

Myöskään leiskassa ei ollut mitään, joka olisi hahmottanut sivun käyttötarkoitusta. Ison roolin leiskasta vei google-mainos, jonka sekoitin sivun omaan sisältöön, koska kyseessä oli iso kuvallinen pystymainos ja vasta alareunassa näkyy tieto että kyseessä on google-mainos.

Sivusto luultavasti toimii (?) vanhoille käyttäjille, mutta hakukoneiden kautta sivuston löytävät ovat täysin hukassa ja veikkaisin ison osan hyppäävän nopeasti toisaalle, elleivät he hakukoneen kautta tulleet juuri etsimään (ilmaisia) fontteja.

Asia olisi korjautunut yksinkertaisesti lisäämällä yläpalkkiin sivuston nimen alapuolelle yhden rivin kuvaus sivuston käyttötarkoituksesta, tyyliin "Offering free and commercial fonts since...".

Navigointi

Oikeasta yläreunasta löytyvä navigoinnin alasvetovalikko on lähinnä hyvä vitsi ja kouluesimerkki huonosta navigoinnin suunnittelusta, sivuston koko (!) navigointi on tungettu yhteen alasvetovalikkoon, vau.

ABC... eli alkukirjaimeen perustuva navigointi kannattaisi tehdä suoraan kirjaimilla leveyssuunnassa, jos navigointia yleensäkään kannattaa toteuttaa siinä muodossa, ehkä fonttien kohdalla se voi olla toimiva ja hyväksihavaittu ratkaisu.

Navigoinnista olisi perussivut kannattanut ottaa omaksi leveyssuuntaiseksi navigointipalkiksi ja jättää alasvetovalikkoon korkein ABC-listan, ilmaisilla ja kaupallisille fonteille omat valikot.

Ideoita ja SEO:ilua

Ideoita: Missä linkit suosituimpiin fontteihin? Missä linkit viimeksi lisättyihin fontteihin? Miksi fonttien kohdalla on suoraan linkki zippiin ja fonteista ei ole mitään kuvausta tekstimuodossa, ei krediittiä tekijälle tai tietoa tekijästä jne. ? Miksi navigointia ei voi tehdä tekijän mukaan? Navigointi tekijän suosituimpien fonttien mukaan? Kategorisointi fontin tyylin mukaan?

Sanoisin mutuna, näkemättä sivuston logia että hakukoneoptimointi on jäänyt puolitiehen. Tehdäänpä testi: "free font Abbey", hakutulos juuri ja juuri Googlen top10:ssä, ei hassumpaa... mutta, kun hakutuloksen linkistä menee sivuille, Abbey-fontin etsiminen onkin mielenkiintoinen tehtävä äärimmäisen pitkästä fonttilistauksesta.

Vinkki: Aina kun teette sisältöä, jossa on yksittäisiä (myynti)artikkeleita, esim. bändejä, tapahtumia, fontteja, kuvia, autoja jne. jne., huolehtikaa siitä että yksittäisellä artikkelilla olisi oma hakukoneella löytyvä sivunsa (esimerkki) tai sisältö olisi edes jotenkin pilkottu pienempiin osioihin.

Miksi? Mitä hakukoneen käyttäjä teki kun huomasi typenow.net sivulta löytyvän pelkän pitkän fonttilistauksen ja Abbey fontin etsimisen olevan työn ja tuskan (enemmän kuin 2 sekuntia) takana? Hän palaa takaisin Googlen hakutuloksiin ja kokeilee seuraavaa hakutulosta. Hyvä tulos Google-haussa on luultavammin enemmän perua siitä, koska typenow.net on ollut ensimmäisten joukossa tarjoammassa ilmaisia fontteja, kuin että sivua olisi suuremmin pohdittu juuri hakukoneoptimoinnin näkökulmasta.

Ansaintalogiikka, ideologia ja lopputulos

Sivuston huono toteutus on oikeastaan sääli, koska fonttisivuston ansaintalogiikka on ihan peruskaurassaankin pikkunäppärä ja hyvä esimerkki kuin ilmaisen sisällön ja kumppanuusohjelmat voi nitoa yhteen sieväksi paketiksi. Päivittäisiä kävijöitä sivulla näyttäisi olevan noin 15000, siitäkin huolimatta vaikka viimeisin päivitys on vuodelta 2007. Ansaintalogiikka ei kuitenkaan pelittänyt loppuun saakka?

Ehkä Google-mainokset ovat ilmestyneet kuvaan vasta kun sivujen päivityksestä on luovuttu? Typenow.net:in historiaa. Historian mukaan sivuston taustalla on aatteellinen idea, ei kaupalliset tavoitteet. Kun tarjotaan imuroitavaa sisältöä eli tässä tapauksessa fonttitiedostoja, kaistakaan ei ole enää ihan ilmaista ja silloin aatteellisuuden rinnalle kannattaisi soveltaa ihan kylmästi bisneslogiikkaa.

Kuinka raskas sivusi on ladata eri yhteysnopeuksilla?

2009-07-12T15:09:00.001+03:00

Kun sivuille tulee lisättyä kaikenlaisia kivoja pikku elementtejä, flash-animaatioita, videoita, kuvia, mainoksia jne. vauhtisokeudessa ei välttämättä tule kiinnitettyä huomiota siihen että sivustosta voi tulla liian raskas käyttäjille, erityisesti uusille vierailijoille ja myös mobiilikäyttäjille.

Esimerkiksi Web Page Analyzerin avulla voit mitata sivustosi eri elementtien koon ja koko sivuston latausnopeudet eri yhteysnopeuksilla. Vähintäänkin sivun oleellisimpien elementtien tulisi olla nähtävillä alle neljässä sekunnissa.

Jos sivustosi on suunnattu kotimaisille kävijöille, näppituntumalla arvioisin suurimmalla osalla käyttäjistä olevan vähintään puolen megan (512 kbit/s) nettiyhteys eli voit tarkastella WPA:n raporttia tästä näkökulmasta ja suhteuttaa raportin antamat latausnopeudet haarukkaan ISDN:n ja T1:sen välille.

Mobiilikäyttäjät ovat tietenkin asia erikseen, mutta mobiilikäyttäjiä varten sivujen optimoinnissa pitää ottaa huomioon paljon muutakin kuin vain latausnopeus, sivuista olisi hyvä olla olemassa myös pelkkää tekstiä sisältävä kevytversio. Mobiiliselaimet voi tunnistaa javascriptilla. Mobiiliselausta voisi käydä laajemmin läpi tulevaisuudessa.

Jos sait huonon tuloksen nopeustestissä, voit suoraan tutkia mittausraportista, mikä tai mitkä elementit tekevät sivustasi raskaan. Raportin lopusta löydät arvion eri elementeistä, mahdollisten varoitusten ja vinkkien kera.

Yksinkertainen kikka on tarkistaa kuvien koko. Samoin html/php-koodia kannattaa optimoida mahdollisuuksien mukaan. Jokainen ulkopuolisen tahon koodaama, javascriptiä sisältävä widget kuormittaa sivujen latautumista. Ole siis tarkkana mitä widgettejä ja elementtejä oikeasti tarvitset sivuillesi ja mitkä ovat pelkkiä latausta kuormittavia turhakkeita.

Vinkki: Kun aiemmassa artikkelissa käsiteltiin erilaisia ilmaisia blogialustoja, rekisteröidy kokeeksi useampaan ilmaista blogialustaa tarjoaviin palveluihin ja tee muutamia erilaisia testikirjoituksia. Tämän jälkeen voit esimerkiksi WPA:n avulla testata mikä blogialustoista on parhaiten optimoitu latausnopeuden näkökulmasta. Ainakin omille Bloggerissa sijaitseville blogeilleni sain WPA:lla ihan kohtalaisia nopeusraportteja.

Ilmainen blogialusta.

2009-07-11T15:04:00.001+03:00

Lukiessani satunnaista pointblog.fi:ssä ylläpidettyä blogia, mieleeni juolahti vinkata muutamista HYVISTÄ kotimaisista ja ulkomaisista ilmaisista verkkokäyttöliittymän avulla ylläpidettävistä blogialustoista. Pointblog.fi ei mielestäni ole sellainen, koska sivujen layout on tungettu täyteen mainoksia.

Tässä muutamia vaihtoehtoja:

www.vuodatus.net - suomenkielinen ja ylläpito Suomessa.

www.blogspot.com - Googlen ylläpitämä.

wordpress.com - Suositun WordPress blogisoftan ilmainen nettiversio.

Muita?

Itse suosin Blogspottia, koska siihen on helpoimmin ja monipuolisimmin liitettävissä lisäosia, kuten ulkopuoliset rss-syötteet. Vuodatus on helppo ja mainokseton vaihtoehto ei-teknisille bloggaajille, jotka arvostavat suomenkielistä käyttöliittymää. WordPressin verkkoversiota en ole koskaan kokeillut, mutta tiedän että sen ympärille on rakennettu hyvinkin suosittuja blogeja.

Oma www-hotellipalvelu irtoaa halvimmillaan noin 30 eurolla per vuosi, yleensä tällaiseen palveluun voi asentaa melkein minkä tahansa ilmaisen blogisoftan, mysql ja php-tuki riittävät, yleisimmin blogisoftana käytetään WordPressiä, mistä löytyy myös suomenkielinen versio.

Omassa www-hotellissa sijaitsevan Wordpressin ympärille voi kyhätä vaikka kotisivut, kuten yhä useammat niin tekevätkin. Wordpressiin löytyy satoja ilmaisia teemoja, joita voi käyttää oman blogin ulkoasun lähtökohtana.

Web Pages That Suck - aloittelevalle verkkosivun suunnittelijalle.

2009-07-11T11:18:00.001+03:00

Onko Web Pages That Suck tuttu paikka? Jos ei ole, siellä kannattaa käyttää työaikaansa ainakin seuraavat kymmenen minuuttia, vaikka Facebookissa notkumisen sijaan. Sivusto on ollut olemassa jo vuodesta 1995 eli kokemusta huonosta weppisuunnittelusta on kertynyt runsaasti.

Ensimmäiseksi kannattaa käydä läpi tarkistuslista, joka löytyy rullaamalla sivua hieman alaspäin:

www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-checklist-part-one.html

osa listan kohdista on sellaisia, joihin enää harvemmin törmää, mutta joihin törmäsi sitäkin useammin wepin alkuaikoina. Lista on kuitenkin syytä käydä läpi, koska todennäköisesti sieltä löytyy aina jotain, jota ei ole otettu verkkosivujen suunnittelussa huomioon.

Kannattaa myös vilkaista mitä termi Mystery Meat Navigation oikein tarkoittaa.

WPTS:n luojan Vincent Flandersin kotisivut.

Hakukoneoptimointia - title-tagi Bloggerissa ja blogeissa.

2009-06-21T23:12:00.001+03:00

Tämä vinkki ei oikeastaan koske vain Bloggerin title-tagia, vaan samaa keinoa voi käyttää ihan missä tahansa blogissa.

Googlen kannalta on järkevämpää laittaa title-tagiin ensin blogikirjoituksen otsikko ja vasta sen jälkeen blogin nimi. Kuten esimerkiksi tämä kirjoitus näkyisi ilman muokkausta Googlen hakutuloksissa seuraavanlaisesti:

"Internet suunnittelun niksejä.: Hakukoneoptimointia - title-tagi Bloggerissa ja blogeissa."

Muokattuna:

"Hakukoneoptimointia - title-tagi Bloggerissa ja blogeissa. | Internet suunnittelun niksejä."

Kumpi mielestäsi on järkevämpi ratkaisu, kun blogikirjoituksia on kymmeniä tai satoja? Kun otetaan huomioon kuinka oleellinen Googlen hakutuloksissa title-tagin sisältö oikein on.

Tässä ohje kuinka saat viriteltyä Bloggerissa title-tagit parempaan hakukonekuntoon. Etsi seuraava koodinpätkä Bloggerin sivumallista:

<title><data:blog.pageTitle/></title>

Korvaa se seuraavalla koodilla:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Saman tempun voi tehdä myös Wordpress-blogiin. Muokattava tiedosto on tällöin header.php ja siellä sinun tulee etsiä kohta missä title-tagi sijaitsee ja tagin jälkeen wp_title() funktiokutsu vain sijoitetaan koodissa ennen bloginfo('name') funktiokutsua.

Koodin sisältö voi vaihdella sen mukaan mikä Wordpressin sivumalli sinulla on käytössä. Joka tapauksessa ennen muokkausta suosittelen ottamaan sivumallin header-osiosta varmuuskopion, koodin voi kopioida tilapäisesti talteen esimerkiksi notepadiin.

Kartta www-sivulla.

2009-06-16T18:23:00.000+03:00

Blogin ensimmäinen esimerkki tulee Turusta. fLuxAtioNs on kansainvälinen ympäristötaiteen tapahtuma, joka sijoittuu pitkin Turun kaupunkia. Hieno idea, mutta verkkosivujen kartasta ei saa mitään selvää. Ilmeisesti tekijöille on ollut oleellisempaa tehdä visuaalisesti hauskan näköinen kartta, kuin luoda karttapalvelu, jolla teokset voisi löytää myös Turun keskustan alueen huonommin tunteva vierailija.

Ratkaisu: Epäselvän itse piirretyn kartan sijasta olisi kannattanut käyttää upotettua Google Maps -karttaa, johon on hyvin yksinkertaista merkitä teosten sijainnit ja vaikkapa lisätietona kuvia ym. tietoa. Oma kartta luodaan valikon kohdasta 'Omat kartat'.

Google Maps-palvelussa kartan voi lisätä omalle sivullesi valitsemalla valikon oikeasta reunasta kohdan 'Linkki'. Kartan kokoa voi muuttaa helposti klikkaamalla kohtaa 'Muokkaa ja esikatsele sisällytettyä karttaa'. Upotettuun karttaan sisältyy linkki, jolla kartan saa suurempaan kokoon ja vaikkapa printattua. Tulostettu kartta olisi kätevä teoksia etsivälle yleisölle. Ohessa kartta suurinpiirtein samasta alueesta.

Näytä suurempi kartta

Toinen vaihtoehto olisi ollut panostaa kartan tekstin selvyyteen, mikäli kartasta olisi pitänyt tehdä persoonallisempi oma versio.

Muuta: Taiteilijaesittelyissä on käytetty puolen megan tiedostokokoa 125x125 px kuvissa. Yksittäisessä kuvassa asialla ei olisi juuri merkitystä, mutta kun kuvia on 20 kpl, tulee sivun latauskooksi yli 10 megatavua, mikä aiheuttaa pientä kakistelua nopeammallekin verkkoyhteydelle.

Yksittäisten taiteilijaesittelyjen kohdalla linkki etusivulle on rikki, polutus näyttäisi olevan väärin. Pientä huolimattomuutta viimeistelyssä, joka on palvelun käyttäjälle erittäin turhauttavaa.

Parannuksien hinta: 0 euroa. Google Maps on ilmainen palvelu ja muut esitetyt parannukset liittyivät kuvankäsittelyohjelman ja html-editorin huolellisempaan käyttöön.

Tervetuloa.

2009-06-14T11:14:00.001+03:00

Tässä blogissa käsitellään hyvää www suunnittelua esimerkkitapauksen kautta. Jos sivusi päätyvät tänne esimerkiksi huonosta ja toimimattomasta www suunnittelusta, ajattele positiivisesti, saat sivuistasi ilmaista palautetta ja sivuillesi näkyvyyttä.

Tässä blogissa jaetaan myös niksejä oman verkkosivusi lukijoiden palvelun parantamiseksi.