منو
خانهدفتر

نحوه ایجاد نسخه موبایلی صفحه اعلان های کوکی را فعال کنید. نحوه اضافه کردن برچسب به بخش "head".

همانطور که قول داده بودم، وقت آن رسیده است که به شما بگویم "لایه بندی تطبیقی" چیست و چگونه می توان نسخه موبایلی سایت را برای گوشی های هوشمند و تبلت ها ساخت و همچنین موتورهای جستجو را خشنود کرد!

اصلا چرا این همه مورد نیاز است؟ به هر حال آنها مثل قبل زندگی می کردند و هیچ. خوب، چه می توانم بگویم، اینترنت در حال تغییر است، بهتر می شود. موتورهای جستجو هر کاری که ممکن است برای راحتی و آسایش کاربران انجام می دهند... واقعا عالی است

بله، و ترافیک ابزارها روز به روز بیشتر و بیشتر می شود! مدیر سایت باید این را در نظر بگیرد ...

به احتمال زیاد، موتور جستجوی گوگل به همه مدیران وب سایت ها اطلاع داده است که اولویت رتبه بندی به سایت هایی داده می شود که برای دستگاه های تلفن همراه بهینه شده اند. اما فقط به شرطی که درخواست از طریق رایانه شخصی انجام نشده باشد.

یعنی اگر کاربر از طریق گوشی هوشمند یا تبلت وارد شده باشد، سایت ها و وبلاگ هایی که برای او طراحی شده اند همیشه بالاتر از آن هایی هستند که این را ندارند! در موارد دیگر، همانطور که من متوجه شدم، این قانون اعمال نمی شود.

به نظر می رسد به وضوح توضیح داده شده است؟ کی نفهمید؟ در نظرات بنویسید، بیایید با هم بحث کنیم.

بنابراین ، اخیراً تعطیلات داشتم ، تصمیم گرفتم مقالات مفیدتری بنویسم ، ایده های جالبی را اجرا کنم ، به طور کلی ، تعطیلات خود را با سود بگذرانم و روی مبل دراز نکشم ، اگرچه همانطور که می خواستم ، mmm ... .

در یکی از بهترین روزها من پست الکترونیک(اما همه آن را دریافت کردند) پیام زیر را دریافت کردند:

و تمام برنامه های من به هم ریخت... فکر می کنم باید با زمانه همگام باشیم... و دور می شویم! البته، اول از همه، تصمیم گرفتم یک افزونه در شبکه پیدا کنم که همه چیز را به وضوح و بدون من انجام دهد

سایت وردپرس موبایل با افزونه!

همانطور که معلوم شد، چنین پلاگین هایی وجود دارند و در اصل عملکرد خود را انجام می دهند! اما، Google check فعال است سهولت در مرور سایتاز یک دستگاه تلفن همراه، آنها عبور نمی کنند! من نمی دانم چرا، اما گوگل سرسختانه از دیدن تغییرات امتناع می ورزد، گزینه های زیادی را امتحان کرد ... بنابراین، استفاده از آنها فایده ای ندارد ...

اگر همچنان می خواهید از افزونه ها برای این منظور استفاده کنید، بهترین آنها عبارتند از:

افزونه WPtouch Mobile - من این افزونه را بیشتر از همه دوست داشتم، همه چیز کاملاً ساده و واضح است، وبلاگ من به درستی و بدون هیچ گونه مانعی نمایش داده شد!

من هر افزونه را توضیح نمی دهم، خودتان آن را امتحان کنید و تصمیم بگیرید:

  • MobilePress;
  • بسته موبایل وردپرس
  • سایت ساز موبایل دودا
  • بسته موبایل وردپرس
  • وردپرس PDA و آیفون.
  • WPmob Lite؛
  • مطبوعات WPtap News;
  • آشکارساز موبایل WP;
  • WiziApp.

یکی دیگر از معایب پلاگین ها این است که گاهی اوقات مشکل دارند، به عنوان مثال، من از طریق تلفن هوشمند می گذرم - همه چیز خوب است، دوباره آن را تکرار کردم یا آن را به روز کردم - یک سایت معمولی را نشان می دهد! چه معمایی

خلاصه به من نمی خورد و به دنبال راه حل بهتری بودم!

سپس تصمیم گرفتم این کار را به یک متخصص در بورس آزاد بسپارم، اما پس از فکر کردن زیاد تصمیم گرفتم که چیدمان تطبیقی ​​را یاد بگیرم و همه کارها را خودم انجام دهم! در پایان، من یک توسعه دهنده وب سایت هستم و زمان آن رسیده که مهارت های خود را بهبود بخشم ...

اگر کسی علاقه مند است، پس طراحی مجدد سایت به یک سایت تطبیقی ​​حدود 5000 روبل و بیشتر هزینه دارد ... من توصیه نمی کنم متخصصان بدبختی را استخدام کنید که هزینه کمتری دارند - خسیس دو بار می پردازد! و بررسی ها را بررسی کنید ...

در کل شروع کردم به مطالعه این مبحث اول تئوری بعد تمرین در وبلاگم! خوب، در اصل، من آن را یاد گرفتم، معلوم شد که هیچ چیز پیچیده ای در مورد آن وجود ندارد، اکنون وبلاگ من تطبیقی ​​است و با هر صفحه ای سازگار است و من به عنوان یک فیل خوشحالم ... از هر گوشی هوشمندی به وبلاگ من بروید و شما همه چیز را خودتان می بینید. یک جابجایی پیدا کنید - به من اطلاع دهید...

اکنون دانش خود را با شما در میان می گذارم و مهمترین نکات را به شما می گویم ...

گزینه هایی برای ایجاد یک سایت موبایل؟

تا جایی که من می دانم سه جهت وجود دارد. بیایید هر فناوری را جداگانه تحلیل کنیم، چه مزایا و معایبی داریم که می توانیم با آن روبرو شویم؟!

نسخه سایت جداگانه- این یک نوع سایت سبک وزن جداگانه است که به طور خاص برای مشاهده ایجاد شده است دستگاه های تلفن همراهیا با سرعت کم اینترنت..سایت یا http://mobile.site. در این مورد از تغییر مسیر استفاده می شود.

  • دو سایت مستقل - امکان تغییر محتوا بدون تأثیرگذاری بر سایت دیگری.
  • سرعت دانلود - از آنجایی که نسخه موبایل مستقل از نسخه اصلی است، آسان و سریع کردن آن دشوار نخواهد بود.
  • راحتی - از آنجایی که سایت کاملاً برای مخاطبان تلفن همراه طراحی شده است، ناوبری و محتوا تا کوچکترین جزئیات آسان تر است.
  • محتوای تکراری - از آنجایی که همان محتوا در نسخه اصلی و در نسخه موبایل خواهد بود. شاید متا تگ rel=canonical ذخیره کند، اما مشکلات زیادی وجود دارد.
  • بخشی از عملکرد - هر چه که می توان گفت، اما چنین سایتی یک کپی کوتاه از سایت اصلی خواهد بود، بنابراین آمار کاملاً متفاوت است. و اکثر بازدیدکنندگان انواع محدودیت ها را دوست ندارند و همیشه به سایت اصلی مراجعه می کنند...
  • ریدایرکت ها - همانطور که می دانید، انواع مختلف تغییر مسیر تاثیر منفی بر سئو می گذارند.

فناوری RES- در اینجا، یک محاسبه سمت سرور استفاده می شود، بسته به اینکه ورودی از کدام دستگاه بوده است - یک یا طرح بندی دیگر ایجاد می شود (html و css). به این میگن معجزه طراحی وب سایت واکنش گرا+ ویژه نرم افزاردر سمت سرور (RESS - طراحی وب پاسخگو و اجزای سمت سرور).

  • سرعت دانلود - امکان حذف اسکریپت ها، سبک های مختلف غیر ضروری.
  • وزن کمتر صفحه - به جای پنهان کردن عناصر مانند طرح تطبیقی، می توانید آنها را به سادگی حذف کنید.
  • ناوبری - توانایی سفارشی کردن ساختار برای دستگاه های خاص.
  • تعریف - برای صدور نسخه مورد نظر سایت باید دستگاه بازدید کننده را به طور دقیق تعیین کنید و همانطور که شنیدم با این کار همیشه همه چیز صاف نیست.

طرح‌بندی واکنش‌گرا (طراحی وب)- این طرح سایت با هر وضوح صفحه با استفاده از CSS3 Media Queries تعریف می شود. به عنوان یک قاعده، از همان منبع استفاده می شود که شامل گزینه های مختلفی برای نمایش در تلفن های هوشمند، تبلت ها و رایانه ها است.

  • ایمنی - صرف نظر از دستگاه، از همان محتوا و مجموعه ای از کدهای html استفاده می شود.
  • URL واحد - از همان URL ها و محتوا برای طرح بندی های مختلف استفاده می شود، هیچ تکراری وجود ندارد.
  • سرعت بارگذاری - از آنجایی که تمام عناصر و اسکریپت های سایت اصلی بارگذاری می شوند، حتی اگر پنهان باشند.
  • ناوبری - مشکل در ایجاد یک ناوبری تلفن همراه خوب فکر شده.

ما به تنهایی یک طرح تطبیقی ​​ایجاد می کنیم

من به چند دلیل طرح ریسپانسیو را برای وبلاگم انتخاب کردم:

  1. بدون نیاز به نقض یکپارچگی سایت اصلی، وبلاگ؛
  2. از یک محتوای واحد، یک پایگاه داده و غیره استفاده می کند.
  3. برای من شخصا سهولت اجرا (آشنایی با html و css الزامی است).

اکنون به شما خواهم گفت که چه کاری باید انجام شود تا منبع شما با هر مجوزی سازگار شود و گوگل را دوست داشته باشد

ابتدا باید متا تگ را در آن بنویسید :

با این کار به مرورگر می گوییم که عرض سایت باید با عرض ابزار، دستگاه یا هر چیزی که در آنجا دارید برابر باشد.

همچنین اگر حداکثر-scale=1.0، user-scalable=no را هم اضافه کنیم، با این کار مقیاس گذاری را ممنوع می کنیم، اما این کار را توصیه نمی کنم، بگذارید خود شخص تصمیم بگیرد، شاید مشکل بینایی داشته باشد...

اینجا شروع شده است، حالا اگر از گوشی هوشمند یا چیزی بگذریم، می بینیم که سایت ما چگونه است! غمگین ها؟!

این مورد باید با استفاده از Media Queries در فایل برطرف شود سبک های css، پارامتر به شکل زیر است:

صفحه رسانه @ و (حداکثر عرض: 240 پیکسل) و (حداکثر عرض: 720 پیکسل) (
برچسب ها و ویژگی ها در اینجا
}

یعنی این استایل ها از حداقل عرض 240px تا حداکثر عرض 720px دستگاه توسط مرورگر اعمال خواهد شد! اگر بیشتر یا کمتر از این مقادیر باشد، سبک های اصلی سایت اعمال می شود. همه چیز ساده است!

و به این صورت است که برای رزولوشن های مختلف دستگاه استایل می نویسیم. مثلا:

  • گوشی های هوشمند به صورت عمودی - از 240 تا 340، از 341 تا 420؛
  • گوشی های هوشمند به صورت افقی و برخی تبلت ها به صورت عمودی - از 421 تا 540، از 541 تا 670؛
  • تبلت به صورت عمودی - از 671 تا 800؛
  • تبلت ها به صورت افقی - از 801 تا 1024

اگر می خواهید هر عنصری را نشان دهید: display:block، اگر می خواهید آن را پنهان کنید: display:none;

برای اینکه ببینید یک وب سایت یا وبلاگ در چه شکلی است دستگاه های مختلفخدمات عالی وجود دارد:

  • http://quirktools.com
  • http://www.emulateurmobile.com/
  • http://webmark.com.ua

به هر حال، اگر شما نیاز به تطبیق سایت دارید، اما مطمئن هستید که خودتان نمی توانید این کار را انجام دهید و تمایل خاصی وجود ندارد، من خدمات خود را ارائه می دهم! می توانید کارهای من را مشاهده کنید و درخواست ارسال کنید در صفحه:.

این همه برای من است! امیدوارم مقاله من واقعا به شما کمک کرده باشد، برای سپاسگزاری، آن را به اشتراک بگذارید =)

نمونه ای از کار را در سایت مشتری ثبت کرد طرح تطبیقی، اگر هنوز اصل کار آن را متوجه نشدید، حتما نگاه کنید. به زودی میبینمت! نظرات بنویسید...


با احترام، ولادیمیر ساولیف

درس های برتر از باشگاه webformyself

این یک محصول انقلابی جدید در زمینه آموزش ساخت وب سایت است! تمام بهترین آموزش های ویدیویی در یک مکان جمع آوری شده و به دسته های وردپرس، جوملا، پی اچ پی، HTML، CSS و جاوا اسکریپت تقسیم می شوند... پایگاه داده دائما به روز می شود و اکنون بیش از 200 درس در آن وجود دارد! فقط در یک سال - شما می توانید یک وب مستر با تجربه "از ابتدا" شوید!

بیشتر

مزایا و معایب هر یک از آنها. در این مقاله نگاهی دقیق تر به این موضوع خواهیم داشت نحوه ساخت نسخه موبایلی یک سایت در یک زیر دامنه با تغییر مسیر، و عملکرد صحیح تغییر مسیر و همچنین انتقال کاربران تلفن همراه به نسخه اصلی سایت را نشان می دهد.

اساس روش این است که سرور دستگاه کاربر بازدید کننده از سایت را تعیین می کند و سپس با استفاده از تغییر مسیر HTTP و هدر Vary HTTP به صفحه وب مورد نظر هدایت می شود. سایت اصلی دارای دامنه خواهد بود سطح بالا(site.ru)، زیر دامنه موبایل (m.site.ru).

مزایا و معایب نسخه موبایلی سایت در ساب دامنه

این روش بسیار وقت گیر است، زیرا هنگام ویرایش محتوای یک صفحه وب، باید تغییراتی را در هر دو سند به طور همزمان ایجاد کنید، البته اگر از یک پایگاه داده مشترک استفاده نمی کنید. با این حال، شایان ذکر است که ساختار صفحه و نشانه گذاری HTML در یک نسخه یا نسخه دیگر می تواند کاملاً متفاوت باشد. بنابراین، پیکربندی و چیدمان انعطاف پذیر عناصر برای کاربر نهایی به دست می آید.

عامل مهم دیگر این است که برخلاف طرح‌بندی تطبیقی، می‌توانیم سایت موبایل را آنطور که باید بهینه کنیم و اسکریپت‌های JS غیر ضروری و سایر داده‌ها را از آنجا حذف کنیم.

برای جلوگیری از محتوای تکراری و تأثیر منفی در SERP موتورهای جستجو، توسعه دهندگان باید متا تگ ها را تغییر دهند. برای ایجاد تغییر مسیر کاربر به صفحه مورد نظرهمچنین لازم است صفحات را با کد اضافی تکمیل کنید.

مراحل ساخت نسخه موبایلی سایت در ساب دامین

بسیاری از توسعه دهندگان در مرحله برنامه ریزی تغییر مسیر گم می شوند. در واقع، مطالب زیادی در این مورد در شبکه نوشته شده است، اما هر روشی قادر به شناسایی صحیح همه دستگاه های تلفن همراه نیست.

از نسخه اصلی سایت تغییر مسیر دهید

در بالای سند اصلی سایت، درج کنید:

که در نسخه موبایلکافی است مستقیماً قبل از تگ مشخص شود :

لینک رفتن به سایت کامل

قبلاً، ما قبلاً یک قانون وضع کرده بودیم تا بازگردانده نشویم، بنابراین به آن تغییر دهید نسخه کاملسایت بسیار ساده به نظر می رسد:

">نسخه کامل سایت

برچسب های متا

در دامنه اصلی، باید نشان دهید که صفحه دارای نسخه موبایل است:

">

برچسب متعارف در زیر دامنه نشان داده شده است ، اما Yandex می نویسد که این قانون را نادیده می گیرد ، اما به هیچ وجه بر رتبه سایت تأثیر نمی گذارد. در نسخه موبایل جایگذاری کنید:

" />

انطباق وب سایت برای دستگاه های تلفن همراه جزء ضروری ارتقاء موفق است، زیرا اکثر کاربران راحتی را دوست دارند. اخیراً موتورهای جستجو مانند Google و Yandex شروع به کاهش رتبه سایت هایی کرده اند که برای دستگاه های تلفن همراه سازگار نیستند. در نتیجه ترافیک وب سایت کاهش می یابد. بنابراین، برای حفظ این شاخص، به نسخه موبایل وردپرس نیاز دارید.

برای شروع، ارزش تجزیه و تحلیل نمایش فعلی سایت در دستگاه های تلفن همراه را دارد. برای این کار کافیست از گوگل به پنل مدیر وب سایت بروید. در اینجا اطلاعات دقیقی در مورد کاستی ها یاد می گیرید و می توانید با کمک دانش برنامه نویسی آنها را برطرف کنید.

بهترین راه حل این است که این متن را به بخش CSS موضوع خود اضافه کنید:

#content (حداکثر عرض: 1280 پیکسل؛)

علاوه بر این، توصیه می شود که عرض صفحات نسخه موبایل را تغییر دهید (ویژگی "عرض" مسئول آن است). هنگامی که آن را در بخش CSS پیدا کردید، باید مقدار آن را به "100٪" تغییر دهید. این به مرورگر اجازه می دهد تا به طور خودکار سایت شما را در هر صفحه ای قرار دهد. اما شایان ذکر است که این روش انطباق مؤثر نیست، زیرا بارگذاری سایت زمان زیادی را می طلبد. اهداف اصلی نسخه موبایل عبارتند از بارگذاری سریعو ایجاد راحتی. علاوه بر این، این نوع سازگاری سریع نیست. شما باید به دنبال ویژگی های مناسب باشید، در صورت بروز هر گونه نقص، مقادیر آنها را آزمایش کنید و غیره.

اگر دانش برنامه نویسی ندارید، باید افزونه های خاصی را نصب کنید که به شما در صرفه جویی در زمان و سرعت بخشیدن به بارگذاری نسخه موبایل کمک می کند.

1. هامیبرای نمایش متناسب تصاویر در دستگاه های تلفن همراه مورد نیاز است. مکانیسم کار به این صورت است که پلاگین تگ تماس تصویر استاندارد img را به شکل تغییر می دهد. در صورت تمایل، در تنظیمات افزونه گزینه ای برای غیرفعال کردن نمایش تصاویر یک کلاس خاص وجود دارد. این در هنگام تطبیق اخبار و هر پورتال بزرگ دیگری ضروری است. در غیر این صورت، بارگذاری سایت بسیار بیشتر طول می کشد.

2. ویجت های پاسخگوبرای ساخت ویجت های ویژه ای که فقط در دستگاه های تلفن همراه نمایش داده می شوند، مورد نیاز است. ویجت یک بلوک سایت است که حاوی اطلاعاتی است (اخبار اخیر یا محبوب، نظرسنجی ها و غیره). انتخاب ویجت ها به اندازه کافی گسترده است تا یک سایت چند منظوره ایجاد کنید.

3. پلاگین WP Lightbox 2به ایجاد پنجره های پاپ آپ در سایت موبایل کمک می کند. بلافاصله پس از فعال سازی شروع به کار می کند. در صورت تمایل می توانید مدت زمان نمایش را تغییر دهید. به طور کلی، هیچ مشکلی در راه اندازی وجود ندارد.

4. تنظیم سازگاری سایت را برای شما بسیار آسان تر می کند. پس از فعال سازی، پنلی در بالای سایت ظاهر می شود که با استفاده از آن می توانید اندازه سایت را بسته به نوع دستگاه موبایل تنظیم کنید. این افزونه راحت است، زیرا وقتی پارامترها را تغییر می دهید، بلافاصله می توانید نتیجه را مشاهده کنید.

5. اگر می خواهید یک وب سایت آماده ریسپانسیو در عرض چند دقیقه ایجاد کنید، باید از یک افزونه استفاده کنید WP Touch. این بسیار محبوب است زیرا بیش از 5 میلیون وب مستر از آن استفاده می کنند. این افزونه شامل تنظیمات اولیه (نام، زبان، منطقه) و یک موضوع است. اگر می خواهید نسخه موبایلی کاربردی تری از سایت برای گوشی های هوشمند بسازید، باید نسخه پریمیوم WP Touch Pro را خریداری کنید. تعداد زیادی تم های مختلف و تنظیمات اضافی وجود دارد، بنابراین سایت شما یکنواخت نخواهد بود.

6. آشکارساز موبایل WPبرای تعیین دستگاهی که بازدیدکننده از آن به سایت دسترسی دارد طراحی شده است. قادر به تشخیص حدود 5 هزار دستگاه مختلف است. این افزونه همچنین آمار بازدیدهای منحصر به فرد، منابع ارجاع و موارد دیگر را ثبت می کند.

7. این یک پلاگین چند منظوره است. به لطف آن، می‌توانید نمایش دکمه‌های نوار مختلف (افزودن به نشانک‌ها و غیره)، دکمه‌های تغییر نسخه سایت از کلاسیک به موبایل، و بلوک‌های تبلیغاتی از Google یا AdMob را سفارشی کنید. همچنین شامل یک نسخه موبایل از کنترل پنل سایت است. این به طور قابل توجهی راحتی را افزایش می دهد، زیرا در نسخه استاندارد کنترل پنل، هنگام کار بر روی دستگاه های تلفن همراه، دسترسی به برخی از گزینه ها محدود است.

8. این یک کپی کامل از قبلی است. این افزونه علاوه بر گزینه های بالا، امکان اظهار نظر روی پست ها با استفاده از سیستم Disqus را نیز دارد و همچنین یک نقشه XML اضافی برای نسخه موبایل ایجاد می کند.

9. به شما کمک می کند تا یک سایت سریع و چشم نواز برای یک دستگاه تلفن همراه ایجاد کنید. با تمام تم هایی که در وب سایت رسمی موتور وردپرس ارائه می شوند عالی کار می کند. این افزونه توسط سازندگان NY Times، Forbes و سایر سایت های محبوب استفاده می شود.

10. MobilePressبه اندازه کافی ساده است این افزونه یک نسخه کاربردی موبایل بدون هیچ جلوه خاصی ایجاد می کند. مزیت چنین افزونه ای کاهش بار روی سرور است. همانطور که می دانید، هر چه یک سایت ویجت های مختلف کمتری داشته باشد، سریعتر روی صفحه دستگاه بارگذاری می شود.

11. ویرایشگر صفحه WP Mobile Splashهنگام ایجاد یک صفحه مهمان برای نسخه موبایل پورتال اینترنتی خود برای شما مفید خواهد بود. تنظیم آن بسیار آسان است و دارای طیف گسترده ای از سبک های مختلف است. با انتخاب درست طراحی می توانید ترافیک وب سایت را افزایش دهید. همچنین قابل ذکر است که این افزونه بارگذاری سریع صفحه را در هر دستگاه قابل حملی فراهم می کند.

12. هنگام استفاده موبایل معمار واپلشما یک نسخه سفارشی دریافت خواهید کرد که همان URL با نسخه کلاسیک خواهد بود. یعنی هیچ تغییر مسیری به یک زیر دامنه از فرم "m.site.com" وجود نخواهد داشت. این به هیچ وجه روی سئو تاثیر نمی گذارد. یکی از ویژگی های این افزونه همچنین توانایی تطبیق با هر موضوعی برای دستگاه های تلفن همراه است (حتی یک تم با تعداد زیادی ویجت مختلف). با تشکر از این، شما نیازی به صرف زمان اضافی برای کار با طراحی ندارید.

سازگاری بدون استفاده از پلاگین چگونه انجام می شود؟

اگر نمی خواهید از افزونه ها استفاده کنید، پس خدمات ویژه ای وجود دارد که به لطف آنها می توانید نسخه موبایل را برای هر دستگاهی بسازید.

سرویس dudamobile.com بسیار محبوب است زیرا دارای طیف گسترده ای از گزینه ها است. با این حال، این خدمات پولی است. قیمت 9 دلار خواهد بود. با توجه به اینکه نیازی به استفاده از هیچ پلاگینی ندارید، این قیمت مناسبی است.

برای شروع، باید در اینجا ثبت نام کنید یا از طریق فیس بوک مجوز را انجام دهید. پس از آن، به بخش "طراحی" بروید و روی قسمت "Layout" کلیک کنید. گزینه های ممکن برای قرار دادن ناوبری را مشاهده خواهید کرد. برای انتخاب کافیست روی گزینه مورد نظر خود کلیک کنید. برای سفارشی کردن طرح‌های رنگی، باید روی فیلد «Style» کلیک کنید. شما همچنین می توانید تصویر پس زمینه خود را آپلود کنید. قسمت "Title" مسئول این نشان است. می توانید آن را به صورت تصویر آپلود کنید یا آن را با مقداری متن ارائه دهید. به طور کلی فرآیند طراحی در حالت بصری انجام می شود. شما "پیکربندی" می کنید، و سرویس یک کد ویژه تولید می کند. همچنین لازم به ذکر است که نسخه رایگان نیز وجود دارد. اما در این صورت سایت به صورت خودکار تبلیغات نمایش می دهد.

ساده‌تر mippin.com است که دارای گزینه‌های بسیار کمتری است. مکانیسم کار مشابه سرویس قبلی است.

آزمون انطباق

پس از انجام اقدامات انجام شده، باید به نتیجه دلخواه برسید. اما برای اطمینان از اینکه تطبیق برای دستگاه تلفن همراه به درستی انجام شده است، باید از خدمات زیر استفاده کنید.

اول از همه، باید به پنل وب مستر گوگل برگردید و ببینید چقدر عملکرد نسخه موبایل شما را ارزیابی می کند. اگر ارزش 100% داشته باشید، هدف کاملاً محقق شده است. رتبه سایت شما افزایش می یابد و ترافیک خوبی خواهد داشت. اگر مقدار چند درصد کمتر باشد، این مشکل مهمی نخواهد بود. اگر نتیجه رضایت بخش نیست، باید در شیوه انطباق تجدید نظر کنید. الگو در انتخاب روش انطباق نقش اساسی دارد. اگر افزونه ها به خوبی با قالب شما کار می کنند، پس هیچ مشکلی وجود ندارد. در غیر این صورت، برای شما مطلوب است که قالب های نصب شده را غیرفعال کنید و از یک سرویس پولی استفاده کنید. در صورت لزوم، باید با یک متخصص تماس بگیرید یا یک قالب ساده تر نصب کنید.

با سرویس iPad Peek، می‌توانید کاملاً رایگان ویژگی‌های نمایش نسخه تلفن همراه خود را در دستگاه‌هایی مانند iPad، iPhone و سایر ابزارهای اپل مشاهده کنید. این سرویس محبوب است زیرا اکثر کاربران اینترنت دستگاه های اپل را ترجیح می دهند.

همچنین می توانید از سرویس شبیه ساز تلفن همراه استفاده کنید که به شما امکان می دهد نمایش نسخه موبایل خود را نه تنها در محصولات اپل، بلکه در محصولات سامسونگ، اچ تی سی و بلک بری نیز مشاهده کنید.

محبوب Screenfly است. به لطف این سرویس، به راحتی می توانید نحوه نمایش سایت خود را نه تنها در تلفن ها، بلکه در تلویزیون ها، لپ تاپ های مختلف، تبلت ها و سایر دستگاه ها نیز دریابید. در صورت تمایل می توانید پارامترهای خود را تنظیم کرده و عملکرد را مشاهده کنید.

اگر نمی خواهید یک بار دیگر به هیچ سایتی مراجعه کنید، یک بار شبیه ساز Opera Mobile را نصب کنید. این افزونه به مرورگر معروف Opera است. این رایگان و آسان برای استفاده است.

سلام به خوانندگان عزیز وبلاگم. گالیولین روسلان در تماس است. امروز در مورد نسخه های موبایلی سایت هایی صحبت خواهیم کرد که هر سایت یا وبلاگی باید داشته باشد تا بتواند به رتبه اول موتورهای جستجو برسد. در مقاله کدهای سبک و نمونه های آماده صفحه آرایی را ارائه می دهم که می توانید آنها را در رایانه خود بارگیری کنید.

اگر سایت شما همچنان سازگار با موبایل نیست، توصیه می کنم از مشاوره من استفاده کنید یا با متخصصان تماس بگیرید - http://www.mobile-version.ruکه همه کارها را طبق استانداردهای موتورهای جستجو انجام خواهد داد. همچنین می توانید با استفاده از همین پیوند، سایت خود را از نظر تحرک بررسی کنید.

در سال 2013، گوگل شروع به اعمال فشار بر وب مسترها کرد ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html، متقاعد کردن نیاز به ایجاد تغییرات سبک وب سایت، و از سال 2015، تحرک به یکی از جنبه های رتبه بندی تبدیل شده است ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex با ایجاد یک الگوریتم ویژه Vladivostok که مناسب بودن سایت را برای مشاهده از تلفن ها در نظر می گیرد، عقب نمانده است.

Mobile Friendly امروزه فقط مراقبت از بازدیدکنندگان نیست، بلکه شرطی ضروری برای ارتقاء است.

هنگامی که یک سایت از ابتدا ایجاد می شود، رویکرد Mobile First اعمال می شود. اما اکثر آنها پروژه های قدیمی دارند. سوال اصلی که نسخه موبایلی سایت در چنین مواقعی مطرح می کند این است که چگونه می توان بدون خراب شدن قالب موجود آن را ساخت؟

سه رویکرد وجود دارد:

  • آدرس و طرح بندی جداگانه - در یک زیر دامنه از فرم m.site.ru قرار داده شده است. تغییر مسیر از طریق تغییر مسیر سرور توسط عامل کاربر رخ می دهد.
  • طراحی ریسپانسیو - url و html مانند فرمت دسکتاپ باقی می مانند، اما در CSS، درخواست های رسانه ای قوانین را برای صفحه های مختلف برمی گرداند.
  • RESS یک طراحی واکنش گرا است، آدرس ثابت می ماند، اما سرور بسته به نوع سخت افزاری که صفحه را درخواست می کند، مجموعه های سبک را ارسال می کند.

برای صاحبان پروژه های قدیمی، بهترین انتخاب استفاده از طرح تطبیقی ​​است. نحوه انجام این کار را خودتان و بدون استفاده از افزونه های ناامن، مرحله به مرحله بررسی خواهیم کرد.

نسخه موبایلی سایت: چگونه این کار را درست انجام دهیم

مراحل بعدی مستلزم داشتن دانش پایه قوی از html و css یا توانایی جستجوی سریع چیزهای نامفهوم در گوگل است.

اطلاعات برای مبتدیان: در CSS، کلمات قبل از براکت های فرفری به معنای تکه های خاصی از فایل html است که وظیفه نمایش آن ها را بر عهده دارند. بیشتر با نقطه یا علامت هش نوشته می‌شود - #مکان (مخصوص: ارزش؛).

مرحله 1. محدودیت ها را حذف کنید.

دارندگان طرح‌بندی مایع می‌توانند از این مرحله بگذرند. بقیه باید سخت کار کنند.

عرض- ما به دنبال بخش های بزرگ در کد با صفحه نمایش کاملاً مشخص هستیم. اگر پارامتر بر حسب پیکسل یا نقطه مشخص شده است، باید مقدار آن را به درصد، ems و سایر واحدهایی که به محیط حساس هستند تغییر دهید. اغلب ظرف اصلی یا ناحیه محتوا دارای یک عرض ثابت است - در بیشتر موارد، محدودیت ها با جایگزینی حداکثر عرض حذف می شوند.

تصاویر- به جای اندازه های واضح، ویژگی هایی را برای تگ img تجویز می کنیم که به تصاویر سازگاری می دهد. عکس‌ها نسبت ابعاد را در کانتینرهای اصلی خود تغییر می‌دهند.

img(

حداکثر عرض: 100٪

ارتفاع: خودکار؛

جداول- سازگاری کامل را نمی توان تنظیم کرد، اما می توانید با افزودن این کد، صفحاتی را با آنها برای دستگاه های تلفن همراه مناسب کنید:

جدول(

display:block;

عرض: 100%;

سرریز-x: اسکرول;

سرریز-y: پنهان;

ms-overflow-style: -ms-autohiding-scrollbar;

webkit-overflow-scrolling: لمس;

Wraps - توسط ویژگی float تنظیم می شوند. تنظیم این گزینه به جعبه‌ها اجازه می‌دهد تا بر اساس تنظیمات پنجره حرکت کنند و با عناصری با موقعیت ثابت یا درون ظروف اصلی تنظیم شوند. عناصر div استاندارد به طور پیش فرض هر کدام را به یک خط جدید ترجمه می کنند. به عنوان مثال، با قرار دادن بلوک های div 200 پیکسل در یک ظرف 1000 پیکسلی، می توانید این تصویر را مشاهده کنید.

بلوک ها روی هم چیده شده اند. افزودن بسته بندی خطوط جدید را حذف می کند، عناصر را در یک خط در تمام فضای موجود قرار می دهد.

مرحله 2: برای سازماندهی مجدد محتوا برنامه ریزی کنید.

ببینید چه جزئیاتی از سایت دسکتاپ باید در دستگاه های تلفن همراه نمایش داده شود. برای این کار به سوالات زیر پاسخ دهید:

  • کدام بلوک ها فقط عملکردهای تزئینی را انجام می دهند؟ - اغلب اینها اسلایدرها، تزئینات نوار کناری، پرسشنامه ها، عکس های تصادفی هستند.
  • بازدیدکنندگان چه چیزهایی را نادیده می گیرند؟ - نقشه های حرارتی کلیک ها و مسیرها به پاسخ به این سوال کمک می کند. ما بی رحمانه کم فعال ترین عناصر را پنهان می کنیم.
  • چه چیزی باید در نسخه موبایل باقی بماند؟ - معمولاً این یک تبلیغ، یک فرم بازخورد، اشتراک یا دکمه های رسانه های اجتماعی است.
  • به نحوه ظاهر سایت در تبلت ها، تلفن های هوشمند و تلفن های کوچک قدیمی فکر کنید - می توانید ظاهر خود را برای هر دستگاه تنظیم کنید.

مرحله 3. راحتی.

ناوبری: صفحه نمایش تلفن بسیار کوچک است، منوی معمول سایت به ندرت در چنین قاب هایی قرار می گیرد. مرسوم است که منو را به صورت کشویی روی دکمه تنظیم کنید.

ناحیه محتوا: تلفن‌ها معمولاً عرض بلوک اصلی در CSS را بسته به فضای موجود روی 100٪ تنظیم می‌کنند. این بدان معنی است که متن، ماژول ها، تبلیغات، محتوای نوار کناری در دستگاه های کوچک در یک ستون نمایش داده می شود.

حسگرها: انگشتان به اندازه یک ماوس دقیق نیستند، فضای زیادی برای آنها باقی بگذارید. فضای اطراف پیوندها و سایر عناصر فعال باید حداقل 28×28 پیکسل باشد.

به بازدیدکنندگان خود کمک کنید تا فضای فعال را تعریف کنند - بالشتک، برجسته کردن، تغییر رنگ و موارد دیگری که می‌توانند برای لمس تنظیم شوند، شبه کلاس شناور را برای پیوندها و دکمه‌ها تجویز کنید.

پیاده سازی پرس و جوهای رسانه ای با مثال

اگر تا به حال جداول CSS را برای چاپ ایجاد کرده اید، در حال حاضر ایده ای در مورد امکان اختصاص استایل های جداگانه بسته به شرایط دارید.

پرس و جوهای رسانه ای عبارت های منطقی هستند، دسترسی به آنها مستلزم پاسخی با پارامتر درست یا نادرست است. اگر نتیجه پرس و جو درست باشد، یعنی ابعاد عامل کاربر یا دستگاه با نوع رسانه داده شده مطابقت داشته باشد، قوانین سبک مشخص شده در بلوک رسانه به طور خودکار اعمال می شود.

پرس و جوهای رسانه ای را می توان با پارامترها تخصیص داد:

  • عرض و ارتفاع پنجره مرورگر؛
  • عرض و ارتفاع دستگاه؛
  • جهت - حالت افقی یا عمودی؛
  • وضوح صفحه.

یک لیست به روز از آرگومان ها در این آدرس موجود است مشخصات رسمی

بیایید به سراغ مثال ها برویم. یک قالب آماده وجود دارد، اندازه قسمت محتوای آن 1000 پیکسل است، تمام عناصر داخلی و جزئیات در رابطه با این پارامتر پیکربندی شده اند.

اگر صفحه نمایش کاربر از قسمت محتوای مشخص شده باریک تر باشد، یک نوار اسکرول ظاهر می شود. عناصر طراحی شناور می توانند به روش های غیرقابل پیش بینی رفتار کنند - به یکدیگر برخورد کنند، پخش شوند، بیش از حد باریک شوند.

اول از همه، اندازه ثابتی که نوار را ایجاد می کند را حذف می کنیم تا با تنظیم تداخل نداشته باشد. در قالب ما، این پوشش ناوبری است. در طرح خواننده، این می تواند یک یا چند عنصر باشد. اگر با تعریف مشکل دارید، ابزارهای توسعه دهنده مرورگر را باز کنید - با استفاده از نمای مدل جعبه، عنصری را پیدا کنید که با ابعاد صفحه مطابقت ندارد.

برای رفع آن، فریم های ثابت را با اضافه کردن به استایل های قالب حذف می کنیم:

صفحه فقط رسانه @ و (حداکثر عرض: 1000 پیکسل) (

Nav (عرض: 100%؛ )

حال اگر عرض صفحه کاربر کمتر از 1000 پیکسل باشد، عرض منو برابر با 100 درصد اندازه آن خواهد بود. نسخه اصلی قالب مانند قبل به نظر می رسد. با جایگزینی ویژگی، نوار اسکرول پایین هنگام کوچک شدن صفحه حذف شد.

اما بلوک ها هنوز مشکوک به نظر می رسند - بیایید صفحه نمایش آنها را با افزایش عرض به عنوان درصد تغییر دهیم تا متناسب با ابعاد مورد نظر باشد.

ما به همان mediaquery اضافه می کنیم:

بلوک (عرض: 35٪؛)

چگونه اندازه های بهینه برای بلوک های سایت خود را دریابیم؟ به صورت دستی محاسبه کنید یا هر شبکه آماده - شبکه سیال را به عنوان پایه در نظر بگیرید. می‌توانید روی استانداردهای موجود تمرکز کنید: در طرح‌بندی‌های دو ستونی با عرض پنجره 980-1050 پیکسل، لفاف 95 درصد، محتوا 60 درصد و 30 درصد برای نوار کناری باقی می‌ماند. فضای باقی مانده به شکل گیری حاشیه و حاشیه برای دقت می رود.

با این حال، می توانید اندازه جعبه را روی محتوا اعمال کنید تا هر بار پیکسل ها را محاسبه نکنید، بلکه با توجه به ابعاد کلی کار کنید.

بیایید به تنظیم نمایشگر روی صفحه نمایش با وضوح کمتر ادامه دهیم:

صفحه فقط رسانه @ و (حداکثر عرض: 600 پیکسل) (

مسدود کردن (

float:none;

عرض: 85%;

حاشیه: 1em خودکار;

اگر صفحه نمایش کمتر از 600 پیکسل باشد، بلوک های ما باید در یک ستون قرار بگیرند - ما بسته بندی را حذف می کنیم، تورفتگی های جدید را تنظیم می کنیم، وسط می کنیم و عرض را تغییر می دهیم. بیشتر اوقات، 100٪ تنظیم می شود، اما اگر به دلایلی ناخوشایند است، ما اندازه خود را تعیین می کنیم.

بنابراین می توانید نه تنها ابعاد بلوک های محتوا، بلکه نمایش آنها را نیز تنظیم کنید. به عنوان مثال، برای جلوگیری از نمایش عناصر بزرگ، جایگزین کردن آنها با هر عنصر مناسب.

بیایید با استفاده از مثال تغییر رنگ ها و نمایشگرها، امکانات را نشان دهیم.

در نسخه گوشی هوشمند، منوی اصلی مخفی است و رنگ بلوک به آبی تغییر می کند، در حالی که صفحه نمایش بزرگتر طرح را بدون این تغییرات نمایش می دهد.

پنهان کردن پیمایش در بیشتر موارد مورد نیاز است - با یک دکمه جایگزین می شود. بهتر است این کار را با استفاده از جاوا اسکریپت انجام دهید، می توانید از راه حل های آماده استفاده کنید.

ویرایش ها به صورت نقطه ای انجام می شود، دامنه را می توان هم از بالا و هم از پایین محدود کرد. این سریع و راحت است - یک خط یک CSS جداگانه برای دستگاه های مختلف تنظیم می کند، بدون اینکه بر نمای اصلی سایت تأثیر بگذارد.

شما می توانید قوانین رسانه @ را در هر جایی از یک شیوه نامه موجود اعلام کنید، یا می توانید یک فرم جداگانه برای این اعلان ها ایجاد کنید و سپس آن را با استفاده از یک قانون import @ به CSS اصلی وارد کنید.

نسخه موبایلی سایت: چگونه بسازیم و به دنبال چه چیزی باشیم

Mediacware توسط همه مرورگرهای مدرن قابل درک است، اما در IE 8 و پایین تر کار نمی کند. مشکل با مراجعه به اینترنت اکسپلورر قدیمی از طریق نظرات شرطی حل می شود. آنها باید در کد قالب نوشته شوند، نه در CSS.

خود اسکریپت در github موجود است ( https://github.com/scottjehl/respond)، پشتیبانی از حداقل و حداکثر ابعاد و مدیاکوری ها را به IE های قدیمی اضافه می کند.

مشکل دیگر این است که طراحی واکنشگرا به معنای استفاده از Html5 است که باز هم برای مرورگرهای قدیمی غیرقابل درک است. درمان با هک:

کد در 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، این جزئیات به نظر می رسد، و گوگل به سادگی گزارش می دهد که هیچ مشکلی وجود ندارد.

اگر همه چیز به درستی انجام شود، هیچ پیمایش، هیچ عنصر غیر ضروری وجود نخواهد داشت. نسخه موبایل آماده است و اکنون نحوه ساخت آن را خودتان یاد گرفته اید. اگر مطالب برای شما مفید بود، لایک کنید و در خبرنامه وبلاگ مشترک شوید. بهترین ها.

در زیر با کلیک بر روی یکی از دکمه ها می توانید 2 نمونه از صفحه تا شده در این درس را دانلود کنید و کار با آن آسان است. صفحات آمادهو کد را کپی کنید

با احترام، گالیولین روسلان.

رایانه های شخصی ثابت دیگر تنها منبع اطلاعات نیستند. هنگام حرکت، کاربر همچنین تلاش می کند تا از همه چیزهایی که ارائه می دهد آگاه باشد. شبکه جهانیاینترنت. وضعیت فعلی به گونه ای است که ارتباط نسخه های تلفن همراه منبع غیرقابل انکار می شود. در طول دهه گذشته، گجت های موبایل از دسته «اقلام لوکس» به دسته «موارد ضروری» رفته اند. منابع تجاری برای حفظ نرخ تبدیل باید به چنین تغییراتی حساس باشند. نسخه موبایلی سایت به بخشی جدایی ناپذیر از هر پلتفرم اینترنتی که کالا یا خدمات می فروشد تبدیل شده است.

این آمار بی وقفه است، گزارش می دهد که در اکتبر تا نوامبر 2016، سهم بازدیدهای اینترنتی از طریق ابزارهای تلفن همراه به رقم قابل توجهی - 51٪ رسیده است. به این معنی که بیش از نیمی از کل ترافیک ترافیکی است که از دستگاه های تلفن همراه ایجاد می شود: تلفن های هوشمند، تبلت ها، تلفن ها.

یک نکته جالب - به عنوان مثال در روسیه، آمار بیشتر به نفع دسکتاپ است. دلیل آن این است که یاندکس، محبوب ترین موتور جستجو در روسیه، کمترین سهم را از کاربران تلفن همراه دارد.

اما روند صعودی در سهم ترافیک موبایل Yandex نیز آن را دارد، به این معنی که به زودی ما در آستانه "بسیج وب سایت" خواهیم بود - طراحان طرح بندی کار کافی خواهند داشت…

علاوه بر این، 80 درصد از افرادی که واقعاً از اینترنت بازدید می کنند صاحب گوشی های هوشمند هستند. حتی مشتریانی که از پروژه بازدید می کنند کامپیوتر رومیزی، دفعه بعد می توانید آن را از طریق تلفن انجام دهید. و ناراضی بمانند.

مشکل اینجاست که نمایشگر گجت، حتی پیشرفته ترین آن، در مقایسه با مانیتور رایانه رومیزی یا لپ تاپ بسیار کوچک است. و نمی تواند همان مقدار اطلاعات بصری را در خود جای دهد.

در نتیجه، طراحی و متن، ماژول ها و بلوک ها - همه چیز به اشتباه نمایش داده می شود. کل ماهیت طراحی از بین می رود، قابلیت استفاده (راحتی) نقض می شود، تاکید بازاریابی ناپدید می شود، انتقال صحیح USP (پیشنهاد فروش منحصر به فرد) به مشتری غیرممکن است. سایت به سادگی کار خود را انجام نمی دهد.

راه حل این مشکل ارائه منبع با نسخه موبایل است. متأسفانه ، حتی پروژه های تجاری بزرگ همیشه این را درک نمی کنند و همچنان حجم زیادی از ترافیک و بر این اساس سود را از دست می دهند.

بنابراین، نسخه موبایلی سایت اغلب محتوا و ساختار پلتفرم اصلی را تکرار می کند، اما گاهی اوقات با آن متفاوت است. در هر صورت، این یک پروژه تمام عیار با بهینه سازی محتوا و توسعه قابلیت استفاده است که به گونه ای طراحی شده است که تمام اطلاعات لازم را در یک فضای نمایش کوچک قرار دهد.

مخاطبان هدف خود را تجزیه و تحلیل کنید (TA)
قبل از اینکه به موضوع ایجاد یک نسخه موبایل صحیح از سایت بروید، باید مخاطبان خود را به دقت مطالعه کنید. ایجاد ساختار متحرک است یک رویکرد پیچیده، که در آن لازم است بسیاری از عوامل موثر بر ارزیابی موفقیت آمیز توسط کاربران در نظر گرفته شود. بنابراین، شما باید تمام جنبه های مخاطب هدف خود را بشناسید. آمار گزارش می دهد که هر چه رده سنی مخاطب کمتر باشد، احتمال اینکه منبع فقط از نسخه موبایل بازدید شود بیشتر است.

تجزیه و تحلیل باید شامل جنبه هایی مانند موقعیت جغرافیایی، عامل رفتاری، سن، ویژگی های جنسیتی، سطح درآمد، ارتباط خریدهای آنلاین برای کاربر.

انواع نسخه موبایل سایت
بنابراین، بهینه سازی نسخه موبایل سایت از طریق گزینه های زیر امکان پذیر است:

1. ایجاد یک نسخه جداگانه از سایت با URL خاص خود.در واقع این یک زیر دامنه از منبع است که همتای کامل سایت اصلی است. درست است، اغلب با عملکرد بسیار کاهش یافته است. این راه حل چندین مزیت دارد: امکان تصحیح مطالب در هر سایت به صورت جداگانه، نمایش بی نقص و عدم نیاز به طراحی مصالحه. با این حال، برای کاربر، این گزینه راحت ترین نیست. او باید یک آدرس جداگانه را به خاطر بسپارد که می تواند منجر به سردرگمی شود. برای صاحب پروژه، معایبی نیز وجود دارد - نیاز به مدیریت جداگانه سایت جدید، هزینه های مالی. همچنین، با توجه به بهبود CSS، نسخه موبایل جداگانه روز به روز کمتر تولید می شود.

2. ساده ترین راه برای انطباق با ابزارهای تلفن همراه، ارائه منبع با افزونه های خارجی است.افزونه است ماژول نرم افزار، که قابلیت های موتور سایت را گسترش می دهد. راه حل ارزان و راحت است، اما غیر کاربردی است. زوج بهترین افزونه هاهمچنان حاوی خطاهای زیادی است، نمایش نادرست صفحات ظاهر می شود. یک مثال می تواند افزونه WP Mobile Edition برای آن باشد CMS وردپرس، به ترتیب. راه حل برای شرکت هایی با کانال ترافیک جدی مناسب نیست.

3. توسعه یک اپلیکیشن موبایل.این یک راه حل بسیار کاربر پسند است. این برنامه برای نرم افزارهای خاص (IOS، Android) توسعه یافته است. در نتیجه، کاربر با آشناترین عملکرد کار می کند. درست است، برای این شما باید خود برنامه را دانلود کنید. و متقاعد کردن کاربر به اینکه نیاز به بازدید از این منبع برای او بسیار مهم است که باید نرم افزار (نرم افزار) خارجی را نصب کند کار دشواری است. بنابراین، چنین راه حلی اغلب به عنوان یک اقدام اضافی با نسخه تلفن همراه تمام عیار موجود در سایت استفاده می شود.

4. طراحی واکنش گرا.اگر به این فکر می کنید که چرا اصولاً به نسخه موبایلی سایت نیاز دارید، به راحتی می توان به این نتیجه رسید که این ساده سازی در درجه اول برای مشتریانی است که به طور همزمان رایانه شخصی و تلفن هوشمند دارند. بنابراین، اگر کاربر از یک منبع از دستگاه های مختلف در زمان های مختلف بازدید کند، طراحی واکنش گرا است بهترین انتخاب. این یک راه حل کار فشرده تر است. اما به شما امکان می دهد منبعی ایجاد کنید که به طور خودکار تصویر بصری را با هر عرض صفحه تنظیم کند و کاربر همیشه نمایش صحیح اطلاعات را ببیند.

نحوه راه اندازی نسخه موبایلی سایت
باید درک کرد که انتقال یک منبع موجود به طراحی تطبیقی ​​یا ایجاد یک سایت جداگانه کافی نیست. نسخه موبایل شامل تغییر کیفی در کل ساختار منبع، بهینه سازی محتوا، ماژول ها، قابلیت استفاده و غیره است.

اندازه متون موجود در منبع را بهینه کنید
نظرات متناقض زیادی در مورد میزان متن، به خصوص برای صفحات فرود وجود دارد. حجم متوسط ​​فعلی اغلب بر روی مقدار: 2000 کلمه استوار است. با این حال، آیا بهینه است؟

اول اینکه موضوع صفحه از اهمیت بالایی برخوردار است. اگر موضوع مقاله مستلزم استدلال فضایی باشد، حجم زیادی از متن حق حیات دارد. اما اگر کاربر برای پاسخ روشن مراجعه کند، پس از آن سایت سپاسگزار نخواهد بود، که او را مجبور به خواندن اطلاعات غیر ضروری زیادی می کند.

ثانیاً، آمارهای مدرن نشان می دهد که متون مختصر نرخ تبدیل بالاتری دارند. برای کاربران موبایل صفحات فرود(صفحات فرود) برای 2000 کلمه، اندازه متن بسیار بزرگ است. بنابراین، ارزش آن را دارد که آن را کاهش دهیم، و به دنبال حد وسطی بین بازدیدکنندگان از رایانه های شخصی و تلفن های هوشمند باشیم. توصیه می شود متون در صفحات فرود را به 1000 کلمه کاهش دهید. و بر این اساس، ارزش دارد که تمام صفحات سایت مختصرتر شود. در عین حال، چنین تصمیمی ممکن است شامل یک بازنگری کامل در کل هسته معنایی باشد.

این کار انرژی بر است، اما ضرورت آن بدون شک است. شعار: "آن را ساده کن" یک روند مدرن است که در میان پیشرفته ترین کاربران گوشی های هوشمند بسیار رایج است. طبیعتاً نباید پایان نامه های اصلی متون سایت را کوتاه کنید، فقط آنها را اصلاح کنید و نسخه های بزرگتر و کوچکتر ایجاد کنید. این امر در مورد سایت‌هایی که کالاها یا خدمات خود را ارائه می‌کنند صدق می‌کند، اما برای مثال، سایت‌های خبری باید متون گسترده‌تری داشته باشند.

با عناوین خود مشخص باشید
روند سرفصل ClickBait در حال محو شدن است. عناوین مبهم و مبسوط که یک سوال بدون پاسخ هستند، یک عبارت شکسته - همه اینها کارایی خود را از دست می دهند. عناوین کوتاهی که بلافاصله به وضوح اطلاعات موجود در مقاله را مشخص می کند همان چیزی است که کاربران اکنون به دنبال آن هستند.

عنوان باید تا حد امکان مرتبط (مطابق) با خود صفحه باشد. در غیر این صورت، کاربر احساس تقلب می کند و بعید است که به مشتری راضی تبدیل شود.

ساختار متن را بررسی کنید
ویژگی های مشاهده یک صفحه از دستگاه های تلفن همراه به گونه ای است که اهمیت زیادی در ساختار متن دارد. تا حد امکان "قلاب چشم" ایجاد کنید. هر پایان نامه را به بخش های کوچکتر تقسیم کنید، افکار کامل را در یک پاراگراف جدید قرار دهید. بیشتر تماس بگیرید لیست های گلوله ایاظهارات قاب شده

این بسیار مهم است، زیرا کاربر موبایل می خواهد نکات اصلی را که متن به او ارائه می دهد به وضوح ببیند! ویژگی های نسخه موبایل سایت نیاز به قالب بندی و ساختار خاصی دارد که کاملاً از شر "پارچه های متن" خلاص می شود. به ساختار یکی از متون در وب سایت Seoquick نگاه کنید.

سرعت بارگذاری صفحه را بررسی کنید
سرعت بارگذاری صفحه تلفن همراهمعمولاً با همان رقم در رایانه شخصی متفاوت است. پارامترهای ساده تر سیستم ابزار، مشکل ساز است اینترنت تلفن همراه- همه اینها تأثیر دارد. بنابراین، سعی کنید سرعت بارگذاری صفحه در نسخه موبایل منبع را افزایش دهید. برای این کار از فشرده سازی فایل استفاده کنید. اول از همه، به خدماتی مانند:

کمپرسور HTML که اندازه اسکریپت ها و خود کد روی صفحه را تنظیم می کند.
. کمپرسور جاوا اسکریپت که اسکریپت های جاوا را فشرده می کند.
. کمپرسور CSS، به ترتیب، با شیوه نامه کار می کند.

استفاده از خدمات فشرده سازی تصاویر را فراموش نکنید. اغلب، این تصاویر هستند که شدت انرژی را ایجاد می کنند که مانع از بارگذاری سریع صفحه شما می شود.

از روش های معمول مانند کار با کش مرورگر غافل نشوید. حافظه پنهان مرورگر - کپی ذخیره شده صفحه مجازیکه کاربر قبلاً از آن بازدید کرده است. به طور مداوم سرعت بارگیری منابع را از طریق خدمات ویژه آزمایش کنید. در این نقش PageSpeed ​​Insights یا.

طراحی خود را بهینه کنید
این در مورد تطبیق طراحی نیست، بلکه در مورد ساده کردن آن است. الزامات نسخه موبایلی سایت، اول از همه، دقیقاً در سادگی و مختصر بودن است. عناصر حجیم که فقط برای جزء بصری کاربرد دارند: سایه ها، شیب ها - بارگیری را دشوار می کنند و در اصل از مد افتاده اند. شما می توانید از طریق یک بازی پیش پا افتاده با رنگ به همان اثر برسید.

روند مدرن اصول مینیمالیسم، سادگی خطوط و هندسه دقیق فرم ها را دیکته می کند. پرمدعا و روشنایی منفی درک خواهد شد. همچنین، تمام پنجره های بازشو را کاهش داده یا آزمایش کنید. برخی از آنها ممکن است در برخی از سیستم عامل های تلفن همراه به درستی کار نکنند. که باز هم باعث نارضایتی کاربران خواهد شد. مثال خوبمینیمالیسم در طراحی منابع:

تعداد پلاگین ها را کاهش دهید
ویژگی های مدرن HTML5 به شما این امکان را می دهد که تقریباً هر افزونه ای را در صورت کارکرد صحیح جایگزین مناسبی پیدا کنید. در عین حال، بدون از دست دادن یک لبه از جذابیت بصری منبع خود. مشکل پلاگین ها این است که:

آنها وزن صفحه را افزایش می دهند و ما به یاد می آوریم که بارگذاری سریع برای نسخه موبایل سایت چقدر مهم است.
. ممکن است به درستی نمایش داده نشود پلت فرم موبایلیا در مرورگر موبایل(این به خود افزونه بستگی دارد)؛
. آنها صفحات را از نظر ارتباط پایین می آورند (زیرا به دلیل افزایش وزن صفحه، سطح قابلیت استفاده آن کاهش می یابد).

در حالت ایده آل، منبع باید در اصل از افزونه ها خودداری کند. مگر اینکه منجر به از بین رفتن عملکرد یا جنبه های طراحی شود. این نواری است که منبع باید برای رسیدن به آن تلاش کند.

بهبود قابلیت استفاده وب سایت
هنگام تجزیه و تحلیل این سوال که چگونه می توان نسخه موبایلی سایت را ساخت، اول از همه، لازم به یادآوری است که تلفن های هوشمند مکان نما ندارند. بر این اساس، کلیک کردن بر روی یک شی دشوار است. به خصوص اگر کوچک باشد. و اگر کاربر مجبور است مقیاس را برای یک کلیک تغییر دهد، شما کار اشتباهی انجام می دهید. عناصر قابل کلیک با اندازه کافی ایجاد کنید، آنها را گروه بندی نکنید. و فاصله کاربر در منبع را تا هر بخش کاهش دهید. رفتن به جایی با دو کلیک به جای یک کلیک یک اشتباه جدی است.

همین امر در مورد فرم ثبت نام در منبع نیز صدق می کند، آن را تا حد امکان ساده کنید. عناصر را کاهش دهید، امکان ثبت نام از طریق یک حساب کاربری در شبکه های اجتماعی را اضافه کنید. و منبع را با دکمه هایی برای رایج ترین ها فراهم کنید شبکه های اجتماعی، البته.

خلاصه کردن
یکی از معیارهای اصلی برای نسخه موبایل با کیفیت بالا، مرتبط بودن روند آن است. لازم است در کنار هم باشید، به سرعت به هر گونه تغییر در روند پاسخ دهید. پس از همه، بهینه سازی نسخه موبایل از بسیاری جهات به دنبال راحتی برای کاربران گوشی های هوشمند است. و آنها معمولاً فقط مترقی ترین مشتریان هستند که نسبت به منابعی که نشانه هایی از منسوخ شدن را نشان می دهند بسیار بدبین هستند.