Tämän ohjeen tarkoituksena on auttaa sinua muokkaamaan kotisivukoneella tehdyistä nettisivuistasi paremman näköiset mobiililaitteille.
Sivujesi skaalautumista mobiililaitteilla voit tarkastella jo ennen julkaisua Kotisivukoneesi mobiilisimulaattorilla, joka löytyy Julkaise-nappulan alasvetovalikosta.

Huomioithan kuitenkin että kaikki muutokset eivät ole mahdollisia tehtäessä sivuja kotisivukoneen avulla, ja joitain muutoksia saadaan tehtyä vain kajoamalla sivujen koodiin.

Jos kuvasi tuntuvat skaalautuvan mobiililaitteessa oudosti (esimerkiksi venynyt kuva, kuva ei näy kokonaan, jne.),
kannattaa sinun tarkastaa, mille pohjalle kuvat on sivuillasi asetettu.
Jos pohjana on banneri, suosittelemme vaihtamaan sen esimerkiksi Teksti & kuvat -lisäosaan.

Kannattaa myös tarkastaa, ettei kuva ole liian suuri.
Alla linkkimme oikean kuvakoon valitsemiseen- ja muokkaamiseen Kotisivukoneella:
Oikean kuvakoon valinta -ja muokkaus

Taulukon käytössä ei ole tarkoituksena ryhmitellä kotisivujen varsinaista sisältöä.
Tämä tulisikin ennemmin tehdä lisäämällä Teksti & kuvat -lisäosia sivuille.

Taulukko käyttää kiinteitä pikselikokoja, jotka eivät skaalaudu mobiiliin välttämättä kunnolla.
Yleensä käy siis niin, että taulukolla ei yksinkertaisesti ole tilaa näyttää kaikkia tietoja mobiililaitteen näytössä.
Taulukon käyttöä emme siis suoraan suosittele, jos siitä tulee hirveän leveä (esimerkiksi 500 pikseliä saattaa jo olla liikaa).

Jos tarkoituksena kuitenkin on luoda taulukko, joka skaalautuisi mahdollisimman hyvin myös mobiilissa,
voi taulukon leveyttä muuttaa prosentuaaliseksi.
Asettamalla taulukon leveydelle pikseleiden sijaan prosentuaaliset mitat, voit vaikuttaa siihen, miten hyvin sivut skaalautuvat mobiililaitteella.
Suosituksemme on asettaa kooksi 100%.

Jos huomaatte että sivuillanne oleva logo näyttää oudolta mobiilissa, kannattaa jälleen tarkastaa, mille pohjalle kuva on lisätty.
Jos kuvanne on logo-lisäosassa, suosittelemme poistamaan lisäosan kokonaan.
Tilalle voi asettaa esimerkiksi Teksti & kuvat-lisäosan, johon voitte lisätä logonne.

Välilyönnit, marginaalit– ja täytteet aiheuttavat myös usein hankaluuksia sivunäkymään mobiiliversiossa.

Yleisenä ohjeena voimme antaa, että välilyöntejä ei tulisi käyttää esimerkiksi otsikon- tai tekstin keskittämiseen.
Välilyönnit ovat koodikielessä normaaleja merkkejä, joten mobiilissa ne myös näytetään, mikä vaikuttaa herkästi muotoiluun.

Myös marginaalien ja täytteiden käyttöä tulisi mieluusti välttää.
Jos näiden käyttö on kuitenkin pakollista, arvojen kannattaa olla maksimissaan noin 20:en luokkaa.

02.06.2017

|