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

بنابراین ، چهار راه اصلی برای دوستانه سازی وب سایت با موبایل وجود دارد.

روش اول - طراحی واکنش گرا

قالب های واکنش گرا شامل تغییر تصویر سایت بسته به اندازه صفحه نمایش می شوند. به طور معمول ، آنها بر روی استاندارد 1600 ، 1500 ، 1280 ، 1100 ، 1024 و 980 پیکسل تنظیم شده اند. Queries برای پیاده سازی استفاده می شود. در عین حال ، خود تغییر نمی کند.

مزایای این روش عبارتند از:

• توسعه مناسب ، زیرا ساختار خود را با پارامترهای صفحه تنظیم می کند و هرگونه به روز رسانی از ابتدا به توسعه طراحی نیاز ندارد ، کافی است CSS و HTML را اصلاح کنید.
• یکی آدرس url- کاربر نیازی به حفظ چندین نام ندارد ، نیازی به تغییر مسیر نیست (تغییر مسیر از یک آدرس به آدرس دیگر) ، که می تواند کار مدیر وب سایت را پیچیده کند ، و موتورهای جستجو راحت تر می توانند منابع را مرتب و رتبه بندی کنند با یک آدرس واحد

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

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

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

روش دوم - نسخه جداگانه سایت

این روش بسیار رایج است و اغلب با موفقیت خواندن یک وب سایت در دستگاه تلفن همراه را آسان می کند. ماهیت اصلی آن ایجاد یک نسخه جداگانه از صفحه است که برای برنامه کشیده شده و در URL یا زیر دامنه جداگانه ، به عنوان مثال ، m.vk.com قرار دارد. در عین حال ، عملکرد اصلی حفظ می شود ، طراحی سایت فقط متفاوت به نظر می رسد. مزایای این روش آشکار است:

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

اما در اینجا نیز اشکالاتی وجود داشت:

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

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

راه سوم طراحی RESS است

موتور جستجوی Google به طور فعال از این جهت طراحی موبایل پشتیبانی می کند. این سخت ترین ، پرهزینه ترین ، اما م effectiveثرترین روش برای سازگاری وب سایت با تلفن یا رایانه لوحی است. RESS نامیده می شود. این یک منبع را در یک برنامه تلفن همراه هدف قرار می دهد که می تواند برای هر دستگاه به طور جداگانه بارگیری شود. برای Android - با GooglePlay و برای Apple - با iTunes.

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

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

ارزان ترین راه برای ایجاد سایت تلفن همراه

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

قالب های ویژه (افزونه ها) را برای طراحی واکنش گرا دانلود کنید. به عنوان مثال ، WP Mobile Detector ، WordPress Mobile Pack ، WPSmart Mobile و دیگران. آنها به شما کمک می کنند سایت را به طور صحیح در تلفن نشان دهید ، در حالی که چندین راهنمایی را دریافت خواهید کرد که باید برای انطباق بهتر صفحه با نسخه تلفن همراه اصلاح شود.

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

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

اصول ایجاد نسخه های تلفن همراه

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

همه موارد غیر ضروری را حذف می کنیم

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

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

هم ترازی

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

اتحاد. اتصال

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

و قطع ارتباط

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

لیست ها

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

اگر کاربر دقیقاً بداند دنبال چه چیزی است ، ثابت می شود. به عنوان مثال ، شهر ، شماره یا تاریخ. گزینه دوم برای نامهای پیچیده طولانی یا مواردی که تغییرات زیادی به همین نام وجود دارد مناسب است و هر یک کاربر را یک قدم به هدف نزدیک می کند. گزینه تکمیل خودکار بیشتر زمانی مورد استفاده قرار می گیرد که بازدیدکننده به کمک احتیاج داشته باشد. به عنوان مثال ، یک سایت بافندگی پیشنهاد خرید سوزن بافندگی را ارائه می دهد. کاربر عبارت جستجو "سوزن بافندگی فلزی" را وارد می کند و در راهنمای ابزار "سوزن بافندگی 5 میلی متر" ، "سوزن بافندگی 4.5 میلی متر" و غیره را می بیند.

تکمیل خودکار

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

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

همه چیز قابل خواندن است ، همه چیز قابل مشاهده است

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

برخی آمارها

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

اعداد به شرح زیر است. ظاهراً امروزه 87 of از مردم از گجت ها استفاده می کنند ، به جز کوچکترین کودکان و برخی افراد مسن. اقتصاددانان رشد 100 برابری تجارت موبایل را در 5 سال آینده پیش بینی می کنند. در عین حال ، تنها 21 درصد از سایت ها برای کار با دستگاه های تلفن همراه مناسب هستند. این بدان معناست که ترافیک اینترنتی و بازار تجارت الکترونیکی تنها در بخش پنجم کوچکی اشغال شده است.

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

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

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

بدون نسخه تلفن همراه ، موارد زیر نمی تواند وجود داشته باشد:

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

به جای نتیجه گیری

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

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

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

گزینه 1: طراحی واکنش گرا

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

طرفداران :

1. فقط یک نسخه از هر صفحه. صفحه برای نمایش محتوا با نوع دستگاه سازگار می شود (نوع دستگاه مشخص می شود و سپس محتوای مختلف نمایش داده می شود).
2. این روش تعمیر و نگهداری سایت را بسیار ساده می کند.
3. طراحی پاسخگو مانند دو عامل دیگر به تشخیص عامل کاربر وابسته نیست. تشخیص عامل کاربر(به عنوان مثال تشخیص اینکه کدام مرورگر یا دستگاه درخواست صفحه وب را می کند) به خودی خود بد نیست ، اما بی نقص نیست و اگر مشکلی در این روند وجود داشته باشد ، کاربران می توانند دریافت کنند نسخه اشتباهسایت شما. علاوه بر این ، عنکبوت های جستجو را از نیاز به خزیدن سایت شما در موارد مختلف رها می کند عامل کاربر- این بدان معناست که سایت شما بهتر نمایه خواهد شد.
4. طراحی وب سایت های واکنش گرا معمولاً سریعتر در مرورگرها بارگیری می شود. از آنجا که همه دستگاه ها محتوای یکسانی دریافت می کنند ، هیچ فرایندی برای تشخیص تغییر مسیر احتمالی درخواست به دلیل عامل کاربر وجود ندارد. همه می دانند که سرعت مهم است.

معایب:

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

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

یک مثال خوب از طراحی واکنش گرا وب سایت است سایت اینترنتی :

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

گزینه 2: سرو پویا

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

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

نوع دوم ، تغییر مسیر دو طرفه ، زمانی است که کاربران از نسخه موبایل به نسخه معمولی نیز هدایت می شوند. قسمت هایی از کد که مسئول چنین تغییر مسیر هستند ، گاهی اوقات تگ های کنترل نامیده می شوند. هنگام پیاده سازی این ، برچسب مشخص می شود rel = "متناوب"در نسخه معمولی ، با اشاره به سایت تلفن همراه ؛ و در سایت تلفن همراه ، برچسب قرار می گیرد rel = "متناوب"نشان دهنده نسخه اصلی اصلی سایت.

طرفداران:

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

معایب:

1. چنین پیاده سازی میزان کار را دو برابر می کند ، زیرا شما باید یک سایت جداگانه برای دستگاه های تلفن همراه با مجموعه ای جداگانه از فهرست بندی ایجاد کنید Htmlمستلزم جداگانه سئو.
2. لیست مورد نیاز رشته های ارزش نماینده کاربر نیز نیاز به نگهداری مداوم دارد زیرا هنگام عرضه دستگاه تلفن همراه جدید باید رشته های جدیدی اضافه شود.
3. در نهایت ، به خاطر داشته باشید که باید از " هدر HTTP متفاوت است"اگر سایت شما به صورت پویا در حال ارائه محتوا است. عنوان به درستی دریافت محتوا کمک می کند و به موتور سایت کمک می کند تا آن را به درستی ذخیره کند. Google جزئیات نحوه افزودن این سرصفحه را نشان می دهد ( https://developers.google.com/webmasters/smartphone-sites/details#dynamicserving) .

گزینه 3: سایت تلفن همراه

این گزینه ، همانطور که از نامش پیداست ، شامل ایجاد یک دامنه جداگانه به طور خاص برای کاربران تلفن همراه است. متداول ترین نمونه ها عبارتند از m.domain.ruیا mobile.domain.ru... این یک گزینه محبوب برای شرکت های بزرگ است. خرده فروشی... این روش شامل ایجاد محتوا به طور خاص برای بازدیدکنندگان با استفاده از تلفن همراه است (و هیچ تغییر مسیر در سطح سرور وجود ندارد).

طرفداران:

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

معایب:

1. سایت تلفن همراه شما از هیچ گونه رشد مثبتی در نمایه پیوند شما به سایت اصلی سود نخواهد برد (مگر اینکه تغییر مسیرهای دو طرفه را پیاده سازی کرده باشید). بنابراین اگر می خواهید کاربران تلفن همراه شما بتوانند شما را در جستجوی ارگانیک پیدا کنند ، این نکته می تواند به ویژه منفی باشد.
2. سایت تلفن همراه شما به مقداری نیاز دارد کار اضافیدر مورد SEO شما باید نقشه های جداگانه XML Sitemap را برای Google و Yandex ارسال کنید. علاوه بر این ، باید متا تگ های خود را ویرایش کنید. متا تگ های موبایل باید کوتاهتر از سایت معمولی باشند.

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

و mobile.nytimes.comبرای بازدیدکنندگان تلفن همراه:

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

نتیجه گیری

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

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

هر ساله ، بازدیدکنندگان به طور فزاینده ای به اینترنت دسترسی پیدا می کنند و از دستگاه های تلفن همراه خرید می کنند. با توجه به داده های Yandex.Metrica از بهار 2016 ، 29 درصد از همه بازدیدها از سایت ها در روسیه انجام می شود و این رقم دائما در حال افزایش است.

موتورهای جستجو ، که همیشه به راحتی کاربر نهایی هستند ، توصیه می کنند سایت های خود را برای دستگاه های مختلف قابل هضم کنید. رتبه بندی SERP موبایل در نظر می گیرد که آیا صفحه برای تلفن های هوشمند / رایانه های لوحی بهینه شده است یا خیر. بنابراین ، هنگام ایجاد یک وب سایت ، بهتر است فوراً در مورد آن فکر کنید. اگر سایت قبلاً وجود دارد و کار می کند ، لازم است که آن را بهینه سازی کنید تا با زمان هماهنگ باشید و مشتریان احتمالی خود را با استفاده از دستگاه های تلفن همراه از دست ندهید.

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

طراحی تطبیقی

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

مزایای:

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

ایرادات:

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

نسخه موبایل

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

مزایای:

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

ایرادات:

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

نتایج مقایسه

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

تجربه بستر ایجاد سایت Nethouse

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

تا به امروز ، حدود 25 درصد از کاربران ما به الگوهای پاسخگو تغییر داده اند. بیایید ببینیم این چگونه بر آمار سایت های آنها تأثیر می گذارد.

1. جستجو در ترافیک.

برخی از کاربران ما نگران هستند که انتقال به طراحی واکنش گرا می تواند بر ترافیک تأثیر منفی بگذارد و باید منتظر بمانند تا بازیابی شود. نمودارهای زیر نشان می دهد که این اتفاق نیفتاده است.

2. جستجو در ترافیک تلفن همراه.

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

3. عوامل رفتاری.

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

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

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

پایگاه مشترک فعال انتقال موبایلداده ها ، جهان ، میلیون نفر ، 2007-2015

در این راستا ، الگوریتم های جدیدی برای موتورهای جستجو ایجاد شد و عوامل رتبه بندی بیشتری معرفی شد: در حال حاضر نتایج جستجو در نظر می گیرد که سایت چقدر برای موبایل مناسب است (مناسب برای مشاهده در دستگاه های تلفن همراه). در Google ، الگوریتم دوستانه Mobile در 21 آوریل 2015 ، در Yandex - "Vladivostok" در 2 فوریه 2016 راه اندازی شد.

نسخه دسکتاپ سایت و نسخه سازگار برای دستگاه های تلفن همراه

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

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

مهمتر از همه ، موتورهای جستجو به وب سایت ها بی چون و چرا - چه برای موبایل مناسب هستند یا نه - امتیاز می دهند.

با استفاده از Google Tool بینش های PageSpeed(https://developers.google.com/speed/pagespeed/) می توانید سرعت بارگذاری صفحات سایت و همچنین قابلیت استفاده آنها را تعیین کنید. PageSpeed ​​می تواند از 0 تا 100 برای سرعت صفحه و تجربه کاربر متغیر باشد ، به عنوان مثال:

نتایج 85 امتیاز و بالاتر خوب تلقی می شود.

اگر صفحه سایت الزامات سرویس را برآورده نکند ، گزارشی در قالب توصیه هایی برای از بین بردن مشکلات صادر می شود ، به عنوان مثال:

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

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

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

نسخه موبایل سایت

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

"ویژگی ویژه" نسخه تلفن همراه: هنگام تغییر به آن ، URL در نوار آدرس مرورگر تغییر می کند - پیشوند "m." به آن اضافه می شود ، به عنوان مثال: m.example.ru.

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

نمونه ای از وب سایت با نسخه موبایل اقتباس شده: http://www.lamoda.ru/ (m.lamoda.ru).

مزایای اصلی نسخه موبایل سایت

• وزن کم و در نتیجه سرعت بارگیری بالا. این برای کاربرانی که دارای این ویژگی هستند ضروری است سرعت کمدسترسی به اینترنت (GPRS یا 3G ضعیف).
• انتخاب کاربر برای مشاهده کدام نسخه (تلفن همراه یا اصلی).
• مطابقت با الزامات موتورهای جستجو برای راحتی مشاهده سایت در دستگاه های تلفن همراه.

معایب نسخه موبایل

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

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

مشاهده در مانیتور کامپیوتر و دستگاه تلفن همراه - نسخه تطبیقی ​​با نسخه اصلی متفاوت است

نمونه ای از سایتی با نسخه تطبیقی: http://www.mvideo.ru/.

مزایای طراحی واکنش گرا برای موبایل

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

معایب طراحی واکنش گرا برای دستگاه های تلفن همراه

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

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

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