Lokakuusta 2026 lähtien jokainen hPage-verkkosivusto on automaattisesti mobiiliystävällinen: kaikissa sivupohjissa on mobiiliasettelu, eikä mitään tarvitse määrittää. Aiempaa asetusta Mobiiliversio ei enää ole.
Miten mobiiliasettelu toimii
- Puhelimissa ja tableteissa verkkosivustosi näytetään yhtenä palstana: ylätunniste, valikko ja sisältö allekkain. Valikko piiloutuu sivupohjasi valikko-otsikon taakse ja avautuu napautuksella.
- Sisältö, värit ja fontit ovat samat kuin tietokoneella. Muokkaat sivujasi vain kerran; erillistä mobiilisisältöä ei tarvitse ylläpitää.
- Kuvat, videot ja taulukot pienennetään näytön levyisiksi. Leveät taulukot, joilla on kiinteä leveys, vierivät sivusuunnassa.
- Mobiiliasettelu on käytössä kosketusnäytöillä, jotka ovat sivupohjaasi kapeampia, sekä kaikilla alle 1024 pikselin levyisillä näytöillä. Kannettava tietokone, jossa on hiiri ja kapeampi selainikkuna, näyttää edelleen tietokoneen ulkoasun.
Tarkista verkkosivustosi puhelimella
- Napsauta sivupalkissa valintaa Siirry verkkosivustolle, niin näet verkkosivustosi osoitteen, ja avaa tämä osoite puhelimesi selaimessa.
- Ilman puhelinta: avaa verkkosivustosi tietokoneella ja kavenna selainikkuna alle 1024 pikselin levyiseksi. Asettelu vaihtuu mobiiliasetteluun.
- Jos puhelimesi näyttää yhä vanhan version, lataa sivu uudelleen. Mobiiliselaimet pitävät sivuja välimuistissaan jonkin aikaa.
Vinkkejä kuviin
- Kuvia ei tarvitse muuttaa mobiililaitteita varten: ne pienennetään automaattisesti, ja niiden mittasuhteet säilyvät.
- Pidä tiedostokoot pieninä, jotta sivut latautuvat nopeasti mobiiliyhteydellä. Kuvien pakkaus tiedostoja ladattaessa auttaa tässä.
- Vältä tärkeän tekstin sijoittamista kuvien sisään: pienellä näytöllä sitä on vaikea lukea. Kirjoita teksti mieluummin tekstinä.
- Tekstin vasemmalle tai oikealle puolelle kelluvat kuvat näytetään mobiilissa kapeampina, jotta teksti mahtuu yhä niiden viereen.
Vinkkejä teksteihin ja taulukoihin
- Kirjoita lyhyitä kappaleita ja käytä väliotsikoita; pitkiä tekstimassoja on vaikea lukea puhelimella.
- Vältä kiinteitä leveyksiä omassa HTML-koodissasi (esimerkiksi
width="800"); käytä prosentteja tai jätä leveys kokonaan pois. - Suosi taulukoita, joiden leveys on 100 % tai joille ei ole määritetty leveyttä. Kiinteän levyinen taulukko vierii mobiilissa sivusuunnassa.
- Hyvin pitkät sanat ja verkko-osoitteet katkaistaan näytön reunassa; välilyönti tai yhdysmerkki antaa selaimelle paremman katkaisukohdan.