വെബ്സൈറ്റ് മൊബൈലിന് അനുയോജ്യമാക്കുന്നത് എങ്ങനെ

വെബ്സൈറ്റ് മൊബൈൽ റെസ്‌പോൺസിവ് ആക്കാൻ, viewport meta ടാഗ് ചേർക്കുക, വഴങ്ങുന്ന വീതികളോടെ മൊബൈൽ-ആദ്യമായി ലേഔട്ട് നിർമ്മിക്കുക, വലിയ സ്ക്രീനുകളിൽ CSS ബ്രേക്ക്‌പോയിന്റുകൾ ഉപയോഗിച്ച് അത് പുനഃക്രമീകരിക്കുക — കോളങ്ങൾ അടുക്കി, മെനു ഒതുക്കി, ചിത്രങ്ങൾ ചുരുക്കി. പിന്നെ ഓരോ പേജും ഫോൺ വീതിയിൽ പരിശോധിക്കുക: വശങ്ങളിലേക്കുള്ള സ്ക്രോൾ, വളരെ ചെറിയ അക്ഷരങ്ങൾ, ടാപ്പ് ചെയ്യാൻ കഴിയാത്ത ചെറിയ ബട്ടണുകൾ എന്നിവ നോക്കുക. AI-നിർമ്മിത സൈറ്റിൽ ഒരു വ്യക്തമായ പ്രോംപ്റ്റും ഫോൺ വലുപ്പ പ്രിവ്യൂവിലെ ഒരു പരിശോധനയും മിക്ക പ്രശ്നങ്ങളും പരിഹരിക്കും.

റെസ്‌പോൺസിവ് ഡിസൈൻ യഥാർത്ഥത്തിൽ എന്താണ്

റെസ്‌പോൺസിവ് സൈറ്റ് ഒരേ പേജുകളും URL-കളും സെറ്റ് ഉപയോഗിക്കുന്നു, അവ സ്ക്രീനിന് അനുസരിച്ച് മാറുന്നു. പ്രത്യേക "m." സൈറ്റിന് പകരം, CSS ചില വീതികളിൽ ലേഔട്ട് മാറ്റുന്നു, അവയെ ബ്രേക്ക്‌പോയിന്റുകൾ എന്ന് വിളിക്കുന്നു. അടിസ്ഥാന ഘടകങ്ങൾ:

• Viewport meta ടാഗ് മൊബൈൽ ബ്രൗസറുകളോട് ഉപകരണത്തിന്റെ യഥാർത്ഥ വീതി ഉപയോഗിക്കാൻ പറയുന്നു.
• Fluid ലേഔട്ടുകൾ നിശ്ചിത പിക്സൽ വീതികൾക്ക് പകരം ശതമാനം, flexbox, grid എന്നിവ ഉപയോഗിക്കുന്നു.
• Media queries (അല്ലെങ്കിൽ Tailwind-ന്റെ md: പോലുള്ള ഫ്രെയിംവർക്ക് ക്ലാസുകൾ) ഒരു നിശ്ചിത വീതിക്ക് മുകളിൽ ലേഔട്ട് മാറ്റുന്നു.
• വഴങ്ങുന്ന മീഡിയ — ചിത്രങ്ങളും വീഡിയോകളും അവയുടെ കണ്ടെയ്‌നറിൽ ഒതുങ്ങുന്നു.

ഇത് പ്രധാനമാണ്, കാരണം നിങ്ങളുടെ ട്രാഫിക്കിന്റെ വലിയൊരു ഭാഗം ഫോണിൽ നിന്നാകാം, Google പേജുകളുടെ മൊബൈൽ പതിപ്പാണ് ഇൻഡെക്‌സ് ചെയ്യുന്നത്. ഉള്ളടക്കമോ ലിങ്കുകളോ ഡെസ്ക്ടോപ്പിൽ മാത്രമുണ്ടെങ്കിൽ Google-ഉം അവ കാണില്ല.

ഓപ്ഷനുകളും ട്രേഡ്-ഓഫുകളും

മൊബൈൽ-ആദ്യം സാധാരണയായി ലളിതമാണ്: ഒറ്റ കോളമാണ് ഏറ്റവും എളുപ്പമുള്ള ലേഔട്ട്, സ്ഥലം കൂടുന്നതിനനുസരിച്ച് കോളങ്ങൾ ചേർക്കുന്നത് അവ നീക്കം ചെയ്യുന്നതിനേക്കാൾ എളുപ്പമാണ്.

സാധാരണയായി തകരുന്ന ഭാഗങ്ങൾ

Viewport ടാഗ്

ഫോണിൽ ഒരു പേജ് ചെറിയ ഡെസ്ക്ടോപ്പ് സൈറ്റ് പോലെ കാണുന്നെങ്കിൽ viewport ടാഗ് ഇല്ല എന്നതാണ് കാരണം:

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

maximum-scale=1 അല്ലെങ്കിൽ user-scalable=no ചേർക്കരുത്. പിഞ്ച്-സൂം തടയുന്നത് കാഴ്ചക്കുറവുള്ളവർക്ക് സൈറ്റ് ഉപയോഗിക്കാൻ പ്രയാസമാക്കുന്നു.

നിശ്ചിത വീതികളും വശങ്ങളിലേക്കുള്ള സ്ക്രോളും

ഏറ്റവും സാധാരണമായ റെസ്‌പോൺസിവ് ബഗ് സ്ക്രീനിനേക്കാൾ വീതിയുള്ള എന്തെങ്കിലുമാണ്: നിശ്ചിത width: 1200px കണ്ടെയ്‌നർ, വീതിയുള്ള ടേബിൾ, നീണ്ട URL അല്ലെങ്കിൽ കോഡ് ബ്ലോക്ക്, max-width: 100% ഇല്ലാത്ത ചിത്രം. അപ്പോൾ മുഴുവൻ പേജും വശങ്ങളിലേക്ക് സ്ക്രോൾ ചെയ്യും. width-ന് പകരം max-width ഉപയോഗിക്കുക, ടെക്സ്റ്റ് പൊതിയാൻ അനുവദിക്കുക, വലിയ കാര്യങ്ങൾക്ക് അവയുടേതായ സ്ക്രോൾ ഏരിയ നൽകുക.

നാവിഗേഷൻ

ഡെസ്ക്ടോപ്പ് മെനുവിലെ അഞ്ച് ലിങ്കുകൾ ഫോണിൽ അപൂർവമായേ യോജിക്കൂ. സാധാരണ ഉത്തരം ഒരു മെനു ബട്ടൺ ആണ്, അത് ഒരു പാനൽ തുറക്കുന്നു. ഏറ്റവും പ്രധാനപ്പെട്ട രണ്ടോ മൂന്നോ പ്രവർത്തനങ്ങൾ — "Book", "Cart", "Sign in" — ദൃശ്യമായി നിലനിർത്തുക, മെനു കീബോർഡ് ഉപയോഗിച്ചും പ്രവർത്തിക്കുന്നുണ്ടെന്നും എളുപ്പത്തിൽ അടയുന്നുണ്ടെന്നും ഉറപ്പാക്കുക.

ടെക്സ്റ്റും ടാപ്പ് ലക്ഷ്യങ്ങളും

• ഫോണുകളിൽ ഏകദേശം 16 px ബോഡി ടെക്സ്റ്റ് ന്യായമായ കുറഞ്ഞ അളവാണ്. ചെറിയ ടെക്സ്റ്റുള്ള ഇൻപുട്ടുകൾ ടാപ്പ് ചെയ്യുമ്പോൾ iPhone-കൾ സൂം ഇൻ ചെയ്യാൻ കാരണമാകും.
• ബട്ടണുകളും ലിങ്കുകളും എളുപ്പത്തിൽ ടാപ്പ് ചെയ്യാവുന്നതാക്കുക. WCAG 2.2 AA കുറഞ്ഞത് 24 x 24 CSS പിക്സൽ (അല്ലെങ്കിൽ മതിയായ അകലം) നിശ്ചയിക്കുന്നു; ഏകദേശം 44 പിക്സൽ വിരലുകൾക്ക് കൂടുതൽ സൗകര്യപ്രദമാണ്.
• തെറ്റായ ലിങ്ക് ടാപ്പ് ചെയ്യാതിരിക്കാൻ അടുത്തടുത്ത ലിങ്കുകൾക്കിടയിൽ സ്ഥലം ഇടുക.

ടേബിളുകളും ഡാറ്റയും

വലിയ ടേബിളുകളാണ് റെസ്‌പോൺസിവ് ആപ്പിലെ ഏറ്റവും കഠിനമായ ഭാഗം. മുൻഗണനാക്രമത്തിലുള്ള ഓപ്ഷനുകൾ: ഫോണുകളിൽ കുറച്ച് കോളങ്ങൾ കാണിക്കുക, ഓരോ വരിയും ഒരു കാർഡ് ആക്കുക, അല്ലെങ്കിൽ ടേബിൾ തിരശ്ചീനമായി സ്ക്രോൾ ചെയ്യാവുന്ന കണ്ടെയ്‌നറിൽ വെക്കുക, ആദ്യ കോളം ഉറപ്പിച്ചു നിർത്തി. ആളുകൾക്ക് താരതമ്യം ചെയ്യേണ്ടത് എന്താണെന്നത് അടിസ്ഥാനമാക്കി തിരഞ്ഞെടുക്കുക.

ചിത്രങ്ങളും മീഡിയയും

max-width: 100%, height: auto ഉപയോഗിക്കുക, ചെറിയ സ്ക്രീനുകൾക്ക് srcset ഉപയോഗിച്ച് ചെറിയ ഫയലുകൾ നൽകുക, ലേഔട്ട് കുതിച്ചുചാട്ടം ഒഴിവാക്കാൻ width, height സജ്ജമാക്കുക. എംബെഡ് ചെയ്ത വീഡിയോകൾക്കും മാപ്പുകൾക്കും അവയുടെ അനുപാതം നിലനിർത്താൻ റെസ്‌പോൺസിവ് റാപ്പർ വേണം. ചെറിയ ചിത്രങ്ങൾ പേജുകളെ വേഗത്തിലാക്കുകയും ചെയ്യുന്നു — നിങ്ങളുടെ വെബ്സൈറ്റ് വേഗത്തിലാക്കുന്നത് എങ്ങനെ കാണുക.

ഫോമുകൾ

ലേബലുകൾ ഫീൽഡുകൾക്ക് മുകളിൽ അടുക്കുക, ഫീൽഡുകൾ മുഴുവൻ വീതിയിൽ ആക്കുക, ശരിയായ ഇൻപുട്ട് തരങ്ങൾ (type="email", type="tel", inputmode="numeric") ഉപയോഗിക്കുക, അങ്ങനെ ഫോണുകൾ അനുയോജ്യമായ കീബോർഡ് കാണിക്കും. സബ്മിറ്റ് ബട്ടൺ തള്ളവിരലിന് എത്താവുന്നിടത്ത് വെക്കുക, കീബോർഡ് തുറക്കുമ്പോഴും അത് ദൃശ്യമായിരിക്കട്ടെ.

ഹോവർ മാത്രമുള്ള പ്രവർത്തനങ്ങൾ

ഫോണുകൾക്ക് ഹോവർ ഇല്ല. ഹോവറിൽ മാത്രം വരുന്ന ടൂൾടിപ്പുകളും ഡ്രോപ്പ്‌ഡൗണുകളും പ്രിവ്യൂകളും ടച്ച് ഉപയോക്താക്കൾക്ക് കാണാനാകില്ല. ടാപ്പിലും അവ പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.

പ്രവർത്തിക്കുന്ന പ്രോംപ്റ്റുകൾ

പുതിയ നിർമ്മാണത്തിന്, തുടക്കത്തിൽ തന്നെ പറയുക:

ഇത് മൊബൈൽ-ആദ്യമായി നിർമ്മിക്കുക. ഫോണുകളിൽ ഒറ്റ കോളം, ടാബ്‌ലെറ്റ് വീതി മുതൽ രണ്ട് കോളം, ഡെസ്ക്ടോപ്പിൽ പൂർണ്ണ ലേഔട്ട്. 320 px വീതിയിൽ തിരശ്ചീന സ്ക്രോൾ ഇല്ല, ബോഡി ടെക്സ്റ്റ് കുറഞ്ഞത് 16 px, ടാപ്പ് ലക്ഷ്യങ്ങൾ കുറഞ്ഞത് 44 px, ചെറിയ സ്ക്രീനുകളിൽ ഒരു മെനു ബട്ടൺ, ഫോണുകളിൽ കാർഡുകളായി മാറുന്ന ടേബിളുകൾ.

നിലവിലുള്ള പേജിന്, നിങ്ങൾ കാണുന്നത് വിവരിക്കുക:

ഫോണുകളിൽ /pricing പേജ് വശങ്ങളിലേക്ക് സ്ക്രോൾ ചെയ്യുന്നു, മൂന്ന് പ്ലാൻ കാർഡുകൾ അടുത്തടുത്ത് ഞെരുങ്ങുന്നു. 768 px-ന് താഴെ കാർഡുകൾ ലംബമായി അടുക്കുക, താരതമ്യ ടേബിൾ അതിന്റെ സ്വന്തം കണ്ടെയ്‌നറിനുള്ളിൽ തിരശ്ചീനമായി സ്ക്രോൾ ചെയ്യട്ടെ, ഫീച്ചർ കോളം ഉറപ്പിച്ച്. ഡെസ്ക്ടോപ്പ് ലേഔട്ട് മാറ്റാതെ വെക്കുക.

എല്ലാ പേജും 375 px വീതിയിൽ പരിശോധിക്കുക. തിരശ്ചീനമായി കവിയുന്നതോ, ഓവർലാപ്പ് ചെയ്യുന്നതോ, 16 px-ൽ താഴെയുള്ള ടെക്സ്റ്റോ 44 px-ൽ താഴെയുള്ള ടാപ്പ് ലക്ഷ്യങ്ങളോ, അല്ലെങ്കിൽ ഹോവറിൽ മാത്രം പ്രവർത്തിക്കുന്നതോ ആയ എന്തും പട്ടികപ്പെടുത്തുക, പിന്നെ ഓരോന്നും ശരിയാക്കുക.

ഘട്ടം ഘട്ടമായി

1. Viewport ടാഗ് ഹെഡിൽ ഉണ്ടെന്ന് ഉറപ്പാക്കുക.
2. 320–375 px വീതിയിൽ പരിശോധിക്കുക, ബ്രൗസറിന്റെ ഡിവൈസ് മോഡിലോ ഫോൺ വലുപ്പ പ്രിവ്യൂവിലോ. ഓരോ പേജും മുകളിൽ നിന്ന് താഴേക്ക് സ്ക്രോൾ ചെയ്യുക.
3. ആദ്യം തിരശ്ചീന സ്ക്രോൾ പരിഹരിക്കുക. വളരെ വീതിയുള്ള ഘടകം കണ്ടെത്തുക; അത് പോകുന്നതുവരെ മറ്റെന്തും വിലയിരുത്താൻ പ്രയാസമാണ്.
4. നാവിഗേഷൻ ശരിയാക്കുക: മെനു ബട്ടൺ, പ്രധാന പ്രവർത്തനങ്ങൾ ദൃശ്യമായി.
5. ടെക്സ്റ്റ്, ടാപ്പ് ലക്ഷ്യങ്ങൾ, ഫോമുകൾ ഓരോ പ്രധാന ഒഴുക്കിലും പരിശോധിക്കുക — സൈൻ അപ്പ്, തിരയൽ, ചെക്ക്‌ഔട്ട്, ബന്ധപ്പെടൽ.
6. ടേബിളുകളും മീഡിയയും കൈകാര്യം ചെയ്യുക: കാർഡുകൾ അല്ലെങ്കിൽ സ്ക്രോൾ കണ്ടെയ്‌നറുകൾ, റെസ്‌പോൺസിവ് ചിത്രങ്ങളും എംബെഡുകളും.
7. ഇടയ്ക്കുള്ള വലുപ്പങ്ങൾ പരിശോധിക്കുക. ഫോണിൽ നിന്ന് ഡെസ്ക്ടോപ്പിലേക്ക് വീതി സാവധാനം മാറ്റുക; ടാബ്‌ലെറ്റ് വീതിക്ക് ചുറ്റുമാണ് ലേഔട്ടുകൾ പലപ്പോഴും തകരുന്നത്.
8. ഒരു യഥാർത്ഥ ഫോണിൽ പരീക്ഷിക്കുക. എമുലേറ്ററുകൾക്ക് ഓൺ-സ്ക്രീൻ കീബോർഡ് ഒരു ബട്ടൺ മറയ്ക്കുന്നത്, നോച്ചുകൾ, മൊബൈൽ ഡാറ്റയിൽ സൈറ്റിന്റെ വേഗത എന്നിവ പിടികിട്ടില്ല.

സാധാരണ തെറ്റുകൾ

• ഒരു ഫോൺ വലുപ്പത്തിൽ മാത്രം പരിശോധിക്കുന്നത്. ചെറിയ ഫോൺ, വലിയ ഫോൺ, ടാബ്‌ലെറ്റ് എന്നിവ പരിശോധിക്കുക.
• യോജിപ്പിക്കാൻ മൊബൈലിൽ ഉള്ളടക്കം മറയ്ക്കുന്നത്. Google മൊബൈൽ പതിപ്പാണ് ഇൻഡെക്‌സ് ചെയ്യുന്നത്, ഫോൺ ഉപയോക്താക്കൾക്ക് ഒരേ വിവരം വേണം.
• Viewport ടാഗിൽ സൂം പ്രവർത്തനരഹിതമാക്കുന്നത്.
• ഫോണുകളിൽ ഡെസ്ക്ടോപ്പ് വലുപ്പമുള്ള ചിത്രങ്ങൾ, അത് ലോഡ് സമയവും ഡാറ്റയും ചെലവാക്കുന്നു.
• സ്ഥിരമായി സ്ഥാനം പിടിക്കുന്ന ഘടകങ്ങൾ കൂടിക്കൂടി വരുന്നത്: സ്റ്റിക്കി ഹെഡർ, കുക്കി ബാനർ, ചാറ്റ് ബബിൾ എന്നിവ ഫോൺ സ്ക്രീനിന്റെ പകുതി മറയ്ക്കാം.
• ചെറിയ സ്ക്രീനിൽ അടയ്ക്കാൻ കഴിയാത്ത പോപ്പ്-അപ്പുകൾ, കാരണം ക്ലോസ് ബട്ടൺ സ്ക്രീനിന് പുറത്താണ്.

മൊബൈൽ ചെക്ക്‌ലിസ്റ്റ്

• Viewport meta ടാഗ് ഉണ്ട്; സൂം പ്രവർത്തനരഹിതമാക്കിയിട്ടില്ല
• ഏത് പേജിലും 320 px-ൽ തിരശ്ചീന സ്ക്രോൾ ഇല്ല
• ബോഡി ടെക്സ്റ്റ് ഏകദേശം 16 px; ഇൻപുട്ടുകൾ സൂം ട്രിഗർ ചെയ്യുന്നില്ല
• ടാപ്പ് ലക്ഷ്യങ്ങൾ സൗകര്യപ്രദമായി വലുതും അകലമുള്ളതുമാണ്
• മെനു ഫോണുകളിലും കീബോർഡ് ഉപയോഗിച്ചും പ്രവർത്തിക്കുന്നു
• ഫോണുകളിൽ ടേബിളുകൾ വായിക്കാവുന്നതാണ് (കാർഡുകൾ, കുറച്ച് കോളങ്ങൾ അല്ലെങ്കിൽ സ്ക്രോൾ കണ്ടെയ്‌നർ)
• ചിത്രങ്ങളും എംബെഡുകളും സ്കെയിൽ ചെയ്യുന്നു; ശരിയായ വലുപ്പത്തിലുള്ള ഫയലുകൾ നൽകുന്നു
• ഫോമുകൾ ശരിയായ ഇൻപുട്ട് തരങ്ങൾ ഉപയോഗിക്കുന്നു; സബ്മിറ്റ് ബട്ടൺ എത്താവുന്നതാണ്
• പ്രധാനപ്പെട്ടതൊന്നും ഹോവറിനെ ആശ്രയിക്കുന്നില്ല
• കുറഞ്ഞത് ഒരു യഥാർത്ഥ ഫോണിലെങ്കിലും പരീക്ഷിച്ചു

റെസ്‌പോൺസിവ് ലേഔട്ട് ആക്സസിബിലിറ്റി യുടെ ഭാഗമാണ്: 320 px വീതിയിലും 200% സൂമിലും ഉള്ളടക്കം പ്രവർത്തിക്കണമെന്ന് WCAG ആവശ്യപ്പെടുന്നു. ആളുകൾ ദിവസവും ഫോണിൽ ഉപയോഗിക്കുന്ന ആപ്പാണ് നിങ്ങൾ നിർമ്മിക്കുന്നതെങ്കിൽ, മൊബൈൽ-സൗഹൃദ വെബ് ആപ്പ് എങ്ങനെ നിർമ്മിക്കാം ഇൻസ്റ്റാൾ ചെയ്യാവുന്ന PWA-കൾ ഉൾപ്പെടെ കൂടുതൽ വിശദമായി പറയുന്നു.

Mythex-ൽ റെസ്‌പോൺസിവ് ഡിസൈൻ

Mythex റെസ്‌പോൺസിവ് വെബ് ആപ്പുകൾ നിർമ്മിക്കുന്നു, Pro-യിൽ അവയെ Android, iPhone ആപ്പുകളായി പൊതിയാനും കഴിയും. വർക്ക്‌സ്പേസിൽ, Preview-യ്ക്ക് മുകളിലുള്ള ഫോൺ ഐക്കണിൽ ക്ലിക്ക് ചെയ്യുക (Switch to Mobile), നിങ്ങളുടെ ആപ്പ് ഫോൺ വലുപ്പ ഫ്രെയിമിൽ കാണാം, ഫ്രെയിമിന്റെ അറ്റം വലിച്ച് മറ്റ് വീതികൾ പരീക്ഷിക്കാം (Preview and Code). ചെറിയ സ്ക്രീൻ ലേഔട്ട് ശരിയാക്കാൻ ഒരു ചെറിയ സ്റ്റാർട്ടർ പ്രോംപ്റ്റ് മൊബൈൽ റെസ്‌പോൺസിവ് പ്രോംപ്റ്റുകളിൽ ഡോക്സിലുണ്ട്. യഥാർത്ഥ ഫോണിലും പരിശോധിക്കുക — പബ്ലിഷ് ചെയ്ത URL തുറക്കുക, അല്ലെങ്കിൽ ഒരു പ്രിവ്യൂ ലിങ്ക് പങ്കിട്ട് നിങ്ങളുടെ ഫോണിൽ തുറക്കുക.

ചോദ്യങ്ങൾ