Näin teet verkkosivusta mobiiliystävällisen

Tee verkkosivusta mobiiliystävällinen lisäämällä viewport-meta-tagi, rakentamalla asettelu mobiili edellä joustavilla leveyksillä ja käyttämällä CSS-taitepisteitä, jotka järjestävät sen suuremmilla näytöillä uudelleen: sarakkeet pinoutuvat, valikko taittuu ja kuvat skaalautuvat mahtumaan. Tarkista sen jälkeen jokainen sivu puhelimen leveydellä sivusuuntaisen vierityksen, liian pienen tekstin ja liian pienten napautettavien painikkeiden varalta. Tekoälyllä rakennetulla sivustolla yksi selkeä kehote ja tarkistus puhelinkokoisessa esikatselussa korjaa yleensä suurimman osan.

Mitä responsiivinen suunnittelu todella on

Responsiivinen sivusto käyttää yhtä joukkoa sivuja ja osoitteita, jotka mukautuvat näytölle. Erillisen "m."-sivuston sijaan CSS muuttaa asettelua tietyissä leveyksissä, joita kutsutaan taitepisteiksi (breakpoints). Rakennuspalikat ovat:

• Viewport-meta-tagi kertoo mobiiliselaimille, että niiden pitää käyttää laitteen todellista leveyttä.
• Joustavat asettelut käyttävät prosentteja, flexboxia ja gridiä kiinteiden pikselileveyksien sijaan.
• Media-kyselyt (tai kehysten luokat, kuten Tailwindin md:) muuttavat asettelua tietyn leveyden yläpuolella.
• Joustavat mediat: kuvat ja videot, jotka pienenevät mahtumaan säiliöönsä.

Se on tärkeää, koska suuri osa liikenteestäsi tulee todennäköisesti puhelimilta ja koska Google indeksoi sivujesi mobiiliversion. Jos sisältö tai linkit löytyvät vain työpöydältä, Google ei ehkä näe niitä myöskään.

Vaihtoehdot ja kompromissit

Mobiili edellä on yleensä yksinkertaisin tapa: yksi sarake on helpoin asettelu, ja sarakkeiden lisääminen tilan kasvaessa on vähemmän työtä kuin niiden poistaminen.

Osat, jotka yleensä hajoavat

Viewport-tagi

Jos sivu näyttää puhelimella pieneltä työpöytäsivustolta, viewport-tagi puuttuu:

<meta name="viewport" content="width=device-width, initial-scale=1">

Älä lisää maximum-scale=1 tai user-scalable=no. Nipistys-zoomin estäminen vaikeuttaa sivun käyttöä heikkonäköisille.

Kiinteät leveydet ja vaakasuuntainen vieritys

Yleisin responsiivisuusvirhe on jokin näyttöä leveämpi asia: kiinteä width: 1200px -säiliö, leveä taulukko, pitkä URL tai koodilohko, tai kuva ilman max-width: 100%. Koko sivu alkaa silloin vierittyä sivusuunnassa. Käytä max-width-arvoa width-arvon sijaan, anna tekstin rivittyä ja anna leveille asioille oma vierityssäiliö.

Navigaatio

Viisi työpöydän valikkolinkkiä mahtuu harvoin puhelimelle. Yleinen ratkaisu on valikkopainike, joka avaa paneelin. Pidä kaksi tai kolme tärkeintä toimintoa näkyvissä, kuten "Varaa", "Ostoskori" tai "Kirjaudu", ja varmista, että valikko toimii näppäimistöllä ja sulkeutuu helposti.

Teksti ja napautettavat kohteet

• Noin 16 px:n leipäteksti on järkevä vähimmäiskoko puhelimilla. Pienempi teksti kentissä saa iPhonet zoomaamaan sisään napautettaessa.
• Tee painikkeista ja linkeistä helposti osuttavia. WCAG 2.2 AA asettaa lattiaksi 24 × 24 CSS-pikseliä (tai riittävän välin); noin 44 pikseliä on mukavampi peukalolle.
• Jätä tilaa vierekkäisten linkkien väliin, ettei ihmiset osu väärään.

Taulukot ja data

Leveät taulukot ovat responsiivisen sovelluksen vaikein osa. Vaihtoehdot, parhaasta alkaen: näytä puhelimilla vähemmän sarakkeita, muuta jokainen rivi kortiksi tai laita taulukko vaakasuunnassa vieritettävään säiliöön, jossa ensimmäinen sarake on kiinnitetty. Valitse sen mukaan, mitä ihmisten pitää vertailla.

Kuvat ja media

Käytä max-width: 100%- ja height: auto-arvoja, tarjoa pienemmät tiedostot pienille näytöille srcset-attribuutilla ja aseta leveys ja korkeus, jotta asettelu ei hyppää. Upotetut videot ja kartat tarvitsevat joustavan kääreen, jotta niiden kuvasuhde säilyy. Pienemmät kuvat tekevät myös sivuista nopeampia. Katso näin teet sivustostasi nopeamman.

Lomakkeet

Pinoa otsikot kenttien yläpuolelle, tee kentistä täyden leveyden ja käytä oikeita syötetyyppejä (type="email", type="tel", inputmode="numeric"), jotta puhelimet näyttävät vastaavan näppäimistön. Aseta lähetyspainike kohtaan, johon peukalo ylettää, ja pidä se näkyvänä, kun näppäimistö aukeaa.

Pelkkään hiireen perustuvat toiminnot

Puhelimissa ei ole hiirtä, joten kohdistimella (hover) toimivat ohjevihjeet, pudotusvalikot ja esikatselut ovat näkymättömiä kosketusta käyttäville. Varmista, että ne toimivat myös napautuksella.

Kehotteet, jotka toimivat

Uudessa rakennuksessa kerro se heti alussa:

Rakenna tämä mobiili edellä. Yksi sarake puhelimilla, kaksi saraketta tabletin leveydestä lähtien, täysi asettelu työpöydällä. Ei vaakasuuntaista vierintää 320 px leveydellä, leipäteksti vähintään 16 px, napautettavat kohteet vähintään 44 px, valikkopainike pienillä näytöillä ja taulukot, jotka muuttuvat korteiksi puhelimilla.

Olemassa olevalle sivulle kuvaa, mitä näet:

Puhelimilla /pricing-sivu vierii sivusuunnassa ja kolme hintakorttia ovat puristuneet vierekkäin. Pinoa kortit pystysuunnassa alle 768 px:n leveydellä, tee vertailutaulukosta vaakasuunnassa vierittyvä oma säiliönsä ja pidä ominaisuussarake kiinnitettynä. Pidä työpöytäasettelu ennallaan.

Tarkista jokainen sivu 375 px:n leveydellä. Listaa kaikki, mikä ylittää säiliönsä, menee päällekkäin, on pienempää kuin 16 px:n teksti tai 44 px:n napautettavat kohteet tai toimii vain kohdistimella, ja korjaa jokainen.

Vaihe vaiheelta

1. Varmista viewport-tagi sivun head-osassa.
2. Testaa 320–375 px leveydellä selaimen laitetilassa tai puhelinkokoisessa esikatselussa. Vieritä jokainen sivu alusta loppuun.
3. Korjaa vaakasuuntainen vieritys ensin. Etsi liian leveä elementti; kaikki muu on vaikea arvioida, ennen kuin se on poissa.
4. Järjestä navigaatio: valikkopainike, tärkeät toiminnot näkyviin.
5. Tarkista teksti, napautettavat kohteet ja lomakkeet jokaisella keskeisellä polulla: rekisteröityminen, haku, kassa, yhteydenotto.
6. Hoida taulukot ja media: kortit tai vierityssäiliöt, responsiiviset kuvat ja upotukset.
7. Tarkista väliin jäävät koot. Vedä leveyttä hitaasti puhelimesta työpöydälle; asettelut hajoavat usein tabletin leveydellä.
8. Testaa oikealla puhelimella. Emulaattorit eivät näytä asioita, kuten näppäimistön peittämää painiketta, lovia tai sitä, kuinka nopealta sivusto tuntuu mobiilidatalla.

Yleisiä virheitä

• Testaaminen vain yhdellä puhelinkoolla. Tarkista pieni puhelin, iso puhelin ja tabletti.
• Sisällön piilottaminen mobiilista, jotta se mahtuu. Google indeksoi mobiiliversion, ja puhelimen käyttäjät haluavat saman tiedon.
• Zoomin poistaminen käytöstä viewport-tagissa.
• Työpöytäkokoiset kuvat puhelimilla, mikä hidastaa latausta ja kuluttaa dataa.
• Kiinteästi sijoitetut elementit kasautuvat: kiinteä yläpalkki, evästebanneri ja chat-kupla voivat peittää puolet puhelimen näytöstä.
• Ponnahdusikkunat, joita ei voi sulkea pienellä näytöllä, koska sulkemispainike on näkyvän alueen ulkopuolella.

Mobiilitarkistuslista

• Viewport-meta-tagi on paikallaan; zoomia ei ole estetty
• Ei vaakasuuntaista vierintää 320 px:n leveydellä millään sivulla
• Leipäteksti noin 16 px; kentät eivät laukaise zoomausta
• Napautettavat kohteet riittävän suuria ja väleillä
• Valikko toimii puhelimilla ja näppäimistöllä
• Taulukot luettavissa puhelimilla (kortit, vähemmän sarakkeita tai vierityssäiliö)
• Kuvat ja upotukset skaalautuvat; oikeankokoisia tiedostoja tarjotaan
• Lomakkeilla oikeat syötetyypit; lähetyspainike on tavoitettavissa
• Mikään tärkeä ei riipu kohdistimesta (hover)
• Testattu vähintään yhdellä oikealla puhelimella

Responsiivinen asettelu kuuluu myös saavutettavuuteen: WCAG vaatii, että sisältö toimii 320 px:n leveydellä ja 200 %:n zoomauksella. Jos rakennat sovellusta, jota ihmiset käyttävät päivittäin puhelimillaan, näin rakennat mobiiliystävällisen web-sovelluksen menee pidemmälle, mukaan lukien asennettavat PWA:t.

Responsiivinen suunnittelu Mythexissä

Mythex rakentaa responsiivisia web-sovelluksia, ja Pro-paketilla ne voi paketoida Android- ja iPhone-sovelluksiksi. Työtilassa napsauta esikatselun yläpuolella olevaa puhelinkuvaketta (Vaihda mobiiliin), nähdäksesi sovelluksesi puhelinkokoisessa kehyksessä, ja vedä kehyksen reunaa kokeillaksesi muita leveyksiä (Esikatselu ja koodi). Dokumentaatiossa on lyhyt aloituskehote pienen näytön asettelun korjaamiseen kohdassa mobiiliresponsiiviset kehotteet. Tarkista myös oikealla puhelimella: avaa julkaistu osoite tai jaa esikatselulinkki ja avaa se puhelimellasi.

Kysymykset