రియాక్టివ్ వెబ్ డిజైన్: అద్భుతంగా అనిపించే వెబ్ అనువర్తనాలను రూపొందించే రహస్యం

గత సంవత్సరంలో, కొంతమంది డెవలపర్లు ఉపయోగించే రెండు సూక్ష్మ పద్ధతులను నేను గమనించాను, అవి వెబ్ అనువర్తనాన్ని నెమ్మదిగా మరియు జంకీగా భావించకుండా అధిక రియాక్టివ్ మరియు పాలిష్ వరకు తీసుకుంటాయి.

రియాక్టివ్ వెబ్ డిజైన్: ఈ పద్ధతులు వాటికి పేరు అవసరమయ్యేంత ముఖ్యమైనవి అని నేను నమ్ముతున్నాను.

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

వెబ్ డెవలపర్లు మరియు ఫ్రేమ్‌వర్క్ రచయితలుగా, మేము నిర్మించే ప్రతిదానిలోనూ ఈ నమూనాలను డిఫాల్ట్‌గా మార్చడానికి మార్గాలను కనుగొనడం వెబ్‌లో UX మరియు గ్రహించిన పనితీరును మెరుగుపరచడానికి ప్రధానం.

టెక్నిక్ 1: అస్థిపంజరం తెరలతో తక్షణ లోడ్లు

బాగా ఉపయోగించినప్పుడు, ఈ సాంకేతికత దాదాపుగా గుర్తించబడదు, కానీ సైట్ యొక్క పనితీరుపై భారీ ప్రభావాన్ని చూపుతుంది.

ఆసక్తికరంగా, ఈ టెక్నిక్ దాదాపు అన్ని స్థానిక అనువర్తనాలచే ఉపయోగించబడుతుంది మరియు భయంకరమైన నెట్‌వర్క్‌లలో కూడా వాటిని చాలా రియాక్టివ్‌గా భావిస్తుంది, అయితే ఇది వెబ్‌లో ఎప్పుడూ ఉపయోగించబడదు!

ఈ విధంగా అవకాశం ఉంది!

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

ఫేస్బుక్ మీరు మొదట తెరిచినప్పుడు గ్రహించిన పనితీరును మెరుగుపరచడానికి అస్థిపంజరం తెరను ఉపయోగిస్తుంది

అస్థిపంజరం తెరలు కీలకమైన పనితీరు సాంకేతికత, ఎందుకంటే అవి అనువర్తనాలు చాలా వేగంగా అనుభూతి చెందుతాయి, వినియోగదారు ఆశ్చర్యపోతున్న క్షణాల సంఖ్యను నాటకీయంగా తగ్గిస్తాయి:

ఏం జరుగుతుంది? ఇది కూడా లోడ్ అవుతుందా? నేను దాన్ని సరిగ్గా నొక్కానా?

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

ఆండ్రాయిడ్‌లో స్వతంత్ర మోడ్‌లో హోమ్ స్క్రీన్ నుండి ఫ్లిప్‌కార్ట్.కామ్ యొక్క స్క్రీన్‌క్యాప్చర్ ప్రారంభించబడింది

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

app.jalantikus.com అస్థిపంజరం తెరల నమూనాను ఉపయోగిస్తుంది మరియు పరివర్తనాల్లో శీర్షికలు మరియు సూక్ష్మచిత్రాలను తిరిగి ఉపయోగిస్తుంది

అస్థిపంజరం తెరలతో సైట్‌లను పరీక్షిస్తోంది

సైట్‌లు ఈ పద్ధతిని ఎంత బాగా ఉపయోగిస్తాయో పరీక్షించడం సులభం: నెట్‌వర్క్‌ను సాధ్యమైనంత నెమ్మదిగా చేయడానికి Chrome నెట్‌వర్క్ ఎమ్యులేషన్‌ను ఉపయోగించండి, ఆపై సైట్ చుట్టూ క్లిక్ చేయండి. ఇది బాగా చేస్తుంటే, సైట్ మీ ఇన్‌పుట్‌కు చిత్తశుద్ధిగా మరియు ప్రతిస్పందిస్తుంది.

Chrome నెట్‌వర్క్ ఎమ్యులేషన్‌లో నెమ్మదిగా వేగం మద్దతు ఇస్తుంది

టెక్నిక్ 2: మూలకాలపై ముందే నిర్వచించిన పరిమాణాల ద్వారా “స్థిరమైన లోడ్లు”

మీరు వెబ్‌సైట్‌ను ఉపయోగించడానికి ప్రయత్నిస్తున్నప్పుడు ఎక్కడ తిరుగుతున్నారో మీకు తెలుసా? మీరు ఇప్పుడే ఒక కథనాన్ని చదవడానికి ప్రయత్నిస్తున్నారు మరియు వచనం చుట్టూ తిరుగుతూనే ఉందా? దాన్ని మనం “అస్థిర భారం” అని పిలుస్తాము మరియు దానిని అగ్నితో కాల్చాలి.

పేజీ లోడ్ అవుతున్నప్పుడు slate.com కంటెంట్ చాలా దూకుడుగా దూసుకుపోతుంది. మీరు నెమ్మదిగా ఉన్న నెట్‌వర్క్, ఎక్కువసేపు దూకుతుంది.

అస్థిర లోడ్లు వెబ్‌సైట్‌లతో సంభాషించడం కష్టతరం చేస్తాయి మరియు వాటిని అనుభూతి చెందుతాయి… అలాగే… అస్థిరంగా ఉంటాయి!

అస్థిర సైట్ను బ్రౌజ్ చేయడం ఎల్లప్పుడూ భూకంపం సమయంలో నడవడానికి ఎలా అనిపిస్తుందో నాకు గుర్తు చేస్తుంది

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

దీన్ని నివారించడానికి, పేజీలోని అన్ని ట్యాగ్‌లు అవి కలిగి ఉన్న చిత్రం యొక్క కొలతలు ముందుగానే కలిగి ఉండాలి.

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


ప్రకటనలకు కూడా ఇది వర్తిస్తుంది, అస్థిర లోడ్లు వచ్చినప్పుడు తరచుగా అపరాధి. సాధ్యమైన చోట, ఒక ప్రకటనను కలిగి ఉన్న ఒక డివిని సృష్టించండి మరియు మీ ప్రకటనలో ఈ ప్రకటన ఎంత పెద్దదిగా ఉంటుందో మీ ఉత్తమ అంచనాతో పరిమాణంగా సెట్ చేయండి.

అకస్మాత్తుగా దూకినప్పుడు మీరు కంటెంట్‌ను చదవడానికి స్థిరపడినందున అస్థిర లోడ్లు నెమ్మదిగా ఉన్న నెట్‌వర్క్‌లలో చెత్తగా ఉన్నాయని గమనించండి మరియు మీరు సురక్షితంగా ఉన్నారని మీరు ఎప్పటికీ ఖచ్చితంగా చెప్పలేరు.

అన్నిటినీ కలిపి చూస్తే

సాంప్రదాయ మరియు రియాక్టివ్ వెబ్ డిజైన్ మధ్య వ్యత్యాసాన్ని ప్రదర్శించడానికి నేను రియాక్టివ్.సర్జ్.ష్ వద్ద ఒక చిన్న డెమో సైట్‌ను నిర్మించాను.

సాంప్రదాయ వ్యాసం లోడింగ్

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

రియాక్టివ్ వెబ్ డిజైన్‌తో కథనాన్ని లోడ్ చేస్తోంది

రియాక్టివ్ డిజైన్‌తో లోడ్ తక్షణం అనిపిస్తుంది మరియు బ్యాక్ ఐకాన్ మరియు ఆర్టికల్ టైటిల్‌ను పలుసార్లు నొక్కేటప్పుడు సైట్ రియాక్టివ్‌గా ఉంటుంది

చుట్టి వేయు

నెట్‌వర్క్ నెమ్మదిగా ఉంటుంది, నెట్‌వర్క్‌లో పేజీ పరివర్తనాలు నిరోధించినప్పుడు మరియు పేజీలు ఎక్కువ కాలం పాటు దూకినప్పుడు వినియోగదారు అనుభవం అధ్వాన్నంగా మారుతుంది.

రియాక్టివ్ వెబ్ డిజైన్‌తో, నెమ్మదిగా మరియు బాధాకరమైన నెట్‌వర్క్‌లలో కూడా మా అనుభవాన్ని చిత్తశుద్ధిగా మరియు ప్రతిస్పందించేలా చేయవచ్చు (“రెస్పాన్సివ్ డిజైన్” పేరు ఇప్పటికే తీసుకోబడింది, ఓహ్!).

నిశ్చితార్థం మరియు రాబడి వంటి KPI లలో పనితీరు యొక్క ప్రభావంపై సంఘం నుండి డేటా గురించి వినడానికి నేను ఇష్టపడతాను!

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

మీకు దీని గురించి ఆలోచనలు ఉంటే, దయచేసి నాకు ట్వీట్ చేయండి @owencm, మరియు మీరు దీన్ని ఆస్వాదించినట్లయితే దయచేసి ఇవ్వండి!

పి.ఎస్ మొబైల్ పరికరంలో డెమో సైట్ రియాక్టివ్.సర్జ్.షుని పూర్తి కీర్తి కోసం చూసుకోండి.