వెబ్‌సైట్‌ను మొబైల్ రెస్పాన్సివ్‌గా ఎలా చేయాలి

వెబ్‌సైట్‌ను మొబైల్ రెస్పాన్సివ్‌గా చేయడానికి, వ్యూపోర్ట్ మెటా ట్యాగ్ జోడించండి, మొబైల్-ఫస్ట్ పద్ధతిలో సౌకర్యవంతమైన వెడల్పులతో లేఅవుట్ నిర్మించండి, మరియు పెద్ద స్క్రీన్‌లపై దాన్ని తిరిగి అమర్చడానికి CSS బ్రేక్‌పాయింట్లు ఉపయోగించండి — కాలమ్‌లు పేర్చడం, మెనూ మూసుకోవడం, చిత్రాలను సరిపోయేలా కుదించడం. తర్వాత ప్రతి పేజీని ఫోన్ వెడల్పులో తనిఖీ చేయండి: పక్కకు స్క్రోల్ అవుతుందా, చాలా చిన్న టెక్స్ట్ ఉందా, లేదా ట్యాప్ చేయడానికి చాలా చిన్న బటన్లు ఉన్నాయా. AI తో నిర్మించిన సైట్‌లో, ఒక స్పష్టమైన ప్రాంప్ట్ మరియు ఫోన్-సైజ్ ప్రివ్యూలో ఒక పాస్ సాధారణంగా చాలా సమస్యలను పరిష్కరిస్తుంది.

రెస్పాన్సివ్ డిజైన్ నిజంగా ఏమిటి

రెస్పాన్సివ్ సైట్ ఒకే పేజీలు మరియు URLలను ఉపయోగిస్తుంది, అవి స్క్రీన్‌కు అనుగుణంగా మారతాయి. ప్రత్యేక “m.” సైట్‌కు బదులుగా, CSS కొన్ని వెడల్పుల వద్ద లేఅవుట్‌ను మారుస్తుంది, వీటిని బ్రేక్‌పాయింట్లు అంటారు. నిర్మాణ భాగాలు:

• వ్యూపోర్ట్ మెటా ట్యాగ్ మొబైల్ బ్రౌజర్‌లకు పరికరం యొక్క నిజమైన వెడల్పు ఉపయోగించమని చెబుతుంది.
• ఫ్లూయిడ్ లేఅవుట్‌లు స్థిరమైన పిక్సెల్ వెడల్పులకు బదులుగా శాతాలు, flexbox మరియు grid ఉపయోగిస్తాయి.
• మీడియా క్వెరీలు (లేదా Tailwind యొక్క md: వంటి ఫ్రేమ్‌వర్క్ క్లాస్‌లు) ఇచ్చిన వెడల్పు కంటే ఎక్కువ లేఅవుట్‌ను మారుస్తాయి.
• సౌకర్యవంతమైన మీడియా — తమ కంటైనర్‌కు సరిపోయేలా కుంచించుకునే చిత్రాలు మరియు వీడియోలు.

ఇది ముఖ్యం ఎందుకంటే మీ ట్రాఫిక్‌లో ఎక్కువ భాగం ఫోన్‌లలో ఉండే అవకాశం ఉంది, మరియు Google మీ పేజీల మొబైల్ వెర్షన్‌ను ఇండెక్స్ చేస్తుంది. కంటెంట్ లేదా లింక్‌లు డెస్క్‌టాప్‌లో మాత్రమే ఉంటే, Google వాటిని కూడా చూడకపోవచ్చు.

ఎంపికలు మరియు ట్రేడ్-ఆఫ్‌లు

మొబైల్-ఫస్ట్ సాధారణంగా సరళమైనది: ఒకే కాలమ్ అత్యంత సులభమైన లేఅవుట్, మరియు స్థలం పెరిగే కొద్దీ కాలమ్‌లు జోడించడం, వాటిని తొలగించడం కంటే తక్కువ పని.

సాధారణంగా విరిగేవి

వ్యూపోర్ట్ ట్యాగ్

ఒక పేజీ ఫోన్‌లో చిన్న డెస్క్‌టాప్ సైట్‌లా కనిపిస్తే, వ్యూపోర్ట్ ట్యాగ్ లేదు:

<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 ఉపయోగించండి, టెక్స్ట్‌ను చుట్టనివ్వండి, మరియు వెడల్పైన వాటికి వాటి స్వంత స్క్రోల్ ప్రాంతం ఇవ్వండి.

నావిగేషన్

ఫోన్‌లో ఐదు డెస్క్‌టాప్ మెనూ లింకులు అరుదుగా సరిపోతాయి. సాధారణ పరిష్కారం ఒక ప్యానెల్ తెరిచే మెనూ బటన్. రెండు లేదా మూడు అత్యంత ముఖ్యమైన చర్యలను కనిపించేలా ఉంచండి — “బుక్”, “కార్ట్”, “సైన్ ఇన్” — మరియు మెనూ కీబోర్డ్‌తో పని చేస్తుందని మరియు సులభంగా మూసుకుంటుందని నిర్ధారించుకోండి.

టెక్స్ట్ మరియు ట్యాప్ టార్గెట్‌లు

• ఫోన్‌లలో సుమారు 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") ఉపయోగించండి, తద్వారా ఫోన్‌లు సరిపోయే కీబోర్డ్ చూపిస్తాయి. సబ్మిట్ బటన్‌ను బొటనవేలు చేరుకోగల చోట ఉంచండి, మరియు కీబోర్డ్ తెరిచినప్పుడు అది కనిపించేలా ఉంచండి.

హోవర్-మాత్రమే ఇంటరాక్షన్‌లు

ఫోన్‌లకు హోవర్ ఉండదు. హోవర్‌పై మాత్రమే కనిపించే టూల్‌టిప్‌లు, డ్రాప్‌డౌన్‌లు మరియు ప్రివ్యూలు టచ్ యూజర్లకు కనిపించవు. వాటిని ట్యాప్‌పై కూడా పని చేయించండి.

పని చేసే ప్రాంప్ట్‌లు

కొత్త నిర్మాణం కోసం, మొదటే చెప్పండి:

మొబైల్-ఫస్ట్‌గా నిర్మించు. ఫోన్‌లపై సింగిల్ కాలమ్, టాబ్లెట్ వెడల్పు నుంచి రెండు కాలమ్‌లు, డెస్క్‌టాప్‌లో పూర్తి లేఅవుట్. 320 px వెడల్పులో క్షితిజ సమాంతర స్క్రోల్ లేదు, బాడీ టెక్స్ట్ కనీసం 16 px, ట్యాప్ టార్గెట్‌లు కనీసం 44 px, చిన్న స్క్రీన్‌లపై మెనూ బటన్, మరియు ఫోన్‌లపై కార్డ్‌లుగా మారే టేబుల్స్.

ఇప్పటికే ఉన్న పేజీ కోసం, మీరు చూసేది వివరించండి:

ఫోన్‌లలో /pricing పేజీ పక్కకు స్క్రోల్ అవుతుంది, మరియు మూడు ప్లాన్ కార్డ్‌లు పక్క పక్కనే నలిగిపోయి ఉంటాయి. 768 px కంటే తక్కువలో కార్డ్‌లను నిలువుగా పేర్చండి, పోలిక టేబుల్‌ను దాని స్వంత కంటైనర్‌లో క్షితిజ సమాంతరంగా స్క్రోల్ అయ్యేలా చేయండి ఫీచర్ కాలమ్ పిన్ చేయబడి, మరియు డెస్క్‌టాప్ లేఅవుట్ మార్చవద్దు.

ప్రతి పేజీని 375 px వెడల్పులో తనిఖీ చేయండి. ఓవర్‌ఫ్లో అయ్యే, అతివ్యాప్తి చెందే, 16 px టెక్స్ట్ లేదా 44 px ట్యాప్ టార్గెట్‌ల కంటే చిన్నవైన, లేదా హోవర్‌పై మాత్రమే పని చేసేవి ఏమైనా జాబితా చేయి, తర్వాత ప్రతిదాన్ని సరిచేయి.

దశలవారీగా

1. వ్యూపోర్ట్ ట్యాగ్ నిర్ధారించండి పేజీ హెడ్‌లో ఉందో లేదో.
2. 320–375 px వెడల్పులో పరీక్షించండి బ్రౌజర్ డివైస్ మోడ్‌లో లేదా ఫోన్-సైజ్ ప్రివ్యూలో. ప్రతి పేజీని పై నుంచి కింద వరకు స్క్రోల్ చేయండి.
3. ముందుగా క్షితిజ సమాంతర స్క్రోల్‌ను సరిచేయండి. చాలా వెడల్పుగా ఉన్న ఎలిమెంట్‌ను కనుగొనండి; అది పోయే వరకు మిగతావి సరిగ్గా అంచనా వేయడం కష్టం.
4. నావిగేషన్ సరిచేయండి: మెనూ బటన్, ముఖ్యమైన చర్యలు కనిపించేలా.
5. ప్రతి కీలక ఫ్లోలో టెక్స్ట్, ట్యాప్ టార్గెట్‌లు మరియు ఫారమ్‌లను తనిఖీ చేయండి — సైన్ అప్, సెర్చ్, చెక్‌అవుట్, కాంటాక్ట్.
6. టేబుల్స్ మరియు మీడియాను నిర్వహించండి: కార్డ్‌లు లేదా స్క్రోల్ కంటైనర్‌లు, రెస్పాన్సివ్ చిత్రాలు మరియు ఎంబెడ్‌లు.
7. మధ్య సైజులను తనిఖీ చేయండి. వెడల్పును ఫోన్ నుంచి డెస్క్‌టాప్ వరకు నెమ్మదిగా లాగండి; టాబ్లెట్ వెడల్పు చుట్టూ లేఅవుట్‌లు తరచుగా విరుగుతాయి.
8. నిజమైన ఫోన్‌లో పరీక్షించండి. ఎమ్యులేటర్లు కొన్ని విషయాలు మిస్ చేస్తాయి — ఆన్-స్క్రీన్ కీబోర్డ్ బటన్‌ను కప్పడం, నాచ్‌లు, మొబైల్ డేటాపై సైట్ ఎంత వేగంగా అనిపిస్తుంది.

సాధారణ తప్పులు

• ఒకే ఫోన్ సైజులో మాత్రమే పరీక్షించడం. ఒక చిన్న ఫోన్, ఒక పెద్ద ఫోన్ మరియు ఒక టాబ్లెట్ తనిఖీ చేయండి.
• సరిపోయేలా మొబైల్‌లో కంటెంట్ దాచడం. Google మొబైల్ వెర్షన్‌ను ఇండెక్స్ చేస్తుంది, మరియు ఫోన్ యూజర్లకు అదే సమాచారం కావాలి.
• వ్యూపోర్ట్ ట్యాగ్‌లో జూమ్ డిసేబుల్ చేయడం.
• ఫోన్‌లపై డెస్క్‌టాప్-సైజ్ చిత్రాలు, ఇవి లోడ్ సమయం మరియు డేటా ఖర్చు చేస్తాయి.
• ఫిక్స్డ్-పొజిషన్ ఎలిమెంట్‌లు పేరుకుపోవడం: స్టిక్కీ హెడర్, కుకీ బ్యానర్ మరియు చాట్ బబుల్ కలిసి ఫోన్ స్క్రీన్‌లో సగం కప్పేయగలవు.
• చిన్న స్క్రీన్‌లో మూసివేయలేని పాప్-అప్‌లు, ఎందుకంటే క్లోజ్ బటన్ స్క్రీన్ బయట ఉంటుంది.

మొబైల్ చెక్‌లిస్ట్

• వ్యూపోర్ట్ మెటా ట్యాగ్ ఉంది; జూమ్ డిసేబుల్ కాలేదు
• ఏ పేజీలోనూ 320 px వద్ద క్షితిజ సమాంతర స్క్రోల్ లేదు
• బాడీ టెక్స్ట్ సుమారు 16 px; ఇన్‌పుట్‌లు జూమ్ ప్రేరేపించవు
• ట్యాప్ టార్గెట్‌లు సౌకర్యవంతంగా పెద్దవిగా మరియు అంతరంతో ఉన్నాయి
• మెనూ ఫోన్‌లలో మరియు కీబోర్డ్‌తో పని చేస్తుంది
• ఫోన్‌లలో టేబుల్స్ చదవగలిగేలా ఉన్నాయి (కార్డ్‌లు, తక్కువ కాలమ్‌లు లేదా స్క్రోల్ కంటైనర్)
• చిత్రాలు మరియు ఎంబెడ్‌లు స్కేల్ అవుతాయి; సరైన సైజు ఫైళ్లు అందించబడతాయి
• ఫారమ్‌లు సరైన ఇన్‌పుట్ రకాలు ఉపయోగిస్తాయి; సబ్మిట్ బటన్ చేరుకోగలదు
• ఏదీ ముఖ్యమైనది హోవర్‌పై ఆధారపడదు
• కనీసం ఒక నిజమైన ఫోన్‌లో పరీక్షించబడింది

రెస్పాన్సివ్ లేఅవుట్ యాక్సెసిబిలిటీ లో భాగమే: WCAG కంటెంట్ 320 px వెడల్పులో మరియు 200% జూమ్‌లో పని చేయాలని కోరుతుంది. మీరు ప్రజలు రోజూ ఫోన్‌లలో ఉపయోగించే యాప్ నిర్మిస్తుంటే, మొబైల్-ఫ్రెండ్లీ వెబ్ యాప్‌ను ఎలా నిర్మించాలి ఇన్‌స్టాల్ చేయగల PWA లతో సహా మరింత వివరిస్తుంది.

Mythex లో రెస్పాన్సివ్ డిజైన్

Mythex రెస్పాన్సివ్ వెబ్ యాప్‌లు నిర్మిస్తుంది, మరియు Pro లో వాటిని Android మరియు iPhone యాప్‌లుగా చుట్టగలదు. వర్క్‌స్పేస్‌లో, Preview పైన ఉన్న ఫోన్ ఐకాన్ (Switch to Mobile) క్లిక్ చేయండి, మీ యాప్‌ను ఫోన్-సైజ్ ఫ్రేమ్‌లో చూడటానికి, మరియు ఇతర వెడల్పులను ప్రయత్నించడానికి ఫ్రేమ్ అంచును లాగండి (Preview and Code). స్మాల్-స్క్రీన్ లేఅవుట్ సరిచేయడానికి చిన్న స్టార్టర్ ప్రాంప్ట్ మొబైల్ రెస్పాన్సివ్ ప్రాంప్ట్‌లు లో ఉంది. నిజమైన ఫోన్‌లో కూడా తనిఖీ చేయండి — పబ్లిష్ చేసిన URL తెరవండి, లేదా ప్రివ్యూ లింక్ పంచుకుని మీ ఫోన్‌లో తెరవండి.

ప్రశ్నలు