Kaip padaryti svetainę pritaikytą mobiliesiems įrenginiams

Norėdami padaryti svetainę pritaikytą telefonams, pridėkite viewport meta žymę, kurkite išdėstymą pirmiausia mobiliesiems su lankščiais pločiais ir naudokite CSS lūžio taškus, kad didesniuose ekranuose išdėstymas persitvarkytų — stulpeliai sudedami vienas po kito, meniu susiskleidžia, paveikslėliai pritaikomi pagal dydį. Tada patikrinkite kiekvieną puslapį telefono pločio ekrane dėl horizontalaus slinkimo, per smulkaus teksto ir per mažų mygtukų. DI sukurtoje svetainėje vienas aiškus raginimas ir peržiūra telefono dydžio ekrane dažniausiai ištaiso didžiąją dalį.

Kas iš tikrųjų yra responsive dizainas

Responsive svetainė naudoja vieną puslapių ir nuorodų rinkinį, kuris prisitaiko prie ekrano. Vietoj atskiros „m.“ svetainės CSS pakeičia išdėstymą tam tikrais pločiais, vadinamais lūžio taškais. Pagrindiniai elementai:

• Viewport meta žymė nurodo mobiliosioms naršyklėms naudoti tikrą įrenginio plotį.
• Lankūs išdėstymai naudoja procentus, flexbox ir grid, o ne fiksuotus pikselių pločius.
• Media užklausos (arba karkaso klasės, pavyzdžiui, Tailwind md:) keičia išdėstymą virš tam tikro pločio.
• Lankstūs medijos elementai — paveikslėliai ir vaizdo įrašai, kurie susitraukia, kad tilptų į savo konteinerį.

Tai svarbu, nes didelė dalis lankytojų tikriausiai naudojasi telefonais ir nes Google indeksuoja jūsų puslapių mobiliąją versiją. Jei turinys ar nuorodos egzistuoja tik darbalaukyje, Google jų gali nematyti.

Parinktys ir kompromisai

Mobiliesiems pirmiausia paprastai yra paprasčiau: vienas stulpelis yra lengviausias išdėstymas, o stulpelių pridėjimas, kai atsiranda vietos, mažiau darbo nei jų šalinimas.

Dalys, kurios paprastai sugenda

Viewport žymė

Jei puslapis telefone atrodo kaip mažas darbalaukio puslapis, trūksta viewport žymės:

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

Nedėkite maximum-scale=1 ar user-scalable=no. Uždraudus spragtelėjimu didinti žmonėms, turintiems silpną regą, svetainę naudoti darosi sunkiau.

Fiksuoti pločiai ir horizontalus slinkimas

Dažniausia responsive klaida — kažkas platesnio nei ekranas: fiksuotas width: 1200px konteineris, plati lentelė, ilgas URL ar kodo blokas, paveikslėlis be max-width: 100%. Tada visas puslapis slenka į šoną. Naudokite max-width vietoj width, leiskite tekstui lūžti ir plačioms dalims suteikite atskirą slinkties sritį.

Navigacija

Penki darbalaukio meniu punktai retai telefone telpa. Įprastas sprendimas — meniu mygtukas, atveriantis skydelį. Palikite matomus du ar tris svarbiausius veiksmus — „Rezervuoti“, „Krepšelis“, „Prisijungti“ — ir įsitikinkite, kad meniu veikia klaviatūra ir lengvai užsidaro.

Tekstas ir paspaudimo plotai

• Pagrindinis tekstas apie 16 px yra protingas minimumas telefonuose. Įvesties laukai su smulkesniu tekstu iPhone priverčia padidinti vaizdą, kai į juos spustelima.
• Mygtukus ir nuorodas padarykite lengvai pasiekiamus. WCAG 2.2 AA nustato minimumą 24 × 24 CSS pikselius (arba pakankamą tarpą); apie 44 pikseliai patogiau pirštams.
• Palikite tarpą tarp gretimų nuorodų, kad žmonės nepataikytų į neteisingą.

Lentelės ir duomenys

Platios lentelės yra sunkiausia responsive programėlės dalis. Parinktys, pagal pirmenybę: rodyti mažiau stulpelių telefonuose, paversti kiekvieną eilutę kortele arba įdėti lentelę į horizontaliai slenkamą konteinerį su prisegtu pirmu stulpeliu. Rinkitės pagal tai, ką žmonėms reikia palyginti.

Paveikslėliai ir medija

Naudokite max-width: 100% ir height: auto, mažiems ekranams teikite mažesnius failus su srcset ir nustatykite plotį bei aukštį, kad išdėstymas nešokinėtų. Įterpti vaizdo įrašai ir žemėlapiai reikalauja lankstaus apvalkalo, kad išlaikytų proporcijas. Mažesni paveikslėliai taip pat pagreitina puslapius — žr. kaip padaryti svetainę greitesnę.

Formos

Etiketes dėkite virš laukų, laukus darykite per visą plotį ir naudokite tinkamus įvesties tipus (type="email", type="tel", inputmode="numeric"), kad telefonai parodytų atitinkamą klaviatūrą. Pateikimo mygtuką dėkite ten, kur pirštas pasiekia, ir laikykite jį matomą, kai atsidaro klaviatūra.

Veiksmai tik su pelės žymekliu

Telefonuose nėra žymeklio užvedimo. Patarimai, išskleidžiami sąrašai ir peržiūros, kurios rodomos tik užvedus žymeklį, nematomi žmonėms, naudojantiems jutiklinį ekraną. Padarykite, kad jie veiktų ir paspaudus.

Raginimai, kurie veikia

Naujam kūrimui pasakykite tai iš karto:

Kurkite mobiliesiems pirmiausia. Telefonuose — vienas stulpelis, nuo planšetės pločio — du stulpeliai, darbalaukyje — pilnas išdėstymas. Jokio horizontalaus slinkimo 320 px pločio ekrane, pagrindinis tekstas bent 16 px, paspaudimo plotai bent 44 px, mažuose ekranuose — meniu mygtukas, o lentelės telefonuose virsta kortelėmis.

Esamam puslapiui aprašykite, ką matote:

Telefonuose /pricing puslapis slenka į šoną, o trys planų kortelės suspaustos viena šalia kitos. Žemiau 768 px sudėkite korteles vertikaliai, palyginimo lentelę padarykite horizontaliai slenkančią jos pačios konteineryje su prisegtu funkcijų stulpeliu, o darbalaukio išdėstymą palikite nepakeistą.

Patikrinkite kiekvieną puslapį 375 px pločio ekrane. Surašykite viską, kas išeina už ribų, persidengia, yra mažesnio nei 16 px teksto ar 44 px paspaudimo ploto arba veikia tik užvedus žymeklį, tada ištaisykite kiekvieną.

Žingsnis po žingsnio

1. Patikrinkite viewport žymę puslapio antraštėje.
2. Testuokite 320–375 px pločio ekrane naršyklės įrenginio režimu arba telefono dydžio peržiūroje. Slinkite kiekvieną puslapį iš viršaus į apačią.
3. Pirmiausia ištaisykite horizontalų slinkimą. Raskite per platų elementą; viską kita sunku įvertinti, kol jis nepašalintas.
4. Sutvarkykite navigaciją: meniu mygtukas, pagrindiniai veiksmai matomi.
5. Patikrinkite tekstą, paspaudimo plotus ir formas kiekviename pagrindiniame srautė — registracija, paieška, apmokėjimas, kontaktai.
6. Tvarkykite lenteles ir mediją: kortelės ar slenkamieji konteineriai, lankstūs paveikslėliai ir įterpimai.
7. Patikrinkite tarpinius dydžius. Lėtai tempkite plotį nuo telefono iki darbalaukio; išdėstymai dažnai sugenda apie planšetės plotį.
8. Išbandykite tikrame telefone. Emuliatoriai praleidžia tokius dalykus kaip ekrane atsiradusi klaviatūra, dengianti mygtuką, išskirtiniai ekrano iškirpimai ir tai, kaip greitai svetainė veikia mobiliuoju ryšiu.

Dažnos klaidos

• Testavimas tik vienu telefono dydžiu. Patikrinkite mažą telefoną, didelį telefoną ir planšetę.
• Turinio slėpimas mobiliajame, kad tilptų. Google indeksuoja mobiliąją versiją, o telefonų naudotojai nori tos pačios informacijos.
• Padidinimo išjungimas viewport žymėje.
• Darbalaukio dydžio paveikslėliai telefonuose — jie kainuoja įkėlimo laiką ir duomenis.
• Susikaupę fiksuoti elementai: lipni antraštė, slapukų skydelis ir pokalbio burbulas gali uždengti pusę telefono ekrano.
• Iššokantys langai, kurių neįmanoma uždaryti mažame ekrane, nes uždarymo mygtukas už ekrano ribų.

Mobilaus išdėstymo kontrolinis sąrašas

• Viewport meta žymė yra; padidinimas neišjungtas
• Jokio horizontalaus slinkimo 320 px pločio ekrane jokiame puslapyje
• Pagrindinis tekstas ~16 px; įvesties laukai nesukelia padidinimo
• Paspaudimo plotai pakankamai dideli ir išdėstyti su tarpais
• Meniu veikia telefonuose ir su klaviatūra
• Lentelės telefonuose skaitomos (kortelės, mažiau stulpelių ar slenkamas konteineris)
• Paveikslėliai ir įterpimai keičia dydį; teikiami tinkamo dydžio failai
• Formos naudoja tinkamus įvesties tipus; pateikimo mygtukas pasiekiamas
• Nieko svarbaus nepriklauso nuo žymeklio užvedimo
• Išbandyta bent viename tikrame telefone

Responsive išdėstymas yra ir dalis prieinamumo: WCAG reikalauja, kad turinys veiktų 320 px pločio ekrane ir 200% mastelyje. Jei kuriate programėlę, kurią žmonės kasdien naudos telefonuose, kaip sukurti mobiliesiems pritaikytą žiniatinklio programėlę eina toliau, įskaitant įdiegiamas PWA.

Responsive dizainas Mythex

Mythex kuria responsive žiniatinklio programėles, o Pro plane jas galima įpakuoti kaip Android ir iPhone programėles. Darbo erdvėje spustelėkite telefono piktogramą virš Peržiūros (Perjungti į mobilųjį), kad pamatytumėte programėlę telefono dydžio rėmelyje, ir tempkite rėmelio kraštą, kad išbandytumėte kitus plotius (Peržiūra ir kodas). Dokumentacijoje yra trumpas pradinis raginimas, kaip ištaisyti mažo ekrano išdėstymą, — raginimai mobiliesiems pritaikytam išdėstymui. Patikrinkite ir tikrame telefone — atidarykite paskelbtą nuorodą arba pasidalinkite peržiūros nuoroda ir atidarykite ją telefone.

Klausimai