ప్రతిస్పందించే వెబ్ డిజైన్ కోసం 50 అద్భుతమైన సాధనాలు

రచయిత: Monica Porter
సృష్టి తేదీ: 17 మార్చి 2021
నవీకరణ తేదీ: 17 మే 2024
Anonim
అద్భుతమైన UI డిజైన్‌లను రూపొందించడానికి 50 ఉచిత సాధనాలు మరియు వనరులు
వీడియో: అద్భుతమైన UI డిజైన్‌లను రూపొందించడానికి 50 ఉచిత సాధనాలు మరియు వనరులు

విషయము

ఈథన్ మార్కోట్ తన "రెస్పాన్సివ్ వెబ్ డిజైన్" మరియు అతని అత్యధికంగా అమ్ముడైన పుస్తకం రెండింటిలోనూ పరిచయం / సృష్టించినట్లుగా, ఒక సైట్‌ను ప్రతిస్పందించడానికి ఒకరికి మూడు అంశాలు అవసరం:

  1. సౌకర్యవంతమైన / ద్రవ గ్రిడ్
  2. ప్రతిస్పందించే చిత్రాలు
  3. మీడియా ప్రశ్నలు

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

ప్రారంభించడానికి సాధనాలు

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

01. ప్రతిస్పందించే వెబ్ డిజైన్ స్కెచ్ షీట్లు

జెరెమీ పి ఆల్ఫోర్డ్ రాసిన ఈ ప్రతిస్పందించే స్కెచ్ షీట్ల సెట్, విభిన్న తీర్మానాల్లో పేజీ విభాగాలు ఎలా మారుతుందో మ్యాపింగ్ చేయడం ప్రారంభించడానికి గొప్ప ప్రారంభ స్థానం.


02. రెస్పాన్సివ్ డిజైన్ స్కెచ్‌బుక్

మీరు మీ స్కెచ్‌లన్నింటినీ ఒకే చోట ఉంచడానికి ఇష్టపడితే, మీరు యాప్ స్కెచ్‌బుక్ సంస్థ 50 ప్రతిస్పందించే స్కెచ్ షీట్‌ల వైర్-బౌండ్ పుస్తకాన్ని పరిగణించాలనుకోవచ్చు.

03. ప్రతిస్పందించే వైర్‌ఫ్రేమ్‌లు

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


04. బహుళ-పరికర లేఅవుట్ నమూనాలు

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

05. స్టైల్ టైల్స్

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

సౌకర్యవంతమైన / ద్రవ గ్రిడ్ కోసం సాధనాలు

ముందే చెప్పినట్లుగా, ప్రతిస్పందించే రూపకల్పనకు అవసరమైన మొదటి భాగం సౌకర్యవంతమైన / ద్రవ గ్రిడ్.కిందివి ఇప్పటికే ముందే నిర్మించబడ్డాయి: మీరు వాటిని డౌన్‌లోడ్ చేసుకోవాలి మరియు మీరు త్వరగా మరింత ప్రతిస్పందించే సైట్‌కు వెళ్తారు.


06. గోల్డెన్ గ్రిడ్ వ్యవస్థ

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

07. ఫోల్డి 960

పారావెల్, ఇంక్‌లోని ప్రతిభావంతులైన జెంట్లు వారి ప్రతిస్పందించే ప్రాజెక్టులకు ప్రాతిపదికగా ఉపయోగించే సవరించిన 960.gs గ్రిడ్‌ను విడుదల చేశారు.

08. సింపుల్ గ్రిడ్

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

09. 1140px CSS గ్రిడ్

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

10. కాలమ్ CSS గ్రిడ్ వ్యవస్థ

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

11. సెమాంటిక్ గ్రిడ్ వ్యవస్థ

సాస్ మరియు తక్కువ వంటి ముందే ప్రాసెస్ చేయబడిన CSS పొడిగింపులు మరింత ప్రాచుర్యం పొందాయి, మరియు టైలర్ టేట్ యొక్క సెమాంటిక్ గ్రిడ్ వ్యవస్థ ఈ గ్రిడ్ వ్యవస్థలో గరిష్ట ప్రభావానికి వాటిని ఉపయోగిస్తుంది, ఇది అనవసరమైన తరగతులు లేదా అంశాలను ఉపయోగించదని పేర్కొంది. Coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ వద్ద మరింత చదవండి.

12. సుసీ

సెమాంటిక్ గ్రిడ్ వ్యవస్థ వలె ఆడ్బర్డ్ యొక్క SUSY అదనపు మార్కప్ లేదా ప్రత్యేక తరగతులను ఉపయోగించని గ్రిడ్ వ్యవస్థను సృష్టించింది, కాని SUSY సాస్ (మరియు దాని పొడిగింపు, కంపాస్) యొక్క వినియోగదారులను మాత్రమే లక్ష్యంగా పెట్టుకుంది.

13. గ్రిడ్‌పాక్

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

14. గ్రిడ్సెట్

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

15. RWD కోసం మంచి ఫోటోషాప్ గ్రిడ్

ఇలియట్ జే స్టాక్స్ పాత 960 పిక్స్ డి ఫాక్టో గ్రిడ్ ప్రమాణాన్ని వదిలివేసి, బదులుగా 1000 పిక్స్ బేస్ నుండి పనిచేయాలని ప్రతిపాదించింది, అన్ని శాతం లెక్కలను పని చేయడం సులభం చేస్తుంది. మీరు అంగీకరిస్తే, మీతో పనిచేయడం ప్రారంభించడానికి అతను PSD ని తయారుచేశాడు.

16. ద్రవ గ్రిడ్లు

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

17. రెస్పాన్సివ్ కాలిక్యులేటర్

శాతానికి కాలిక్యులేటర్‌కు మరో పిక్సెల్‌లు, కానీ స్టూ రాబ్సన్ రాసిన ఇది మీ కోసం అన్ని CSS నియమాలను రూపొందించడం ద్వారా ఇతరులకన్నా ఒక అడుగు ముందుకు వెళుతుంది, అంటే మీరు వాటిని మీ స్టైల్‌షీట్స్‌లో కాపీ చేసి పేస్ట్ చేయవచ్చు.

ప్రతిస్పందించే చిత్రాల సాధనాలు (మరియు వచనం)

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

18. ప్రతిస్పందించే చిత్రాలు

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

19. అనుకూల చిత్రాలు

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

20. సెంచా.యో ఎస్ఆర్సి (గతంలో టినిస్ర్క్)

సెన్చా క్లౌడ్ సేవను అందిస్తుంది, ఇది హోస్ట్ చేసిన చిత్రాల యొక్క ఆప్టిమైజ్ చేసిన సంస్కరణలను పరికరం యొక్క అభ్యర్థన కోసం పంపుతుంది. దీన్ని ఎలా ఉపయోగించాలో తెలుసుకోవడానికి, docs.sencha.com/io/src/ చూడండి.

21. ఫిట్‌టెక్స్ట్

పారావెల్, ఇంక్ నుండి వచ్చిన మరొక రత్నం ఫిట్‌టెక్స్ట్.జెస్, ఇది డిజైన్ మరియు పరికరానికి హెడ్‌లైన్ వెబ్ రకాన్ని ప్రతిస్పందించేలా చేయడానికి j క్వెరీ ప్లగ్-ఇన్. వివరాల కోసం trentwalton.com/2011/05/10/fit-to-scale/ చూడండి.

22. స్లాబ్టెక్స్ట్

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

మీడియా ప్రశ్నలకు సాధనాలు

వేర్వేరు పరికరాలు, ద్రవ గ్రిడ్ మరియు ద్రవ చిత్రాల కోసం మీ లేఅవుట్ ఎలా మారబోతోందనే దాని గురించి మీకు ఇప్పుడు ఒక ఆలోచన ఉంది, పేజీ యొక్క అంశాలను ప్రతిస్పందన స్థితికి మార్చడానికి మీకు మీడియా ప్రశ్నలు అవసరం.

23. స్పందించండి. Js

ప్రతిస్పందించే డిజైన్‌తో ఉన్న ఒక సమస్య ఏమిటంటే మీడియా ప్రశ్నలను చదవలేని బ్రౌజర్‌లు వెనుకబడిపోతాయి. ఇది మీ లక్ష్య ప్రేక్షకులతో సమస్య కాకపోవచ్చు, కాని పాత బ్రౌజర్‌లలో వినియోగదారులను చేర్చడం ఇప్పటికీ మంచి పద్ధతి. Respond.js, స్కాట్ జెహ్ల్ చేత, కనిష్ట-వెడల్పు మరియు గరిష్ట-వెడల్పు లక్షణాలకు మాత్రమే మద్దతు ఇస్తుంది.

మరింత తెలుసుకోవడానికి filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ చూడండి.

24. CSS3-Mediaqueries.js

వౌటర్ వాన్ డెర్ గ్రాఫ్ చేత CSS3-Mediaqueries.js, అన్ని రకాల మీడియా ప్రశ్నలను సమర్థవంతంగా పరీక్షించడానికి మరియు వర్తింపజేయడానికి IE మరియు ఇతర బ్రౌజర్‌ల పాత సంస్కరణలను అనుమతిస్తుంది.

25. అడాప్ట్.జెస్

అసలు 960.gs గ్రిడ్ వ్యవస్థ రచయిత నాథన్ స్మిత్, బ్రౌజర్ కొలతలు గుర్తించి, అవసరమైన స్టైల్షీట్లను మాత్రమే అందించే స్క్రిప్ట్ అయిన Adapt.js ను వ్రాసారు - మీడియా ప్రశ్నల వలె కానీ మీడియా ప్రశ్నలు లేకుండా, ఇది పాత బ్రౌజర్‌లలో కూడా పనిచేస్తుంది.

26. కేటగిరిజర్

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

ప్రతిస్పందించే డిజైన్ (మరియు మొబైల్) బాయిలర్‌ప్లేట్లు

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

27. 320 మరియు పైకి

ఆండీ క్లార్క్ యొక్క 320 మరియు అప్ మొబైల్-మొదటి బాయిలర్‌ప్లేట్, ఇది తక్కువ మరియు బూట్‌స్ట్రాప్ వంటి అనేక ఇతర ఆధునిక వెబ్ డిజైన్ సాధనాలతో అనుసంధానించబడుతుంది (# 30 చూడండి). సైట్‌ను త్వరగా పొందడానికి మరియు వేగంగా నడపడానికి ఇది తేలికైన మరియు చురుకైన మార్గం. ఆండీతో మా ఇంటర్వ్యూను కూడా చూడండి, దీనిలో అతను క్రొత్త సంస్కరణ గురించి మరింత చెబుతాడు.

28. గ్రిడ్లెస్

గ్రిడ్లెస్ అనేది HTML5 మరియు CSS3 బాయిలర్‌ప్లేట్, ఇది టైపోగ్రఫీ మరియు కాల్చిన క్రాస్ బ్రౌజర్ అనుకూలతపై దృష్టి సారించి, మీ ప్రతిస్పందించే డిజైన్లకు ఆధారం.

29. అస్థిపంజరం

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

30. బూట్స్ట్రాప్

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

ప్లగిన్లు, షిమ్‌లు మరియు పాలిఫిల్స్

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

31. ప్రతిస్పందించే ప్లగిన్

మారియోస్ లుబ్లిన్స్కి ఒక WordPress ప్లగ్-ఇన్ వ్రాసాడు, అది ప్రస్తుత WP థీమ్‌ను ప్రతిస్పందించేదిగా మారుస్తుందని హామీ ఇచ్చింది. ఈ రచన యొక్క సమయం వలె విడుదల చేయనందున ఇది ఎలా పనిచేస్తుందో నాకు ఇంకా తెలియదు, కానీ అది దాని వాగ్దానానికి అనుగుణంగా ఉంటే అది చాలా ఉపయోగకరంగా ఉండాలి.

32. పడగొట్టండి

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

33. మీడియా టేబుల్

మార్కో పెగోరారో యొక్క j క్వెరీ ప్లగ్ఇన్, మీడియా టేబుల్, చిన్న స్క్రీన్ పరికరాల్లో పెద్ద డేటా పట్టికలను ఎలా ప్రదర్శించాలో, ప్రతిస్పందించే నిలువు వరుసలను తయారు చేయడం మరియు తగిన చోట షో / దాచు టోగుల్‌ను జోడించడం వంటి సమస్యలను పరిష్కరించడంలో మీకు సహాయపడటానికి Respond.js తో పనిచేస్తుంది.

"పరీక్ష, పరీక్ష: 1-2-3 ..."

ప్రతిస్పందించే వర్క్‌ఫ్లో యొక్క మరొక అంశం ఏమిటంటే, మీ లక్ష్య పరికరాలు మరియు తీర్మానాలను తెలుసుకోవడం మరియు వాటిలో పరీక్షించడం.

34. పున ize పరిమాణం మై బ్రౌజర్

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

35. ప్రతిస్పందించే పిక్స్

రెమి షార్ప్ నిర్మించిన resizeMyBrowser, responseppx వంటివి మీ పేజీలను ఒక విండోలో లోడ్ చేస్తాయి, అక్కడ మీ మీడియా ప్రశ్నలు ఎంత బాగా కాల్పులు జరుపుతున్నాయో మరియు డిజైన్‌లో బ్రేక్‌పాయింట్లు ఎక్కడ ఉన్నాయో తెలుసుకోవడానికి వెడల్పు మరియు ఎత్తును పరీక్షించవచ్చు.

36. రెస్పాన్సివ్ డిజైన్ టెస్టింగ్

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

37. ప్రతిస్పందన

ఒక URL ను ఎంటర్ చెయ్యండి మరియు క్రూరమైన రోబోటిక్ సామర్థ్యంతో - ఇది చాలా సాధారణ పరికర పరిమాణాలలో ఎలా ప్రదర్శించబడుతుందో ప్రతిస్పందన మీకు చూపుతుంది. టామా పగ్స్లీ మరియు ఆండీ హోవీ దీనికి కారణం.

38. రెస్పాన్సివ్.ఐస్

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

39. Screenqueri.es

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

40. ఆప్టస్

బహుళ నిర్వచించిన పరిమాణాలలో సైట్‌లను పరీక్షించడానికి మరొక అనువర్తనం, కానీ ఆప్టస్ మాక్-స్థానిక. ఇది Mac App Store ద్వారా లభ్యత, మరియు స్థానికంగా ఉండటం సులభం స్క్రీన్‌షాట్‌లు మరియు ఆఫ్‌లైన్ మద్దతు వంటి అదనపు లక్షణాలను తెస్తుంది.

41. రెస్పాన్సివ్ డిజైన్ బుక్‌మార్క్‌లెట్

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

42. రెస్పాన్సివ్ డిజైన్ టెస్ట్ బుక్‌మార్క్‌లెట్

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

43. స్క్రీన్‌ఫ్లై

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

44. మీడియా ప్రశ్న సూచిక

మీడియా ప్రశ్న బ్రౌజర్ ద్వారా ప్రేరేపించబడినప్పుడు పరీక్షించడానికి జోహన్ బ్రూక్ స్వచ్ఛమైన CSS మార్గాన్ని అందిస్తుంది. డిజైన్ బ్రేకింగ్ పాయింట్లతో పరీక్షించడానికి మరియు ఆడటానికి మీడియా ప్రశ్న సూచిక మరొక మంచి సాధనం.

45. షిమ్

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

46. ​​డ్రైవ్-ఇన్

షిమ్‌ను అమలు చేయడానికి మీకు నోడ్.జెస్ సర్వర్ లేకపోతే, స్కాట్ జెహ్ల్ డ్రైవ్-ఇన్ అనే సరళమైన సంస్కరణను తయారుచేశాడు, ఇది ప్రాథమికంగా అదే విధంగా పనిచేస్తుంది, కానీ PHP, అపాచీ మరియు .htaccess ఫైల్‌ను ఉపయోగిస్తుంది.

47. అడోబ్ షాడో

ఈ రిమోట్ డీబగ్గింగ్ సాధనంతో వెబ్ సాంకేతిక పరిజ్ఞానాలలోకి అడోబ్ కొనసాగుతుంది. Mac లేదా Windows లో షాడో మరియు Chrome పొడిగింపును, Android లేదా iPhone లో షాడో క్లయింట్‌ను ఇన్‌స్టాల్ చేయండి మరియు మీరు అనేక విభిన్న పరికరాల మధ్య వెబ్ పేజీలను పంచుకోవచ్చు.

48. ఒపెరా మొబైల్ ఎమ్యులేటర్ + రిమోట్ డీబగ్

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

మరింత ప్రేరణ

ఇతరులు తమ డిజైన్లను ఎలా ప్రతిస్పందిస్తున్నారు అనే దానిపై ఒక ఆలోచన రావాలనుకుంటున్నారా?

49. మీడియా క్వెరీ.ఇస్

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

50. @RWD

ఏతాన్ మార్కోట్ ఒక ట్విట్టర్ ఖాతాను నడుపుతున్నాడు, ఇది RWD ప్రపంచం నుండి తాజా వార్తలు, సాధనాలు మరియు ప్రదర్శనలను తెస్తుంది.

డెనిస్ జాకబ్స్ ఒక వక్త, రచయిత, వెబ్ డిజైన్ ట్రైనర్ మరియు సృజనాత్మకత సువార్తికుడు అని ఆరాధించారు, పీటర్ గ్యాస్టన్ ది బుక్ ఆఫ్ CSS3 రచయిత మరియు బ్రోకెన్ లింక్స్ వద్ద బ్లాగు చేసిన అనుభవజ్ఞుడైన వెబ్ డెవలపర్.

దీన్ని ఇష్టపడ్డారా? వీటిని చదవండి!

  • మొబైల్ వెబ్‌సైట్‌ను నిర్మించడానికి ప్రో చిట్కాలు
  • అగ్ర CSS మరియు జావాస్క్రిప్ట్ పద్ధతులు
  • అనువర్తనాన్ని ఎలా నిర్మించాలో
  • డిజైనర్లకు ఉత్తమ ఉచిత వెబ్ ఫాంట్‌లు
  • ఆగ్మెంటెడ్ రియాలిటీ కోసం తదుపరి ఏమిటో కనుగొనండి
  • ఉచిత అల్లికలను డౌన్‌లోడ్ చేయండి: అధిక రిజల్యూషన్ మరియు ఇప్పుడు ఉపయోగించడానికి సిద్ధంగా ఉంది
మునుపటి ఆర్టికల్

సిఎ ప్రేరణ - 13 ఫిబ్రవరి
తదుపరి వ్యాసం

కంప్యూటర్ ఆర్ట్స్ అక్షర రూపకల్పన చరిత్రను అన్వేషిస్తుంది
ఆకర్షణీయ ప్రచురణలు
సినిమా 4 డి కోసం ఈ కణ రెండరర్ తీవ్రమైన కిట్ ముక్క
కనుగొనండి

సినిమా 4 డి కోసం ఈ కణ రెండరర్ తీవ్రమైన కిట్ ముక్క

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

సార్వత్రిక టైప్‌ఫేస్‌ను సృష్టించడానికి మీరు బిక్‌కు సహాయం చేయవచ్చు

మే 2024
మేము ఇక్కడ ఉచిత ఫాంట్‌లు మరియు చేతివ్రాత ఫాంట్‌లను ఇష్టపడతాము మరియు మేము ముఖ్యంగా ఆసక్తికరమైన ప్రయోగాత్మక డిజైన్ ప్రాజెక్ట్‌లను ఇష్టపడతాము, కాబట్టి ఇది మా వీధిలోనే ఉంది. యూనివర్సల్ టైప్‌ఫేస్ ప్రయోగంలో...
3D స్ప్లాష్ సృష్టించడానికి కణాలను ఉపయోగించండి
కనుగొనండి

3D స్ప్లాష్ సృష్టించడానికి కణాలను ఉపయోగించండి

మే 2024
ఈ ట్యుటోరియల్ మీరు లిక్విడ్ స్ప్లాష్ లేదా కిరీటం ప్రభావాన్ని ఎలా తయారు చేయవచ్చో పరిశీలిస్తుంది మరియు నీరు, పాలు, పెయింట్ లేదా ఏదైనా ద్రవ నుండి స్ప్లాష్లను తయారు చేయడానికి ఉపయోగించవచ్చు. మీరు ఒక వస్తువ...