உள்ளடக்கம்
- தெரியாதவர்களுக்கு வடிவமைத்தல்
- வடிவமைப்பிற்கான ஒரு நடைமுறை அணுகுமுறை
- தளவமைப்பு அஞ்ஞானவாதி ஆகிறது
- படிப்படியாக குறியீட்டு
- மார்க்-அப்-க்குள் டைவிங்
இந்த நாட்களில் எல்லோரும் பதிலளிக்கக்கூடிய வலை வடிவமைப்பைப் பற்றி பேசுகிறார்கள், நல்ல காரணத்துடன்; வலை-இயக்கப்பட்ட சாதனங்களின் எண்ணிக்கை தொடர்ந்து வளர்ந்து வருவதால் - ஒவ்வொன்றும் மாறுபட்ட திறன்களையும் அம்சங்களையும் கொண்டவை - நிலையான அகல வலைத்தளங்களை உருவாக்குவது இனி விவேகமானதல்ல.
உண்மை என்னவென்றால், அது ஒருபோதும் இருந்ததில்லை. ஆயினும்கூட, பல அனுமானங்களைச் செய்த அனுபவங்களை வடிவமைப்பது சிறந்த நடைமுறையாகக் கருதப்பட்டது, அவை திரை தெளிவுத்திறன், அலைவரிசை அல்லது உள்ளீட்டு முறை. நீங்கள் எப்போதாவது 960px அகலமான வலைத்தளத்தை வடிவமைத்திருந்தால், அதை ஒரு நண்பரின் சிறிய திரை நெட்புக்கில் பார்க்க மட்டுமே (ஆம், நான் இங்கே வேதனையான அனுபவத்திலிருந்து எழுதுகிறேன்), இது ஏன் குறிப்பாக புத்திசாலித்தனமான அணுகுமுறை அல்ல என்பதை நீங்கள் புரிந்துகொள்வீர்கள். இப்போது, ஸ்மார்ட்போன்கள் மற்றும் டேப்லெட்டுகள் கலவையில் வீசப்படுவதால், எங்கள் பாரம்பரிய முறைகள் இனி நோக்கத்திற்காக பொருந்தாது என்பது தெளிவாகிறது.
அதிர்ஷ்டவசமாக, CSS மீடியா வினவல்களின் வருகையும், வலை அதன் சொந்த ஒரு ஊடகம் என்பதை வளர்ந்து வரும் ஒப்புதலும், அதாவது தளத்தின் உண்மையான தன்மையை நாங்கள் தழுவத் தொடங்குகிறோம், அதன் உலகளாவிய தன்மை ஒரு பலம், ஒரு பலவீனம் அல்ல என்பதை ஏற்றுக்கொள்வது.
அடுத்த ஐந்து நாட்களில், இந்த உண்மையை அங்கீகரிக்கும் ஒரு நுட்பத்தின் மூலம் நான் உங்களுக்கு வழிகாட்டுவேன்: பதிலளிக்கக்கூடிய வலை வடிவமைப்பு. ஈதன் மார்கோட்டால் உருவாக்கப்பட்டது, இது திரவ தளவமைப்புகள், நெகிழ்வான படங்கள் மற்றும் ஊடக வினவல்களை ஒருங்கிணைத்து, அவர்கள் எதிர்கொள்ளும் எந்தவொரு சூழலுக்கும் ஏற்ற தளங்களை உருவாக்க உதவுகிறது.
ஒரு எளிய ஊடக கேலரியை எவ்வாறு உருவாக்குவது என்பதைக் காண்பிப்பதன் மூலம் இந்த அணுகுமுறையை நான் நிரூபிக்கிறேன். எனது எடுத்துக்காட்டுகளில், நான் அமெரிக்காவில் சமீபத்தில் மேற்கொண்ட சாலைப் பயணத்தை ஆவணப்படுத்த ஒரு சிறிய வலைத்தளத்தை உருவாக்குவேன், ஆனால் உங்கள் சொந்த தேவைகளுக்கு ஏற்ப குறியீடு மற்றும் வடிவமைப்பைத் தனிப்பயனாக்கலாம்.
தெரியாதவர்களுக்கு வடிவமைத்தல்
இந்த டுடோரியலின் பெரும்பகுதி பதிலளிக்கக்கூடிய வடிவமைப்பின் வளர்ச்சி அம்சத்தை மையமாகக் கொண்டிருக்கும். எந்தவொரு குறியீட்டையும் தோண்டி எடுப்பதற்கு முன்பு, எல்லையற்ற தளவமைப்புகளைக் கொண்டிருக்கக்கூடிய ஒரு வலைத்தளத்தை நாங்கள் எவ்வாறு வடிவமைப்போம் என்று சிறிது நேரம் சிந்திக்கலாம்.
இப்போது, நான் இடைமுகங்களை வடிவமைக்க முடியும் என்பதில் நான் அதிர்ஷ்டசாலி மற்றும் ஃபிரான்டென்ட் குறியீட்டை உருவாக்குங்கள், அவை உண்மையானவை. இது நிச்சயமாக ஒரு தனித்துவமான திறமை அல்ல - நீங்கள் உங்களுக்காக வேலை செய்தால், நீங்கள் அதேதான். ஆனால் திரவ வடிவமைப்புகளை வடிவமைக்கும்போது உள்ளடக்கம் எவ்வாறு மாற்றியமைக்கலாம் மற்றும் மறுபயன்பாடு செய்ய முடியும் என்பதைப் புரிந்துகொள்வது நிச்சயமாக சாதகமானது.
எனது பங்கு மிகவும் சிறப்பு வாய்ந்த ஒரு பெரிய அணியின் ஒரு பகுதியாகவும் நான் பணியாற்றுகிறேன். அத்தகைய சூழலில், காட்சி வடிவமைப்பாளர் வயர்ஃப்ரேம்களை கவர்ச்சிகரமான, ஈடுபாட்டுடன் (கையொப்பமிடப்பட்ட, பிக்சல்-சரியான) காம்ப்ஸாக மொழிபெயர்ப்பதில் மட்டுமே கவனம் செலுத்த முடியும். டெவலப்பர்கள் தனித்தனியாக இருப்பது அசாதாரணமானது அல்ல, இந்த தளவமைப்புகளை மெலிந்த மற்றும் திறமையான மார்க்அப் மற்றும் CSS ஆக மொழிபெயர்க்கிறது.
எவ்வாறாயினும், வடிவமைப்புகள் மாறுபட்ட சூழல்களுக்கு எவ்வாறு பொருந்துகின்றன என்பதை மதிப்பீடு செய்யத் தொடங்கியவுடன் இதுபோன்ற நேரியல் மற்றும் பிரிக்கப்பட்ட பணிப்பாய்வு விரைவாக உடைகிறது. எந்தவொரு புதிய கருவி அல்லது தொழில்நுட்பத்தைப் போலவே, நாங்கள் அதிக ஒத்துழைப்பு மற்றும் சுறுசுறுப்பான வேலை வழிகளையும் கருத்தில் கொள்ள வேண்டும். பதிலளிக்கக்கூடிய வலைத்தளங்களை வடிவமைக்கும்போது ஏற்படும் பல தந்திரமான சிக்கல்களை உரையாடல், பரிசோதனை மற்றும் மறு செய்கை மூலம் வெறுமனே தீர்க்க முடியும்.
வடிவமைப்பிற்கான ஒரு நடைமுறை அணுகுமுறை
எந்தவொரு குறிப்பிட்ட சாதனத்தின் எல்லைக்கு வெளியே ஒரு வடிவமைப்பு எவ்வாறு செயல்படலாம் என்பதைப் பற்றி வடிவமைப்பாளர்கள் சிந்திக்க வாய்ப்பில்லை என்று சொல்ல முடியாது.
கிளியர்லெப்டில், டெஸ்க்டாப்பின் கண்ணோட்டத்தில் காட்சி வடிவமைப்பைத் தொடங்குகிறோம். ஒரு விரிவான வடிவமைப்பு மொழி மற்றும் காட்சி அழகியலை வரையறுப்பதன் மூலம் நாங்கள் தொடங்குகிறோம், பெரும்பாலும் உள்ளடக்கத்தின் முக்கிய பகுதியை சுற்றி ஆரம்ப ஆய்வுகளை அடிப்படையாகக் கொண்டுள்ளோம். எடுத்துக்காட்டாக, நாங்கள் ஒரு உணவு தளத்தை வடிவமைக்கிறோம் என்றால், நாங்கள் ஒரு செய்முறை பக்கத்துடன் தொடங்குவோம்; ஒரு செய்தி தளத்திற்கு, ஒரு கதை பக்கம்.
இது தளத்தில் ஒரு முக்கியமான பக்கம் மட்டுமல்ல, அச்சுக்கலை தட்டுகளை உருவாக்க எங்களுக்கு போதுமான கட்டமைக்கப்பட்ட உள்ளடக்கமும் இருக்கலாம். இந்த கட்டத்தில் தளவமைப்பு எவ்வாறு மாற்றியமைக்கப்படலாம் என்பதையும் நாங்கள் சிந்திப்போம் - இது இந்த கட்டத்தில் நம் மனதின் பின்புறத்தில் இருந்தாலும் கூட.
ஒரு வடிவமைப்பை அழுத்தமாக சோதிக்க ஒரு பயனுள்ள வழி, அத்தகைய பக்கத்தை எடுத்து ஒரு குறுகிய (~ 320px அகல) திரைக்கு மாற்றியமைப்பது. இந்த அகலத்தில் வேலை செய்ய வடிவமைப்பின் சில அம்சங்களை மறுபரிசீலனை செய்ய வேண்டும் என்பதை நீங்கள் கண்டுபிடிப்பீர்கள். இங்கே சில உதாரணங்கள்:
- அச்சுக்கலை: பெரிய தலைப்புகள் பரந்த தளவமைப்புகளில் நன்றாக வேலை செய்யக்கூடும், ஆனால் சிறிய திரைகளில் அவை நிறைய செங்குத்து இடத்தை எடுத்துக் கொள்ளலாம், எனவே கூடுதல் ஸ்க்ரோலிங் தேவைப்படுகிறது. வரி நீளம் மாறும்போது, நீங்கள் வரி உயரங்களையும் பிற அச்சுக்கலை சிகிச்சையையும் கருத்தில் கொள்ள வேண்டும்.
- இணைப்புகள்: தொடுதிரை சாதனங்களில் உங்கள் வடிவமைப்பு எவ்வாறு செயல்படும்? இவற்றைக் கண்டறிவதற்கான சுலபமான வழி எங்களிடம் இல்லை என்றாலும் (எங்கள் வடிவமைப்பின் அனைத்து அம்சங்களையும் நாம் கணக்கில் எடுத்துக்கொள்ள வேண்டும் என்பதாகும்), ஒரு குறுகிய திரைக்கு வடிவமைப்பது இணைப்புகள் மற்றும் பிற ஊடாடும் கூறுகளுக்கான இலக்கு பகுதிகளைப் பற்றி சிந்திக்க ஒரு வாய்ப்பை அளிக்கும். . IOS வழிகாட்டுதல்கள் இவை குறைந்தது 44 பிக்சல்கள் / புள்ளிகள் சதுரமாக இருக்க வேண்டும் என்று பரிந்துரைக்கின்றன, இது ஒரு நல்ல நபராகும்.
- வழிசெலுத்தல்: எந்தவொரு பதிலளிக்கக்கூடிய வடிவமைப்பிலும் இது மிகவும் மோசமான அங்கமாக இருக்கும், குறிப்பாக உங்கள் தளத்தில் பல பிரிவுகள் மற்றும் ஆழமான வரிசைமுறை இருந்தால். தற்போது பரிசீலிக்கப்படும் வழிசெலுத்தலுக்கான வேறுபட்ட அணுகுமுறைகளின் சுருக்கத்தை பிராட் ஃப்ரோஸ்ட் எழுதியுள்ளார்.
- மிதமிஞ்சிய உள்ளடக்கம்: சில உள்ளடக்கம் தேவையில்லை? பிற உள்ளடக்கங்களை சில காட்சிகளில் மட்டுமே காட்ட வேண்டுமா? ஒரு பயனர் எந்த சாதனத்தைப் பயன்படுத்துகிறார் என்பதை அடிப்படையாகக் கொண்டு உள்ளடக்கத்தை மறைக்க நான் பரிந்துரைக்கவில்லை, ஆனால் நிபந்தனை ஏற்றுதல் போன்ற நுட்பங்கள் (இந்த வாரத்தின் பிற்பகுதியில் நாங்கள் பார்ப்போம்) தேவைப்படும் போது நிரப்பு உள்ளடக்கத்தை மட்டுமே ஏற்றும் சிறிய பக்கங்களை வழங்க எங்களுக்கு உதவும்.
இரண்டு மாறுபட்ட தளவமைப்புகளை வடிவமைப்பது ஒரு வடிவமைப்பு மாற்றியமைக்கும் என்ற கருத்தை வலுப்படுத்துகிறது, அதே நேரத்தில் ஆரம்பத்தில் சாத்தியமான கோட்சாக்களை சலவை செய்கிறது. இது வேலையை இரட்டிப்பாக்குவது போல் தோன்றினாலும், ஒவ்வொரு பக்கத்தையும் நாங்கள் பிக்சல்-சரியான துல்லியத்திற்கு வடிவமைக்கவில்லை என்பதை நினைவில் கொள்ளுங்கள். அதற்கு பதிலாக, அளவிடக்கூடிய வடிவமைப்பு மொழியை உருவாக்குவதில் நாங்கள் கவனம் செலுத்துகிறோம் - அதை நாம் குறியீட்டில் செயல்படுத்தத் தொடங்கும் போது உருவாகும், மற்றும் தனிப்பட்ட தொகுதிகள் மற்றும் கூறுகளை அடிப்படையாகக் கொண்ட ஒன்று.
தளவமைப்பு அஞ்ஞானவாதி ஆகிறது
ஆச்சரியப்படத்தக்க வகையில், இணையம் வரலாற்று ரீதியாக அச்சு போன்ற சிகிச்சையளித்த ஒரு தொழிலுக்கு, நிலையான அகல தளவமைப்புகள் நாம் உற்பத்தி செய்யும் பல விநியோகங்களை ஊடுருவியுள்ளன. தழுவிக்கொள்ளக்கூடிய ஒரு ஊடகத்திற்கான வடிவமைப்பை நாங்கள் தொடங்கும்போது, புதிய அணுகுமுறைகள் பரிசீலிக்கப்படுகின்றன, அவை சிக்கல்களைத் தீர்க்கவும், ஊடகங்களின் திரவத் தன்மையை ஒப்புக் கொள்ளும்போது கருத்துக்களைத் தொடர்பு கொள்ளவும் அனுமதிக்கின்றன. எனக்கு பிடித்தவைகளில் சில இங்கே:
- பக்க விளக்க வரைபடங்கள்: வயர்ஃப்ரேம்கள் பெரும்பாலும் தளவமைப்பைக் குறிக்கலாம் (இதனால் ஒரு குறிப்பிட்ட வகை சாதனத்தை எடுத்துக் கொள்ளலாம்), பக்க விளக்க வரைபடங்கள் இந்த அனுமானத்தை அகற்றி, அதற்கு பதிலாக தனிப்பட்ட கூறுகளை விவரிக்கின்றன, ஆவணத்தில் முன்னுரிமையின் அடிப்படையில் ஏற்பாடு செய்யப்பட்டுள்ளன.
- உடை ஓடுகள்: வடிவமைப்பு யோசனைகளை வாடிக்கையாளர்களுடன் தொடர்பு கொள்ளும்போது, ‘வலைத்தளங்களின் ஓவியங்களை’ முன்வைப்பதைக் காணலாம். நாங்கள் கவனமாக இல்லாவிட்டால், மற்ற சாதனங்களிலும் ஒரு வடிவமைப்பு எவ்வாறு இருக்கும் என்பதை நிரூபிக்கும் கருத்தாக்கங்களை வாடிக்கையாளர்கள் சரியாகக் கேட்பார்கள். இது பல சாதனங்களுக்கு பல பக்கங்களை உருவாக்கும் ஒரு நிலையான சூழ்நிலைக்கு நம்மை கட்டாயப்படுத்தும். சமந்தா வாரன் இந்த சிக்கலைப் பற்றி யோசித்து ஸ்டைல் டைல்களைக் கொண்டு வந்துள்ளார். இவை மனநிலைக் குழு (ஆனால் குறைவான தெளிவற்ற) மற்றும் முழுமையாக உணரப்பட்ட காம்ப்ஸ் (ஆனால் குறைவான துல்லியமான) இடையே எங்காவது அமர்ந்து, அச்சுக்கலை, பொத்தான் பாணிகள் மற்றும் மாஸ்ட்ஹெட் சிகிச்சைகள் ஆகியவற்றைத் தொடர்பு கொள்ள எங்களுக்கு உதவுகின்றன. எங்கள் வாடிக்கையாளர்களுடன் மிகவும் முதிர்ந்த அளவிலான விவாதத்தையும் அவை ஊக்குவிக்கின்றன.
- வடிவமைப்பு விளையாட்டை அணிதிரட்டுங்கள்: கூட்டு பயிற்சி பட்டறைகளின் போது இந்த பயிற்சி நன்றாக வேலை செய்யும். இந்த பயிற்சியில், எல்லோரும் போஸ்டில் எழுதுகிறார்கள்-இது ஒரு குறிப்பிட்ட பக்கத்தில் தோன்றக்கூடிய கூறுகளைக் குறிக்கிறது. இவை பின்னர் ஒரு மொபைல் தொலைபேசியில் நேர்கோட்டுப்படுத்தப்பட்டதாகத் தோன்றுவது போல, முக்கியத்துவத்தின் வரிசையில் சுவரில் ஒட்டப்படுகின்றன. இதன் விளைவாக விவாதம் சில ஆச்சரியமான முடிவுகளை உருவாக்கக்கூடும். எடுத்துக்காட்டாக, வழிசெலுத்தல் பக்கத்தில் மிக முக்கியமான கூறு அல்ல என்பதை நீங்கள் உணரலாம். இது வடிவமைப்பைப் பின்பற்றலாம், அங்கு பக்கத்தின் மேலே உள்ள ஒரு இணைப்பு இணைப்பு அடிக்குறிப்பில் உள்ள வழிசெலுத்தலுடன் இணைகிறது.
நாங்கள் ஏற்கனவே பயன்படுத்தும் கருவிகளுக்கு இன்னும் இடமுண்டு, ஆனால் ஒரு வலைத்தளத்தை பரந்த அளவில் வடிவமைக்கும்போது, தளவமைப்பு இனி அறியப்படாதது என்பதை நாம் மனதில் கொள்ள வேண்டும்.
படிப்படியாக குறியீட்டு
அதிர்ஷ்டவசமாக, கடின உழைப்பு எங்களுக்காக செய்யப்பட்டுள்ளதால், நாங்கள் பணிபுரியும் எடுத்துக்காட்டில் காட்சி வடிவமைப்பைப் பற்றி கவலைப்பட தேவையில்லை! அதற்கு பதிலாக, எங்கள் வடிவமைப்பை முழுமையாக பதிலளிக்கக்கூடிய வலைத்தளமாக குறியிடுவதில் கவனம் செலுத்தலாம்.
நாங்கள் தொடங்குவதற்கு முன் இன்னும் ஒரு விஷயம். நாம் பணிபுரியும் ஊடகத்தின் ஸ்தாபகக் கொள்கையை நினைவில் கொள்வது முக்கியம்: உலகளாவிய தன்மை. அதாவது இன்றைய வலை-இயக்கப்பட்ட சாதனங்களை உருவாக்குவது மட்டுமல்லாமல், நேற்றைய மற்றும் நாளை சாதனங்களுடன் பொருந்தக்கூடிய தன்மையை உறுதிசெய்கிறது. ஜான் ஆல்சோப் தனது அடுத்த 6 பில்லியன் இடுகையில் இந்த கொள்கை ஏன் முக்கியமானது என்பதை விவரித்தார்:
"இந்த அடுத்த ஆறு பில்லியன் கிராமப்புற இந்தியா, ஆபிரிக்கா, சீனா ஆகிய நாடுகளில் உள்ள குழந்தைகள், மின்சாரம் மற்றும் நெட்வொர்க்குகள் இடைவிடாது இருக்கலாம். இது சுமத்ராவில் ஒரு தசாப்த பழமையான விண்டெல் பெட்டியில் யாரோ ஒருவர். இது நூற்றுக்கணக்கான வெவ்வேறு மொழிகளைப் பேசும் மக்கள், டஜன் கணக்கானவர்கள் எழுதும் முறைகள். இது அவர்களின் குடும்பத்தில் முதன்முதலில் படிக்கவும் எழுதவும் கூடிய நபர்கள். இது உலகளவில் 20 சதவீத மக்கள் படிக்கவோ எழுதவோ முடியாது. ஆயினும்.’
வலைத் தரங்கள், அணுகல், கட்டுப்பாடற்ற ஜாவாஸ்கிரிப்ட்… அனைத்தும் ஒரே கருப்பொருளின் மாறுபாடுகள்: முற்போக்கான மேம்பாடு: எங்கள் தொழிலில் பிடிபட்டிருக்கும் வெவ்வேறு ஃபேஷன்களை (ஒரு சிறந்த வார்த்தையின் தேவைக்காக) பார்ப்பதன் மூலம் வலையைப் பற்றிய நமது புரிதலைக் கண்டறியலாம். பதிலளிக்கக்கூடிய வலை வடிவமைப்பிலும் இதே நிலைதான். கட்ட ஒரு உண்மையிலேயே பதிலளிக்கக்கூடிய வலைத்தளம் என்பது பின்னோக்கி இணக்கமாக மட்டுமல்லாமல் எதிர்கால நட்பாகவும் இருக்கும் ஒரு தளத்தை உருவாக்குவதாகும்.
மார்க்-அப்-க்குள் டைவிங்
சரி, முன்னுரை போதும், உரை திருத்தியைத் திறக்க வேண்டிய நேரம் இது.எங்கள் வடிவமைப்பாளர் எங்களுக்கு டெஸ்க்டாப் சார்ந்த வடிவமைப்பை வழங்கியுள்ளார், மேலும் இது ஒரு குறுகிய காட்சியமைப்பிலும் எவ்வாறு தோன்றக்கூடும் என்பதற்கான எடுத்துக்காட்டுகளை வழங்குவதற்கு போதுமானதாக இருந்தது.
இவற்றை தனித்தனியாக குறியிட தூண்டலாம், ஆனால் நான் வேறு அணுகுமுறையை பரிந்துரைக்கப் போகிறேன். வடிவமைப்பை ஒரு பக்கத்தில் உருவாக்கும் தனி கூறுகளை - அல்லது வடிவங்களை வைப்பதன் மூலம், நாங்கள் ஒரு மாதிரி போர்ட்ஃபோலியோவை உருவாக்கலாம். எந்தவொரு பக்க தளவமைப்பின் எல்லைக்கு வெளியே உள்ள கூறுகளை உருவாக்க இது நம்மை அனுமதிக்கிறது, மேலும் எந்த பின்னடைவு சோதனைக்கும் பின்னர் குறிப்பிட எங்களுக்கு ஏதாவது கொடுக்கும். ஆரம்ப மார்க்அப்பை சில வேறுபட்ட சாதனங்களில் பார்ப்போம்:
எங்கள் குறிக்கப்பட்ட மாதிரி போர்ட்ஃபோலியோவைக் காண்க
சரி, நான் பாதிக்கப்படுவேன் - எங்களிடம் ஏற்கனவே பதிலளிக்கக்கூடிய வலைத்தளம் உள்ளது! எங்கள் உள்ளடக்கம் ஒவ்வொரு சாதனத்தின் வரம்புகளுக்கு ஏற்ப மாற்றியமைக்கிறது, இது ஒரு புதிய ஐபாட் அல்லது நிராகரிக்கப்பட்ட அம்ச தொலைபேசியாக இருக்கலாம். இது லின்க்ஸ் போன்ற உரை மட்டும் உலாவியில் கூட இயங்குகிறது.
உலகளாவிய அடிப்படைக் கொள்கைகளுக்கு நன்றி, வலை இயல்பாக பதிலளிக்கக்கூடியது. இது மிகச் சிறந்தது, ஆனால் இப்போது நாம் குறியீட்டைச் செய்யும் எதையும் இந்த சொந்த தகவமைப்புக்கு சமரசம் செய்யலாம் என்பதும் இதன் பொருள்.
நாளை: நாங்கள் கவனமாக மிதித்து, பதிலளிக்கக்கூடிய வடிவமைப்பின் முதல் அம்சத்தைப் பயன்படுத்தத் தொடங்குவோம்: அச்சுக்கலை மற்றும் திரவ கட்டங்கள்.
