Sivut uudistuneet

mobile first

Ajat muuttuvat. Ihmiset ovat kiireellisempiä kuin aikaisemmin. Netti pursuaa tekstiä, kuvaa ja ääntä.

Verkon sisällöntuottajan tärkein taito näinä aikoina on tuottaa sisältöä, joka on tiivistä, mutta kuitenkin riittävän informatiivista meidän levottomille nettiaivoillemme.

Tästä syystä myös me täällä Suunnittelutoimisto Successissa päätimme karsia sivustomme sisällön minimiin. Jotain ehkä menetimme sisällöllisessä rikkaudessa, mutta ainakaan sivustolla vierailevan surffailijan ei tarvitse enää hukkua/eksyä siihen valtavaan tiedon tulvaan joka sivustolla oli.

Toinen syy sivuston uudistamiselle oli siinä, että verkkosivustojen selaaminen tapahtuu tänä päivänä yhä useammin mobiililaitteilla kuten kännyköillä ja tableteilla. Näissä laitteissa näytöt ovat sen verran pieniä, että mukavan käyttökokemuksen aikaan saamiseksi sisältöä ei saa olla liikaa.

Niinpä 10.12. julkaistut sivut onkin suunniteltu niin sanotulla mobile first -filosofialla. Siinä on taustalla ajatus, että sivuja lähdetään suunnittelemaan ja rakentamaan mobiililaitteen käyttökokemus edellä. Tästä johtuen sivulla on vähemmän tekstiä ja se on esitetty isommalla fonttikoolla. Myös valikot on suunniteltu niin, että niissä on vähemmän linkkejä. Siksi uudessa versiossa useita sivuja on niputettu saman sivun alle, mikä on mielestäni aika käytännöllistä.

Haluaisimme mielelämme kuulla palautetta näistä sivuista, joten laita ihmeessä kommenttia palautekenttään.

Kuinka tekstistä tehdään kuva?

Obama. Lähde: http://www.neoformix.com/2008/WordPictures.html

Jeff Clark Neoformix yrityksestä on tullut tunnetuksi sanoista muodostuvista henkilökuvista (word portrait), kuten esimerkiksi tästä Obaman kuvasta. Wordportraitin idea on kuitenkin lähtöisin alunperin maailmanlaajuisesti tunnetulta designerilta Gui Borchertilta, joka teki sanamuotokuvan Jimi Hendrixistä. Menetelmää voisi kutsua datan tai tekstin visualisoinniksi. Samaa menetelmää voidaan käyttää henkilökuvien ohella myös muidenlaisten kuvien suunnittelemiseen tekstistä.

Tänään aion kertoa teille kuinka voit tehdä itse tällaisen word portraitin. Datan visualisointiin on olemassa kehittyneitä työkalujakin, mutta tässä artikkelissa keskityn siihen kuinka voit tehdä sanamuotokuvan vain Adobe Illustratoria käyttäen. Tässä yhteydessä ei voida siis periaatteessa puhua datan visualisoimisesta vaan tekstin muotoilemisesta kuvaksi, koska mitään dataa ei ole.

1. Tuo haluamasi muotokuva Illustratoriin. File > Place…

2. Seuraavaksi tehdään kuvasta yksinkertaisempi käyttäen Live Tracea. Object > Live Trace > Tracing options… Valitaan asetukseksi Color 16, joka poimii kuvasta 16 keskeisintä värialuetta.

3. Nyt alkaa viimeinen, mutta raskain vaihe. Tuo ohjelmaan tekstipätkä, jonka haluat visualisoida. Vaihtoehtoisesti voit käyttää myös haluamiasi sanoja. Valitse tekstille sopiva fontti ja sitten vain sijoittelemaan sanoja kuvan päälle. Itse käytin esimerkissä joitakin sanoja useita kertoja, koska minulla ei ollut valmista tekstiä enkä jaksanut keksiä enempää sanoja. Mitä kärsivällisempi olet sanojen ulkoasun ja kuvan yhteensopivuuden kanssa, sitä tarkempi kuvasta tulee.

4. Ja tässä lopputulos.

Sanoista kuvaksi

Nettisivujen resepti

Nettisivujen resepti

Nettisivut ovat tänä päivänä yrityksen tärkein markkinointikanava. Ilman nettisivuja yritystäsi ei käytännössä ole olemassa. Kuvitellaanpa tilanne, jossa asiakkaalla on mielessään jokin tuote tai palvelu, josta hän haluaa saada lisätietoa. Kuinka luulet hänen hakevan lisätietoa? Luulen, että aika moni vastaisi kanssani samalla tavalla: asiakas menee jonnekkin hakukoneeseen esimerkiksi Googleen ja kirjoittaa hakusanat. Sitten Google listaa asiakkaalle nettisivut, jotka hakurobottien mukaan vastasivat kaikkein parhaiten asiakkaan hakua.

 

Kuinka rakennetaan näkyvät nettisivut?

Hyville nettisivuille on olemassa kolme kirjoittamatonta sääntöä: sisältö, sisältö ja sisältö. Valitettavan usein tilanne on se, että yritys tilaa nettisivujen ulkoasun suunnittelun jostakin nettisivuja tuottavasta yrityksestä, mutta unohtaa, että hyvät nettisivut ovat tarpeettomat ilman asiakasta palvelevaa hyvää sisältöä. Nettisivujen sisältö saatetaan toimittaa kymmenessä minuutissa kun ulkoasua hiotaan ehkä kymmenen tuntia. Tottakai nettisivujen hyvä ulkoasukin on tärkeää, mutta hienotkin nettisivut homehtuvat internetin kätköissä turhaan elleivät ne tule löydetyksi. Hakukoneet näkevät nettisivut melkein pelkästään vain tekstinä, joten nettisivujen sisältö ratkaisevaa.

 

Miten suunnitellaan nettisivuille hyvä sisältö?

  1.  Mieti mitä asiakkaasi hakee nettisivuiltasi? Mihin kysymyksiin hän kenties haluaa vastauksia?
  2. Keksi nettisivulle muutama hakusana, joilla luulet asiakkaan löytävän palvelusi.
  3. Kirjoita nettisivuille sisältöä, jossa hakusana esiintyy niin usein kun mahdollista. Pyri siihen, että sisältö myös vastaa mahdollisimman hyvin asiakkaan kysymyksiin. Olisi hyvä jos hakusana löytyisi jo suoraan nettisivun otsikosta.
  4. Tiivistä. Hyvä nettisivujen sisältö on selkeää ja informatiivista. Jätä turhat jaarittelut pois ja kirjoita tekstiä, josta asia on ymmärrettivissä niin nopeasti kuin mahdollista. Listat ovat hyviä. Jos mietit että asiakkasi löytäisi nettisivusi hakukoneesta ja vierailisi nettisivuillasi kymmenen sekuntia. Tässä ajassa hänen tulisi löytää hakemansa asia, muuten olet menettänyt hänet.

P.S. Kirjoita kommentti tai paina tykkää jos löysit tämän sivun hakusanalla: nettisivu. Se oli tämän tekstin avainsana.

Responsiivista designia WordPressiin

Responsiivisella designillä tarkoitetaan lyhyesti määriteltynä käyttöliittymäsuunnittelua, joka tähtää esimerkiksi nettisivun mahdollisimman hyvään käytettävyyteen eri alustoilla ulkoasun siitä kärsimättä. Käytännössä tämä voi tarkoittaa esimerkiksi nettisivua, joka skaalautuu tyylikkäästi käyttäjän laitteeseen sopivaksi käyttipä hän sitten iphonea, tablettia, android-puhelinta tai pöytäkonetta. Pitkään on harrastettu sitä, että jokaiselle alustalle suunnitellaan sivut erikseen. Kun puhutaan suurista tietomääristä saattaa sivujen päivittäminen käydä kuitenkin hankalaksi, koska joudutaan päivittämään aina erikseen mobiili-, tabletti- ja pöytäkoneversiota. Kysymys kuuluu: olisiko mahdollista rakentaa yksi versio nettisivusta, joka toimisi kaikilla alustoilla? Vastaus tähän on kyllä.

Responsive design

Kuinka sitten toteutetaan tällaiset sivut, jotka taipuvat käytettäväksi useilla eri laitteilla? Yhden ratkaisun ongelmaan tuo HTML5 merkkauskieli ja CSS3 tyylimäärittelyt. HTML5 tuo dokumentille selkeämmän rakenteen ja CSS3 luo tyylin, joka tukee hyvin skaalautuvuutta. Hyvin skaalautuva ulkoasu saadaan rakentamalla sivut CSS grid -järjestelmän päälle.

Ben Word (nimimerkki retlehs) on kehitellyt Roots -nimisen WordPress teeman, joka on ideaali lähtökohta, kun halutaan yhdistää responsiivinen design WordPress sisällönhallintaan. Roots on todellakin lähtökohta, sillä siitä on karsittu kaikki ylimääräinen pois, mutta juuri siksi se toimii hyvänä alustana kehittäjälle. Teema perustuu HTML5 Boilerplateen, joka tekee HTML5 koodista suhteellisen laajasti tuettua eri selaimille. Puhdasta HTML5 koodiahan eivät tällä hetkellä tue kuin kaikkein uusimmat selaimet. Lisäksi teema käyttää erittäin suosittua CSS grid- järjestelmää, jossa sivu jaetaan esimerkiksi 16 eri sarakkeeseen. Roots on siis raaka lähtökohta, joka luo edistyneemmille kehittäjille oivan lähtökohdan responsive designiin.

 

Oikotie onneen?

Herra nimeltä Tyler Longren on julkaissut myös WordPress teeman, joka edustaa responsive designia. Kyseessä on hieman pidemmälle viety toteutus, joka nojaa myös HTML5 ja CSS3 kieleen. Teema nimeltään HTML5Press on ilmainen ja mielestäni oikein toimiva. Tyylitiedostoja muokkaamalla siitä saa aloittelevakin WordPress kehittäjä responsiivista designia aikaan.

Löytyiskö muuten yhtään hyvää suomennosta sanalle responsive design? Itse ehdottaisin laiteyhteensopivaa suunnittelua. Seuraava askel onkin sitten ottaa responsive design käyttöön Successilla. Joko sinun sivusi on suunniteltu responsiivisesti?

Netti alkaa olemaan pulollaan esimerkkejä responsive designista, mutta tässä muutama esimerkki.

HTML5:n muita mahdollisuuksia:

EDIT: Success on ottanut käyttöön responsiiviset sivut.

5 hyvää syytä miksi sinun tulisi valita Success-kotisivut

  1. Nopea toimitus. Pystymme toimittamaan sinulle valmiit kotisivut 7 päivässä.
  2. Upea jälki. Suunnittelemme sinulle kotisivut, joiden jälki on raikas ja tyylikäs. Erotut eduksesi internetin sivuviidakossa.
  3. Hyvä löydettävyys. Teemme jokaiselle kotisivulle hakukoneoptimoinnin, jotta ne löytyisivät parhaalla mahdollisella tavalla hakukoneissa.
  4. Laatutakuu. Työstämme kotisivuja niin kauan, että olet täysin tyytyväinen lopputulokseen.
  5. Helppous. Täytä vain lomake ja me hoidamme loput.

Nopeampaa ja huolettomampaa surffailua

Internet Explorerin 6 versio on ollut nettisivujen sunnittelijoiden päänvaiva jo pitkään. Harmaita hiuksia se on aiheuttanut myös käyttäjäkunnalleen, kun sivut eivät ole toimineet toivotulla tavalla tai selain on kaatuillut ilman sen kummempia syitä. Yli kymmenenen vuotta vanhassa selaimessa on tietoturva-aukkoja ja muutenkin internetin koodikieli on muuttunut kymmenessä vuodessa niin paljon, etteivät sivut enää voi näkyä oikein.

Monet yritykset ovat päättäneetkin lopettaa Internet Explorerin 6 version tukemisen. Jopa Microsoft suosittelee selaimen käytön lopettamista. Roger Capriotti kirjoitti vuosi sitten Microsoftin Internet Explorerin käyttäjille pitämässään blogissaan kuutosversion hautajaisista. Yhtiö on perustanut sivuston jossa seurataan IE6:n käyttöä. Microsoftin tavoitteena on että Internet Explorerin käyttö saataisin alle yhteen prosenttiin maailmanlaajuisesti. Silti tätä vanhusta käytetään vielä joissakin suomalaisissa yrityksissä ja kotitalouksissa.

Oletko huomannut nettiä selatessasi, että yhä useammat sivut eivät näytä hyvältä? Tuntuuko netin selaaminen välillä tuskastuttavan hitaalta? Haluaisitko että netin selaaminen olisi turvallisempaa? Ehkä sinulla on käytössäsi Internet Explorer 6. Nyt on jo aika siirtyä tähän päivään! Tässä on lista nykyaikaisten selaimien latauslinkkejä. Näistä selaimista edellä mainittuja puutteita on korjattu.

Kuvailluusio

Tuijota alla olevassa kuvassa esiintyvää punaista pistettä n. 30 cm etäisyydeltä 10-20 sekuntia. Katso sitten valkoiselle seinälle ja räpytä silmiäsi. Mitä näet?

a) Veli Tolstoi
b) UFO
c) muurahaiskarhu