இணையதளத்தை மொபைல் ரெஸ்பான்சிவ் ஆக்குவது எப்படி

இணையதளத்தை மொபைல் ரெஸ்பான்சிவ் ஆக்க, viewport meta tag சேர்த்து, நெகிழ்வான அகலங்களுடன் மொபைல்-முதல் அமைப்பை உருவாக்கி, பெரிய திரைகளில் அமைப்பை மறுஒழுங்கு செய்ய CSS breakpoint-களைப் பயன்படுத்துங்கள் — நெடுவரிசைகளை அடுக்கி, மெனுவை மடித்து, படங்களைப் பொருத்தி. பின்னர் ஒவ்வொரு பக்கத்தையும் ஃபோன் அகலத்தில் சரிபாருங்கள்: பக்கவாட்டில் உருளுதல், மிகச் சிறிய உரை, தட்ட முடியாத அளவு சிறிய பொத்தான்கள் உள்ளதா என்று. AI-உருவாக்கிய தளத்தில், ஒரு தெளிவான prompt மற்றும் ஃபோன் அளவு முன்னோட்டத்தில் ஒரு சோதனை பெரும்பாலானவற்றைச் சரிசெய்துவிடும்.

ரெஸ்பான்சிவ் வடிவமைப்பு உண்மையில் என்ன

ரெஸ்பான்சிவ் தளம் ஒரே தொகுப்பு பக்கங்களையும் URL-களையும் பயன்படுத்தி திரைக்கு ஏற்ப மாறுகிறது. தனி "m." தளத்துக்குப் பதிலாக, CSS சில அகலங்களில் அமைப்பை மாற்றுகிறது. அந்த அகலங்கள் breakpoint-கள் என்று அழைக்கப்படுகின்றன. கட்டுமானத் தொகுதிகள்:

• viewport meta tag மொபைல் உலாவிகளுக்கு சாதனத்தின் உண்மையான அகலத்தைப் பயன்படுத்தச் சொல்கிறது.
• திரவ அமைப்புகள் நிலையான பிக்சல் அகலங்களுக்குப் பதிலாக சதவீதங்கள், flexbox மற்றும் grid-ஐப் பயன்படுத்துகின்றன.
• Media queries (அல்லது Tailwind-இன் md: போன்ற framework வகுப்புகள்) ஒரு குறிப்பிட்ட அகலத்துக்கு மேல் அமைப்பை மாற்றுகின்றன.
• நெகிழ்வான ஊடகம் — படங்களும் வீடியோக்களும் தங்கள் கொள்கலனுக்குப் பொருந்த சுருங்குகின்றன.

இது முக்கியம், ஏனெனில் உங்கள் பார்வையாளர்களில் பலர் ஃபோன்களில் இருக்கலாம்; Google உங்கள் பக்கங்களின் மொபைல் பதிப்பை அட்டவணைப்படுத்துகிறது. உள்ளடக்கமோ இணைப்புகளோ டெஸ்க்டாப்பில் மட்டும் இருந்தால், அவற்றையும் Google காணாது.

விருப்பங்களும் சமரசங்களும்

மொபைல்-முதல் பெரும்பாலும் எளியது: ஒற்றை நெடுவரிசையே எளிய அமைப்பு; இடம் வளரும்போது நெடுவரிசைகளைச் சேர்ப்பது, அவற்றை நீக்குவதை விட குறைந்த வேலை.

பொதுவாக உடையும் பகுதிகள்

viewport tag

ஒரு பக்கம் ஃபோனில் சிறிய டெஸ்க்டாப் தளம் போலத் தெரிந்தால், viewport tag இல்லை:

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

maximum-scale=1 அல்லது user-scalable=no சேர்க்காதீர்கள். பிஞ்ச்-ஜூமைத் தடுப்பது குறைந்த பார்வை உள்ளவர்களுக்குத் தளத்தைப் பயன்படுத்துவதைக் கடினமாக்கும்.

நிலையான அகலங்களும் பக்கவாட்டு உருளுதலும்

மிகவும் பொதுவான ரெஸ்பான்சிவ் பிழை திரையை விட அகலமான ஒன்று: 1200px நிலையான width கொண்ட கொள்கலன், அகலமான அட்டவணை, நீண்ட URL அல்லது குறியீட்டுத் தொகுதி, max-width: 100% இல்லாத படம். அப்போது முழு பக்கமும் பக்கவாட்டில் உருளும். width-க்குப் பதிலாக max-width பயன்படுத்துங்கள், உரை சுற்றிச் செல்ல விடுங்கள், அகலமான பொருள்களுக்கு தனிப் உருளும் பகுதியைக் கொடுங்கள்.

வழிசெலுத்தல்

டெஸ்க்டாப் மெனுவின் ஐந்து இணைப்புகள் ஃபோனில் அரிதாகவே பொருந்தும். வழக்கமான தீர்வு ஒரு பேனலைத் திறக்கும் மெனு பொத்தான். மிக முக்கியமான இரண்டு அல்லது மூன்று செயல்களை — "முன்பதிவு", "கார்ட்", "உள்நுழை" — தெரியும்படி வையுங்கள், மெனு விசைப்பலகையுடன் வேலை செய்வதையும் எளிதாக மூடுவதையும் உறுதிசெய்யுங்கள்.

உரையும் தொடு இலக்குகளும்

• ஃபோன்களில் சுமார் 16 px உடல் உரை ஒரு பொருத்தமான குறைந்தபட்சம். சிறிய உரை கொண்ட உள்ளீடுகள் தட்டும்போது iPhone-கள் ஜூம் செய்ய வைக்கும்.
• பொத்தான்களையும் இணைப்புகளையும் எளிதாகத் தட்டும்படி வையுங்கள். WCAG 2.2 AA குறைந்தபட்சம் 24 க்கு 24 CSS பிக்சல்கள் (அல்லது போதுமான இடைவெளி) என்று நிர்ணயிக்கிறது; விரல்களுக்கு சுமார் 44 பிக்சல்கள் வசதியானது.
• அருகருகே உள்ள இணைப்புகளுக்கு இடையே இடம் விடுங்கள், மக்கள் தவறான ஒன்றைத் தட்டாமல் இருக்க.

அட்டவணைகளும் தரவும்

அகலமான அட்டவணைகள் ரெஸ்பான்சிவ் ஆப்பின் கடினமான பகுதி. விருப்பங்கள், விரும்பும் வரிசையில்: ஃபோன்களில் குறைவான நெடுவரிசைகளைக் காட்டுங்கள், ஒவ்வொரு வரிசையையும் ஒரு அட்டையாக மாற்றுங்கள், அல்லது அட்டவணையை கிடைமட்டமாக உருளும் கொள்கலனில் வையுங்கள், முதல் நெடுவரிசை நிலையாக இருக்கும்படி. மக்கள் எதை ஒப்பிட வேண்டும் என்பதைப் பொறுத்துத் தேர்ந்தெடுங்கள்.

படங்களும் ஊடகமும்

max-width: 100% மற்றும் height: auto பயன்படுத்துங்கள், சிறிய திரைகளுக்கு srcset மூலம் சிறிய கோப்புகளை அனுப்புங்கள், அமைப்பு தாவல்களைத் தவிர்க்க width மற்றும் height அமையுங்கள். உட்பொதிக்கப்பட்ட வீடியோக்களும் வரைபடங்களும் தங்கள் விகிதத்தை வைத்திருக்க ஒரு ரெஸ்பான்சிவ் உறையில் இருக்க வேண்டும். சிறிய படங்கள் பக்கங்களை வேகமாக்கும் — உங்கள் இணையதளத்தை எப்படி வேகமாக்குவது பாருங்கள்.

படிவங்கள்

லேபிள்களை புலங்களுக்கு மேல் அடுக்குங்கள், புலங்களை முழு அகலமாக்குங்கள், சரியான உள்ளீட்டு வகைகளைப் (type="email", type="tel", inputmode="numeric") பயன்படுத்துங்கள், அதனால் ஃபோன்கள் பொருத்தமான விசைப்பலகையைக் காட்டும். சமர்ப்பிக்கும் பொத்தானை கட்டைவிரல் எட்டும் இடத்தில் வையுங்கள், விசைப்பலகை திறக்கும்போதும் அது தெரியும்படி.

ஹோவர் மட்டும் செயல்கள்

ஃபோன்களில் ஹோவர் இல்லை. ஹோவரில் மட்டும் தோன்றும் tooltip-கள், dropdown-கள், முன்னோட்டங்கள் தொடு பயனர்களுக்குத் தெரியாது. அவை தட்டினாலும் வேலை செய்யட்டும்.

வேலை செய்யும் prompt-கள்

ஒரு புதிய கட்டமைப்புக்கு, தொடக்கத்திலேயே சொல்லுங்கள்:

இதை மொபைல்-முதலில் உருவாக்கவும். ஃபோன்களில் ஒற்றை நெடுவரிசை, டேப்லெட் அகலத்திலிருந்து இரண்டு நெடுவரிசைகள், டெஸ்க்டாப்பில் முழு அமைப்பு. 320 px அகலத்தில் கிடைமட்ட உருளுதல் இல்லை, உடல் உரை குறைந்தது 16 px, தொடு இலக்குகள் குறைந்தது 44 px, சிறிய திரைகளில் மெனு பொத்தான், ஃபோன்களில் அட்டவணைகள் அட்டைகளாக மாறும்.

இருக்கும் பக்கத்துக்கு, நீங்கள் பார்ப்பதை விவரியுங்கள்:

ஃபோன்களில், /pricing பக்கம் பக்கவாட்டில் உருளுகிறது, மூன்று திட்ட அட்டைகளும் அருகருகே நசுங்கியுள்ளன. 768 px-க்குக் கீழ் அட்டைகளை செங்குத்தாக அடுக்குங்கள், ஒப்பீட்டு அட்டவணை அதன் சொந்தக் கொள்கலனுக்குள் கிடைமட்டமாக உருளட்டும், அம்ச நெடுவரிசை நிலையாக இருக்கட்டும், டெஸ்க்டாப் அமைப்பை அப்படியே வையுங்கள்.

ஒவ்வொரு பக்கத்தையும் 375 px அகலத்தில் சரிபாருங்கள். வழிந்தோடுவது, ஒன்றுடன் ஒன்று மேலெழுவது, 16 px-ஐ விடச் சிறிய உரை அல்லது 44 px-ஐ விடச் சிறிய தொடு இலக்குகள், அல்லது ஹோவரில் மட்டும் வேலை செய்வது எதுவாக இருந்தாலும் பட்டியலிடுங்கள், பிறகு ஒவ்வொன்றையும் சரிசெய்யுங்கள்.

படிப்படியாக

1. viewport tag பக்கத் தலைப்பில் இருக்கிறதா என்று உறுதிசெய்யுங்கள்.
2. 320–375 px அகலத்தில் சோதியுங்கள் உலாவியின் சாதன முறையிலோ ஃபோன் அளவு முன்னோட்டத்திலோ. ஒவ்வொரு பக்கத்தையும் மேலிருந்து கீழ் வரை உருட்டுங்கள்.
3. முதலில் கிடைமட்ட உருளுதலைச் சரிசெய்யுங்கள். அதிக அகலமான உறுப்பைக் கண்டறியுங்கள்; அது போகும் வரை மற்றவற்றை மதிப்பிடுவது கடினம்.
4. வழிசெலுத்தலைச் சரிசெய்யுங்கள்: மெனு பொத்தான், முக்கிய செயல்கள் தெரியும்.
5. உரை, தொடு இலக்குகள், படிவங்களை ஒவ்வொரு முக்கிய ஓட்டத்திலும் சரிபாருங்கள் — பதிவு, தேடல், செக்அவுட், தொடர்பு.
6. அட்டவணைகளையும் ஊடகத்தையும் கையாளுங்கள்: அட்டைகள் அல்லது உருளும் கொள்கலன்கள், ரெஸ்பான்சிவ் படங்கள் மற்றும் உட்பொதிப்புகள்.
7. இடைப்பட்ட அளவுகளையும் சரிபாருங்கள். ஃபோனிலிருந்து டெஸ்க்டாப் வரை அகலத்தை மெதுவாக இழுத்துப் பாருங்கள்; டேப்லெட் அகலத்தைச் சுற்றி அமைப்புகள் அடிக்கடி உடைகின்றன.
8. ஒரு உண்மையான ஃபோனில் சோதியுங்கள். எமுலேட்டர்கள் சில விஷயங்களைத் தவறவிடுகின்றன: திரை விசைப்பலகை பொத்தானை மறைப்பது, notch-கள், மொபைல் டேட்டாவில் தளம் எவ்வளவு வேகமாக உணர்கிறது.

பொதுவான தவறுகள்

• ஒரே ஒரு ஃபோன் அளவில் மட்டும் சோதிப்பது. சிறிய ஃபோன், பெரிய ஃபோன், டேப்லெட் ஆகியவற்றைச் சரிபாருங்கள்.
• பொருந்துவதற்காக மொபைலில் உள்ளடக்கத்தை மறைப்பது. Google மொபைல் பதிப்பை அட்டவணைப்படுத்துகிறது; ஃபோன் பயனர்களுக்கும் அதே தகவல் வேண்டும்.
• viewport tag-இல் zoom-ஐ முடக்குவது.
• டெஸ்க்டாப் அளவுப் படங்கள் ஃபோன்களில், அவை ஏற்றும் நேரத்தையும் தரவையும் வீணாக்குகின்றன.
• நிலையாக நிற்கும் உறுப்புகள் குவிவது: ஒட்டும் header, குக்கீ பேனர், மற்றும் chat bubble ஆகியவை ஃபோன் திரையின் பாதியை மறைக்கலாம்.
• மூட முடியாத pop-up-கள் சிறிய திரையில், மூடும் பொத்தான் திரைக்கு வெளியே இருப்பதால்.

மொபைல் சரிபார்ப்புப் பட்டியல்

• viewport meta tag உள்ளது; zoom முடக்கப்படவில்லை
• எந்தப் பக்கத்திலும் 320 px-இல் கிடைமட்ட உருளுதல் இல்லை
• உடல் உரை சுமார் 16 px; உள்ளீடுகள் ஜூமைத் தூண்டுவதில்லை
• தொடு இலக்குகள் வசதியாகப் பெரியவை, இடைவெளியுடன்
• மெனு ஃபோன்களிலும் விசைப்பலகையுடனும் வேலை செய்கிறது
• அட்டவணைகள் ஃபோன்களில் படிக்கக்கூடியவை (அட்டைகள், குறைவான நெடுவரிசைகள் அல்லது உருளும் கொள்கலன்)
• படங்களும் உட்பொதிப்புகளும் அளவு மாறுகின்றன; சரியான அளவு கோப்புகள் அனுப்பப்படுகின்றன
• படிவங்கள் சரியான உள்ளீட்டு வகைகளைப் பயன்படுத்துகின்றன; சமர்ப்பிக்கும் பொத்தான் எட்டக்கூடியது
• முக்கியமானது எதுவும் ஹோவரைச் சார்ந்திருக்கவில்லை
• குறைந்தது ஒரு உண்மையான ஃபோனில் சோதிக்கப்பட்டது

ரெஸ்பான்சிவ் அமைப்பு அணுகல்தன்மையின் ஒரு பகுதியும்தான்: 320 px அகலத்திலும் 200% ஜூமிலும் உள்ளடக்கம் வேலை செய்ய வேண்டும் என்று WCAG கேட்கிறது. நீங்கள் மக்கள் தினமும் தங்கள் ஃபோன்களில் பயன்படுத்தும் ஆப்பை உருவாக்குகிறீர்கள் என்றால், மொபைல்-நட்பான வலை ஆப்பை எப்படி உருவாக்குவது நிறுவக்கக்கூடிய PWA-க்களை உள்ளடக்கி மேலும் செல்கிறது.

Mythex-இல் ரெஸ்பான்சிவ் வடிவமைப்பு

Mythex ரெஸ்பான்சிவ் வலை ஆப்புகளை உருவாக்குகிறது; Pro-வில் அவற்றை Android மற்றும் iPhone ஆப்புகளாகவும் மூடலாம். பணியிடத்தில், முன்னோட்டத்துக்கு மேல் உள்ள ஃபோன் ஐகானைக் கிளிக் செய்யுங்கள் (Switch to Mobile), உங்கள் ஆப்பை ஃபோன் அளவு சட்டகத்தில் பார்க்கலாம்; சட்டகத்தின் விளிம்பை இழுத்து மற்ற அகலங்களையும் முயலலாம் (Preview மற்றும் Code). சிறிய திரை அமைப்பைச் சரிசெய்வதற்கான குறுகிய தொடக்கப் prompt ஆவணங்களில் மொபைல் ரெஸ்பான்சிவ் prompt-கள் என்பதில் உள்ளது. உண்மையான ஃபோனிலும் சரிபாருங்கள் — வெளியிட்ட URL-ஐத் திறங்கள், அல்லது ஒரு முன்னோட்ட இணைப்பைப் பகிர்ந்து உங்கள் ஃபோனில் திறங்கள்.

கேள்விகள்