ஒரு வலைத்தளத்தை எவ்வாறு பதிலளிக்கக்கூடியதாக மாற்றுவது?

ஸ்மார்ட்போன்கள் மற்றும் டேப்லெட்டுகளின் ஜனநாயகமயமாக்கலுடன், ஒரு வலைத்தளத்தை உருவாக்குகிறது பதிலளிக்க அத்தியாவசியமாகிவிட்டது. பதிலளிக்கக்கூடிய தளமானது வெவ்வேறு உலாவல் சாதனங்களுக்குத் தானாகவே மாற்றியமைக்க முடியும் - டெஸ்க்டாப், மொபைல், டேப்லெட் - உகந்த பயனர் அனுபவத்தை வழங்க. பதிலளிக்கக்கூடிய வலைத்தளமும் நல்லது இணைய குறிப்பு.

கூகுளின் கூற்றுப்படி, 60% க்கும் அதிகமான தேடல்கள் இப்போது உள்ளன மொபைலில் இருந்து மேற்கொள்ளப்படுகிறது. எனவே இந்தச் சாதனங்களுக்காக உங்கள் தளத்தை மேம்படுத்துவது இன்றியமையாதது, இல்லையெனில் உங்கள் ட்ராஃபிக் குறையும். இன்னும் பல தளங்கள் இன்னும் தகவமைப்பு முறையில் வடிவமைக்கப்படவில்லை.

இப்போதெல்லாம், "இணையதளங்கள்" என்று அழைக்கப்படும் வடிவமைப்புபதிலளிக்க” (அல்லது மாற்றியமைக்கக்கூடியது) இன்றியமையாததாகிவிட்டது. ஆனால் இது சரியாக என்ன அர்த்தம்? அனைத்து திரை அளவுகளுக்கும் உகந்ததாக ஒரு இணையதளத்தை எப்படி உருவாக்குவது?

அனைத்து சாதனங்களிலும் உகந்த பயனர் அனுபவத்தை வழங்க, தளவமைப்பு மற்றும் பரிமாணங்களின் அடிப்படையில் தானாக மாற்றியமைக்கும் திறன் கொண்ட தளத்தை உருவாக்குவதை பதிலளிக்கக்கூடிய வடிவமைப்பு கொண்டுள்ளது: டெஸ்க்டாப்கள் 🖥️, டேப்லெட்டுகள் 💻, ஸ்மார்ட்போன்கள் 📱.

முற்றிலும் பதிலளிக்கக்கூடிய தளத்தை உருவாக்குவதற்கான முக்கிய சிறந்த நடைமுறைகள் இங்கே:

🚀 CSS இல் பிக்சல்களுக்குப் பதிலாக தொடர்புடைய அலகுகளை (%, em, rem) பயன்படுத்தவும்

உறுப்புகளின் முழு தழுவலை அனுமதிக்க, இது போன்ற அளவீட்டு அலகுகளைப் பயன்படுத்த பரிந்துரைக்கப்படுகிறது %, em அல்லது rem உங்கள் CSS விதிகளில் நிலையான பிக்சல்களை விட. சதவீதங்கள் திரையின் அளவின் அடிப்படையில் தானியங்கு மறுஅளவை அனுமதிக்கின்றன.

முக்கிய சிறந்த நடைமுறைகளில் ஒன்று பதிலளிக்கக்கூடிய தளத்தை உருவாக்குவது தவிர்க்கப்பட வேண்டும் உங்கள் CSS விதிகளில் நிலையான பிக்சல்களைப் பயன்படுத்த. உண்மையில், சாதனத்தைப் பொறுத்து உறுப்புகளின் அளவை மாற்றியமைக்க பிக்சல்கள் அனுமதிக்காது.

போன்ற உறவினர் அலகுகள் என்று அழைக்கப்படுவதற்கு ஆதரவாக பரிந்துரைக்கப்படுகிறது சதவீதங்கள் (%), em அல்லது rem இடத்தில். குறிப்பாக % ஆனது பெட்டிகள், உரைகள், ஓரங்கள் போன்றவற்றின் தானாக மறுஅளவிடுதலை அனுமதிக்கும். திரையின் அளவைப் பொறுத்து.

எடுத்துக்காட்டாக, அகலம் அமைக்கப்பட்டுள்ளது CSS இல் 50% பிசி, டேப்லெட் அல்லது ஸ்மார்ட்போன் திரையில் இருந்தாலும், கிடைக்கக்கூடிய அகலத்தில் 50% உறுப்பு எப்பொழுதும் எடுக்கும் என்பதை உறுதி செய்யும். இந்த திரவ அணுகுமுறையானது நெகிழ்வான தளவமைப்புகளை உருவாக்குவதற்கு ஏற்றதாக இருக்கிறது.

🚀 CSS நடை தாளில் மீடியா வினவல்களை வரையறுக்கவும்

CSS மீடியா வினவல்கள் அவசியமான வழிமுறைகள் பதிலளிக்கக்கூடிய வலைத்தளத்தை உருவாக்கவும். காட்சி சாளரத்தின் (வியூபோர்ட்) அகலத்தைப் பொறுத்து பொருந்தும் குறிப்பிட்ட CSS விதிகளை வரையறுக்க அவை உங்களை அனுமதிக்கின்றன.

தளவமைப்புகள், எழுத்துருக்கள், விளிம்புகள் போன்றவற்றை நீங்கள் எளிதாகக் குறிப்பிடலாம். பயனர் டெஸ்க்டாப் கணினி, டேப்லெட் அல்லது ஸ்மார்ட்போனில் இருக்கிறாரா என்பதைப் பொறுத்து வேறுபட்டது. உதாரணமாக, நாம் அதை வரையறுக்க முடியும் கீழே 768px அகலம், ஹாம்பர்கர் மெனுவில் வழிசெலுத்தல் மாற்றங்கள்.

மீடியா வினவல்கள் திரையின் அளவைப் பொறுத்து உறுப்புகளின் ஒழுங்கமைவு மற்றும் ஒழுங்கமைப்பை நன்றாக மாற்றியமைக்க உங்களை அனுமதிக்கின்றன. நெகிழ்வான CSS அலகுகளுடன் இணைந்து, அவை அவசியம் சரியான தளத்தை உருவாக்கவும் பதிலளிக்கக்கூடியது மற்றும் சிறந்த பயனர் அனுபவத்தை வழங்குகிறது.

🚀 படங்களைப் பதிலளிக்கக்கூடியதாக மாற்றவும்

படங்களும் வேண்டும் மாற்றியமைக்கப்படும் சில சாதனங்களில் அவை விகிதாசாரமாக நீட்டப்படுவதைத் தடுக்க. எனவே வேண்டும் SEO க்கு உங்கள் படங்களை மேம்படுத்தவும். HTML குறியீட்டில் அல்லது CSS வழியாக அவற்றின் அகலத்தை சதவீதமாக அமைப்பது ஒரு எளிய சிறந்த நடைமுறையாகும்.

நாம் CSS பண்புகளையும் பயன்படுத்தலாம் "அதிகபட்ச அகலம்: 100%" அதனால் படம் அதன் விகிதாச்சாரத்தை பராமரிக்கும் போது அதன் கொள்கலனுக்கு மாற்றியமைக்கிறது. ஒரே படத்தின் பல பதிப்புகளை வெவ்வேறு தெளிவுத்திறன்களில் வரையறுத்து, “ பண்புக்கூறு மூலம் திரையின் அளவைப் பொறுத்து எந்தப் பதிப்பைச் சேவை செய்ய வேண்டும் என்பதை உலாவிக்குக் குறிப்பிடவும் பரிந்துரைக்கப்படுகிறது.srcset".

பதிலளிப்பதில், எல்லா சாதனங்களிலும் உகந்த தரத்தை உறுதிப்படுத்த, படங்கள் நீட்டுவதை விட தானாக அளவை மாற்ற வேண்டும்.

🚀 பதிலளிக்கக்கூடிய CSS கட்டமைப்பைப் பயன்படுத்தவும்

பதிலளிக்கக்கூடிய CSS கட்டமைப்பைப் பயன்படுத்துவது வலைத்தளத்தை பதிலளிக்கக்கூடியதாக மாற்றுவதற்கான சிறந்த நடைமுறைகளில் ஒன்றாகும். பூட்ஸ்டார்ப், ஃபவுண்டேஷன், புல்மா மற்றும் மெட்டீரியலைஸ் போன்ற CSS கட்டமைப்புகள் முன் வரையறுக்கப்பட்ட தளவமைப்பு கட்டங்கள் மற்றும் பதிலளிக்கக்கூடிய கூறுகளை வழங்குகின்றன, அவை பதிலளிக்கக்கூடிய வலைத்தளத்தை உருவாக்குவதை எளிதாக்குகின்றன.

இந்த கட்டமைப்புகள், தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கும் பயன்படுத்த தயாராக இருக்கும் CSS வகுப்புகளை வழங்குகின்றன நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய பக்கம். தளத்தைப் பார்க்கப் பயன்படுத்தப்படும் சாதனத்தின் திரை அளவின் அடிப்படையில் தளவமைப்பு மற்றும் பாணியை தானாகச் சரிசெய்ய, ஊடக வினவல்கள் போன்ற நுட்பங்களைப் பயன்படுத்துகின்றனர்.

பதிலளிக்கக்கூடிய CSS கட்டமைப்பைப் பயன்படுத்துவதன் மூலம், வெவ்வேறு சாதனங்கள் மற்றும் திரை அளவுகளுக்கு சீராக மாற்றியமைக்கும் உங்கள் வலைத்தளத்திற்கான அடிப்படை கட்டமைப்பை விரைவாக அமைக்கலாம். கட்டமைப்பால் வழங்கப்பட்ட கட்டங்களைப் பயன்படுத்தி உங்கள் தள உறுப்புகளை எளிதாக ஒழுங்கமைக்கலாம், இது எல்லா சாதனங்களிலும் சீரான அமைப்பை அனுமதிக்கிறது.

🚀 எல்லா சாதனங்களிலும் சோதனை ரெண்டரிங்

கணினிகள், டேப்லெட்டுகள் மற்றும் ஸ்மார்ட்ஃபோன்களில் உங்கள் இணையதளத்தின் காட்சியை ஒவ்வொரு திரை அகலத்திற்கும் சரியாக மாற்றியமைப்பதை உறுதிசெய்வது அவசியம்.

போன்ற பெரும்பாலான நவீன உலாவிகள் Google Chrome மற்றும் Mozilla Firefox, ஒருங்கிணைந்த மேம்பாட்டு கருவிகளை வழங்குகின்றன. இணையதளத்தின் ரெண்டரிங்கைக் காட்சிப்படுத்த பல்வேறு சாதனங்கள் மற்றும் திரை அளவுகளை உருவகப்படுத்த இந்தக் கருவிகள் உங்களை அனுமதிக்கின்றன. பக்கத்தில் வலது கிளிக் செய்து "" என்பதைத் தேர்ந்தெடுப்பதன் மூலம் இந்தக் கருவிகளை அணுகலாம்.ஆய்வு செய்யவும்”Ou“உறுப்பு ஆய்வு".

போன்ற இலவச ஆன்லைன் சேவைகள் உள்ளன BrowserStack மற்றும் CrossBrowserTesting பல்வேறு சாதனங்கள் மற்றும் உலாவிகளில் இணையதளத்தின் ரெண்டரிங்கைச் சோதிக்க இது உங்களை அனுமதிக்கிறது. இந்த சேவைகள் உங்கள் வலைத்தளத்தை வெவ்வேறு மெய்நிகர் அல்லது இயற்பியல் சாதனங்களில் பார்க்க உங்களை அனுமதிக்கின்றன, ஒவ்வொரு சாதனத்திலும் அது எப்படி இருக்கும் என்பது பற்றிய தெளிவான யோசனையை உங்களுக்கு வழங்குகிறது.

சாதன முன்மாதிரிகள் மற்றும் சிமுலேட்டர்கள் உண்மையான சாதனங்களின் பண்புகள் மற்றும் நடத்தையை பிரதிபலிக்கும் மென்பொருள். எடுத்துக்காட்டாக, iOS இல் சோதிக்க, நீங்கள் ஆப்பிள் சாதனங்களுக்கான Xcode முன்மாதிரியைப் பயன்படுத்தலாம்.

ஆண்ட்ராய்டுக்கு, ஆண்ட்ராய்டு ஸ்டுடியோ எமுலேட்டர் உள்ளது. வெவ்வேறு திரைத் தீர்மானங்களைக் கொண்ட மெய்நிகர் சாதனங்களில் உங்கள் இணையதளத்தைச் சோதிக்க இந்தக் கருவிகள் உங்களை அனுமதிக்கின்றன.

🚀 நிலையான அளவு கூறுகளைத் தவிர்க்கவும்

ஒரு வலைத்தளத்தை பதிலளிக்கக்கூடியதாக மாற்ற, நிலையான அளவு கூறுகளைத் தவிர்ப்பது அவசியம். இதை அடைய சில குறிப்புகள் இங்கே:

நெகிழ்வான அளவீட்டு அலகுகளைப் பயன்படுத்தவும்: உறுப்புகளின் அளவை வரையறுக்க பிக்சல்களை (px) பயன்படுத்துவதற்குப் பதிலாக, சதவீதங்கள் (%) அல்லது வியூபோர்ட் அலகுகள் (vh, vw) போன்ற நெகிழ்வான அளவீட்டு அலகுகளைப் பயன்படுத்தவும். இது உறுப்புகளை திரை அளவிற்கு விகிதாசாரமாக அளவிட அனுமதிக்கிறது.

நெகிழ்வான அடுக்குகளைப் பயன்படுத்தவும்: நெகிழ்வான கட்டங்கள், பதிலளிக்கக்கூடிய CSS கட்டமைப்புகளால் வழங்கப்படுவது போன்றது, நெகிழ்வான நெடுவரிசைகள் மற்றும் வரிசைகளைப் பயன்படுத்தி தகவமைப்பு தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது. அனைத்து சாதனங்களிலும் நிலையான பயனர் அனுபவத்தை வழங்கும், திரையின் அளவைப் பொறுத்து உறுப்புகள் தானாகவே மறுசீரமைக்க இது அனுமதிக்கிறது.

படங்களுக்கு நிலையான அகலங்களைத் தவிர்க்கவும்: படங்களுக்கு நிலையான அகலத்தைக் குறிப்பிடுவதற்குப் பதிலாக, CSS பண்பைப் பயன்படுத்தவும் “அதிகபட்ச அகலம்: 100%;” படங்களை அவற்றின் கொள்கலனின் அளவிற்கு விகிதாசாரமாக மாற்ற அனுமதிக்க. படங்கள் நிரம்பி வழியாமல் அல்லது சிதைக்காமல் வெவ்வேறு சாதனங்களுடன் சரியாகப் பொருந்துவதை இது உறுதி செய்கிறது.

பயன்படுத்த மீடியா வினவல்கள்: மீடியா வினவல்கள் என்பது திரையின் அளவைப் பொறுத்து வெவ்வேறு பாணிகளைப் பயன்படுத்த உங்களை அனுமதிக்கும் CSS விதிகள். ஒவ்வொரு சாதனத்திலும் பார்ப்பதை மேம்படுத்த, வெவ்வேறு திரைத் தீர்மானங்களுக்கான உறுப்புகளின் பாணியைச் சரிசெய்ய அவற்றைப் பயன்படுத்தவும்.

🚀 மொபைல் வழிசெலுத்தலை எளிதாக்குங்கள்

மொபைல் வழிசெலுத்தலை எளிதாக்க மற்றும் சிறந்த பயனர் அனுபவத்தை வழங்க, பின்பற்ற வேண்டிய சில குறிப்புகள் இங்கே:

மொபைல் வழிசெலுத்தல் மெனுவைப் பயன்படுத்தவும்: பாரம்பரிய வழிசெலுத்தல் மெனுவை ஹாம்பர்கர் மெனு போன்ற மொபைல் வழிசெலுத்தல் மெனுவுடன் மாற்றவும். இந்த வகை மெனு திரையின் ஒழுங்கீனத்தைக் குறைக்க உதவுகிறது மற்றும் மொபைல் பயனர்களுக்கு வழிசெலுத்தலை மிகவும் உள்ளுணர்வாக மாற்றுகிறது.

வழிசெலுத்தல் கூறுகளின் எண்ணிக்கையை வரம்பிடவும்: மொபைல் மெனுவில் காட்டப்படும் வழிசெலுத்தல் உருப்படிகளின் எண்ணிக்கையைக் குறைக்கவும். எளிதான வழிசெலுத்தலுக்கு மிக முக்கியமான கூறுகளைக் கண்டறிந்து அவற்றில் கவனம் செலுத்துங்கள். நீண்ட மெனுவைத் தவிர்க்க, இதே போன்ற உருப்படிகளை வகைகளின் கீழ் குழுவாக்கலாம்.

ஒற்றை நிலை வழிசெலுத்தலைப் பயன்படுத்தவும் : மொபைல் சாதனங்களில் துணைமெனுக்களின் பல நிலைகளைக் கொண்ட சிக்கலான கீழ்தோன்றும் மெனுக்களைத் தவிர்க்கவும். அதற்குப் பதிலாக, ஒற்றை-நிலை வழிசெலுத்தலைத் தேர்வுசெய்யவும், அங்கு பயனர்கள் பல நிலைகளில் செல்லாமல் தளத்தின் முக்கியப் பிரிவுகளுக்கு நேரடியாகச் செல்லலாம்.

தெளிவான செயல் பொத்தான்களைப் பயன்படுத்தவும்: கார்ட்டில் தயாரிப்பைச் சேர்ப்பது அல்லது படிவத்தைச் சமர்ப்பிப்பது போன்ற குறிப்பிட்ட செயல்களுக்குப் பயனர்களுக்கு வழிகாட்ட தெளிவான, எளிதில் கிளிக் செய்யக்கூடிய செயல் பொத்தான்களைப் பயன்படுத்தவும். பொத்தான்கள் உங்கள் விரலால் எளிதில் தட்டக்கூடிய அளவுக்கு பெரியதாக இருப்பதை உறுதிசெய்யவும்.

உள்ளுணர்வு சின்னங்களைப் பயன்படுத்தவும்: மொபைல் வழிசெலுத்தல் மெனுவில் செயல்கள் அல்லது வகைகளைக் குறிக்க அடையாளம் காணக்கூடிய ஐகான்களைப் பயன்படுத்தவும். நன்கு வடிவமைக்கப்பட்ட ஐகான்கள், நீண்ட லேபிள்களைப் படிக்காமல், வழிசெலுத்தல் கூறுகளின் அர்த்தத்தை பயனர்கள் விரைவாகப் புரிந்துகொள்ள உதவும்.

🚀 மூடுதல்

வடிவமைப்பு பதிலளிக்கக்கூடிய தளங்கள் அவசியமாகிவிட்டன அனைத்து சாதனங்களிலும் தரமான பயனர் அனுபவத்தை வழங்க.

நெகிழ்வான CSS அலகுகளைப் பயன்படுத்துதல், மீடியா வினவல்களைச் செயல்படுத்துதல் அல்லது படங்களை மேம்படுத்துதல் போன்ற சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், எந்தவொரு வலைத்தளத்தையும் முழுமையாக மாற்றியமைக்க முடியும்.

இந்த சில எளிய விதிகளுக்கு நன்றி, டெஸ்க்டாப் கணினிகள், டேப்லெட்டுகள் மற்றும் ஸ்மார்ட்போன்களில் உங்கள் வலைத்தளத்தின் உகந்த காட்சிக்கு உத்தரவாதம் அளிப்பீர்கள். இனி பெரிதாக்கவும், வெளியேறவும் இல்லை வசதியான வழிசெலுத்தலுக்கு!

மேலும் செல்ல, நான் பயன்படுத்த பரிந்துரைக்கிறேன் WordPress இல் சக்திவாய்ந்த WP ராக்கெட் சொருகி. இது முடிந்தவரை மேம்படுத்த உங்களை அனுமதிக்கும் உங்கள் தளத்தின் ஏற்றுதல் வேகம் பதிலளிக்கக்கூடிய. தகவமைப்பு மற்றும் அதிவேகமான தளம் இதற்கு முக்கியமானது பயனர் அனுபவம் அப்பழுக்கற்ற!

FAQ

கே: பதிலளிக்கக்கூடிய வடிவமைப்பு என்றால் என்ன?

ப: தி பதிலளிக்க வடிவமைப்பு ஒரு வலைத்தளத்தை உருவாக்குவதை நோக்கமாகக் கொண்ட ஒரு வலை வடிவமைப்பு அணுகுமுறை ஆகும் தகவமைப்பு மற்றும் செயல்பாட்டு எல்லா சாதனங்களிலும் திரை அளவுகளிலும். டெஸ்க்டாப், டேப்லெட் அல்லது ஸ்மார்ட்போனில் இருந்தாலும், உகந்த பயனர் அனுபவத்தை வழங்க, உள்ளடக்கத்தையும் தளவமைப்பையும் தானாகவே சரிசெய்ய இது அனுமதிக்கிறது.

கே: ஒரு வலைத்தளத்தை பதிலளிக்கக்கூடியதாக மாற்றுவது ஏன் முக்கியம்?

ப: எல்லா சாதனங்களிலும் சீரான, தரமான பயனர் அனுபவத்தை வழங்குவதற்கு இணையதளத்தை பதிலளிக்கக்கூடியதாக மாற்றுவது அவசியம். மொபைல் சாதனங்களின் பயன்பாடு அதிகரித்து வருவதால், பயனர் எதிர்பார்ப்புகளைப் பூர்த்தி செய்வதற்கும் உங்கள் தேடுபொறி தரவரிசையை மேம்படுத்துவதற்கும் உங்கள் வலைத்தளத்தை மாற்றியமைப்பது மிகவும் முக்கியமானது.

கே: பதிலளிக்கக்கூடிய இணைய வளர்ச்சியின் முக்கிய கொள்கைகள் யாவை?

ப: நெகிழ்வான கட்டங்களைப் பயன்படுத்துதல், நிலையான அளவு கூறுகளைத் தவிர்ப்பது, படங்களைத் தழுவுதல், மீடியா வினவல்களைப் பயன்படுத்தி படத்தின் அளவைப் பொறுத்து வெவ்வேறு பாணிகளைப் பயன்படுத்துதல், திரை மற்றும் மொபைலில் வழிசெலுத்தலை எளிமைப்படுத்துதல் ஆகியவை பதிலளிக்கக்கூடிய இணைய மேம்பாட்டின் முக்கிய கொள்கைகளாகும்.

கே: பதிலளிக்கக்கூடிய CSS கட்டமைப்பு என்றால் என்ன?

ப: அ CSS கட்டமைப்பு ரெஸ்பான்சிவ் என்பது முன் தயாரிக்கப்பட்ட CSS பாணிகள் மற்றும் பதிலளிக்கக்கூடிய கூறுகளின் தொகுப்பாகும், இது பதிலளிக்கக்கூடிய வலைத்தளத்தை உருவாக்குவதை எளிதாக்குகிறது. பூட்ஸ்டார்ப், ஃபவுண்டேஷன் மற்றும் புல்மா போன்ற இந்த கட்டமைப்புகள், நெகிழ்வான தளவமைப்பு கட்டங்கள், பயன்படுத்த தயாராக இருக்கும் CSS வகுப்புகள் மற்றும் வளர்ச்சி செயல்முறையை விரைவுபடுத்துவதற்கு பதிலளிக்கக்கூடிய கூறுகளை வழங்குகின்றன.

கே: ஒரு இணையதளம் வெவ்வேறு சாதனங்களில் எவ்வாறு ரெண்டர் செய்கிறது என்பதை எப்படிச் சோதிப்பது?

ப: வெவ்வேறு சாதனங்களில் இணையதளம் எவ்வாறு ரெண்டர் செய்கிறது என்பதைச் சோதிக்க, வெவ்வேறு திரை அளவுகளை உருவகப்படுத்த உங்களை அனுமதிக்கும் உலாவியின் டெவலப்பர் கருவிகளைப் பயன்படுத்தலாம். நீங்கள் ஆன்லைன் சேவைகள், சாதன முன்மாதிரிகள் அல்லது சிமுலேட்டர்களைப் பயன்படுத்தலாம் அல்லது உண்மையான இயற்பியல் சாதனங்களில் சோதனை செய்யலாம்.

கே: மொபைல் வழிசெலுத்தலை எளிதாக்குவதற்கான சிறந்த நடைமுறைகள் யாவை?

ப: மொபைல் வழிசெலுத்தலை எளிதாக்க, ஹாம்பர்கர் மெனு போன்ற மொபைல் வழிசெலுத்தல் மெனுவைப் பயன்படுத்தவும், வழிசெலுத்தல் உருப்படிகளின் எண்ணிக்கையைக் கட்டுப்படுத்தவும், ஒற்றை-நிலை வழிசெலுத்தலைப் பயன்படுத்தவும், தெளிவான செயல் பொத்தான்களைப் பயன்படுத்தவும், வேகத்தை ஏற்றுவதற்கு மேம்படுத்தவும், உள்ளுணர்வு ஐகான்களைப் பயன்படுத்தவும் மற்றும் வெவ்வேறு வழிசெலுத்தலை தொடர்ந்து சோதிக்கவும் சாதனங்கள்.

கே: தற்போதுள்ள எனது இணையதளத்தை எவ்வாறு பதிலளிக்கக்கூடியதாக மாற்றுவது?

ப: உங்களது ஏற்கனவே உள்ள இணையதளத்தை பதிலளிக்கக்கூடியதாக மாற்ற, நீங்கள் தகவமைப்பு கட்டமைப்பை அமைப்பதை எளிதாக்க, பதிலளிக்கக்கூடிய CSS கட்டமைப்பைப் பயன்படுத்தலாம். நெகிழ்வான அளவீட்டு அலகுகளைப் பயன்படுத்துவதற்கும், நிலையான அளவு கூறுகளைத் தவிர்ப்பதற்கும், மீடியா வினவல்களைப் பயன்படுத்தி வெவ்வேறு திரை அளவுகளுக்கு குறிப்பிட்ட பாணிகளைப் பயன்படுத்துவதற்கும் ஏற்கனவே உள்ள CSS குறியீட்டை நீங்கள் மாற்றியமைக்க வேண்டும்.