டேப்லெட்டுகள் மற்றும் மொபைல் போன்கள் மூலம் இணையத்தை அணுகும் பயனர்கள் அதிகரித்து வருகின்றனர். இது, உங்களுக்கு ஏற்கனவே தெரியும், எங்கள் கணினியில் அழகாக இருக்கும் ஒரு நல்ல வலைப்பக்கத்தை வடிவமைக்க இது இனி போதாது என்று அர்த்தம்: இது ஒவ்வொரு மொபைல் சாதனத்திலும் காணப்பட வேண்டும். பிரச்சினை? வெவ்வேறு திரை அளவுகள் மற்றும் தீர்மானங்கள். அதனால்தான் அனைத்து ஊடகங்களுக்கும் (பிரபலமானவை) சரியாக மாற்றியமைக்கும் வடிவமைப்பை உருவாக்குவது மிகவும் கடினம் பதிலளிக்க வடிவமைப்பு, என மொழிபெயர்க்கப்பட்டுள்ளது தகவமைப்பு வடிவமைப்பு).
இந்த குணாதிசயங்களைக் கொண்டு ஒரு வடிவமைப்பை உருவாக்கும்போது மனதில் கொள்ள வேண்டிய சில குறிப்புகள் இங்கே. கவனம் செலுத்துங்கள்!
தகவமைப்பு வடிவமைப்பிற்கான உதவிக்குறிப்புகள்
- எளிய வார்ப்புருவை உருவாக்கவும்எளிமையாக நான் சாதுவாக இல்லை. நான் பற்றி பேசுகிறேன் அமைப்பு உங்கள் வலைத்தளத்தின் HTML: இது தெளிவானது, சிறந்தது. கணினித் திரை மூன்று செங்குத்து நெடுவரிசைகளுக்கு பொருந்தும் என்பதை நினைவில் கொள்ளுங்கள்; மொபைலின் திரையில், நீங்கள் ஒன்றை மட்டுமே பொருத்துவீர்கள். அதைப் பற்றி யோசித்துப் பாருங்கள், நீங்கள் கூறுகளை எவ்வாறு மாற்றுவீர்கள்.
- தேவையற்ற அனைத்தையும் அகற்றவும்JQuery விளைவுகள், ஃப்ளாஷ் அனிமேஷன்கள் மற்றும் உங்கள் பக்கத்தின் ஏற்றத்தை குறைக்கும் வேறு எந்த குறியீட்டையும் தவிர்க்கவும். உங்களிடம் இந்த வகை குறைந்த உள்ளடக்கம், வேகமாக வலை ஏற்றப்படும்.
- ஒரு பாணியை வரையறுக்கவும் ஒவ்வொரு "அளவிற்கும்" cssஒரு சிறிய css, small.css மற்றும் big.css ஐ உருவாக்கவும் (எடுத்துக்காட்டாக) அது பார்க்கும் சாதனத்தின் அடிப்படையில் இயங்கும். உதாரணத்திற்கு:
url இறக்குமதி url (tiny.css) (நிமிடம் அகலம்: 300px);
url இறக்குமதி url (small.css) (நிமிடம் அகலம்: 600px);
url இறக்குமதி url (big.css) (குறைந்தபட்ச அகலம்: 900px);
- அதிகம் பயன்படுத்தப்படும் தீர்மானங்கள்320px/480px/720px/768px/900px/1024px
- உங்கள் டெம்ப்ளேட்டை நெகிழ வைக்கவும்உங்களால் முடிந்த போதெல்லாம், நிலையான தொகைகளுக்கு பதிலாக சதவீதங்களுடன் வேலை செய்யுங்கள். சில குறிப்பு சமநிலைகள் இங்கே: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- அச்சுக்கலை முன்னெப்போதையும் விட முக்கியமானது சில நேரங்களில் உங்கள் சாதனத் திரை மிகச் சிறியதாக இருப்பதால் நீங்கள் பார்ப்பது அனைத்தும் உரைதான். அதனால்தான் எங்கள் தளத்தில் சிறந்த எழுத்துருக்களை மிக கவனமாக தேர்ந்தெடுக்க வேண்டும், இதனால் அவை அளவு குறையும் போது அவை தெளிவை இழக்காது. கூடுதலாக, வலைக்கு தேவையான தன்மையைக் கொடுக்கும் ஆளுமையுடன் மற்றவர்களுடன் அதிக நடுநிலை எழுத்துருக்களை எவ்வாறு இணைப்பது என்பதை நாம் அறிந்து கொள்ள வேண்டும். எனவே, முதல் உதவிக்குறிப்பு என்னவென்றால், நீங்கள் பயன்படுத்தப் போகும் எழுத்துருக்களைத் தேர்ந்தெடுப்பதில் நேரத்தைச் செலவிடுகிறீர்கள்.
- பயன்பாட்டு உயர் தரமான படங்கள்இடம் குறைக்கப்படுவதால், படங்கள் அதனுடன் வரும். குறைக்கும்போது தரத்தை இழக்காதவற்றைத் தேர்ந்தெடுக்கவும், அளவிடும்போது அவை ஒரே மாதிரியாக செயல்படும். குறைந்த தரம் வாய்ந்த படம் உங்கள் வலைத்தளம் மோசமாக இருக்கும்.
- உங்கள் படங்கள் எப்போதும் காணப்படுகின்றன முழுஉங்கள் CSS இல் img (அகலம்: 100%;) குறியீட்டைச் சேர்ப்பதன் மூலம் உங்கள் புகைப்படங்கள் துண்டிக்கப்படுவதைத் தடுக்கவும். இந்த வழியில், சாதனத்திற்கு அதன் உயரத்தை நூறு சதவிகிதம் காணும் வகையில் படத்திற்கு கொடுக்க வேண்டிய உயரத்தை மீண்டும் கணக்கிடுமாறு சொல்கிறீர்கள்.
- அனைத்து குறைந்த அதே URLWww.mysite.com/mobile போன்ற துணை டொமைன்களை மறந்துவிடுங்கள், ஏனெனில் ரூட் கோப்புறையில் உள்ள அதே index.html கோப்பு எல்லா சாதனங்களுக்கும் வேலை செய்யும் (நீங்கள் தகவமைப்பு வடிவமைப்பை சரியாக செய்தால்). உங்களுக்கு ஏற்கனவே நன்மை தெரியும்: குறைவான துணை டொமைன்கள், பக்க சுமை வேகமாக இருக்கும்.
- ஆதரவைப் பயன்படுத்திக் கொள்ளுங்கள்: கற்பனையாக இருங்கள் ஐபாட் அல்லது மொபைல் ஃபோனிலிருந்து டெஸ்க்டாப் கணினியிலிருந்து வலைத்தளத்தை அணுகுவது ஒன்றல்ல. முதல், நீங்கள் ஒரு அமைதியான மற்றும் அமைதியான வழியில் செல்ல. பிந்தையவருடன், நீங்கள் அதை செயலற்ற நேரத்தில் செய்வீர்கள், நீங்கள் சலித்தவுடன் சாளரத்தை மூடுவீர்கள். இந்த நிபந்தனைகளைப் பயன்படுத்தி பயனரை மகிழ்விக்கவும், அவர்கள் உங்களுக்காக அர்ப்பணிக்கப் போகிற சில நிமிடங்களில் அவர்களை வேடிக்கை பார்க்கவும். அவர் வீட்டிற்கு வந்ததும் அவர் உங்களை மிகவும் நிதானமாக சந்திக்க முடிவு செய்வார்.
- ஊக்கம் பெறு டிஜிட்டல் வெளியீடுகளில், இந்த ஆலோசனை ஏன் என்று நீங்கள் ஆச்சரியப்படுவீர்கள். மிக எளிதாக: டிஜிட்டல் இதழ்கள் (நல்லது) ஆதரவை எவ்வாறு பயன்படுத்திக் கொள்ள வேண்டும் என்பதை அறிவீர்கள், அவற்றின் வடிவமைப்பு மிகவும் புத்திசாலித்தனமானது. அவர்களால் ஈர்க்கப்பட்டு, வெளியேற கடினமான ஒரு வலைத்தளத்தை உருவாக்கவும்.
மேலும் தகவல் - டிஜிட்டல் இதழ்கள்
ஆதாரம் - ஸ்ப்ளியோ, 960.gs, நெடுவரிசை
நான் அதிகம் ஏற்றுக்கொள்ளாத விஷயங்கள் உள்ளன.
புள்ளி 5 இல் ... 200px = 15,38% ஆகவும், பின்வருவனவாகவும் ... இந்த அளவுகோல் ஒப்பீடு எந்த பெற்றோர் அளவையும் இல்லாமல் செய்ய முடியாது, பிக்சல்களுக்கு அளவு என்பது சதவீதங்களைப் போன்ற ஒரு ஒப்பீட்டு நடவடிக்கை அல்ல!
அகலத்துடன் படங்களை குறிப்பிடவும்: 100% தவறு, இது ஒரு பரிந்துரையாக இருக்க வேண்டும் என்று நான் நினைக்கவில்லை. படங்கள் அவற்றின் அகலம் மற்றும் உயரத்துடன் அவற்றை சிறப்பாக வரையறுக்கின்றன, எனவே சேவையகம் தகவலை செயலாக்க குறைந்த நேரம் எடுக்கும் (அதன் அளவைக் கணக்கிட வேண்டியதில்லை) மேலும் பக்கத்தின் ஏற்றுதல் வேகத்தை மேம்படுத்துகிறோம் (இது தகவமைப்பு அல்லது பதிலளிக்கக்கூடிய வலையில் மிகவும் முக்கியமானது வடிவமைப்பு).
நான் ஏற்கனவே சேர்ப்பேன், இது ஒரு மூக்கு வேலை என்றாலும் ... விழித்திரை திரைகளுக்கான படங்கள். பதிலளிக்கக்கூடிய வலை வடிவமைப்பை நாங்கள் செய்ய விரும்பினால், விழித்திரை காட்சிக்கு படங்களை பயன்படுத்துவது கட்டாயமாகும், ஏனெனில் அதிக% மொபைல் மற்றும் டேப்லெட் காட்சிகள் இந்த திரைகளைப் பயன்படுத்துகின்றன. ஆகவே, இந்த முயற்சியை அரைகுறையாக அவர்களுக்கு வடிவமைப்பதில் எந்த அர்த்தமும் இல்லை.
மீதமுள்ளவர்களுக்கு நல்லது
புள்ளி 5 இல், அவை உங்களைச் சூழலில் வைத்து, 1300px இன் மொத்த அமைப்பைப் பற்றி 3 நெடுவரிசைகளுடன், 200, 300 மற்றும் 1000 இல் ஒன்றாகும்.
நீங்கள் அதை சதவீதங்களுக்கு அனுப்பினால், அவை நீங்கள் சொல்வது போல், 15,38% ((200 * 100) / 1300) (கீழே தசம, சர்வதேச அமைப்பு: பி)
ஆனால் நாம் ஒரு 500px தளவமைப்பைப் பற்றி பேசினால், எங்களிடம் 3 நெடுவரிசைகள் உள்ளன, 200 இல் ஒன்று, 200 இல் ஒன்று மற்றும் 100px இன் மற்றொரு, சதவீதங்கள் இனி ஒரே மாதிரியாக இருக்காது, இந்த விஷயத்தில் 200px = 40% ((200 * 100) / 500)
அவை: 200px = 40% மற்றும் 100px = 10%
வாருங்கள், நான் சொன்னது போல், அவை நீங்கள் குறிப்பிடுவதற்கான குறிப்பு அல்ல, அவை 1300px தளவமைப்பில் ஒரு குறிப்பு மட்டுமே.
குறித்து
என்ன தோல்வி, நீங்கள் உலகில் முற்றிலும் சரி! மீண்டும் நன்றி ;)