மொபைல் பயன்பாட்டிற்கான HTML டெம்ப்ளேட். மொபைல் பயன்பாட்டிற்கான HTML டெம்ப்ளேட் பக்கத்தின் மொபைல் பதிப்பிற்கான எளிய HTML டெம்ப்ளேட்

💖 உங்களுக்கு பிடிக்குமா?உங்கள் நண்பர்களுடன் இணைப்பைப் பகிரவும்

இன்று, பெரும்பாலான மக்கள் மொபைல் கேஜெட்டுகள் மூலம் இணையத்தை அணுகுகிறார்கள் - டேப்லெட்டுகள், தொலைபேசிகள் மற்றும் இது சம்பந்தமாக, வலைத்தள மேம்படுத்தலும் அடங்கும் புதிய நிலை. ஒரு பயனர் வந்து, தளம் மொபைல் சாதனங்களுக்கு உகந்ததாக இல்லை என்று பார்த்தால்: படத்தைப் பார்க்க முடியாது, பொத்தான்கள் நகர்ந்துவிட்டன, எழுத்துருக்கள் சிறியதாகவும் படிக்க முடியாததாகவும் உள்ளது, வடிவமைப்பு வளைந்துள்ளது - 100% இல் 99 அவர் விட்டுவிடுவார். மற்றொரு வசதியான ஒன்றைத் தேடத் தொடங்குங்கள். ஆதாரம் பொருத்தமற்றது, அதாவது தேடல் வினவலுடன் பொருந்தவில்லை என்பதை இது சரிபார்க்கும். எனவே, பக்க வடிவமைப்பு பல்வேறு மொபைல் சாதனங்களுக்கு ஏற்றதாக இருக்க வேண்டும். இணையதளத்தின் மொபைல் பதிப்பு என்றால் என்ன, அதை எவ்வாறு உருவாக்குவது மற்றும் பயன்படுத்த சிறந்த முறை எது? இந்த கட்டுரையில் மேலும் படிக்கவும்.

எனவே, உங்கள் தளத்தை மொபைல் பதிப்பிற்கு ஏற்ப நான்கு முக்கிய வழிகள் உள்ளன.

முறை ஒன்று - பதிலளிக்கக்கூடிய வடிவமைப்பு

தகவமைப்பு வார்ப்புருக்கள் திரையின் அளவைப் பொறுத்து இணையதளப் படத்தை மாற்றுவதை உள்ளடக்கியது. ஒரு விதியாக, அவை நிலையான 1600, 1500, 1280, 1100, 1024 மற்றும் 980 பிக்சல்களுக்கு அமைக்கப்பட்டுள்ளன. வினவல்கள் செயல்படுத்த பயன்படுத்தப்படுகின்றன. அது தன்னை மாற்றிக்கொள்ளாது.

இந்த முறையின் நன்மைகள் பின்வருமாறு:

  • வசதியான மேம்பாடு, கட்டமைப்பானது திரை அளவுருக்களுக்கு ஏற்றதாக இருப்பதால், எந்தவொரு புதுப்பிப்புக்கும் புதிதாக வடிவமைப்பை உருவாக்க வேண்டிய அவசியமில்லை, CSS மற்றும் HTML ஐ சரிசெய்ய இது போதுமானது;
  • ஒரு URL முகவரி - பயனர் பல பெயர்களை நினைவில் வைத்திருக்க வேண்டிய அவசியமில்லை, திசைதிருப்ப வேண்டிய அவசியமில்லை (ஒரு முகவரியிலிருந்து மற்றொரு முகவரிக்கு திசைதிருப்பல்), இது ஒரு வெப்மாஸ்டரின் வேலையை சிக்கலாக்கும், மேலும் ஒரு தேடுபொறிக்கு வரிசைப்படுத்த எளிதானது மற்றும் ஒரே முகவரியுடன் ஒரு ஆதாரத்தை தரவரிசைப்படுத்தவும்.

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

  • டெஸ்க்டாப்பில் உள்ள அதே பணிகளை மொபைல் சாதனத்தில் பதிலளிக்கக்கூடிய வடிவமைப்பு ஆதரிக்காது. எடுத்துக்காட்டாக, இது வங்கியின் இணையதளத்தின் மொபைல் பதிப்பாக இருந்தால், பரிமாற்ற விகிதங்கள் அல்லது அருகிலுள்ள ஏடிஎம்களைப் பற்றிய தகவல் பயனருக்குத் தேவைப்படும், இந்த வடிவமைப்பு போதுமானது. ஆனால் இது பல பிரிவுகள் மற்றும் உட்பிரிவுகளைக் கொண்ட ஒரு சிக்கலான கட்டமைக்கப்பட்ட வளமாக இருந்தால், அது பார்வையாளர்களை ஈர்க்க வாய்ப்பில்லை.
  • மெதுவாக ஏற்றுவது உங்களுக்குப் பிடித்த தளமாக மாறுகிறது. அனிமேஷன், வீடியோக்கள், பாப்-அப்கள் மற்றும் பிற செயலில் உள்ள கூறுகள் ஏராளமாக இருக்கும் ஆதாரங்களுக்கு இது குறிப்பாக உண்மை. பெரிய எடை காரணமாக, பக்கம் வெறுமனே "மெதுவாக" இருக்கும், பயனர் கோபமடைந்து வெளியேறுவார், மேலும் தளத்தின் தேடல் நிலைகள் வீழ்ச்சியடையும்.
  • அணைக்க இயலாமை மொபைல் பதிப்பு- மற்றொரு குறிப்பிடத்தக்க குறைபாடு. அத்தகைய தளவமைப்பு மூலம் ஒரு உறுப்பு மறைக்கப்பட்டிருந்தால், அதைத் திறக்க நீங்கள் எதையும் செய்ய முடியாது, நீங்கள் அதை முடக்கலாம் மற்றும் வழக்கமான டொமைனுக்கு மாறலாம்.

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

முறை இரண்டு - தளத்தின் தனி பதிப்பு

இந்த முறை மிகவும் பொதுவானது மற்றும் பெரும்பாலும் மொபைல் சாதனத்தில் ஒரு தளத்தை மிகவும் பயனர் நட்பாக மாற்றுகிறது. பயன்பாட்டிற்காக வடிவமைக்கப்பட்ட பக்கத்தின் தனி பதிப்பை உருவாக்குவதே இதன் சாராம்சம் மற்றும் ஒரு தனி URL அல்லது துணை டொமைனில் அமைந்துள்ளது, எடுத்துக்காட்டாக, m.vk.com. அதே நேரத்தில், முக்கிய செயல்பாடு பாதுகாக்கப்படுகிறது, தள வடிவமைப்பு வித்தியாசமாக தெரிகிறது. இந்த முறையின் நன்மைகள் வெளிப்படையானவை:

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

ஆனால் இது அதன் குறைபாடுகள் இல்லாமல் இல்லை:

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

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

மூன்றாவது வழி RESS வடிவமைப்பு

கூகிள் தேடுபொறி மொபைல் வடிவமைப்பின் இந்த திசையை தீவிரமாக ஆதரிக்கிறது. இது மிகவும் கடினமான, விலையுயர்ந்த, ஆனால் ஒரு ஃபோன் அல்லது டேப்லெட்டிற்கு இணையதளத்தை மாற்றியமைக்கும் சிறந்த முறையாகும். இது RESS என்று அழைக்கப்படுகிறது. இது ஒவ்வொரு சாதனத்திற்கும் தனித்தனியாக பதிவிறக்கம் செய்யக்கூடிய மொபைல் பயன்பாட்டில் ஆதாரத்தை குறிவைக்கிறது. Android க்கு - GooglePlay இலிருந்து மற்றும் Apple க்கு - iTunes இலிருந்து.

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

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

மொபைல் இணையதளத்தை உருவாக்குவதற்கான மலிவான வழி

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

பதிலளிக்கக்கூடிய வடிவமைப்பிற்கான சிறப்பு டெம்ப்ளேட்களை (செருகுநிரல்கள்) பதிவிறக்கவும். எடுத்துக்காட்டாக, WP மொபைல் டிடெக்டர், வேர்ட்பிரஸ் மொபைல் பேக், WPSmart மொபைல் மற்றும் பிற. உங்கள் மொபைலில் தளத்தை இன்னும் சரியாகக் காண்பிக்க அவை உங்களுக்கு உதவும், மேலும் பக்கத்தை மொபைல் பதிப்பிற்கு ஏற்றவாறு மாற்றியமைக்க என்ன திருத்தப்பட வேண்டும் என்பதற்கான பல உதவிக்குறிப்புகளைப் பெறுவீர்கள்.

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

இந்த முறையால், பெரும்பாலும், விளம்பரம் மற்றும் பாப்-அப் பேனர்கள் துண்டிக்கப்படும், ஆனால் பக்கம் விரைவாகவும் தாமதமின்றியும் ஏற்றப்படும்.

மொபைல் பதிப்புகளை உருவாக்குவதற்கான கோட்பாடுகள்

தளத்தின் மொபைல் பதிப்பு இலவசமாக உருவாக்கப்பட்டதா அல்லது வெப்மாஸ்டர்களின் ஊழியர்களின் உதவியுடன் உருவாக்கப்பட்டதா, இது RESS அமைப்பைப் பயன்படுத்தி உருவாக்கப்பட்டதா அல்லது தகவமைப்பு டெம்ப்ளேட்டைப் பயன்படுத்தி உருவாக்கப்பட்டதா என்பது முக்கியமல்ல. மிக முக்கியமான விஷயம் என்னவென்றால், அது திறம்பட செயல்பட, பல மிக முக்கியமான கொள்கைகளை கடைபிடிக்க வேண்டியது அவசியம். எனவே, தளத்தின் மொபைல் பதிப்பு எப்படி இருக்க வேண்டும்? அதை எப்படி உற்பத்தி, திறமையான மற்றும் உற்பத்தி செய்ய?

தேவையற்ற அனைத்தையும் அகற்றுவோம்

மினிமலிசம் என்பது ஒரு இணையதளத்தின் மொபைல் பதிப்பின் டெவலப்பர் பாடுபட வேண்டும். வண்ணங்கள், பொத்தான்கள், பதாகைகள் மற்றும் சரியான பொருளைத் தேடி நீங்கள் முடிவில்லாமல் உருட்ட வேண்டிய தகவலைப் புரிந்துகொள்வது எவ்வளவு கடினம் என்று கற்பனை செய்து பாருங்கள். மொபைல் வடிவமைப்பு எளிமையாகவும் சுத்தமாகவும் இருக்க வேண்டும். இடத்தைப் பிரிக்க 2-3 வண்ணங்களைத் தேர்ந்தெடுக்கவும் (உதாரணமாக, பிராண்டட் செய்யப்பட்டவை). அவர்களில் ஒருவர் வெள்ளை நிறமாக இருந்தால் நல்லது. சிறிய திரை இடத்தை தெளிவான மற்றும் படிக்கக்கூடிய பகுதிகளாக பிரிக்கவும். மெய்நிகர் விசைகள்காணக்கூடியதாக இருக்க வேண்டும், இதனால் பயனருக்கு எங்கு கிளிக் செய்வது மற்றும் பார்ப்பது என்பது தெளிவாகத் தெரியும் - இங்கே தயாரிப்பு உள்ளது, தரவை நிரப்புவதற்கான படிவம் இங்கே உள்ளது, டெலிவரி மற்றும் கட்டணம் பற்றிய தகவல் இங்கே உள்ளது.

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

சீரமைப்பு

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

சங்கம்

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

மற்றும் துண்டிப்பு

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

பட்டியல்கள்

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

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

தானாக நிரப்பு

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

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

எல்லாம் படிக்கப்படுகிறது, எல்லாம் பார்க்கப்படுகிறது

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

சில புள்ளிவிவரங்கள்

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

எண்கள் பின்வருமாறு. இன்று, 87% மக்கள் கேஜெட்களைப் பயன்படுத்துகின்றனர், வெளிப்படையாக இளைய குழந்தைகள் மற்றும் சில வயதானவர்கள் தவிர. பொருளாதார வல்லுநர்கள் வளர்ச்சியை கணிக்கின்றனர் மொபைல் வர்த்தகம்அடுத்த 5 ஆண்டுகளில் 100 முறை. இருப்பினும், 21% தளங்கள் மட்டுமே மொபைல் சாதனங்களுடன் வேலை செய்யத் தழுவின. இதன் பொருள், இணைய போக்குவரத்து மற்றும் இ-காமர்ஸ் சந்தை ஒரு சிறிய 5 வது பகுதியால் மட்டுமே ஆக்கிரமிக்கப்பட்டுள்ளது.

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

மொபைல் பதிப்பு எங்கே தேவை?

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

மொபைல் பதிப்பு இல்லாமல் பின்வருபவை இருக்க முடியாது:

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

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

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

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

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

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

இலவச HTML இணையதள டெம்ப்ளேட்களைப் பதிவிறக்கி, எந்த நேரத்திலும் உங்கள் திட்டங்களை உருவாக்கவும்.

    ஒரு தீர்வு இருக்கிறது

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

    ஷாப்-ஸ்கிரிப்ட் 6க்கான முழுமையான பதிப்பு இதோ: பொது நிலையான செயல்பாடு மொபைல்($செக் = உண்மை) (($செக்) என்றால் (செல்ஃப்::கெட்("நோமொபைல்") ::get( "nomobile")) (waSystem::getInstance()->getStorage()->write("nomobile", false); ) ) elseif (self::get("mobile")) (waSystem:: getInstance()- >getStorage()->write("nomobile", true);...

    எங்களிடம் ஒரு வலைத்தளம் உள்ளது http://kotofey.md (webasyst க்கு நிறுத்தப்பட்டுள்ளது), இது https://kotofey.webasyst.cloud (facebook டெம்ப்ளேட்) இன் கண்ணாடியாகும், அதன் அடிப்படையில் facebook இல் ஆன்லைன் ஸ்டோர் பயன்பாடு செய்யப்படுகிறது - https //www.facebook .com/kotofey.md/app/2151596388...is...

    மொபைல் பதிப்பில் மெனு உருப்படிகளை மாற்றவும்

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

    ஆன்லைன் ஸ்டோர் மொபைல் பதிப்பு

    எக்ஸ்பிரஸ் கடையின் மொபைல் பதிப்பு டெம்ப்ளேட்டை முழுமையாகத் தனிப்பயனாக்கி, ஆன்லைன் ஸ்டோரை உருவாக்கவும்.

    தளத்தின் மொபைல் பதிப்பின் தளவமைப்பு

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

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

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

    ஒரு தீர்வு இருக்கிறது

    நல்ல நாள், மொபைல் அல்லது டெஸ்க்டாப் பதிப்பைப் பொறுத்து நான் வெவ்வேறு உள்ளடக்கத்தைக் காட்ட வேண்டும்.

    ($wa->isMobile()) .... (/if)

    +1

    ஒரு தீர்வு இருக்கிறது

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

    CSS பற்றி இன்னும் கொஞ்சம் சொல்ல முடியுமா?

    நிமிடமாக்குங்கள். மொபைல் பதிப்பில் தொகையை ஆர்டர் செய்து படத்தைச் செருகவும்.

    செய்ய வேண்டியது: 1) குறைந்தபட்சம். தளத்தின் மொபைல் பதிப்பில் ஆர்டர் தொகை (in வழக்கமான பதிப்புஇது cart.js டெம்ப்ளேட்டிலும், மொபைல் பதிப்பிலும் எழுதப்பட்டுள்ளது) 2) தளப் பக்கத்தில் ஒரு படத்தைச் செருகவும், அதனால் கிளிக் செய்யும் போது அது முழு அளவிற்கு விரிவடையும்.

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

    ஒவ்வொரு நாளும் பதிவு செய்யும் போட்களின் கூட்டத்தை முறியடிக்க, நான் Google Recaptcha v.2 ஐ நிறுவ வேண்டியிருந்தது, போட்கள் மறைந்துவிட்டன, ஆனால் “நான் ஒரு ரோபோ இல்லை” தேர்வுப்பெட்டி சாதாரண மக்களுக்கு வேலை செய்யாது மற்றும் செக் பாப் என்றால் மேலே, பின்னர் தளத்தின் மொபைல் பதிப்பில் (வார்ப்புரு:...

    ஒரு தீர்வு இருக்கிறது

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

    ஸ்கிரிப்ட் GitHub இல் கிடைக்கிறது (https://github.com/scottjehl/Respond), பழைய IEக்கு குறைந்தபட்ச மற்றும் அதிகபட்ச பரிமாணங்கள் மற்றும் மீடியா வினவல்களுக்கான ஆதரவைச் சேர்க்கிறது.

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

    Document.createElement("தலைப்பு");

    Document.createElement("nav");

    Document.createElement("பிரிவு");

    Document.createElement("கட்டுரை");

    Document.createElement("ஒருபுறம்");

    Document.createElement("அடிக்குறிப்பு");

    குறியீடு html இல் எழுதப்பட்டுள்ளது, உருவாக்கப்பட்ட உறுப்புகளின் தொகுதி காட்சி CSS இல் அமைக்கப்பட்டுள்ளது:

    தலைப்பு, நாவ், பிரிவு, கட்டுரை, ஒதுக்கி, அடிக்குறிப்பு (காட்சி:தடுப்பு;)

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

    என்றால் ($(document).width() > 980) (

    $.getScript("ஸ்கிரிப்டுக்கான பாதை");

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

    சரியானதைச் சரிபார்க்க மட்டுமே எஞ்சியுள்ளது - இதற்காக நீங்கள் உங்கள் சொந்த உலாவி மற்றும் தொலைபேசியைப் பயன்படுத்தலாம் அல்லது சேவைகளுக்குத் திரும்பலாம்.

    உள்ளூர் சேவையகத்தில் தளம் மறுவடிவமைப்பு செய்யப்பட்டால், சரியான தன்மையை ami.responsivedesign.is இல் தீர்மானிக்க முடியும். சரியான காட்சிக்கு, டென்வர் உரிமையாளர்கள் httpd.conf கோப்பை சேவையகத்தைத் திருத்துவதன் மூலம் utf-8க்கு குறியாக்கத்தை மாற்ற வேண்டும்.

    வெவ்வேறு சாதனங்களில் திட்டம் எப்படி இருக்கும் என்பதை இந்த சேவை நிரூபிக்கும்.

    கூடுதலாக, டெம்ப்ளேட் https://developers.google.com/speed/pagespeed/insights/ அல்லது ஒரு சிறப்பு வடிவத்தில் https://www.google.com/webmasters/tools/mobile-friendly மற்றும் வெப்மாஸ்டர்களில் சோதிக்கப்படுகிறது .

    Yandex இல் இது விரிவாகத் தெரிகிறது, ஆனால் Google வெறுமனே எந்த பிரச்சனையும் இல்லை என்று தெரிவிக்கும்.

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

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

    உண்மையுள்ள, கலியுலின் ருஸ்லான்.

நண்பர்களிடம் சொல்லுங்கள்