మాస్టర్ మొబైల్ నావిగేషన్

విషయము

• పరిణామం
• బ్యాలెన్సింగ్ చట్టం
• నావిగేషన్ వ్యూహాలు
• దాన్ని దాచు
• దానిని కత్తిరించండి
• కుదించండి
• దాన్ని క్రమాన్ని మార్చండి
• దాన్ని కుదించండి
• దాన్ని మార్చండి
• దాన్ని వెల్లడించండి
• నిర్ణయం మీదే

ఈ వ్యాసం మొట్టమొదట .net మ్యాగజైన్ యొక్క 232 సంచికలో కనిపించింది - వెబ్ డిజైనర్లు మరియు డెవలపర్‌ల కోసం ప్రపంచంలోనే అత్యధికంగా అమ్ముడైన పత్రిక.

సైట్‌లోని ఒకరిని స్థానం నుండి స్థానానికి తరలించడం కంటే నావిగేషన్ చాలా ఎక్కువ చేస్తుంది; ఇది వినియోగదారు అనుభవాన్ని రూపొందిస్తుంది. స్మార్ట్ నావిగేషన్ మీ సైట్ యొక్క కంటెంట్, సేవలు మరియు సమర్పణల గురించి వినియోగదారు యొక్క అవగాహనను మెరుగుపరుస్తుంది, అయితే భాష, తెలియని ఎక్రోనింలు మరియు పరిభాషలు మీ వినియోగదారులను వారి లక్ష్యాల నుండి గందరగోళానికి గురిచేస్తాయి. బాగా అమలు చేయబడిన నావిగేషన్ మీ బ్రాండ్‌ను ప్రతిబింబిస్తుంది మరియు దాని విశ్వసనీయతను పెంచుతుంది, తగని నావిగేషన్ వైరుధ్యాన్ని సృష్టిస్తుంది మరియు అవిశ్వాసాన్ని పెంచుతుంది. సరళమైన, సరళమైన నావిగేషన్ వినియోగదారులు మీ వస్తువులను సులభంగా కనుగొనేలా చూడటం ద్వారా మీ అమ్మకాలను పెంచుతుంది మరియు కొనుగోలు చేయవచ్చు; గందరగోళ నావిగేషన్ బదులుగా మీ కస్టమర్ సేవ మరియు మద్దతు ఖర్చులను పెంచుతుంది.

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

పరిణామం

మొబైల్ వెబ్ మొదట రియాలిటీ అయినప్పుడు, ఈ నిర్దేశించని భూభాగంలోకి ప్రవేశించాల్సిన అవసరం ఉందని భావించిన కొద్ది కంపెనీలు - ఎక్కువగా విమానయాన సంస్థలు మరియు ఆర్థిక సంస్థలు - పూర్తిగా ప్రత్యేకమైన మొబైల్ వెబ్‌సైట్‌లను సృష్టించడం ద్వారా, తరచుగా ప్రత్యేకమైన కంటెంట్ మరియు నావిగేషన్‌తో. తరచుగా, ఈ సైట్‌లు మాతృ వెబ్‌సైట్ యొక్క ‘లైట్’ సంస్కరణకు, కంటెంట్ మరియు నావిగేషన్‌తో ‘ప్రయాణంలో’ అవసరమయ్యే పనులపై దృష్టి సారించాయి. ఈ సైట్‌లలో ఎక్కువ భాగం (ముఖ్యంగా హోమ్‌పేజీలు) పూర్తిగా నావిగేషన్: వ్యాపార ఆసక్తులు లేదా యుఎక్స్ జట్లు కీలకమైన పనులుగా భావించే వాటిని సాధించడానికి లింకుల జాబితాలు మరియు సాధారణ రూపాల జాబితాలు.

ఇది ఆ సమయంలో మంచి వ్యూహం. CSS- ఆధారిత లేఅవుట్‌లను నిర్వహించడానికి చాలా మొబైల్ వెబ్ బ్రౌజర్‌లు శక్తివంతమైనవి కావు మరియు HTML యొక్క ప్రాథమిక అంశాల కంటే WAP లేదా XHTML MP రూపంలో కొన్ని ఎక్కువ మద్దతు ఇచ్చాయి. ఈ పరికరాల్లో బ్రౌజ్ చేయడం బాధాకరమైనది, ఇది తరచుగా ఫోన్ నంబర్ ప్యాడ్, రాకర్ బటన్ లేదా స్క్రోల్ వీల్ ద్వారా సాధించబడుతుంది. మీరు ట్రెయో లేదా ఇలాంటి పరికరాన్ని కలిగి ఉండటానికి అదృష్టవంతులైతే, మీ మైనస్ స్క్రీన్‌లోని చిన్న లింక్‌లను క్లిక్ చేయడానికి మీరు మీ వేలు లేదా స్టైలస్‌ని ఉపయోగించవచ్చు.

ఇవన్నీ మొబైల్ పరికరంలో వెబ్‌ను నావిగేట్ చేయడం ఆనందించే చర్య కాదని చెప్పడం. అసమర్థ బ్రౌజర్‌లు మరియు దానితో పాటుగా నెమ్మదిగా మొలాసిస్ డేటా కనెక్షన్‌లను చూస్తే, ఏదో చూడటానికి వెబ్‌లోకి ‘హాప్’ చేయడం అసాధ్యం. ఖచ్చితంగా హోపింగ్ లేదు. కేవలం వేచి మరియు నిరాశ.

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

2007 లో ఐఫోన్ రావడంతో, మొబైల్ పరికరం నుండి వెబ్‌ను యాక్సెస్ చేయడం అంటే ఏమిటో మా భావన ఒక్కసారిగా మారిపోయింది. ఎక్కడా లేని విధంగా, ఆపిల్ వెంట వచ్చి, డెస్క్‌టాప్ లేదా ల్యాప్‌టాప్‌లో ఉన్నట్లుగా మొబైల్‌లో బ్రౌజింగ్ ప్రతి బిట్‌ను పూర్తిస్థాయిలో ఉండేలా చేయడం ద్వారా సాధారణ జ్ఞానాన్ని సవాలు చేసింది. అంతే కాదు, సరదాగా ఉండేది! (వేగంగా? బాగా, అంతగా లేదు. కనీసం ’07 లో తిరిగి రాలేదు.)

మొట్టమొదటి ఐఫోన్ ‘చిన్న’ తెరపై వెబ్‌లో మీ మార్గాన్ని నొక్కడం మరియు స్వైప్ చేయడం సాధ్యం చేసింది - కాదు, ఆనందించేది. రాబోయే నెలలు మరియు సంవత్సరాల్లో, వినియోగదారులు దృష్టి, పని-ఆధారిత సాంప్రదాయకంగా ‘మొబైల్’ బ్రౌజింగ్ నమూనా నుండి మరింత సాంప్రదాయకంగా ‘డెస్క్‌టాప్-ఇష్’కి మారడం ప్రారంభించారు. మరియు 2010 లో CSS3 మీడియా ప్రశ్నల ఆగమనంతో, జావాస్క్రిప్ట్-ఆధారిత ఉపాయాలు మరియు ప్రత్యామ్నాయ స్టైల్ షీట్‌లపై ఆధారపడకుండా అవి ప్రదర్శించబడే స్క్రీన్‌కు అనుగుణంగా ఉండే అనుకూల లేఅవుట్‌లను రూపొందించడం సాధ్యమైంది.

బ్యాలెన్సింగ్ చట్టం

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

నిజం ఏమిటంటే, వినియోగదారులు ఇకపై ‘లైట్’ మొబైల్ అనుభవంతో సంతృప్తి చెందరు, లేదా పెద్ద మానిటర్ కోసం ఉద్దేశించిన హార్డ్-టు-యూజ్ లేఅవుట్ ద్వారా స్వాగతం పలకడానికి మాత్రమే ‘పూర్తి సైట్‌ను వీక్షించండి’ లింక్ కోసం వేటాడాలని వారు కోరుకోరు. సాంప్రదాయ డెస్క్‌టాప్ వెబ్ ప్లాట్‌ఫామ్‌లలో వారు చేయగలిగిన ఏదైనా చేయగలరని వారు కోరుకుంటారు (మరియు మరింత ఎక్కువ). ఒకే, అనుకూల వెబ్ అనుభవానికి మద్దతు ఇవ్వడం మా ప్రయోజనాలలో ఉంది: ఒపెరా ఇటీవలే దాని US యూజర్ బేస్ లో 59 శాతం మొబైల్ మాత్రమే అని కనుగొంది. ఈజిప్ట్, బ్రెజిల్ మరియు దక్షిణాఫ్రికా వంటి ప్రదేశాలలో ఆ సంఖ్య ఎక్కువగా ఉంది మరియు ఇది ప్రపంచవ్యాప్తంగా పెరుగుతోంది.

వినియోగదారులు డెస్క్‌టాప్‌లో ఉన్నట్లే మొబైల్ పరికరంలో బ్రౌజ్ చేసే అవకాశం ఉందని మేము అనుకుంటే, చిన్న స్క్రీన్ గురించి 'తక్కువ' అవసరమని ఆలోచించడం మానేసి, రియల్ ఎస్టేట్ మరియు సామర్థ్యాలకు తగిన కంటెంట్, లేఅవుట్లు మరియు నావిగేషన్‌ను తయారు చేయడంపై దృష్టి పెడతాము. . అదే సమయంలో, డెస్క్‌టాప్ వినియోగదారుల గురించి మా ump హలను మేము పున it సమీక్షించాలి: మా కంటెంట్ ముసుగులో అదనపు అడ్డంగా దొరికిపోవడం వెబ్ డిజైన్ యొక్క గత విషయంగా మారాలా? మొబైల్ పరికరాలను ఉపయోగించే వారితో డెస్క్‌టాప్ వెబ్ వినియోగదారుల అవసరాలను సమతుల్యం చేసే సంతోషకరమైన మాధ్యమాన్ని మనం వెతకాలి.

నావిగేషన్ వ్యూహాలు

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

దాన్ని దాచు

మా మొదటి వ్యూహం పాత ‘మొబైల్ వెబ్’ శిబిరం నుండి దాని క్యూ తీసుకుంటుంది మరియు వినియోగదారులకు ‘కీ’ పనులను (UX బృందం గుర్తించినట్లుగా, ఎగువ నిర్వహణ లేదా ఇప్పటికే ఉన్న మొబైల్ సైట్ యొక్క వినియోగదారు పరీక్ష ద్వారా) సాధించగలదు. వినియోగదారులకు తక్కువ (లేదా కాదు) నావిగేషన్ ఇవ్వబడుతుంది మరియు వెబ్‌సైట్ యొక్క లక్షణాల ఉపసమితిని మాత్రమే యాక్సెస్ చేయవచ్చు. కొన్ని సందర్భాల్లో, రియల్ ఎస్టేట్ పరిరక్షణ కోసం నావిగేషన్‌ను తగ్గించడం లేదా తొలగించడం అనే నిర్ణయం తీసుకోబడుతుంది. మొబైల్ పరికరంలో అటువంటి వెబ్‌సైట్‌ను మాత్రమే అనుభవించే వినియోగదారులకు అవి ఫీచర్లు లేవని ఎప్పటికీ తెలియకపోవచ్చు, కాని బహుళ ప్లాట్‌ఫామ్‌లలో దీన్ని సందర్శించే వినియోగదారులు (ఇది పెరుగుతున్న ధోరణి) వారు వస్తువులను చూడలేనప్పుడు నిరాశకు గురయ్యే అవకాశం ఉంది యాక్సెస్ చేయడానికి ఉపయోగిస్తారు.

ప్రామాణికమైన ఉద్యోగాలు ఈ వ్యూహానికి మంచి ఉదాహరణ. సైట్ యొక్క ప్రధాన నావిగేషన్ అప్రమేయంగా దాచబడుతుంది మరియు బ్రౌజర్ మీడియా ప్రశ్నలకు మద్దతు ఇస్తే మరియు కనీసం 768px వెడల్పు ఉంటే ప్రదర్శించబడుతుంది:

/ * అప్రమేయంగా nav ని దాచు * / body> హెడర్ nav {display: none;} / *> = 768px * / @ మీడియా మాత్రమే స్క్రీన్ మరియు (కనిష్ట-వెడల్పు: 768px) {/ * nav ని మళ్ళీ చూపించు * / body> హెడర్ nav {display: block;}}

ఈ వ్యూహం వారి వినియోగదారులకు బాగా ఉపయోగపడుతుండగా, మొబైల్ వినియోగదారులు ఇప్పటికీ HTML ని డౌన్‌లోడ్ చేయమని బలవంతం చేస్తున్నారని గ్రహించడం చాలా ముఖ్యం. నిజమే, ఇది ఈ సందర్భంలో కొన్ని నావిగేషన్ లింకులు మాత్రమే - కానీ మీరు ఉపయోగించడం ప్రారంభించినప్పుడు ప్రదర్శన: ఏదీ లేదు మీ ఎక్కువ కంటెంట్ కోసం (ముఖ్యంగా చిత్రాలు) ఇది సైట్ యొక్క వేగం మీద, అలాగే మీ సైట్ ఎంత బ్యాండ్‌విడ్త్ వినియోగిస్తుందో దానిపై తీవ్ర ప్రభావాన్ని చూపుతుంది.

నేను చెప్పినట్లుగా, చిన్న-స్క్రీన్ పరికరం నుండి ఒక పనిని (ఉద్యోగాన్ని పోస్ట్ చేయడం వంటివి) పూర్తి చేయాలనుకునే తరచుగా వినియోగదారులకు ఈ వ్యూహం నిరాశ కలిగిస్తుంది. యాదృచ్ఛికంగా, ప్రామాణికమైన ఉద్యోగాల్లోని చాలా పేజీలు మొబైల్‌లో బాగా కనిపిస్తాయి మరియు పని చేస్తాయి; మీరు వాటి మధ్య నావిగేట్ చేయలేరు.

దానిని కత్తిరించండి

అనేక స్థాయి నావిగేషన్ ఐటెమ్‌లతో కూడిన పెద్ద నావిగేషన్ మెను కోసం సహేతుకమైన లేఅవుట్‌ను కనుగొనటానికి మీరు కష్టపడుతుంటే, మొబైల్ పరికరాల కోసం ప్రాధమిక వాటికి మాత్రమే లింక్‌ల సంఖ్యను తగ్గించడాన్ని మీరు పరిగణించవచ్చు. ఇది ప్రతి నావిగేషన్ ఐటెమ్‌లకు సంబంధిత ఉప-పేజీలకు ప్రాప్యతను అందించే సంబంధిత ల్యాండింగ్ పేజీని కలిగి ఉందని ass హిస్తుంది (దురదృష్టవశాత్తు, ఇది ఎల్లప్పుడూ అలా కాదు).

మునుపటి ఉదాహరణ మాదిరిగానే, ఈ వ్యూహం మీ చిన్న స్క్రీన్ వినియోగదారులకు అవసరమైన దానికంటే ఎక్కువ మార్కప్‌ను డౌన్‌లోడ్ చేయమని బలవంతం చేయడం ద్వారా పన్నును ఉంచుతుంది. ప్లస్ వైపు, మునుపటి ఉదాహరణలా కాకుండా, మీరు క్రాస్-ప్లాట్‌ఫాం వినియోగదారుని నిరాశపరిచే అవకాశం లేదు ఎందుకంటే ప్రాధమిక నావిగేషన్ ఎంపికలు స్థిరంగా ఉంటాయి.

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

ఒక ప్రయోగంలో భాగంగా, మైఖేల్ షార్నాగ్ల్ ఒక నావిగేషన్ స్కీమ్‌ను రూపొందించాడు, దీనిలో అతను ప్రధాన నావిగేషన్ లింక్‌లను ప్రాధాన్యత ప్రకారం మూడు విభిన్న సమూహాలుగా వర్గీకరించాడు, మరింత రియల్ ఎస్టేట్ అందుబాటులోకి వచ్చినప్పుడు క్రమంగా మరిన్ని వస్తువులను జోడించాడు. చిన్న స్క్రీన్‌లలో, అతను జావాస్క్రిప్ట్‌పై ఆధారపడకుండా అదనపు నావిగేషన్ అంశాలను టోగుల్ చేయడానికి వినియోగదారులను అనుమతించే ‘మరిన్ని’ లింక్‌ను ప్రదర్శిస్తాడు (జావాస్క్రిప్ట్-తక్కువ డ్రాప్-డౌన్ మాదిరిగానే నేను త్వరలో చర్చిస్తాను).

కుదించండి

మీ సైట్ యొక్క నావిగేషన్ సాపేక్షంగా క్లుప్తంగా ఉంటే, మీ నావిగేషన్ అంశాల లేఅవుట్ మరియు పరిమాణాన్ని సర్దుబాటు చేయడం ద్వారా మీరు తప్పించుకోగలుగుతారు. ‘సక్సింక్ట్’ అనేది స్పష్టంగా అభిప్రాయానికి సంబంధించిన అంశం, కాబట్టి మీ నావిగేషన్ తగ్గినప్పుడు కూడా ఎంత స్థలాన్ని ఆక్రమిస్తుందో మీరు తెలుసుకోవాలి. వారు ప్రేరణ కోసం వెతుకుతున్నారా లేదా మొబైల్ నావ్‌లో ఒక భాగాన్ని వ్రాయకపోతే, వినియోగదారులు నావిగేషన్‌ను తనిఖీ చేసే ఉద్దేశ్యంతో సాధారణంగా మీ సైట్‌కు రారు.

ఈ అన్ని వ్యూహాల మాదిరిగానే, క్లిక్ చేయగల పరిమాణాన్ని నిర్వహించడం టచ్‌స్క్రీన్‌లలో కీలకం ఎందుకంటే వేళ్లు మౌస్ పాయింటర్ కంటే చాలా తక్కువ ఖచ్చితమైనవి. తప్పుగా నొక్కే అవకాశాన్ని తగ్గించడానికి తగినంత లక్ష్యాలను (కనిష్టంగా 44px చదరపు) అందించాలని నిర్ధారించుకోండి మరియు మీ వినియోగదారులకు నావిగేషన్ అంశాల మధ్య కొద్దిగా శ్వాస గదిని ఇవ్వండి.

/ * = 720px * / @ మీడియా (గరిష్ట-వెడల్పు: 720px) {/ * జాబితాను సరళీకరించండి & అంశాలను ఖాళీ చేయండి * /. మెయినావ్ లి {డిస్ప్లే: ఇన్లైన్-బ్లాక్; లైన్-ఎత్తు: 1 ఎమ్; మార్జిన్: 0 .5em .5em 0;} / * లింక్‌లను పెద్దదిగా & నొక్కండి * /. Mainnav li a {border-radius: 1em; font-size: 1em; padding: .5em .75em;}}.

దాన్ని క్రమాన్ని మార్చండి

ఇప్పుడు చాలా సంవత్సరాలుగా, వెబ్ ప్రమాణాల న్యాయవాదులు, SEO కన్సల్టెంట్స్ మరియు ప్రాప్యత నిపుణులు సోర్స్ ఆర్డర్ పరంగా కంటెంట్‌ను మొదటి స్థానంలో ఉంచడానికి అనుకూలంగా వాదించారు. అన్నింటికంటే, మీరు CSS ఉపయోగిస్తుంటే, మీ నావిగేషన్‌ను పేజీ ఎగువకు తరలించడం చాలా బ్రీజ్.

ఈ విధానం యొక్క ప్రయోజనం ఏమిటంటే ఇది మీ వినియోగదారుల కోసం మరియు సెర్చ్ ఇంజన్ సాలెపురుగుల కోసం మీ పేజీ యొక్క ‘మాంసం’ కు తక్షణ ప్రాప్యతను అందిస్తుంది. యాదృచ్ఛికంగా, ఇది మొబైల్ వినియోగదారులకు కూడా చాలా సహాయకారిగా ఉంటుంది, ఎందుకంటే వారు మీ సైట్ కోసం వారు నావిగేషన్ ఎంపికలన్నింటినీ తెలుసుకోవలసిన అవసరం లేదు. కంటెంట్ మ్యాగజైన్ ఈ సరళమైన విధానాన్ని వినియోగదారుడు కోరుకున్నప్పుడు నావికి తక్షణ ప్రాప్యతను అందించడానికి పేజీ ఎగువన ఉన్న ‘నావిగేషన్‌కు దాటవేయి’ లింక్‌తో కచేరీలో ఉపయోగిస్తుంది.

/ *> = 768px * / @ మీడియా స్క్రీన్ మరియు (కనిష్ట-వెడల్పు: 48 ఎమ్) {/ * “దాటవేయి” దాచు * /. గో-నవ్ {ఎడమ: -1000 ఎమ్;} / * నవ్‌ను తరలించండి పైకి * / # సైట్-నవ్ {స్థానం: సంపూర్ణ; టాప్: -5 ఎమ్; వెడల్పు: 100%; z- ఇండెక్స్: 5;}}

మీ సైట్ యొక్క వినియోగం మరియు ప్రాప్యతను పెంచడానికి మూల ఆర్డర్ స్వాతంత్ర్యం చాలా ఉపయోగపడుతుంది. మీరు సంపూర్ణ స్థానంతో సుఖంగా ఉన్నంత వరకు, దాన్ని అమలు చేయడం చాలా సవాలు కాదు. మీ నావిగేషన్ జాబితా చివరలో మీరు ‘బ్యాక్ టు టాప్’ లింక్‌ను కూడా చేర్చారని నిర్ధారించుకోండి, వినియోగదారులు పేజీ యొక్క పైభాగానికి కూడా సులభంగా తిరిగి వెళ్లవచ్చు.

యాంకర్ రిఫరెన్స్‌కు పేజీని క్రిందికి దూకడం కొద్దిగా జార్జింగ్ అవుతుంది. కానీ కొన్ని జావాస్క్రిప్ట్ సహాయంతో, మీరు వినియోగదారుని పేజీని పైకి లేదా క్రిందికి స్క్రోల్ చేయడానికి ‘స్కిప్ టు’ లింక్‌లపై క్లిక్ హైజాక్ చేయవచ్చు. J క్వెరీ కోసం కార్ల్ స్వీడర్‌బెర్గ్ యొక్క సున్నితమైన స్క్రోల్ ప్లగ్-ఇన్ ఈ ప్రయోజనం కోసం నాకు విశ్వసనీయంగా సేవలు అందించింది.

దాన్ని కుదించండి

మొబైల్‌లో పెద్ద నావిగేషన్ జాబితాలను నిర్వహించడానికి మరింత ప్రాచుర్యం పొందిన విధానాలలో ఒకటి డ్రాప్-డౌన్ మెను. ఈ ప్రత్యేకమైన UI నిర్మాణం కొన్ని రకాలుగా సాధించవచ్చు, వీటిలో ప్రతి దాని స్వంత డిపెండెన్సీల సమితి ఉంటుంది. సరైనదాన్ని ఎంచుకోవడానికి, మెను విస్తరించినప్పుడు పేజీ కంటెంట్‌ను క్రిందికి నెట్టాలా వద్దా అని మీరు ముందుగా నిర్ణయించాలి.

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

/ * అప్రమేయంగా nav ని దాచు * / # nav .nav_menu {display: block; height: 0; overflow: Hidden;} / * JS. ఓపెన్ క్లాస్ * / # nav.open .nav_menu {ఎత్తు: ఆటో;}

ఆసక్తికరంగా, జావాస్క్రిప్ట్ లేకుండా, స్టార్‌బక్స్ టాబ్‌గా ‘స్కిప్ టు’ లింక్‌ను ఉపయోగించినప్పటికీ నావ్‌ను తెరిచి ఉంచుతుంది. ఇది జావాస్క్రిప్ట్ లేకుండా అదే UI చికిత్సను సాధించగలదు : లక్ష్యం నకిలీ-తరగతి సెలెక్టర్, నికోలస్ కళాశాల కాబోయే విద్యార్థి సైట్‌లో చేసినట్లు. నికోలస్ కళాశాల స్వచ్ఛమైన CSS సాంకేతికత గురించి మరింత తెలుసుకోవడానికి, ఇక్కడ చూడండి.

నికోలస్ కాలేజ్ సైట్, అలాగే జావాస్క్రిప్ట్-తక్కువ డ్రాప్‌డౌన్ యొక్క అద్భుతమైన ఉదాహరణ, ఈ UI భాగం విషయానికి వస్తే ఇతర ఎంపికను చూపిస్తుంది: సోర్స్ ఆర్డర్ స్వాతంత్ర్యం. విషయ సూచిక మాదిరిగానే, ఈ సైట్ దాని అన్ని నావిగేషన్‌ను పేజీ దిగువన నిర్వహిస్తుంది మరియు లేఅవుట్ సర్దుబాటు చేస్తున్నప్పుడు దాన్ని తిరిగి అమర్చుతుంది. వినియోగదారు మద్దతిచ్చే చిన్న స్క్రీన్ పరికరంలో ఉన్నప్పుడు: లక్ష్యం, ప్రాధమిక నావిగేషన్ లింకులు పైకి కదులుతాయి మరియు రివీల్‌ను ప్రేరేపించే ‘దాటవేయి’ లింక్‌ను వినియోగదారు క్లిక్ చేసే వరకు దాచబడుతుంది.

శరీరం: కాదు (: లక్ష్యం) #nav {/ * ఈ శైలులు వర్తింపజేస్తే: లక్ష్యం మరియు: అర్థం చేసుకోలేదు (మరియు శరీరం గుర్తించబడదు, అయితే) * /}

దాన్ని మార్చండి

మొబైల్ పరికరాల్లో నావిగేషన్ తగ్గిపోవడానికి మరొక ప్రసిద్ధ విధానం, దీనిని a గా మార్చడం ఎంచుకోండి మూలకం. ఈ విధానం యొక్క ప్రయోజనం ఏమిటంటే ఇది నావిగేషన్‌కు అవసరమైన స్థలాన్ని తీవ్రంగా తగ్గిస్తుంది, అదే సమయంలో వినియోగదారుకు తెలిసిన రూపాన్ని మరియు అనుభూతిని కొనసాగిస్తుంది. ఇది నావిగేషన్ అంశాల సంఖ్య లేదా లోతుపై ఎటువంటి పరిమితిని ఉంచదు. ఇబ్బంది ఏమిటంటే, ఈ పథకాన్ని ఉపయోగించటానికి ఎ) జాబితా-ఆధారిత నావ్‌ను జావాస్క్రిప్ట్‌ను ఉపయోగించి ఎంపికగా మార్చడం లేదా బి) హార్డ్-కోడెడ్‌ను నిర్వహించడం అవసరం ఎంచుకోండి మీ నావిగేషన్ కోసం జాబితాకు అదనంగా.

ఫైవ్ సింపుల్ స్టెప్స్ ఈ టెక్నిక్ కోసం తరువాతి విధానాన్ని ఉపయోగిస్తాయి. మీడియా ప్రశ్నల ఆధారంగా ప్రదర్శించబడే స్టైల్ షీట్ నిర్వహిస్తుంది.

/ * = 767px * / @ మీడియా మాత్రమే స్క్రీన్ మరియు (గరిష్ట-వెడల్పు: 767px) {/ * జాబితాను దాచండి * / nav ఎంచుకోండి {display: none;} / * ఎంచుకున్న * / nav ఎంపిక {చూపించు display: block;}} / * = 767px * / @ మీడియా మాత్రమే స్క్రీన్ మరియు (కనిష్ట-వెడల్పు: 768px) {/ * జాబితాను చూపించు * / nav ఎంచుకోండి {display: block;} / * selectnav ని దాచు {display: none;} select ఎంచుకోండి

మీరు చేర్చాలని నిర్ణయించుకుంటే a ఎంచుకోండి జావాస్క్రిప్ట్‌తో డైనమిక్‌గా సృష్టించడం కంటే మీ మార్కప్‌లో, దాన్ని కలిగి ఉన్న ఫారమ్‌ను సమర్పించడానికి మీరు ఒక బటన్‌ను చేర్చాల్సి ఉంటుంది (మరియు దారి మళ్లింపును నిర్వహించడానికి కొన్ని సర్వర్-సైడ్ కోడ్‌ను కలిగి ఉండాలి) - ట్రిగ్గర్ చేయడానికి అందుబాటులో ఉండటానికి మీరు JS పై ఆధారపడలేరు పేజీ మార్పు.

మీకు ఆ రకమైన ఇబ్బంది అక్కరలేదు, మీరు ఉత్పత్తి చేయడం మంచిది ఎంచుకోండి జావాస్క్రిప్ట్ ఉపయోగించి మార్కప్‌లోని జాబితా నుండి డైనమిక్‌గా. మార్పు ఈవెంట్‌ను నిర్వహించడానికి జావాస్క్రిప్ట్ అందుబాటులో ఉందని మీకు తెలుసు. జాబితా నుండి ఎంచుకున్న మార్పిడిని నిర్వహించడానికి టినినావ్ మరియు రెస్పాన్సివ్ మెనూ రెండు (చాలా వాటిలో) జావాస్క్రిప్ట్ ఎంపికలు.

దాన్ని వెల్లడించండి

IOS లో పాత్ మరియు స్పారో మరియు వెబ్‌లోని ఫేస్‌బుక్ వంటి అనువర్తనాల ద్వారా ప్రాచుర్యం పొందిన ‘స్లైడ్ టు రివీల్’ నావ్ ట్రీట్‌మెంట్ సంభావ్యతను చూపించే చివరి మొబైల్ నావిగేషన్ ఉదాహరణ.

ఫేస్బుక్ యొక్క మొబైల్ సైట్లో, నావిగేషన్ ఒక డివి వర్గీకరించబడింది mSideArea మరియు ప్రధాన కంటెంట్ గుర్తించబడిన ఒక డివిలో ఉంటుంది పేజీ. ఈ రెండు డివిలు గుర్తించబడిన బాహ్య డివిలో ఉంటాయి వీక్షణపోర్ట్. ఈ బాహ్య విభజన సాపేక్షంగా ఒక స్థాన సందర్భాన్ని సృష్టించడానికి ఉంచబడుతుంది .mSideArea, ఇది ఖచ్చితంగా ఉంచబడుతుంది మరియు వెడల్పు ఇవ్వబడుతుంది 260 పిక్స్‌ మరియు అదే మొత్తాన్ని ప్రతికూల ఎడమ ఆఫ్‌సెట్ వీక్షణ నుండి తరలించడానికి; # పేజీ ఆఫ్‌సెట్‌లు లేకుండా సాపేక్షంగా ఉంచబడుతుంది.

# వీక్షణపోర్ట్, # పేజీ {స్థానం: సాపేక్ష;}. mSideArea {వెడల్పు: 260px; స్థానం: సంపూర్ణ; ఎడమ: 60260px;}

యొక్క తరగతిని జోడించడం ద్వారా రివీల్ సాధించబడుతుంది సైడ్‌షోవింగ్ కు శరీరం మూలకం. ఈ తరగతి యొక్క అదనంగా ప్రేరేపిస్తుంది # పేజీ యొక్క ఎడమ ఆఫ్‌సెట్‌ను స్వీకరించడానికి 260 పిక్స్‌ (పేజీ కంటెంట్‌ను కుడి వైపుకు మార్చడం) మరియు సెట్ చేస్తుంది .mSideAreaయొక్క ఎడమ ఆఫ్‌సెట్ తిరిగి 0, దానిని కదిలిస్తుంది 260 పిక్స్‌ ఎడమ వైపున ఖాళీ స్థలం # పేజీ.

.సైడ్‌షోవింగ్ # పేజి {ఎడమ: 260 పిక్స్‌;}. సైడ్‌షోవింగ్ .ఎమ్‌సైడ్ ఏరియా {ఎడమ: 0;}

ఇది ఖచ్చితంగా కోడ్ యొక్క చాలా తెలివైన పైస్. మరియు, మీరు దీన్ని కొద్దిగా స్లింకర్ చేయాలనుకుంటే, CSS3 పరివర్తనను జోడించండి:

# పేజీ, .mSideArea {/ * ఉపసర్గ సంస్కరణలను ఇక్కడ చొప్పించండి * / పరివర్తనం: ఎడమ .5 సె;}

ఫేస్బుక్ యొక్క విధానం తరగతిని టోగుల్ చేయడంపై ఆధారపడి ఉంటుంది కాబట్టి, ఇది జావాస్క్రిప్ట్ మీద ఆధారపడి ఉంటుంది. కానీ మీరు ఉపయోగించలేని కారణం లేదు : లక్ష్యం ఇదే విధమైన ప్రభావాన్ని సాధించడానికి సూడో-క్లాస్ (నికోలస్ కాలేజీ నియమించినట్లు).

నిర్ణయం మీదే

మీరు మీ డిజైన్లను చిన్న స్క్రీన్‌లకు అనుగుణంగా మార్చాలని చూస్తున్నప్పుడు మీకు ఆసక్తికరమైన నావిగేషన్ ఎంపికలు అందుబాటులో ఉన్నాయి. ప్రతి వ్యూహానికి దాని స్వంత లాభాలు ఉన్నాయి, అలాగే సోర్స్ ఆర్డర్, మార్కప్, CSS మరియు / లేదా జావాస్క్రిప్ట్ మద్దతు రూపంలో డిపెండెన్సీలు ఉన్నాయి. వెండి బుల్లెట్ లేదని గుర్తుంచుకోండి; ప్రతి ప్రాజెక్ట్ భిన్నంగా ఉంటుంది మరియు ప్రతి ప్రాజెక్ట్ అవసరాలు భిన్నంగా ఉంటాయి. మీ కంటెంట్ మరియు మీ వినియోగదారు లక్ష్యాలను తీవ్రంగా పరిశీలించడం ద్వారా, అయితే, మీరు చాలా సరిఅయిన వ్యూహాన్ని గుర్తించగలుగుతారు.

రచయిత యొక్క గమనిక: మొబైల్ నావిగేషన్ స్ట్రాటజీల యొక్క జీవన సంకలనాన్ని సృష్టించిన మరియు నిర్వహించినందుకు బ్రాడ్ ఫ్రాస్ట్‌కు ధన్యవాదాలు చెప్పాలనుకుంటున్నాను. మీరు దీన్ని ఇక్కడ చూడవచ్చు.

క్రియేటివ్ బ్లాక్‌లో మొబైల్ వెబ్‌సైట్ రూపకల్పన కోసం 20 అనుకూల చిట్కాలను కనుగొనండి.