Mobiilioptimointi ravintolan sivuille: tarkistuslista 2026
Mobiilioptimointi ei ole ravintolalle valinnainen lisä — se on pääasia. Suurin osa asiakkaistasi näkee sivusi ensimmäistä kertaa puhelimella, usein kiireessä ja nälkäisenä. Tämä tarkistuslista käy läpi kaiken, minkä pitää toimia: ensivaikutelman, ruokalistan, varauksen ja navigoinnin.
Pääkohdat
- Suunnittele mobiili edellä: puhelin on ravintolan tärkein myyntikanava, ei sivujuonne.
- Ensimmäisellä ruudulla pitää näkyä varauspainike, aukiolo ja puhelinnumero — ilman vierittämistä.
- Ruokalista kuuluu verkkosivulle, ei PDF:ään: sen pitää toimia peukalolla ilman zoomausta.
- Painikkeiden vähimmäiskoko on 44×44 pikseliä ja leipätekstin 16 pikseliä.
- Responsiivinen toteutus voittaa erillisen mobiilisivuston lähes aina ravintolalle.
- Testaa itse 10 minuutissa: oma puhelin, wifi pois, asiakkaan silmin.
Useimmat ravintoloitsijat suunnittelevat kotisivunsa tietokoneella, katsovat lopputulosta tietokoneen ruudulta — ja unohtavat, että asiakas ei koskaan näe sitä versiota. Asiakas näkee sivun puhelimella, bussissa tärisevin käsin, auringonpaisteessa siristellen tai pimeällä kadulla kävellen. Jos sivu on suunniteltu työpöydälle ja vain "kutistettu" puhelimeen, se on suunniteltu väärin.
Mobiilioptimointi tarkoittaa, että sivu suunnitellaan puhelin edellä: sisältö priorisoidaan, painikkeet mitoitetaan sormelle, tekstit mitoitetaan luettaviksi ja kaikki turha karsitaan. Vuonna 2026 tämä ei ole edistyksellistä vaan perusasiaa — Googlekin arvioi sivuja ensisijaisesti mobiiliversion perusteella. Tässä oppaassa käymme läpi konkreettisen tarkistuslistan, jonka avulla varmistat, että ravintolasi sivu toimii siellä, missä asiakkaasi ovat. Jokainen kohta on testattavissa omalla puhelimellasi tänään.
Miksi ravintolan sivu on ennen kaikkea mobiilisivu
Ravintola-ala on mobiilin eturintamaa. Kun ihminen etsii ruokapaikkaa, hän on tyypillisesti liikkeellä: kävelemässä kaupungilla, istumassa autossa, sopimassa illan suunnitelmia viestillä. Työpöytäkoneella ravintolaa etsii lähinnä toimistotyöntekijä suunnittelemassa firman pikkujouluja. Kaikki muut — eli suurin osa — käyttävät puhelinta.
Google katsoo mobiiliversiota ensin
Google siirtyi vuosia sitten mobiili-ensin-indeksointiin: hakukone arvioi sivusi ensisijaisesti sen mobiiliversion perusteella. Jos mobiiliversio on hidas, sekava tai puutteellinen, se vaikuttaa suoraan siihen, löytävätkö asiakkaat sinut haulla "ravintola lähelläni" tai "paras pizza Kallio". Mobiilioptimointi on siis myös hakukoneoptimointia. Google Maps -näkyvyyden oppaassamme käsittelemme paikallista löydettävyyttä tarkemmin — mobiili on sen perusta.
Mobiilikäyttäjä on kiireisempi — ja arvokkaampi
Puhelimella selaava asiakas on usein lähempänä ostopäätöstä kuin tietokoneella selaava. Hän ei tee taustatutkimusta ensi kuun illallisesta; hän päättää, minne mennään tänään. Tämä tekee mobiilikävijästä arvokkaamman — mutta myös kärsimättömämmän. Jokainen ylimääräinen klikkaus, jokainen zoomattava teksti ja jokainen hidas lataus on syy valita kilpailija, joka on kahden pysäkin päässä.
Sosiaalinen liikenne on mobiililiikennettä
Instagram, TikTok ja Facebook tuovat ravintolalle asiakkaita — ja käytännössä kaikki sosiaalisen median klikkaukset tulevat puhelimella. Kun jaat annoskuvan tai tarjouksen somessa, linkin takana odottavan sivun on toimittava juuri sillä laitteella, jolta klikkaus tulee. Rakoileva mobiilisivu syö somemarkkinoinnin tehon: maksat tai teet työtä klikkausten eteen, ja ne valuvat hukkaan huonon laskeutumissivun takia. Ennen jokaista kampanjaa: avaa linkki omalla puhelimellasi ja varmista, että se toimii.
Tarkistuslista, osa 1: ensivaikutelma puhelimella
Avaa oma sivusi puhelimella juuri nyt. Mitä näet ennen kuin vierität yhtään? Tämä ensimmäinen ruutu ratkaisee, jääkö asiakas vai poistuuko hän. Tarkista nämä kohdat:
Ennen yksityiskohtia yksi periaate: ensimmäisen ruudun tehtävä ei ole kertoa kaikkea, vaan vastata kolmeen kysymykseen — missä olen, onko auki, miten varaan. Kaikki muu — tarina, galleria, arvostelut — kuuluu alemmas. Jos ensimmäinen ruutu yrittää myydä koko ravintolan kerralla, se ei myy mitään.
Varauspainike heti näkyvissä
Tärkein yksittäinen asia. "Varaa pöytä" -painikkeen pitää olla näkyvissä ensimmäisellä ruudulla, mielellään kiinnitettynä niin että se seuraa vieritystä. Asiakas, joka on päättänyt varata, ei saa joutua etsimään. Painikkeen pitää olla niin iso, että siihen osuu peukalolla kävellessäkin — vähintään 44×44 pikseliä, mielellään suurempi.
Aukiolo ja puhelinnumero yhdellä vilkaisulla
Kaksi yleisintä syytä avata ravintolan sivu puhelimella: "onko auki?" ja "mikä on numero?". Jos aukioloajat löytyvät vasta kolmen klikkauksen takaa, olet hävinnyt. Sijoita tämän päivän aukiolo ja klikattava puhelinnumero (tel:-linkki) näkyvästi — etusivun yläosaan tai kiinnitettyyn alatunnisteeseen.
Hero-kuva, joka latautuu nopeasti
Puhelimella ei tarvita samaa jättikokoista taustakuvaa kuin työpöydällä. Pienempi, pakattu kuva latautuu sekunneissa eikä syö asiakkaan datayhteyttä. Tarkista myös, että otsikkoteksti erottuu kuvan päältä auringonpaisteessakin: riittävä kontrasti ja mieluummin tumma tekstivarjo tai puoliläpinäkyvä tausta tekstin alla.
Testaa tämä niissä oloissa, joissa asiakkaasi sivuasi käyttävät: astu ulos kirkkaaseen auringonpaisteeseen ja avaa etusivu puhelimellasi. Jos joudut varjostamaan näyttöä kädelläsi lukeaksesi otsikon, kontrasti ei riitä — ja kesäterassikaudella moni asiakkaasi selaa juuri auringossa. Yleisin korjaus on yksinkertainen: tummenna kuvan yläosaa liukuvärillä tai siirrä otsikko kuvan rauhallisemman kohdan päälle. Samalla tarkista, että otsikkoteksti on riittävän suurta: puhelimen pienellä ruudulla ohut, pieni fontti katoaa kuvan yksityiskohtiin, vaikka se näyttäisi tyylikkäältä tietokoneella. Kontrasti ja koko eivät ole esteettisiä yksityiskohtia vaan luettavuuden edellytyksiä.
Kuvien optimointi mobiilille
Yksi kuva, kolme versiota: se on mobiilioptimoinnin perussääntö kuville. Työpöydälle leveä, tabletille keskikokoinen ja puhelimelle kapea, kevyesti pakattu versio. Selain osaa valita oikean automaattisesti, kun kuvat on määritelty oikein (srcset-attribuutti). Käytännön vaikutus on suuri: puhelin ei lataa 2 megatavun työpöytäkuvaa, vaan 150 kilotavun mobiiliversion. Jos sivustosi näyttää saman raskaan kuvan kaikille laitteille, nopeus kärsii juuri siellä, missä asiakkaasi ovat. Tämä on myös syy, miksi nopeustesti pitää aina ajaa mobiilivälilehdellä: työpöydän vihreä tulos voi piilottaa puhelimen punaisen.
Ensimmäisen ruudun tarkistuslista
- Varaa pöytä -painike näkyvissä ilman vieritystä, vähintään 44×44 px.
- Tämän päivän aukiolo ja klikattava puhelinnumero esillä.
- Otsikko luettavissa myös auringonpaisteessa.
- Sivu latautuu alle 3 sekunnissa mobiilidatalla.
Osa 2: ruokalista, joka toimii peukalolla
Ruokalista on ravintolasivun luetuin sisältö — ja mobiilissa useimmin rikottu. Jos menu ei toimi puhelimella, mikään muu optimointi ei pelasta.
Ei PDF:ää — ei koskaan mobiilin ainoana vaihtoehtona
PDF-ruokalista puhelimella tarkoittaa zoomaamista, sivusuuntaista vieritystä ja pinsettiotetta. Se on käyttökokemuksena niin huono, että moni asiakas luovuttaa ja valitsee ravintolan, jonka menun pystyy lukemaan. Rakenna menu verkkosivuksi: annokset otsikoina, kuvaukset ja hinnat selkeästi allekkain. PDF-menun ongelmista olemme kirjoittaneet kokonaisen oppaan — lyhyt versio: se maksaa sinulle asiakkaita joka viikko.
Tekstikoko ja riviväli kuntoon
Leipätekstin vähimmäiskoko mobiilissa on 16 pikseliä. Pienempi teksti pakottaa zoomaamaan, ja zoomaava asiakas on poistuva asiakas. Annoskuvausten riviväli saa olla väljä — tiivis tekstimassa on puhelimella raskasta luettavaa. Hinnat kannattaa tasata selkeästi, esimerkiksi oikeaan reunaan, jotta menu on silmäiltävissä nopeasti.
Lounaslista erikseen ja helposti päivitettävänä
Lounasasiakas on kiireisin kaikista: hän tarkistaa päivän listan työpaikan käytävältä tai bussipysäkiltä. Lounaslistan pitää löytyä yhdellä napautuksella etusivulta, sen pitää olla tämän päivän lista (ei viime viikon), ja sen päivittämisen pitää olla niin helppoa, että se todella tapahtuu joka aamu. Jos lounaslistan päivittäminen vaatii koodaria, prosessi on rikki.
Pitkä menu kaipaa hakua ja ankkureita
Jos ravintolassasi on laaja menu — esimerkiksi pizzeria kymmenine vaihtoehtoineen tai aasialainen ravintola pitkine listoineen — pelkkä vieritys ei riitä. Lisää menun yläreunaan ankkurilinkit kategorioittain (Alkuruoat, Pastat, Pizzat, Jälkiruoat), jotta asiakas hyppää suoraan oikeaan kohtaan. Vielä parempi on kevyt hakutoiminto, jolla asiakas löytää "tonnikala"-annokset yhdellä sanalla. Puhelimella jokainen turha vieritysruutu on mahdollisuus luovuttaa; navigointi menun sisällä on pieni investointi, joka maksaa itsensä takaisin joka päivä.
Aukioloajat menun yhteyteen
Pieni mutta tehokas yksityiskohta: näytä menun yhteydessä, milloin mikäkin menu on voimassa. "Lounas ma–pe 11–14", "À la carte ti–la 17–22", "Brunssi la–su 10–14". Asiakas, joka selaa lounaslistaa lauantai-iltana, ei saa luulla sitä illan tarjonnaksi — väärinkäsitys johtaa pettymykseen paikan päällä. Selkeät voimassaoloajat vähentävät myös turhia kyselyitä henkilökunnalle. Jos menut vaihtuvat viikonpäivän mukaan, automatisoi näyttäminen: oikea menu oikeana päivänä ilman manuaalista vaihtoa.
Osa 3: varaus ja yhteystiedot yhdellä napautuksella
Mobiilivaraus on se hetki, jolloin sivu muuttuu rahaksi. Jokainen kitkan aiheuttaja tässä vaiheessa maksaa suoraan.
Varauslomake, joka mahtuu puhelimeen
Hyvä mobiilivaraus kysyy vain välttämättömän: päivämäärä, kellonaika, henkilömäärä, nimi ja puhelinnumero. Jokainen ylimääräinen kenttä — "toivotko ikkunapaikkaa?", "mistä kuulit meistä?" — pudottaa osan varaajista pois. Päivämäärävalitsimen pitää olla puhelimelle tehty (ei pieni kalenteriruudukko, jota pitää zoomata), ja henkilömäärän valinta toimii parhaiten plus/miinus-napeilla. Varausjärjestelmien vertailumme auttaa valitsemaan järjestelmän, jonka mobiilikäyttö on kunnossa — erot ovat yllättävän suuria.
Klikattavat yhteystiedot kaikkialla
Puhelinnumero on aina tel:-linkki, osoite aina linkki karttapalveluun, sähköposti mailto:-linkki. Kuulostaa itsestään selvältä, mutta yllättävän monella sivulla numero on pelkkää tekstiä, jota ei voi napauttaa — asiakas joutuu kopioimaan sen muistiin tai ulkoa. Jokainen tällainen pieni este on pieni syy valita toisin.
Reittiohjeet yhdellä napautuksella
"Miten sinne pääsee?" on mobiilikäyttäjän kolmanneksi yleisin kysymys. Upotettu kartta on mukava, mutta tärkeintä on nappi "Näytä reitti", joka avaa puhelimen oman karttasovelluksen valmiiksi oikealla osoitteella. Erityisesti turisteille ja ensikertalaisille tämä on kullanarvoista — ja se maksaa sinulle yhden rivin koodia.
Mobiilimaksut ja lahjakortit puhelimella
Jos myyt lahjakortteja verkossa, ostoprosessin on toimittava puhelimella alusta loppuun — mukaan lukien maksaminen. Asiakas, joka ostaa lahjakortin jouluaattona sohvalla, ei siirry tietokoneelle. Varmista, että maksutavat (kortti, MobilePay, verkkopankki) toimivat mobiiliselaimessa ja että vahvistus saapuu sähköpostiin, josta kortin voi näyttää puhelimelta. Sama koskee ennakkomaksullisia maistelumenyjä ja tapahtumalippuja: mitä useampi euro kulkee puhelimen kautta, sitä tärkeämpää on, ettei kassalla ole kitkaa.
Osa 4: navigointi, lomakkeet ja luettavuus
Kun perusteet ovat kunnossa, katse siirtyy yleiseen käyttömukavuuteen. Nämä yksityiskohdat erottavat hyvän mobiilisivun keskinkertaisesta.
Hampurilaisvalikko, joka toimii peukalolla
Mobiilinavigointi on lähes aina hampurilaisvalikko (kolme viivaa). Sen pitää avautua koko ruudun valikoksi, jossa linkit ovat isoja ja väljiä — ei pientä pudotusvalikkoa, jossa sormi osuu väärään kohtaan. Valikon tärkeimmät kohteet ravintolalle: Menu, Varaus, Aukiolo & yhteys. Kaikki muu on toissijaista ja saa olla alempana.
Lomakkeet, joita ei tarvitse zoomata
Jos lomakekenttä on pienempi kuin 16 pikseliä, iPhone zoomaa siihen automaattisesti — ja zoomauksen peruminen on ärsyttävää. Pidä kaikki kentät vähintään 16 pikselin tekstissä, tee kentistä riittävän korkeita (vähintään 44 pikseliä) ja käytä oikeita näppäimistötyyppejä: numeronäppäimistö puhelinnumerolle, sähköpostinäppäimistö sähköpostille. Pienet asiat, iso vaikutus.
Pop-upit pois mobiilista
Koko ruudun peittävä uutiskirje-pop-up, joka ilmestyy kolmen sekunnin kuluttua, on mobiilissa erityisen tuhoisa: sen sulkemisnappi on pieni, se peittää sisällön juuri kun asiakas on löytämässä etsimäänsä, ja Google rankaisee tungettelevista välimainoksista. Jos keräät sähköposteja, tee se rauhallisella, sivun alareunaan sijoitetulla lomakkeella — ei keskeytyksellä.
Saavutettavuus on osa mobiilioptimointia
Hyvä mobiilisivu on usein myös saavutettava — ja päinvastoin. Riittävä kontrasti tekstin ja taustan välillä auttaa sekä auringonpaisteessa siristelevää että heikkonäköistä. Kuvat tarvitsevat alt-tekstit, jotta ruudunlukija kertoo, mitä kuvassa on. Painikkeiden pitää erottua pelkästä väristä myös muodoltaan tai tekstiltään, koska osa käyttäjistä ei erota värejä. Nämä eivät ole vain kohteliaisuutta: saavutettavuus on lakisääteinen vaatimus monille toimijoille, ja se parantaa käyttökokemusta kaikille. Mobiilissa, jossa olosuhteet vaihtelevat, sen merkitys korostuu.
Kielivalinta, joka ei turhauta
Jos sivullasi on useita kieliä, kielivalitsimen pitää toimia moitteettomasti myös puhelimella — ja sen pitää olla löydettävissä. Pieni lippukuvake jossain alatunnisteen perällä ei riitä, kun turisti yrittää varata pöytää kiireessä. Sijoita kielivalinta näkyvästi, esimerkiksi valikon yläreunaan, ja varmista että se säilyy samalla sivulla kieltä vaihdettaessa. Pahin virhe on ohjata kielenvaihdossa etusivulle: asiakas, joka oli jo varaamassa, joutuu aloittamaan alusta — ja moni ei jaksa.
Älä unohda tablettia
Puhelimen ja tietokoneen välissä on tabletti — laite, jolla moni selaa sohvalla ravintolavaihtoehtoja ennen illan suunnitelmia. Responsiivinen sivu hoitaa tämän automaattisesti, mutta tarkista silti: näyttääkö sivu järkevältä myös vaakatasossa pidetyllä tabletilla? Tyypillinen ongelma on hero-kuva, joka on rajattu puhelimelle pystysuunnassa mutta näyttää tabletilla oudon kapealta kaistaleelta. Yksi vilkaisu riittää — tabletti on pieni yleisö, mutta sen korjaaminen on pieni vaiva.
| Osa-alue | Minimi (pakollinen) | Tavoite (hyvä) |
|---|---|---|
| Leipätekstin koko | 16 px | 17–18 px, väljä riviväli |
| Painikkeen koko | 44 × 44 px | 48 px+, kiinnitetty varausnappi |
| Latausaika (mobiilidata) | Alle 3 s | Alle 2 s |
| Ruokalista | Verkkosivu, luettava ilman zoomia | Kuvat + allergeenit + hinnat ajan tasalla |
| Varaus | Onnistuu puhelimella | Alle 2 min, vain välttämättömät kentät |
| Yhteystiedot | Klikattava numero ja osoite | + reittinappi karttasovellukseen |
Responsiivinen vai erillinen mobiilisivusto?
Vanha kysymys kuuluu: pitäisikö tehdä erillinen mobiiliversio (esimerkiksi m.ravintola.fi) vai yksi sivu, joka mukautuu (responsiivinen)? Vuonna 2026 vastaus on ravintolalle selvä: responsiivinen, lähes poikkeuksetta.
Erillinen mobiilisivusto tarkoittaa kahta ylläpidettävää sivustoa: kaksi ruokalistaa päivitettävänä, kaksi paikkaa joissa aukiolo voi vanhentua, kaksi sivua Googlen indeksoitavana. Käytännössä toinen versioista jää aina jälkeen — yleensä mobiili, juuri se tärkeämpi. Responsiivisessa toteutuksessa on yksi sisältö, yksi osoite ja yksi päivitys, joka näkyy kaikilla laitteilla.
Poikkeuksia on vähän: jos ravintolalla on hyvin erilainen mobiilipalvelu (esimerkiksi tilaus- ja noutosovellus), erillinen toteutus voi olla perusteltu. Tavalliselle ravintolalle, kahvilalle tai baarille se on lähes aina ylimitoitettu ja kallis ratkaisu. Hintaoppaassamme näet, mitä nykyaikainen responsiivinen toteutus maksaa — erillisen mobiilisivuston ylläpito maksaa päälle vuodesta toiseen.
Erillisen mobiilisivuston todellinen hinta
Pelkkä rakentaminen on vasta alkua. Erillinen mobiilisivusto tarkoittaa, että jokainen muutos tehdään kahdesti: ruokalistapäivitys, aukioloaikojen muutos, kampanja, joulumenu. Käytännössä tämä johtaa kahteen lopputulokseen: joko maksat tuplahinnan ylläpidosta joka kuukausi, tai mobiiliversio vanhenee ja asiakkaat saavat eri tiedon kuin työpöytäkävijät — mikä on luottamuksen kannalta pahempi kuin ei mobiilisivua ollenkaan. Responsiivisessa mallissa yksi päivitys näkyy kaikkialla. Kun lasket kokonaiskustannusta kolmelle vuodelle, ero on yleensä tuhansia euroja responsiivisen hyväksi — ennen kuin otetaan huomioon menetetyt asiakkaat vanhentuneen mobiilisisällön takia.
Milloin erillinen mobiilisivusto voisi olla perusteltu?
- Ravintolalla on oma tilaussovellus, joka tarvitsee kevyen mobiiliportaalin.
- Kanta-asiakasohjelma toimii erillisessä mobiiliympäristössä.
- Muissa tapauksissa: yksi responsiivinen sivu on halvempi, nopeampi ylläpitää ja parempi Googlessa.
Testaa itse 10 minuutissa
Teoria riittää — nyt käytäntöön. Tämä testi vie kymmenen minuuttia eikä vaadi mitään työkaluja. Tee se asiakkaan näkökulmasta, ei omistajan.
- Valmistele: ota puhelin, kytke wifi pois, avaa selain yksityisessä tilassa (ettei välimuisti kaunistele).
- Minuutit 0–2 — ensivaikutelma: avaa etusivu. Näkyykö varausnappi heti? Latautuiko sivu nopeasti? Onko teksti luettavaa zoomaamatta?
- Minuutit 2–5 — ruokalista: etsi menu. Montako napautusta se vaati? Onko se luettavissa ilman zoomausta? Onko se ajan tasalla?
- Minuutit 5–8 — varaus: tee testivaraus (voit perua sen). Kuinka monta kenttää lomake kysyi? Toimiko päivämäärävalitsin? Saitko vahvistuksen?
- Minuutit 8–10 — yhteys: löydätkö puhelinnumeron ja aukiolon? Saatko numeron soitettua yhdellä napautuksella? Aukeavatko reittiohjeet?
Kirjaa jokainen kohta, jossa jouduit odottamaan, zoomaamaan, arvaamaan tai palaamaan takaisin. Lista on korjauslistasi — ja se on todennäköisesti lyhyempi kuin pelkäsit. Useimmat mobiiliongelmat ovat yksittäisiä, konkreettisia korjauksia, eivät isoja remontteja.
Dokumentoi löydökset edes lyhyesti: päivämäärä, puhelinmalli ja havaitut ongelmat. Kun toistat testin kolmen kuukauden kuluttua, näet heti, onko jokin mennyt huonompaan suuntaan — esimerkiksi uusi kampanjakuva, joka hidastaa etusivua, tai päivittynyt varauswidget, joka rikkoi lomakkeen. Ilman muistiinpanoja jokainen testi alkaa nollasta; muistiinpanojen kanssa se on seurantaa.
Ilmaiset työkalut testin tueksi
Oma silmä on paras työkalu, mutta muutama ilmainen apuväline syventää testiä. Googlen PageSpeed Insights mittaa sivusi mobiilinopeuden ja kertoo, mikä hidastaa — lue siitä lisää nopeusoppaastamme. Selaimen kehittäjätyökaluilla (F12) voit esikatsella sivua eri puhelinmalleilla, mutta muista: emulaattori ei korvaa oikeaa laitetta kädessä. Ja yksinkertaisin testi on ilmainen: pyydä henkilökuntaa tai tuttua avaamaan sivu omalla puhelimellaan ja varaamaan pöytä. Ulkopuolinen löytää ongelmat, joille olet itse sokeutunut.
Yleisimmät virheet ja niiden korjaukset
Lopuksi kootusti ne virheet, jotka näemme ravintoloiden mobiilisivuilla useimmin — ja mitä niille tehdään.
Tekstiä ei voi lukea zoomaamatta
Syy on lähes aina liian pieni fonttikoko tai kiinteälevyinen asettelu. Korjaus: leipäteksti vähintään 16 pikseliä, joustava asettelu joka täyttää näytön leveyden. Testaa pienimmälläkin puhelimella, ei vain omalla huippumallilla.
Varausnappi katoaa vierittäessä
Etusivun yläreunassa oleva nappi on hyvä alku, mutta asiakas vierittää — ja nappi jää taakse. Korjaus: kiinnitä varauspainike näkyviin myös vieritettäessä, esimerkiksi alareunan palkkiin. Se on mobiilin tehokkain yksittäinen konversioelementti.
Sivu on hidas mobiilidatalla
Toimiston wifissä kaikki toimii; asiakkaan 4G-yhteydellä ei. Korjaus: pakkaa kuvat, karsi etusivun video mobiilissa ja testaa nopeus säännöllisesti. Nopeus ja mobiilioptimointi kulkevat käsi kädessä — hidas mobiilisivu ei ole optimoitu, vaikka se näyttäisi hyvältä.
Valikkoa ei löydy
Hampurilaisvalikon takana on kymmenen linkkiä, joista "Ruokalista" on seitsemäs. Korjaus: nosta Menu, Varaus ja Yhteys valikon kärkeen. Kaikki muu — historia, blogi, galleria — saa odottaa.
Kuvat eivät lataudu tai näyttävät rikkinäisiltä
Mobiilissa näkyy tyhjiä kuvakehyksiä tai venyneitä kuvia. Syy on usein siinä, että kuvat on mitoitettu työpöydälle eikä selaimelle ole kerrottu, miten ne skaalautuvat. Korjaus: varmista, että kuvat skaalautuvat näytön leveyteen (CSS: max-width: 100%) ja että jokaisella kuvalla on määritelty korkeus tai kuvasuhde, jotta sivu ei hypi latautuessa.
Tekstiä vasten ei erota taustakuvasta
Vaalea teksti vaalean kuvan päällä on mobiilissa yleinen — ja auringonpaisteessa täysin lukukelvoton. Korjaus: lisää tekstin taakse puoliläpinäkyvä tumma kerros tai tekstivarjo, tai valitse kuviin rauhallisempi kohta tekstin taakse. Kontrasti ei ole esteettinen yksityiskohta vaan luettavuuden edellytys.
Mobiilioptimointi ei ole projekti, joka tehdään kerran ja unohdetaan. Jokainen uusi kuva, kampanja ja sesonkimenu on mahdollisuus rikkoa se — tai vahvistaa sitä. Tee tämän oppaan 10 minuutin testistä kausirutiini: sesongin vaihtuessa, kampanjan alkaessa, aina kun lisäät jotain uutta. Asiakkaasi ovat puhelimella. Varmista, että olet siellä heitä varten — nopeana, selkeänä ja varattavissa. PowerfulWebsite rakentaa kaikki ravintolasivut mobiili edellä: se ei ole lisäpalvelu vaan lähtökohta.
Jos tästä oppaasta jää yksi asia mieleen, olkoon se tämä: mobiilioptimointi ei ole tekniikkaa vaan empatiaa. Se on kykyä asettua kiireisen, nälkäisen ihmisen asemaan pimeällä kadulla ja kysyä: löytääkö hän perille, näkeekö hän menun, saako hän varattua? Jokainen kyllä-vastaus on varaus, jokainen ei-vastaus on kilpailijalle menetetty asiakas. Tekniikka on vain keino päästä perille — päämäärä on aina ihminen puhelimen toisella puolella. Aloita tänään yhdestä kohdasta; sekin on todellista, selvästi mitattavaa edistystä.
Usein kysyttyä
Onko responsiivisuus sama asia kuin mobiilioptimointi?
Ei aivan. Responsiivisuus tarkoittaa, että sivu mukautuu näytön kokoon teknisesti — se on perusedellytys. Mobiilioptimointi on laajempi: se kattaa myös latausnopeuden, peukaloystävälliset painikkeet, luettavan tekstikoon, yksinkertaistetun navigoinnin ja sen, että varaus onnistuu puhelimella. Responsiivinen sivu voi silti olla huono mobiilisivu.
Miksi mobiilisivu näyttää erilaiselta kuin tietokoneversio?
Koska sen pitääkin. Puhelimella tilaa on vähän, käyttäjä on usein liikkeessä ja kiireinen, ja sormi on epätarkempi kuin hiiri. Hyvä mobiilisuunnittelu priorisoi: tärkein sisältö ensin, vähemmän tekstiä kerralla, isot painikkeet ja yksinkertainen navigointi. Sama sisältö, eri järjestys.
Kuinka suurta tekstiä mobiilisivulla pitää käyttää?
Leipätekstin vähimmäiskoko on 16 pikseliä — pienempi pakottaa zoomaamaan, mikä on mobiilissa erityisen ärsyttävää. Otsikoiden pitää erottua selkeästi, ja rivivälin on oltava väljä. Testaa aina oikealla puhelimella, ei vain selaimen esikatselulla.
Tarvitseeko ravintola erillistä mobiilisovellusta?
Erittäin harvoin. Sovelluksen lataaminen on iso kynnys satunnaiselle asiakkaalle, ja ylläpito on kallista. Hyvin optimoitu mobiilisivu hoitaa kaiken, mitä ravintolan asiakas tarvitsee: menun selaamisen, varauksen, reittiohjeet ja yhteydenoton. Sovellus kannattaa vain, jos ravintolalla on laaja kanta-asiakasohjelma.
Miten testaan, toimiiko sivuni puhelimella?
Ota oma puhelin, kytke wifi pois päältä ja käy sivu läpi asiakkaan näkökulmasta: avaa etusivu, etsi ruokalista, yritä varata pöytä ja soittaa ravintolaan. Kirjaa jokainen kohta, jossa joudut zoomaamaan, odottamaan tai arvaamaan. Kymmenen minuutin testi paljastaa enemmän kuin tuntien analytiikka.
Maksavatko mobiilioptimoidut sivut enemmän?
Eivät välttämättä. Nykyaikaisessa toteutuksessa mobiilioptimointi on osa peruslaatua, ei lisäpalvelu — jokainen uusi sivu rakennetaan lähtökohtaisesti mobiili edellä. Kalliiksi tulee vasta vanhan, ei-responsiivisen sivuston korjaaminen jälkikäteen, mikä on usein kalliimpaa kuin uuden rakentaminen.
Haluatko kotisivut, jotka tuovat pöytävarauksia?
PowerfulWebsite toteuttaa ravintolasi kotisivut ilmaiseksi — maksat vain kuukausimaksua 49 €/kk alkaen. Sisältää kaiken: domainin, hostingin, ylläpidon ja päivitykset.
Tutustu paketteihin