Hvernig þú gerir vefsíðu farsímavæna

Til að gera vefsíðu farsímavæna skaltu bæta við viewport-metamerki, byggja útlitið fyrst fyrir síma með sveigjanlegum breiddum og nota CSS-brotpunkta til að raða því upp á stærri skjám — stafla dálkum, fella valmyndina saman og skala myndir til að passa. Athugaðu síðan hverja síðu í símabreidd: láréttan skrun, of smáan texta og hnappa sem eru of litlir til að snerta. Á AI-smíðaðri síðu lagar ein skýr beiðni ásamt yfirferð í forskoðun í símastærð yfirleitt mest.

Hvað sveigjanleg hönnun er í raun

Sveigjanleg síða notar eitt sett af síðum og slóðum sem aðlagast skjánum. Í stað sérstaks „m.“-vefs breytir CSS útlitinu við ákveðnar breiddir, sem kallast brotpunktar. Byggingareiningarnar:

• Viewport-metamerkið segir farsímavöfrum að nota raunverulega breidd tækisins.
• Sveigjanleg útlit nota prósentur, flexbox og grid í stað fastra pixlabreidda.
• Media queries (eða rammaklasar eins og md: í Tailwind) breyta útlitinu fyrir ofan ákveðna breidd.
• Sveigjanlegt myndefni — myndir og myndbönd sem minnka til að passa í ílátið.

Þetta skiptir máli því stór hluti umferðarinnar er líklega í símum, og því Google skráir farsímaútgáfu síðnanna þinna. Ef efni eða hlekkir eru aðeins á tölvuútgáfunni gæti Google heldur ekki séð þá.

Valkostir og málamiðlanir

Farsímafyrst er yfirleitt einfaldara: einn dálkur er auðveldasta útlitið, og það er minni vinna að bæta við dálkum eftir því sem rými eykst en að fjarlægja þá.

Það sem yfirleitt brotnar

Viewport-merkið

Ef síða lítur út eins og smá tölvusíða í síma vantar viewport-merkið:

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

Bættu ekki við maximum-scale=1 eða user-scalable=no. Að loka fyrir aðdrátt með tveimur fingrum gerir síðuna erfiðari fyrir fólk með skerta sjón.

Fastar breiddir og lárétt skrun

Algengasti sveigjanleikagalli er eitthvað sem er breiðara en skjárinn: fastur width: 1200px ílát, breið tafla, löng vefslóð eða kóðablokk, mynd án max-width: 100%. Öll síðan skrollast þá til hliðar. Notaðu max-width í stað width, leyfðu texta að vefjast og gefðu breiðum hlutum eigið skrunsvæði.

Leiðsögn

Fimm tengla í tölvuvalmynd passa sjaldan í síma. Algengt svar er hnappur sem opnar spjald. Hafðu tvær eða þrjár mikilvægustu aðgerðirnar sýnilegar — „Bóka“, „Karfa“, „Skrá inn“ — og gakktu úr skugga um að valmyndin virki með lyklaborði og lokist auðveldlega.

Texti og snertisvæði

• Meginmálstexti um 16 px er skynsamlegt lágmark í símum. Inntakssvæði með smærri texta valda því að iPhone aðdráttur þegar smellt er á þau.
• Gerðu hnappa og hlekki auðvelda að hitta. WCAG 2.2 AA setur lágmark 24 x 24 CSS-pixla (eða nægilegt bil); um 44 pixlar eru þægilegri fyrir þumla.
• Hafðu bil á milli tengla sem liggja hver við annan svo fólk hitti ekki rangan.

Töflur og gögn

Breiðar töflur eru erfiðasti hlutinn í sveigjanlegu appi. Valkostir, í forgangsröð: sýndu færri dálka í síma, breyttu hverri röð í kort, eða settu töfluna í lárétt skrollanlegt ílát með fyrsta dálkinum festum. Veldu eftir því hvað fólk þarf að bera saman.

Myndir og myndefni

Notaðu max-width: 100% og height: auto, sendu minni skrár í smærri skjái með srcset, og settu breidd og hæð til að forðast stökk í útliti. Innbætt myndbönd og kort þurfa sveigjanlegt umslag svo þau haldi hlutfalli sínu. Minni myndir gera síður líka hraðari — sjá hvernig þú gerir vefsíðuna þína hraðari.

Eyðublöð

Staflaðu skýringum fyrir ofan reiti, hafðu reiti í fulla breidd og notaðu rétta inntaksgerð (type="email", type="tel", inputmode="numeric") svo símar sýni viðeigandi lyklaborð. Settu sendihnappinn þar sem þumall nær til og haltu honum sýnilegum þegar lyklaborðið opnast.

Aðgerðir sem krefjast músarbendils

Símar hafa ekki bendil sem svífur yfir. Ábendingar, fellivalmyndir og forskoðanir sem birtast aðeins við músarbendil eru ósýnilegar notendum sem snerta. Gerðu þær virkar við snertingu líka.

Fyrirmæli sem virka

Fyrir nýja smíði, segðu það strax í upphafi:

Smíðaðu þetta farsímafyrst. Ein röð í síma, tveir dálkar frá spjaldtölvubreidd, fullt útlit á tölvu. Engin lárétt skrun við 320 px breidd, meginmálstexti að minnsta kosti 16 px, snertisvæði að minnsta kosti 44 px, valmyndarhnappur á litlum skjám, og töflur sem breytast í kort í síma.

Fyrir núverandi síðu, lýstu því sem þú sérð:

Í síma skrollast /pricing-síðan til hliðar og verðkortin þrjú eru kreist hlið við hlið. Stafla kortunum lóðrétt undir 768 px, láttu samanburðartöfluna skrollast lárétt inni í eigin ílát með eiginleikadálkinn festan, og haltu útliti tölvunnar óbreyttu.

Athugaðu hverja síðu við 375 px breidd. Listaðu allt sem skarast, skarast saman, er minna en 16 px texti eða 44 px snertisvæði, eða virkar aðeins við músarbendil, og lagaðu síðan hvert atriði.

Skref fyrir skref

1. Staðfestu viewport-merkið í haus síðunnar.
2. Prófaðu við 320–375 px breidd í tækjaham vafrans eða forskoðun í símastærð. Skrollaðu hverri síðu frá toppi til botns.
3. Lagaðu láréttu skrunina fyrst. Finndu þáttinn sem er of breiður; allt annað er erfitt að meta fyrr en hann er farinn.
4. Lagaðu leiðsögnina: valmyndarhnapp, helstu aðgerðir sýnilegar.
5. Athugaðu texta, snertisvæði og eyðublöð í hverju lykilflæði — nýskráning, leit, greiðsla, samband.
6. Taktu á töflum og myndefni: kort eða skrollílát, sveigjanlegar myndir og innfelld efni.
7. Athugaðu millistærðirnar. Dragðu breiddina hægt frá síma yfir í tölvu; útlit brotna oft í kringum breidd spjaldtölvu.
8. Prófaðu í raunverulegum síma. Hermar missa af hlutum eins og lyklaborðinu á skjánum sem hylur hnapp, útskurðum og hraðanum á farsímagögnum.

Algeng mistök

• Að prófa aðeins í einni símastærð. Athugaðu lítinn síma, stóran síma og spjaldtölvu.
• Að fela efni í síma til að það passi. Google skráir farsímaútgáfuna og notendur í síma vilja sömu upplýsingar.
• Að slökkva á aðdrætti í viewport-merkinu.
• Myndir í tölvustærð í síma, sem kosta hleðslutíma og gögn.
• Föst staðsett atriði hlaðast upp: fastur haus, vafrakökuborði og spjallbóla geta hulið helminginn af símaskjánum.
• Sprettigluggar sem ekki er hægt að loka á litlum skjá því lokunarhnappurinn er utan skjásins.

Gátlisti fyrir farsíma

• Viewport-metamerki til staðar; aðdráttur ekki óvirkur
• Engin lárétt skrun við 320 px á neinni síðu
• Meginmálstexti ~16 px; inntakssvæði valda ekki aðdrætti
• Snertisvæði nógu stór og með bili
• Valmynd virkar í símum og með lyklaborði
• Töflur læsilegar í símum (kort, færri dálkar eða skrollílát)
• Myndir og innfelld efni skala; réttstærðar skrár sendar
• Eyðublöð nota réttar inntaksgerðir; sendihnappur í seilingarfjarlægð
• Ekkert mikilvægt krefst músarbendils
• Prófað í að minnsta kosti einum raunverulegum síma

Sveigjanlegt útlit er líka hluti af aðgengi: WCAG krefst þess að efni virki við 320 px breidd og 200% aðdrátt. Ef þú ert að smíða app sem fólk notar daglega í símanum sínum, fer hvernig þú smíðar farsímavænt vefapp lengra, þar á meðal uppsetjanleg PWA-öpp.

Sveigjanleg hönnun á Mythex

Mythex smíðar sveigjanleg veföpp og á Pro getur það pakkað þeim sem Android- og iPhone-öppum. Í vinnusvæðinu smellirðu á símatáknið fyrir ofan Preview (Skipta yfir í farsíma) til að sjá appið í rammi í símastærð, og dregur brún rammans til að prófa aðrar breiddir (Forskoðun og kóði). Skjölin eru með stutt upphafsfyrirmæli til að laga útlit í litlum skjám í fyrirmælum fyrir farsímasveigjanleika. Prófaðu líka í raunverulegum síma — opnaðu birta slóðina, eða deildu forskoðunarhlekk og opnaðu hann í símanum þínum.

Spurningar