Si ta bëni një faqe interneti të përshtatshme për celularë

Për ta bërë një faqe interneti të përshtatshme për celularë, shtoni një etiketë meta viewport, ndërtoni paraqitjen mobile-first me gjerësi fleksibël, dhe përdorni breakpoints CSS për ta rirregulluar në ekrane më të mëdha — duke renditur kolonat, palosur menunë dhe përshtatur imazhet. Pastaj kontrolloni çdo faqe me gjerësi telefoni për lëvizje anësore, tekst shumë të vogël dhe butona shumë të vegjël për t'u prekur. Në një sajt të ndërtuar me AI, një kërkesë e qartë plus një kalim në një pamje paraprake me madhësi telefoni zakonisht rregullon shumicën e problemeve.

Çfarë është në të vërtetë dizajni responsive

Një sajt responsive përdor një grup faqesh dhe URL-sh që përshtaten me ekranin. Në vend të një sajti të veçantë „m.", CSS ndryshon paraqitjen në gjerësi të caktuara, të quajtura breakpoints. Blloqet ndërtuese:

• Etiketa meta viewport u thotë shfletuesve mobil të përdorin gjerësinë reale të pajisjes.
• Paraqitjet fluide përdorin përqindje, flexbox dhe grid në vend të gjerësive fikse në piksel.
• Media queries (ose klasat e kornizave si md: të Tailwind) ndryshojnë paraqitjen mbi një gjerësi të caktuar.
• Media fleksibël — imazhe dhe video që ngushtohen për t'u përshtatur me kontejnerin.

Ka rëndësi sepse një pjesë e madhe e trafikut tuaj ka gjasa të jetë në telefona, dhe sepse Google indekson versionin mobil të faqeve tuaja. Nëse përmbajtja ose lidhjet ekzistojnë vetëm në desktop, Google mund të mos i shohë as ato.

Opsionet dhe kompromiset

Mobile-first është zakonisht më e thjeshtë: një kolonë e vetme është paraqitja më e lehtë, dhe shtimi i kolonave sa vjen e hapësira rritet është më pak punë sesa heqja e tyre.

Pjesët që zakonisht prishen

Etiketa viewport

Nëse një faqe duket si një desktop i vogël në telefon, mungon etiketa viewport:

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

Mos shtoni maximum-scale=1 ose user-scalable=no. Bllokimi i zmadhimit me gisht e bën sajtin më të vështirë për njerëzit me shikim të dobët.

Gjerësi fikse dhe lëvizje horizontale

Gabimi më i zakonshëm responsive është diçka më e gjerë se ekrani: një kontejner me width: 1200px fiks, një tabelë e gjerë, një URL e gjatë ose një bllok kodi, një imazh pa max-width: 100%. Faqja e tërë lëviz anash. Përdorni max-width në vend të width, lëreni tekstin të mbështjellë, dhe i jepni gjërave të gjera zonën e vet të lëvizjes.

Navigimi

Pesë lidhje menuje desktopi rrallë përshtaten në telefon. Përgjigja e zakonshme është një buton menuje që hap një panel. Mbani të dukshme dy ose tre veprimet më të rëndësishme — „Rezervo", „Shporta", „Hyr" — dhe sigurohuni që menuja funksionon me tastierë dhe mbyllet lehtë.

Teksti dhe zonat e prekjes

• Teksti i trupit rreth 16 px është një minimum i arsyeshëm në telefona. Inputet me tekst më të vogël bëjnë iPhone-t të zmadhohen kur prekën.
• Bëjini butonat dhe lidhjet të lehta për t'u goditur. WCAG 2.2 AA vendos një minimum prej 24 me 24 piksela CSS (ose hapësirë të mjaftueshme); rreth 44 piksela është më e rehatshme për gishtat.
• Lini hapësirë midis lidhjeve ngjitur, që njerëzit të mos e goditin atë të gabuarën.

Tabela dhe të dhëna

Tabelat e gjera janë pjesa më e vështirë e një aplikacioni responsive. Opsionet, sipas preferencës: shfaqni më pak kolona në telefona, ktheni çdo rresht në kartë, ose vendosni tabelën në një kontejner me lëvizje horizontale me kolonën e parë të fiksuar. Zgjidhni sipas asaj që njerëzit duhet të krahasojnë.

Imazhet dhe media

Përdorni max-width: 100% dhe height: auto, shërbeni skedarë më të vegjël për ekrane të vogla me srcset, dhe vendosni width dhe height për të shmangur lëvizjet e paraqitjes. Videot dhe hartat e integruara kanë nevojë për një mbështjellës responsive, që të ruajnë raportin e tyre. Imazhet më të vogla e bëjnë gjithashtu faqen më të shpejtë — shihni si ta bëni sajtin tuaj më të shpejtë.

Format

Vendosni etiketat mbi fushat, bëjini fushat me gjerësi të plotë, dhe përdorni llojet e duhura të inputeve (type="email", type="tel", inputmode="numeric") që telefonat të shfaqin tastierën e përshtatshme. Vendosni butonin e dërgimit aty ku mund ta arrijë gishti dhe mbajeni të dukshëm kur hapet tastiera.

Ndërveprimet vetëm me hover

Telefonat nuk kanë hover. Tooltip-et, dropdown-et dhe pamjet paraprake që shfaqen vetëm kur kalohet miu nuk janë të dukshme për përdoruesit me prekje. Bëjini të funksionojnë edhe me prekje.

Prompt-e që funksionojnë

Për një ndërtim të ri, thoni këtë që në fillim:

Ndërtoje mobile-first. Një kolonë në telefona, dy kolona nga gjerësia e tabletit, paraqitje e plotë në desktop. Pa lëvizje horizontale në 320 px gjerësi, teksti i trupit të paktën 16 px, zona prekjeje të paktën 44 px, një buton menuje në ekrane të vegjël, dhe tabela që kthehen në karta në telefona.

Për një faqe ekzistuese, përshkruani atë që shihni:

Në telefona, faqja /pricing lëviz anash dhe tre kartat e planeve janë të shtypura njëra pranë tjetrës. Vendosi kartat njëra nën tjetrën nën 768 px, bëje tabelën e krahasimit të lëvizë horizontalisht brenda kontejnerit të vet me kolonën e veçorive të fiksuar, dhe mbaje paraqitjen e desktopit të pandryshuar.

Kontrolloni çdo faqe në 375 px gjerësi. Listo çdo gjë që del jashtë, mbivendoset, ka tekst më të vogël se 16 px ose zona prekjeje më të vogla se 44 px, ose funksionon vetëm me hover, pastaj rregulloje secilën.

Hap pas hapi

1. Konfirmoni etiketën viewport në kokën e faqes.
2. Testoni në 320–375 px gjerësi në modalitetin e pajisjes të shfletuesit ose në një pamje paraprake me madhësi telefoni. Lëvizni çdo faqe nga lart poshtë.
3. Rregulloni lëvizjen horizontale së pari. Gjeni elementin që është shumë i gjerë; çdo gjë tjetër është e vështirë të gjykohet derisa ai të zhduket.
4. Rregulloni navigimin: buton menuje, veprimet kryesore të dukshme.
5. Kontrolloni tekstin, zonat e prekjes dhe format në çdo rrjedhë kryesore — regjistrim, kërkim, pagesë, kontakt.
6. Trajtoni tabelat dhe mediat: karta ose kontejnerë lëvizjeje, imazhe dhe ngulitje responsive.
7. Kontrolloni madhësitë ndërmjet. Tërhiqni gjerësinë ngadalë nga telefoni në desktop; paraqitjet shpesh prishen rreth gjerësisë së tabletit.
8. Testoni në një telefon real. Emulatorët humbasin gjëra si tastiera në ekran që mbulon një buton, prerjet e ekranit, dhe sa shpejt ndihet sajti me të dhëna mobile.

Gabimet e zakonshme

• Testimi vetëm në një madhësi telefoni. Kontrolloni një telefon të vogël, një telefon të madh dhe një tablet.
• Fshehja e përmbajtjes në celular që të përshtatet. Google indekson versionin mobil, dhe përdoruesit e telefonave duan të njëjtën informacion.
• Çaktivizimi i zmadhimit në etiketën viewport.
• Imazhe me madhësi desktopi në telefona, që kushtojnë kohë ngarkimi dhe të dhëna.
• Elementë fiksë që mblidhen: një header i ngjitur, një banner cookie-sh dhe një flluskë bisede mund të mbulojnë gjysmën e ekranit të telefonit.
• Pop-up-e që nuk mund të mbyllen në ekran të vogël, sepse butoni i mbylljes është jashtë ekranit.

Lista e kontrollit për celularët

• Etiketa meta viewport e pranishme; zmadhimi nuk është çaktivizuar
• Asnjë lëvizje horizontale në 320 px në asnjë faqe
• Teksti i trupit ~16 px; inputet nuk shkaktojnë zmadhim
• Zonat e prekjes mjaft të mëdha dhe të hapura
• Menuja funksionon në telefona dhe me tastierë
• Tabelat të lexueshme në telefona (karta, më pak kolona ose kontejner lëvizjeje)
• Imazhet dhe ngulitjet përshtaten; skedarë me madhësi të duhur shërbehen
• Format përdorin llojet e duhura të inputeve; butoni i dërgimit arrihet
• Asgjë e rëndësishme nuk varet nga hover
• Testuar në të paktën një telefon real

Përshtatja e paraqitjes është gjithashtu pjesë e aksesueshmërisë: WCAG kërkon që përmbajtja të funksionojë në 320 px gjerësi dhe në 200% zmadhim. Nëse ndërtoni një aplikacion që njerëzit do ta përdorin çdo ditë në telefona, si të ndërtoni një aplikacion web të përshtatshëm për celularë shkon më tej, duke përfshirë PWA të instalueshme.

Dizajni responsive në Mythex

Mythex ndërton aplikacione web responsive, dhe në Pro mund t'i mbështjellë si aplikacione Android dhe iPhone. Në hapësirën e punës, klikoni ikonën e telefonit mbi Preview (Switch to Mobile) për ta parë aplikacionin tuaj në një kornizë me madhësi telefoni, dhe tërhiqeni skajin e kornizës për të provuar gjerësi të tjera (Preview dhe Code). Dokumentacioni ka një prompt të shkurtër fillestar për rregullimin e paraqitjes në ekrane të vegjël te prompt-et për përshtatje me celularët. Kontrolloni edhe në një telefon real — hapni URL-në e publikuar, ose ndani një lidhje pamjeje paraprake dhe hapeni në telefonin tuaj.

Pyetje