راهنمای جامع برای طراحی وب سایت سازگار با موبایل راهنمای جامع برای طراحی وب سایت سازگار با موبایل

رتبه این آیتم
راهنمای جامع برای طراحی وب سایت سازگار با موبایل
رتبه 5 در 1 رای از 1 تا 5

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

  • اولویت جستجوی موبایلی چقدر بالاست؟

روشن بگم، دیگه جستجوی موبایلی موندگاره و من قطعا نمیخوام بگم موقع بازسازی یا ساخت سایتتون ندید بگیریدش. اما خب استارتاپ ها و شرکتهای کوچیکی که سرمایشون کمه، باید این سرمایه رو به جاهایی اختصاص بدن که براشون بیشترین سود رو داشته باشه. پس باید با توجه به شرایط خودتون، اولویت طراحی یه سایت سازگار با موبایل رو برای شرکتتون بسنجید. اما چطوری؟ برای اینکار باید برید سراغ آنالتیکز سایتتون. برید به قسمت overview < mobile < audience تا ببینید چند نفر از کاربرهای سایتتون از کاربرهای موبایلن. البته شاید علت کم بودن مخاطب موبایلی سایتتون ربطی به گرایشات مخاطب های حوزه کاری شما نداشته باشه، بلکه بیشتر بخاطر عدم سازگاری سایتتون با دستگاه های همراه اینطور شده باشه. پس باید راجع به اینکه مخاطب های شما چطور و چه وقتهایی بیشتر از موبایل استفاده میکنن، تحقیق کنید. ابزار Consumer Barometer و AdWords Display Planner  برای اینکار مناسبن.

  • من برای سایتم یه اپلیکیشن دارم، حالا سازگار با موبایل به حساب میاد؟

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

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

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

  • طراحی سایت واکنشگرا

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

  • مزایای طراحی سایت واکنشگرا

1- URLها در همه دستگاه ها یکسان می مانند.
2- HTML در همه دستگاه ها ثابت می ماند.
3- فهرست بندی سایت برای گوگل راحتتر خواهد بود.
4- نگهداری سایت در مدت طولانی راحتتر خواهد بود.
5- سرعت بارگذاری سایت سریعتر خواهد بود (چون نیازی به ریدایرکت ندارد)
6- روش مورد توصیه گوگل است.

  • معایب طراحی سایت واکنشگرا

1- هزینه اولیه طراحی بالاتر
2- واکنشگرایی به خودی خود نرخ تبدیل مشتری رو تضمین نمی کنه.
هزینه نگهداری سایت های واکنشگرا در مدت های طولانی به شدت کمتره، اما هزینه های طراحی اولیه بالایی داره. به علاوه، چون نیازی نیست کاربرها به نسخه موبایلی سایت ریدایرکت بشن، معمولا سایت های واکنشگرا زودتر لود (بارگذاری) میشن.

  • سایت دینامیک (طراحی انطباقی هم گفته میشه)

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

  • مزایای سایت دینامیک

1- URL ها در تمام دستگاه ها ثابت میمومنن.
2- برای کاربرهای موبایلهایی که نمیتونن CSS رو نمایش بدن، بهتره (این گوشی ها تو خیلی از کشورهای جهان رایجند)
3- میتونن برای دستگاه های خاصی بهینه بشن.
4- امکان بهینه سازی برای کلیدواژه های مخصوص موبایل وجود داره (مثلا: "رستوران نزدیک من" یا سایر کلیدواژه هایی که GPS رو هدف میگیرند).

  • معایب سایت دینامیک

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

  • طراحی سایت موبایلی مجزا

همونطور که از اسمش مشخصه، یه سایت جداگونه برای موبایل (یا تبلت) ساخته میشه و URLهاش رو با نسخه کامپیوتری تطبیق میدن.  وقتی وارد سایتی میشید که به یه URL حاوی حرف m. ریدایرکتتون میکنه، یعنی از این روش استفاده شده. مثلا website.com اگه روی موبایل دیده بشه تبدیل میشه به m.website.com

  • مزایای سایت موبایلی جدا:

1- هزینه اولیه توسعه سایت کمتره.
2- میتونید کنترل بیشتری روی بهینه سازی های خاص موبایل داشته باشید (مثلا میتونید عناصری از سایت رو که ضروری نیستند یا معیار نیستند رو حذف کنید و بیشتر روی نرخ تبدیل مشتری تمرکز داشته باشید).

  • معایب سایت موبایل جدا:

1- هزینه و زمان نگهداری سایت بخاطر داشتن نسخه های متفاوت بالاست.
2- نیاز به ریدایرکت های 302 هست تا هر صفحه مخصوص کامپیوتر رو به صفحه موبایلی مناسب ارتباط بدیم.
3- در برخی موارد، اشتراک گذاری لینک بین نسخه های موبایلی و کامپیوتری برای کاربرها گیج کننده میشه.
استفاده از یه نسخه موبایلی جداگونه برای یه صفحه بهتون اجازه میده که کنترل و بهینه سازی بیشتری داشته باشید، اما نگهداری هر دو نسخه باید به وبمسترها سپرده بشه.

  • سخن آخر

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


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

شبکه اجتماعی های نویسنده اینستاگرام و لینکدین.

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

يک نظر بدهيد

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

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