حتما خبر دارید که الگوریتم موبایلگدن گوگل وب سایتهایی رو که با موبایل سازگاری نداشته باشند جریمه میکنه و رتبه سایتهایی رو که از این نظر نقص داشته باشند در فهرست نتایج جستجو کم میکنه و در جایگاه پایین تری نمایش داده میشن. جایگاه نمایش وب سایت در فهرست نتایج به قدری برای جذب مخاطب اهمیت داره که این مسئله باعث میشه همه مدیران وب سایتها به فکر اصلاح سایتشون و سازگار کردنش با موبایل باشند.
آمارها نشون میده از سال 1393، تعداد کاربرهایی که از گوشی های موبایلشون از وب سایتها بازدید کردند بیشتر از تعداد کاربرهای کامپیوتر شده و این نشون میده دیگه طراح ها و بازاریابها باید برای این دستگاه های جدید هم یه وب سایت توسعه بدن. الگوریتم موبایلگدن گوگل، صنایع رو تشویق میکنه برای حل این مشکل به گزینه اول-موبایل کردن سایتشون روی بیارن.
اما وقتی میخواهیم بریم سراغ ساخت وب سایت اول-موبایل، با مشکل کمبود اطلاعات در این زمینه روبرو میشیم. اول باید چی کار کرد؟ متاسفانه اطلاعاتی هم که در این زمینه در وب سایتهای طراحی وب ارائه شده، فقط یه سری اطلاعات پیچیده است که کارو برای افراد غیرمتخصص سخت میکنه. سایتهای اول-موبایل علاوه بر اینکه باید در مرورگرهای مختلف خوب نمایش داده بشن، باید بتونن در پلتفرم های مختلف هم بخوبی دیده بشن. ما تو این مقاله 9 نکته مفید و کاربردی برای ساخت وب سایت اول-موبایل ارائه میکنیم. با دارکوب همراه باشید.
نکاتی برای دسترسی آسان به وب سایت از تلفن های همراه
1- برای سازگاری وب با موبایل یک وب سایت جدا نسازید
قبلا وقتی برای موبایل میخواستیم وب سایت بسازیم باید محتوا رو خلاصه میکنیم و بخشهایی از اون رو حذف میکردیم تا متناسب با اندازه های موبایل بشه و این کار هم مستلزم کلی بحث و بررسی بود تا بخشهای مهم حذف نشن و قسمتهای ضروری باقی بمونن. با این حال هرچقدر هم در این مورد بحث بشه ما در نهایت نمیدونیم مخاطبمون چه محتوایی رو بیشتر ترجیح میده. اینطور هم نیست که بگیم موبایل از پایه و اساس انقدر متفاوت از کامیپوتره که باید یه فضای وب کاملا متمایزی داشته باشه.
از طرف دیگه گوگل سایتهایی رو که محتوای تکراری یه سایت دیگه رو نشر داده باشند جریمه میکنه و در نتیجه اگه ما دو تا وب سایت داشته باشیم – یکی برای موبایل و یکی برای کامپیوتر – با محتوای یکسان، دیگه نمیتونیم روی صفحات نتایج گوگل دیده بشیم (که هدف از ساخت وب سایت موبایلی هم همینه). به همین خاطر نباید یه وبسایت جدا برای موبایل بسازید.
2- از طراحی ریسپانسیو یا واکنشگرا استفاده کنید
با طراحی واکنشگرا، میشه سایتی ساخت که براحتی در هر نمایشگری با هر اندازه ای قابل نمایش باشه. این طراحی، کارِ توسعه دهنده ها رو برای ساخت وب کمتر میکنه.
طراحی ریسپانسیو یا واکنشگرا از قابلها و تصاویر انعطاف پذیر و طراحی آبشاری رسانه ها استفاده میکنه. اگه وب سایتی از طراحی واکنشگرا استفاده کنه، صفحات وب میتونن اندازه نمایشگر کاربر رو تشخیص بدن و متعاقبا قالب رو تغییر بدن.
3- همیشه از متاتگ Viewport استفاده کنید
Viewport یه فضای مجازیه که موتور رندرگیری مرورگر برای تعیین اندازه و سایز محتوا از اون استفاده میکنه. به همین خاطر وقتی میخواهید محصولی بسازید که روی دستگاه های مختلف کار کنه، این کد اهمیت زیادی پیدا میکنه. بدون این کد، سایتتون روی موبایل خوب کار نمیکنه. متا تگ ویوپورت به مرورگر خبر میده که صفحاتتون باید با نمایشگر بازدیدکننده هماهنگ و متناسب بشن. برای این منظور پیکربندی های زیادی لازمه. من پیشنهاد میکنم بالای داکیومنت از کد زیر استفاده کنید (فقط یک بار باید بکار بره).
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
4- اندازه فونت و دکمه ها مهم است
اندازه فونت و دکمه ها برای دستگاه های موبایل خیلی اهمیت داره. اندازه فونت باید حداقل 14 پیکسل باشه. شاید به نظرتون بزرگ بیاد، اما اینطوری دیگه کاربرها مجبور نیستند برای خوندن محتوای سایتتون زوم کنند. فونتتونو با حداکثر خوانایی هماهنگ کنید تا کار بازدیدکننده ها راحت بشه. تنها زمانی که باید اندازه فونت نوشته ها کوچکتر بشه، برای برچسبها و فرم هاست که میتونه حداقل 12 پیکسل باشه.
برای دکمه ها هم، هر چی بزرگتر باشن بهتره، اینطوری حتما به چشم کاربر میان و احتمال اینکه کاربر دکمه اشتباهی رو فشار بده کاهش پیدا میکنه. مثلا اپل پیشنهاد میکنه، اندازه دکمه ها حداقل 44 پیکسل در 44 پیکسل باشند. به این ترتیب میتونید تجربه کاربری رو روی دستگاه های موبایل بهتر کنید و نرخ تبدیل به مشتری سایتهای فروشگاهی افزایش پیدا خواهد کرد.
5- از تصاویری با رزولوشن یا وضوح بالا استفاده کنید
در وب سایت واکنشگرا هم مثل اینستاگرام، باید تصاویر رزولوشن خوبی داشته باشن تا کاربرها بتونن تجربه ای با استاندارد بالا داشته باشند. جدیدترین مدلهای دستگاه های iOS نمایشگرهایی با وضوح بالا دارند، رزولوشن تصاویر باید دو برابر نمایشگر باشه. وقتی تصاویرتونو وضوح بالایی داشته باشند دیگه عکسها پیکسلی یا تار دیده نمیشن.
6- بزرگنمایی پیش فرض رو حذف کنید
زوم خودکار عناصر قالب رو بهم میریزه، بخصوص برای محتوای مسیریابی و تصاویر که ممکنه در قالب سایتتون کوچک یا زیادی بزرگ دیده بشن. برای حل این مشکل از متاتگ viewport استفاده و متغیرهای معمول محتوا رو تنظیم کنید. حتما در <head> HTML این تگ رو بذارید:
<meta name=”viewport” content=”initial-scale=1”>
7- برای سایتتون از ویدئوهای آپارات استفاده کنید
اگه روی سایتتون ویدئوهای زیادی دارید، ممکنه این ویدئوها روی موبایل یه طور دیگه ای نشون داده بشن و حتی گاهی ممکنه دیدنشون سخت باشه. برای اینکه روی موبایل هم فیلمهاتون خوب نمایش داده بشن از یوتیوب یا آپارات استفاده کنید. چون کدهای این سایتها خودشون ریسپانسیو یا واکنشگرا هستند و شما رو چند مرحله جلو میندازن و لازم نیست خودتون این کارو انجام بدید.
8- تجربه موبایلی کاربرهاتونو محدود نکنید
همیشه یه دکمه "مشاهده نسخه کامل وب سایت" یا "مشاهده نسخه کامپیوتری وب سایت" روی وب سایتتون داشته باشید. بعضی ها ممکنه همچنان دوست داشته باشند سایت رو کامل مشاهده کنند، خب چرا میخواهید محدودشون کنید؟ به خصوص که این ترجیح خودشونه. نباید بخاطر چنین چیزی یه بازدیدکننده رو از دست بدید.
9- همیشه در حال تست کردن باشید
وقتی وب سایت واکنشگراتونو ساختید، بارها تستش کنید. نه اینکه روی یک موبایل چند بار تستش کنید، بلکه روی دستگاه های مختلف، روی آیفون، روی اندروید، ویندوزفون و تبلت های مختلف. تک تک صفحات رو امتحان کنید، همه اقداماتی که کاربر میتونه انجام بده و همه دکمه ها رو امتحان کنید. وقتی هم که دارید تست میکنید باید خودتونو بذارید جای کاربر یا از یکی که تو کارهای طراحی دخیل نبوده بخواهید این کارو براتون انجام بده.
امیدوارم این نکات راهنمای خوبی براتون بوده باشه و تونسته باشه اطلاعاتتونو در مورد ساخت وب سایت سازگار با موبایل بالا ببره.
با بالا رفتن اهمیت سازگاری وب سایتها با موبایل، باید همه مدیران سایتها اطلاعاتشونو در این زمینه بالا ببرن و تا میتونن مقالاتی کاربردی در مورد نحوه طراحی سایت اول-موبایل مطالعه کنند تا از قافله سایتهای رقیب جا نمونن. دارکوب هم مقالات زیادی در این زمینه ارائه داده که میتونید اونها رو از لینکهای داده شده یا از فهرست مقالات زیر پیدا کنید.
در پایان این نکته رو یادآوری میکنم که شما باید نه فقط وب سایت، بلکه صفحات شبکه های اجتماعیتون رو هم با موبایل سازگار کنید.