26.11.2015 PK-yrittäjän verkkosivujen laadinnan aakkoset PALVE PALVE – Juha Konttinen.

Esitys aiheesta: "26.11.2015 PK-yrittäjän verkkosivujen laadinnan aakkoset PALVE PALVE – Juha Konttinen."— Esityksen transkriptio:

1 26.11.2015 PK-yrittäjän verkkosivujen laadinnan aakkoset PALVE PALVE – Juha Konttinen

2 Sivusto pitää toimia mobiililaitteilla Sivustosta tehdään vain yksi versio, ei erillisiä sivuja mobiililaitteille Sivusto mielellään mobiili edellä (ensi sijainen suunnittelu mobiililaitteille) Muut näkymät (desktop ja tablet) hoidetaan esim. CSS media queries-säännöin Sama sisältö kaikissa näytön tiloissa (ei suppeampia sisältöjä esim. mobiiliin) Sivuston sisältö pitää olla responsiivista, eli sen pitää skaalautua erikokoisille näytöille Lisätietoa: Responsive web design basics (Google Developers)Responsive web design basics 26.11.2015PK-yrittäjän some-aakkoset/ JK| 2

3 Kotisivu ja navigointi Pidä huoli, että CTA elementit ovat aina ensimmäisenä, helposti saavutettavissa ja keskeisimmällä paikallaCTA Pidä valikot lyhyinä ja virtaviivaisina: mahdollisimman vähän kohteita listassa kuitenkin niin ettei käytettävyys kärsi Varmista, että palvelun etusivulle on aina helppo palata Varmista, etteivät promootiot, mainokset tms. häiritse tai jopa estä sivuston normaalia käyttöä (ongelma voi esiintyä erityisesti mobiililaitteilla) 26.11.2015PK-yrittäjän some-aakkoset/ JK| 3

4 Varmista sivuston löytyminen Hakuoptimointi: Responsiiviset web-sivut: sama html-rakenne, yksi URL-osoite, sisällön renderöinti CSS media queries säännöin Määritellään avainsanat Määritellään tavoitteet Sisältöstrategia ja sisällön optimointi Tekninen sivustoanalyysi ja optimointi Sivustorakenteen analysointi ja optimointi Linkitysstrategia ja linkkien hankkiminen Tulosten jatkuva seuranta ja analysointi Lisätietoa: Katso erillinen hakuoptimointia koskeva PowerPoint- esitys 26.11.2015PK-yrittäjän some-aakkoset/ JK| 4

5 Pahimmat Web-suunnittelun virheet 1.Huonosti toimiva haku – hakusanan ei tarvitse olla kirjaimelleen oikein, haun vastaukset pitää olla tärkeysjärjestyksessä: omat tarjottavat tuotteet ensimmäisenä 2.PDF-tiedosto tiedon jakamisen muotona. Hakukoneet eivät löydä pdf-tiedostoihin tallennettua dataa, pdf-tiedoston asettelu ei skaalaudu, fonttikoko on liian pieni ja navigointi ei toimi. Pdf- tiedostoa voi käyttää esim. ohjekirjojen tai suurikokoisten tulostettavien dokumenttien jakamiseen. 3.Linkkitekstin väri ei vaihdu kun linkissä on käyty. Käyttäjällä pitää kertoa missä hän on, missä hän on jo ollut ja mihin kannattaa mennä. Hyväksi koettuun linkkiin on helpompi palata, kun linkkitekstin väri kertoo, että tuolla olet jo käynyt. 4.Online-tekstiksi ei käy sama teksti kuin printtiä varten. Tekstien ja kappaleiden pitää olla lyhempiä, niitä pitää jakaa otsikoin ja väliotsikoin, käytä luetteloita, korosta avainsanoja, julkaise sisältö nurin käännetyn pyramidin muotoon: tärkein ensin laajasti käsitellen ja siitä eteenpäin vähemmän tärkeisiin suppeammalla sisällöllä, KISS! 26.11.2015PK-yrittäjän some-aakkoset/ JK| 5

6 Pahimmat Web-suunnittelun virheet (…jatkuu) 5.Kiinteä fontin koko. Fonttikoot pitää määritellä suhteellisesti, ne pitää muuttua responsiivisesti erilaisilla näytön resoluutioilla ja käyttäjän on voitava muuttaa fontin kokoa niin halutessaan. 6.Web-sivujen nimet eivät tue hakuja. Html-tagin title on tärkeä, sen sisältö on yleensä hakukoneen tarjoaman linkin tekstinä (jos ja kun hakukone on sivun löytänyt. Title-teksti tallentuu myös kirjanmerkin sisällöksi jos sivu tallennetaan kirjanmerkiksi. Web-sivun 60-70 ensimmäistä merkkiä voidaan nähdä sivun mikrosisältönä, tämän verran hakukone näyttää sivun sisällöstä hakutuloksen yhteydessä. 7.Kaikki mikä näyttää mainokselta. Webin käyttäjän eivät kiinnitä mainoksiin huomiota, ainoastaan hakutulosten yhteydessä näytettävät juuri tehtyyn hakuun liittyvät tekstipohjaiset mainokset saava armon. Vältä turhia bannereita, animaatioita tai pop up- ikkunoita, jos näitä käytetään niiden käyttö pitää olla hyvin perusteltua. 8.Totuttujen toimintatapojen rikkominen. Webin käyttäjä viettää suurimman osan ajastaan jollakin muulla kuin meidän sivullamme. Jotta täyttäisimme käyttäjän odotukset, sivustomme pitää toimia hyväksi havaituilla tavoilla. 26.11.2015PK-yrittäjän some-aakkoset/ JK| 6

7 Pahimmat Web-suunnittelun virheet (jatkuu…) 9.Uusien selainikkunoiden avautuminen. Linkin idea on, että nyt vanha sisältö korvataan uudella linkin kautta avautuvalla sisällöllä. Takaisin edelliseen sisältöön pääsee back-napilla. Jos sisältö aukeaa uuteen ikkunaan, käyttäjä ihmettelee mitä tapahtuu kun takaisin ei pääsekään entiseen tapaan. Ongelma korostuu pienillä näytöillä. 10.Käyttäjän kysymyksiin ei vastata. Tärkein tieto, jonka käyttäjä haluaa tietää, on haetun tuotteen hinta. Tämä pitää käyttäjälle kertoa. Jos meillä ei kerrota hintatietoa, käyttäjä menee etsimään sitä kilpailijan palvelusta. 26.11.2015PK-yrittäjän some-aakkoset/ JK| 7

8 Mistä hyvä web-sivusto koostuu? 1.Jokaisella sivulla on yrityksen nimi ja logo 2.Jokaiselta sivulta löytyy hyvin toimiva etsi-toiminto - hakusanat joustavia, hakutulokset tärkeysjärjestyksessä 3.Otsikot ja sivun nimet vastaavat sisältöä ja toimivat näin hakukoneoptimoinnin osana. 4.Tee sivujen sisällön tutkiminen helpoksi – ryhmittele asioita ja käytä alaotsikoita suurten asialistojen pilkkomiseksi pienempiin osiin 5.Strukturoi sisältöjä niin, että esimerkiksi tuotekuvauksissa on ensin tuotteen yleiskuvaus ja sitten eri sivuille tallennettua tuotteeseen liittyvää lisätietoa, joka on saavutettavissa linkkien kautta. 6.Käytä tuotekuvia (ja tarvittaessa videoita). Tuotteen pääsivun pitää latautua nopeasti, käytä kuvakuvista thumbnail-versioita. Lisää tarvittaessa kuvaan zoomaus- ja pyöräytysmahdollisuus, mutta tallenna ne aina omalle alisivulleen. 7.Tee kuvista eri versiot eri tarkoituksiin. Esim- tuotelistaan thumbnail-, tuotesivuun medquality- ja zoomaus-sivulle bestquality-versio. 26.11.2015PK-yrittäjän some-aakkoset/ JK| 8

9 Mistä hyvä web-sivusto koostuu? (jatkuu…) 8.Kerro käyttäjälle mihin linkki vie. Linkin title-attribuutin avulla voi kertoa käyttäjälle mihin linkki hänet vie: toiselle sivustolle, aiemmin julkaistuun artikkeliin tms. 9.Varmista, että sivusto on myös esim. lukulaitetta käyttävien henkilöiden (näkövammaiset) saavutettavissa 10.Tee samoin kuin muutkin tekevät. Webin käyttäjä olettaa, että sinun sivustosi toimii sillä tavoin kuin web-sivustot yleensä toimivat. 26.11.2015PK-yrittäjän some-aakkoset/ JK| 9

10 Käytä verkkosivuston tekemiseen sisällönhallintaohjelmaa Ylivoimaisesti yleisin verkkosivustojen tekoon ja ylläpitoon käytetty sisällönhallintaohjelma on Wordpress. 26.11.2015PK-yrittäjän some-aakkoset/ JK| 10 Lähde: http://trends.builtwith.com/cms

11 Miksi Wordpress on suosituin? on ilmainen on helppo asentaa ja käyttää omalla tai vuokratulla palvelimella tai palveluna wordpress.com:issa on helposti muokattavissa ja laajennettavissa Themes ja Plugins on monipuolinen alusta verkkosivusto blogi keskustelupalsta sosiaalinen verkostoituminen CMS (sisällön hallintajärjestelmä) CRM (asiakkaanhallintajärjestelmä) 26.11.2015PK-yrittäjän some-aakkoset/ JK| 11

12 Miksi sisällönhallintaohjelma? sivuston päivittäminen helpottuu, ei tarvita ohjelmointitaitoja verkkosivusto saadaan hakukoneoptimoitua helposti verkkosivuston lataamisen nopeusoptimointi on helppoa sivuston sivut saadaan ja ne pysyvät yhtenevän näköisinä  yrityksen brändi pysyy yhtenevänä sisällönhallintaohjelma tekee kuvista automaattisesti tarvittavat eri kuvaversiot sisältöä on helppo järjestää ja hakea kategorioinnin ja avainsanojen avulla sivuston käytön tilastointi ja analysointi onnistuu suoraan sisällönhallintaohjelmassa tuen saaminen ongelmatilanteissa helpottuu, kun tukena on suuri maailmanlaajuinen aktiivinen käyttäjäyhteisö 26.11.2015PK-yrittäjän some-aakkoset/ JK| 12