Paano Gawing Mobile Responsive ang Website

Para gawing mobile responsive ang website, maglagay ng viewport meta tag, buuin ang layout nang mobile-first gamit ang nababaluktot na lapad, at gumamit ng CSS breakpoint para ayusin ito sa mas malalaking screen: pagpapatong-patong ng mga column, pagtiklop ng menu, at pag-scale ng mga larawan para kumasya. Pagkatapos, suriin ang bawat pahina sa lapad ng telepono para sa pag-scroll sa gilid, maliliit na teksto, at mga button na masyadong maliit para pindutin. Sa AI-built na site, kadalasang naaayos na ang karamihan nito sa isang malinaw na prompt at isang pagsusuri sa preview na kasing-laki ng telepono.

Ano talaga ang responsive design

Gumagamit ang responsive na site ng iisang hanay ng mga pahina at URL na umaangkop sa screen. Sa halip na hiwalay na "m." site, binabago ng CSS ang layout sa ilang partikular na lapad, na tinatawag na breakpoints. Ang mga pangunahing bahagi:

• Ang viewport meta tag ang nagsasabi sa mobile browser na gamitin ang totoong lapad ng device.
• Fluid na layout na gumagamit ng porsyento, flexbox, at grid sa halip na nakapirming pixel na lapad.
• Media queries (o framework classes gaya ng md: ng Tailwind) na nagbabago ng layout kapag lumampas sa isang lapad.
• Nababaluktot na media: mga larawan at video na lumiliit para kumasya sa kanilang container.

Mahalaga ito dahil malamang malaking bahagi ng trapiko mo ay galing sa telepono, at dahil nag-iindex ang Google ng mobile na bersyon ng mga pahina mo. Kung nasa desktop lang ang nilalaman o link, maaaring hindi rin ito makita ng Google.

Mga opsyon at trade-off

Kadalasang mas simple ang mobile-first: ang isang column ang pinakamadaling layout, at mas kaunting trabaho ang pagdaragdag ng column habang lumalawak ang espasyo kaysa pag-aalis ng mga ito.

Ang mga bahaging kadalasang nasisira

Ang viewport tag

Kung nagmumukhang maliit na desktop site ang pahina sa telepono, kulang ang viewport tag:

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

Huwag magdagdag ng maximum-scale=1 o user-scalable=no. Ang pagharang sa pinch-zoom ay nagpapahirap sa site para sa mga taong may mahinang paningin.

Nakapirming lapad at pag-scroll sa gilid

Pinakakaraniwang bug sa responsive ang may bagay na mas malapad sa screen: nakapirming width: 1200px na container, malapad na table, mahabang URL o code block, o larawang walang max-width: 100%. Dahil dito, nagsa-scroll sa gilid ang buong pahina. Gumamit ng max-width sa halip na width, hayaang mag-wrap ang teksto, at bigyan ng sariling scroll area ang malalapad na bagay.

Navigation

Bihirang kasya sa telepono ang limang link ng desktop menu. Karaniwang sagot ang menu button na nagbubukas ng panel. Panatilihing nakikita ang dalawa o tatlong pinakamahalagang aksyon, gaya ng "Mag-book", "Cart", "Mag-sign in", at siguraduhing gumagana ang menu gamit ang keyboard at madaling magsara.

Teksto at tap target

• Nasa 16 px ang body text bilang makatwirang pinakamaliit sa telepono. Ang mga input na mas maliit ang teksto ay nagpapa-zoom sa iPhone kapag pinindot.
• Gawing madaling pindutin ang mga button at link. Nagtatakda ang WCAG 2.2 AA ng minimum na 24 by 24 CSS pixel (o sapat na espasyo); mas komportable para sa hinlalaki ang mga 44 pixel.
• Mag-iwan ng espasyo sa pagitan ng magkatabing link para hindi mapindot ang mali.

Table at data

Ang malalapad na table ang pinakamahirap na bahagi ng responsive na app. Mga opsyon, ayon sa pagkakasunod ng kagustuhan: magpakita ng mas kaunting column sa telepono, gawing card ang bawat row, o ilagay ang table sa container na puwedeng i-scroll nang pahalang na may nakapirming unang column. Piliin ayon sa kailangang ikumpara ng mga tao.

Mga larawan at media

Gumamit ng max-width: 100% at height: auto, maghatid ng mas maliliit na file sa maliliit na screen gamit ang srcset, at itakda ang width at height para maiwasan ang pagtalon ng layout. Kailangan ng responsive na wrapper ang mga naka-embed na video at mapa para mapanatili ang aspect ratio. Nagpapabilis din ng pahina ang mas maliliit na larawan. Tingnan ang paano pabilisin ang website mo.

Mga form

Ilagay ang label sa itaas ng field, gawing buong lapad ang mga field, at gamitin ang tamang input type (type="email", type="tel", inputmode="numeric") para lumitaw sa telepono ang katugmang keyboard. Ilagay ang submit button sa abot ng hinlalaki at panatilihing nakikita ito kapag bumukas ang keyboard.

Mga aksyong hover lamang

Hindi nagho-hover ang telepono. Ang tooltip, dropdown, at preview na lumalabas lang kapag may hover ay hindi nakikita ng mga user na touch. Gawin silang gumagana rin sa pag-tap.

Mga prompt na gumagana

Para sa bagong build, sabihin ito mula sa simula:

Buuin ito nang mobile-first. Isang column sa telepono, dalawang column mula sa lapad ng tablet, at buong layout sa desktop. Walang pahalang na pag-scroll sa lapad na 320 px, body text na hindi bababa sa 16 px, tap target na hindi bababa sa 44 px, menu button sa maliliit na screen, at mga table na nagiging card sa telepono.

Para sa umiiral na pahina, ilarawan ang nakikita mo:

Sa telepono, nagsa-scroll sa gilid ang /pricing page at nagsisiksikan sa tabi ang tatlong plan card. Ipatong-patong ang mga card nang patayo sa ibaba ng 768 px, gawing mapa-scroll nang pahalang ang comparison table sa sarili nitong container na may nakapirming feature column, at panatilihing hindi nagbabago ang layout sa desktop.

Suriin ang bawat pahina sa lapad na 375 px. Ilista ang anumang lumalampas, nagsasapawan, may teksto na mas maliit sa 16 px o tap target na mas maliit sa 44 px, o gumagana lang sa hover, saka ayusin ang bawat isa.

Hakbang-hakbang

1. Kumpirmahin ang viewport tag sa head ng pahina.
2. Subukan sa lapad na 320–375 px sa device mode ng browser o sa preview na kasing-laki ng telepono. Mag-scroll sa bawat pahina mula itaas hanggang ibaba.
3. Ayusin muna ang pag-scroll sa gilid. Hanapin ang elementong sobrang lapad; mahirap husgahan ang iba hangga't hindi ito nawawala.
4. Ayusin ang navigation: menu button, at nakikita ang mga pangunahing aksyon.
5. Suriin ang teksto, tap target, at form sa bawat pangunahing daloy: sign up, search, checkout, contact.
6. Asikasuhin ang table at media: card o scroll container, responsive na larawan at embed.
7. Suriin ang mga sukat sa pagitan. Dahan-dahang i-drag ang lapad mula telepono hanggang desktop; madalas masira ang layout sa paligid ng lapad ng tablet.
8. Subukan sa totoong telepono. Hindi nakikita ng emulator ang ilang bagay, gaya ng keyboard na tumatakip sa button, notch, at kung gaano kabilis ang site sa mobile data.

Mga karaniwang pagkakamali

• Pagsubok sa isang laki lang ng telepono. Suriin ang maliit na telepono, malaking telepono, at tablet.
• Pagtatago ng nilalaman sa mobile para lang kumasya. Nag-iindex ang Google ng mobile na bersyon, at gusto ng mga user sa telepono ang parehong impormasyon.
• Pag-disable ng zoom sa viewport tag.
• Mga larawang pang-desktop sa telepono, na nagpapabigat sa oras ng pag-load at data.
• Mga nakapirming elemento na nagsasama-sama: ang sticky header, cookie banner, at chat bubble ay puwedeng tumakip sa kalahati ng screen ng telepono.
• Mga pop-up na hindi maisara sa maliit na screen dahil wala sa paningin ang close button.

Mobile checklist

• Naroroon ang viewport meta tag; hindi naka-disable ang zoom
• Walang pahalang na pag-scroll sa 320 px sa anumang pahina
• Mga ~16 px ang body text; hindi nagpapa-zoom ang mga input
• Sapat ang laki at espasyo ng mga tap target
• Gumagana ang menu sa telepono at sa keyboard
• Nababasa ang mga table sa telepono (card, mas kaunting column, o scroll container)
• Nag-s-scale ang mga larawan at embed; tamang laki ang mga file na inihahatid
• Tamang input type ang mga form; abot ang submit button
• Walang mahalagang bagay na nakadepende sa hover
• Nasubukan sa kahit isang totoong telepono

Bahagi rin ng accessibility ang responsive na layout: hinihingi ng WCAG na gumana ang nilalaman sa lapad na 320 px at sa 200% na zoom. Kung gumagawa ka ng app na araw-araw gagamitin ng mga tao sa telepono, lalampas pa ang paano gumawa ng mobile-friendly na web app, kasama ang mga PWA na puwedeng i-install.

Responsive design sa Mythex

Nakakabuo ang Mythex ng mga responsive na web app, at sa Pro, puwede itong i-balot bilang Android at iPhone app. Sa workspace, i-click ang phone icon sa itaas ng Preview (Switch to Mobile) para makita ang app mo sa frame na kasing-laki ng telepono, at i-drag ang gilid ng frame para subukan ang ibang lapad (Preview at Code). May maikling starter prompt ang docs para sa pag-ayos ng layout sa maliit na screen sa mobile-responsive prompts. Suriin din sa totoong telepono: buksan ang na-publish na URL, o magbahagi ng preview link at buksan ito sa telepono mo.

Mga tanong