వారంలో ప్రతిస్పందించే సైట్‌ను రూపొందించండి: మీడియా ప్రశ్నలు (4 వ భాగం)

విషయము

• 01. మీడియా ప్రశ్నలను కలుపుతోంది
• 02. మీడియా ప్రశ్న యొక్క శరీర నిర్మాణ శాస్త్రం
• 03. మరో విషయం…
• 04. బ్రేక్ పాయింట్లను ఎంచుకోవడం
• 05. మా సూక్ష్మచిత్రాలను సర్దుబాటు చేయడం
• 06. వెడల్పు మాత్రమే కాదు

• జ్ఞానం అవసరం: ఇంటర్మీడియట్ CSS మరియు HTML
• అవసరం: టెక్స్ట్ ఎడిటర్, ఆధునిక బ్రౌజర్, గ్రాఫిక్స్ సాఫ్ట్‌వేర్
• ప్రాజెక్ట్ సమయం: 1 గంట (మొత్తం 5 గంటలు)
• మద్దతు ఫైల్

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

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

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

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

01. మీడియా ప్రశ్నలను కలుపుతోంది

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

మేము మా హోమ్‌పేజీతో ప్రారంభిస్తాము. డెస్క్‌టాప్-ఆధారిత డిజైన్ నుండి, విస్తృత వీక్షణపోర్ట్‌లలో మా లేఅవుట్ ఈ క్రింది విధంగా కనిపిస్తుంది:

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

.డాక్యుమెంట్ {
పాడింగ్: 0 5%;
}
.మైన్ {
వెడల్పు: 74.242424242424%; / * 784/1056 * /
ఫ్లోట్: ఎడమ;
}
.సంపూరక {
వెడల్పు: 22.727272727273%; / * 240/1056 * /
ఫ్లోట్: కుడి;
}

ఈ ట్యుటోరియల్ యొక్క రెండవ భాగంలో మేము నేర్చుకున్నట్లుగా, ఈ నిలువు వరుసల శాతం వెడల్పును లెక్కించడానికి మేము ఈ క్రింది సూత్రాన్ని ఉపయోగిస్తున్నాము:

(లక్ష్యం / సందర్భం) * 100 = ఫలితం

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

ఇక్కడే మీడియా ప్రశ్నలు వస్తాయి. బ్రౌజర్ 768px కన్నా విస్తృతంగా ఉన్నప్పుడు మాత్రమే ఈ లేఅవుట్ అమలులోకి వస్తుందని uming హిస్తే, మేము ఈ క్రింది CSS ని జోడించవచ్చు:

.డాక్యుమెంట్ {
పాడింగ్: 0 5%;
}
@ మీడియా స్క్రీన్ మరియు (కనిష్ట-వెడల్పు: 768px) {
.మైన్ {
వెడల్పు: 74.242424242424%; / * 784/1056 * /
ఫ్లోట్: ఎడమ;
}
.సంపూరక {
వెడల్పు: 22.727272727273%; / * 240/1056 * /
ఫ్లోట్: కుడి;
}
}

ఇప్పుడు, వీక్షణపోర్ట్ 768px కన్నా ఇరుకైనప్పుడు, మీడియా ప్రశ్నలోని ప్రతిదీ విస్మరించబడుతుంది. మీడియా ప్రశ్నలకు కూడా మద్దతు ఇవ్వని ఏ బ్రౌజర్ అయినా ఇది విస్మరించబడుతుంది.

02. మీడియా ప్రశ్న యొక్క శరీర నిర్మాణ శాస్త్రం

ఇక్కడ ఏమి జరుగుతుందో అర్థం చేసుకోవడానికి, మీడియా ప్రశ్న ఎలా నిర్మించబడిందో చూద్దాం. మేము దానిని రెండు భాగాలుగా విభజించవచ్చు:

• @ మీడియా స్క్రీన్: మీడియా ప్రశ్న యొక్క మొదటి భాగం మీడియా రకం. మీరు ఎప్పుడైనా మీ CSS లో ముద్రణ శైలులను చేర్చినట్లయితే మీరు ఈ వాక్యనిర్మాణాన్ని గుర్తించవచ్చు. మీరు టైప్ పేరును కూడా గుర్తించవచ్చు మీడియా లక్షణం లింక్> మూలకం. CSS 2.1 స్పెసిఫికేషన్‌లో కనిపించే మీడియా రకాలను ఆమోదించిన సమితిని ఇద్దరూ అంగీకరిస్తారు.
• (కనిష్ట-వెడల్పు: 768px): రెండవ భాగం ప్రశ్న. ఇందులో ఉన్నాయి లక్షణం ప్రశ్నించాలి (ఈ సందర్భంలో వీక్షణపోర్ట్ యొక్క కనీస వెడల్పు) మరియు సంబంధిత విలువ (768px) కోసం పరీక్షించడానికి.

మేము ప్రతిస్పందించే వెబ్ డిజైన్ గురించి మాట్లాడేటప్పుడు, వెడల్పుపై దృష్టి పెట్టే ధోరణి ఉంది, కానీ మనం కూడా పరీక్షించగల ఇతర లక్షణాలు ఉన్నాయి:

• (నిమి- | గరిష్టంగా-) వెడల్పు మరియు (నిమి- | గరిష్టంగా-) ఎత్తు: వీక్షణపోర్ట్ యొక్క వెడల్పు మరియు ఎత్తును ప్రశ్నించడానికి ఇవి మాకు అనుమతిస్తాయి (అనగా బ్రౌజర్ విండో).
• (నిమి- | గరిష్టంగా-) పరికరం-వెడల్పు మరియు (నిమి- | గరిష్టంగా-) పరికరం-ఎత్తు: ఇవి మొత్తం ప్రదర్శన యొక్క వెడల్పును ప్రశ్నించడానికి మాకు అనుమతిస్తాయి. నా అనుభవంలో, ఇది సాధారణంగా ప్రదర్శన కంటే వ్యూపోర్ట్‌లోని బేస్ లేఅవుట్‌లకు మరింత తెలివైనది.
• ధోరణి: మీరు వెంటనే ఇక్కడ ఉన్న అవకాశాల గురించి ఆలోచించవచ్చు; మీ ఫోన్ యొక్క ధోరణి ఆధారంగా విభిన్న కంటెంట్‌ను చూపించే అనువర్తనాల గురించి ఆలోచించండి - వెబ్‌లో కూడా ఇది సాధ్యమే.
• (కనిష్ట- | గరిష్ట-) కారక నిష్పత్తి: బ్రౌజర్ విండో నిష్పత్తి ఆధారంగా లేఅవుట్‌లను స్వీకరించడానికి ఇది మాకు అనుమతిస్తుంది…
• (min- | max-) పరికరం-కారక-నిష్పత్తి: … మరియు ఇది పరికర కారక నిష్పత్తి ఆధారంగా అదే చేయటానికి అనుమతిస్తుంది. ఓవెన్ గ్రెగొరీ గత సంవత్సరం ఒక అద్భుతమైన కథనాన్ని వ్రాసాడు, ఈ ప్రశ్నను మన డిజైన్లను వారు కనిపించే పరికరాలతో ముడిపెట్టడానికి ఎలా ఉపయోగించవచ్చో అన్వేషించారు.
• (min- | max-) మోనోక్రోమ్: పరికరానికి మోనోక్రోమ్ డిస్ప్లే ఉందా లేదా అని కూడా మేము పరీక్షించవచ్చు. అమెజాన్ యొక్క ఇ-ఇంక్ కిండ్ల్ పరికరాలు అబద్ధం చెప్పకపోతే మరియు వాటి తెరలను రంగుగా నివేదించకపోతే ఇది ఎంత ఉపయోగకరంగా ఉంటుందో హించుకోండి!

మా ప్రశ్న యొక్క చివరి భాగం బహుశా చాలా ఉపయోగకరంగా ఉంటుంది. ఉపయోగించడం ద్వార మరియు, మేము ఒక ప్రశ్నలో బహుళ లక్షణాల కోసం పరీక్షించవచ్చు. ఉదాహరణకి:

@ మీడియా స్క్రీన్ మరియు (కనిష్ట-వెడల్పు: 768px) మరియు (ధోరణి: ప్రకృతి దృశ్యం) {
...
}

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

03. మరో విషయం…

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

ఇది ఎందుకు జరుగుతుందో అర్థం చేసుకోవడానికి, మేము సంక్షిప్త చరిత్ర పాఠం తీసుకోవాలి.

అసలు ఐఫోన్‌ను 2007 లో ప్రకటించినప్పుడు, దాని పెద్ద అమ్మకపు పాయింట్లలో ఒకటి ‘రియల్ వెబ్’ ను బ్రౌజ్ చేయగల సామర్థ్యం, ​​అంటే స్థిర-వెడల్పు డెస్క్‌టాప్-ఆధారిత సైట్‌లు దాని చిన్న స్క్రీన్‌పై సరిపోయేలా స్క్వాష్ చేయాల్సిన అవసరం ఉన్నప్పటికీ. 320px- వెడల్పు గల స్క్రీన్‌కు సరిపోయేలా వెబ్ పేజీలను స్కేల్ చేయడానికి ముందు, ఐఫోన్ దాని ప్రదర్శనను 980px వెడల్పుగా నివేదించడం ద్వారా దీన్ని చేయగలిగింది.

కానీ ప్రతిస్పందించే డిజైన్ రాకముందే ఐఫోన్ ప్రవేశపెట్టబడింది. ఇప్పుడు రచయితలు మొబైల్ కోసం రూపొందించిన సైట్‌లను రూపకల్పన చేస్తున్నారు, ఈ లక్షణం తక్కువ ఉపయోగకరంగా లేదు. కృతజ్ఞతగా, ఆపిల్ ఈ ప్రవర్తనను దాటవేయడానికి ఒక మార్గాన్ని కలిగి ఉంది, మరియు దీనిని ఇతర తయారీదారులు అవలంబించినప్పటి నుండి, ఇది దాదాపుగా మారింది వాస్తవం ప్రామాణిక. ఇది ఒక్కదాన్ని జోడించడం కలిగి ఉంటుంది మెటా మా మార్కప్‌కు మూలకం:

మెటా పేరు = "వీక్షణపోర్ట్" కంటెంట్ = "ప్రారంభ-స్థాయి = 1.0, వెడల్పు = పరికరం-వెడల్పు" />

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

04. బ్రేక్ పాయింట్లను ఎంచుకోవడం

మన మీడియా ప్రశ్నకు తిరిగి వద్దాం:

@ మీడియా స్క్రీన్ మరియు (కనిష్ట-వెడల్పు: 768px) {
...
}

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

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

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

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

అయితే మనం 800 పిఎక్స్ ఎక్స్‌ప్రెస్ ఎలా? మళ్ళీ, మన సూత్రాన్ని ఉపయోగించవచ్చు, కాని సందర్భం ఏమిటి? మీడియా ప్రశ్నల కోసం ems ను లెక్కించేటప్పుడు, సందర్భం ఎల్లప్పుడూ బ్రౌజర్ యొక్క డిఫాల్ట్ ఫాంట్ పరిమాణం మీ CSS లో ఈ విలువ భర్తీ చేయబడిందా అనే దానితో సంబంధం లేకుండా. ఈ డిఫాల్ట్ సాధారణంగా 16px, ఇది మాకు ఇస్తుంది:

800 / 16 = 50

మేము ఇప్పుడు మా మీడియా ప్రశ్నను ఇలా అప్‌డేట్ చేయవచ్చు:

@ మీడియా స్క్రీన్ మరియు (కనిష్ట-వెడల్పు: 50em) {/ * 800px * /
...
}

05. మా సూక్ష్మచిత్రాలను సర్దుబాటు చేయడం

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

ఇక్కడ మా అసలు CSS ఉంది:

ol.media li.media-item {
నేపథ్య-రంగు: #fff;
మార్జిన్: 0 4.16666666667% 4.16666666667% 0;
వెడల్పు: 47.91666666667%;
ఫ్లోట్: ఎడమ;
}
ol.media li.media-item: nth-child (2n) {
మార్జిన్-కుడి: 0;
}

ఈ తెల్లని స్థలం కనిపించే పాయింట్ బ్రౌజర్ 560px కన్నా విస్తృతంగా పెరుగుతుంది.అడ్డు వరుసకు మూడు సూక్ష్మచిత్రాలను చూపించడానికి మారడానికి ఈ విలువను ఎంచుకుంటాము. కింది CSS ని జోడించడం ద్వారా మేము దీన్ని చేయవచ్చు:

@ మీడియా స్క్రీన్ మరియు (కనిష్ట-వెడల్పు: 35 ఎమ్) {
.మీడియా-అంశం {
వెడల్పు: 30.612244897959%; / * 240/784 * /
మార్జిన్: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.మీడియా-అంశం: nth-child (3n) {
మార్జిన్-కుడి: 0;
}
}

ఈ మీడియా ప్రశ్న లోపల సూక్ష్మచిత్రానికి అవసరమైన అన్ని శైలులను తిరిగి వ్రాయవలసిన అవసరం లేదని గమనించండి, మనం స్వీకరించాలనుకునే భాగాలు మాత్రమే.

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

ol.media li.media-item: nth-child (2n) {
మార్జిన్-కుడి: 0;
}

ఆ విలువను రీసెట్ చేయడానికి మేము మా మీడియా ప్రశ్నలోని CSS ని సవరించాలి:

@ మీడియా స్క్రీన్ మరియు (కనిష్ట-వెడల్పు: 35 ఎమ్) {
.మీడియా-అంశం {
వెడల్పు: 30.612244897959%; / * 240/784 * /
మార్జిన్: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
మార్జిన్-కుడి: 4.081632653061%;
}
.మీడియా-అంశం: nth-child (3n) {
మార్జిన్-కుడి: 0;
}
}

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

06. వెడల్పు మాత్రమే కాదు

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

.మీడియా-ఆబ్జెక్ట్-రేపర్ {
పాడింగ్-బాటమ్: 56.25%;
వెడల్పు: 100%;
ఎత్తు: 0;
స్థానం: సాపేక్ష;
}
@ మీడియా స్క్రీన్ మరియు (గరిష్ట ఎత్తు: 35 ఎమ్) మరియు (విన్యాసాన్ని: ప్రకృతి దృశ్యం) {/ * 560 పిక్స్ * /
.మీడియా-ఆబ్జెక్ట్-రేపర్ {
వెడల్పు: 60%;
పాడింగ్-బాటమ్: 33.75%;
}
}

ఈ ప్రవర్తనను మరింత యుక్తిగా ఉంచడానికి నేను ఓరియంటేషన్ ప్రశ్నను కూడా చేర్చాను.

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

• మా ప్రతిస్పందించే హోమ్‌పేజీని చూడండి
• మా ప్రతిస్పందించే మీడియా అంశం పేజీని చూడండి

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

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

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