موبایل در حال تغییر جهانه. امروزه همه یه گوشی هوشمند دارن؛ دائما دارن ارتباط برقرار میکنن و به دنبال اطلاعات جدید هستن. در خیلی از کشورها، تعداد گوشی های هوشمند از تعداد کامپیوترهای شخصی فراتر رفته. داشتن یک وب سایت سازگار با موبایل به بخش مهمی از حضور آنلاین تبدیل شده است.
اگه وب سایتتون با موبایل سازگار نیست الان دیگه وقتشه که به فکر بیافتید. اکثر کاربرانی که به سایت شما سر میزنن احتمالا با موبایل اینکار رو میکنن.
اگه میخواین بیشتر در مورد دلیلهای سازگار کردن سایتتون با موبایل بدونید به خوندن این مقاله ادامه بدید!
چرا یه سایت باید با موبایل سازگار باشه:
نسخه ی دسکتاپ یک سایت ممکنه برای مشاهده و استفاده با موبایل سخت باشه. کاربران واسه دیدن محتوای سایتی که با موبایل سازگار نیست مجبورن دائما زوم کنن و صفحه رو جا به جا کنن. این کار واسه ی اونها یه تجربه ی خسته کننده است و احتمالا سایت رو ترک می کنن. در عوض، نسخه ی موبایل به راحتی قابل خوندن و قابل استفاده است.
در ایران، حدود 94 درصد از افراد اطلاعات مورد نیاز خود رو در تلفن های همراهشون جستجو می کنن. جالب توجه است که 77٪ از جست وجو های تلفن همراه در خانه و یا در محل کار رخ می ده، جایی که کامپیوتر هم احتمالا وجود داره!
موبایل برای کسب و کار شما ضروری است و این روند در آینده هم ادامه خواهد داشت؛ فرقی نمیکنه که در مورد موضوعی وبلاگ نویسی می کنید یا محصولاتتون رو می فروشید. مطمئن بشید که کاربراتون وب سایتتون رو به خوبی و به راحتی از طریق موبایل میتونن دنبال کنن.
چجوری باید شروع کنید؟
ساختن یه سایت سازگار با موبایل بستگی به منابع طراح وب، مدل کسب و کار و تخصص اون داره.
در یک سطح پیاده سازی پایه، انتقال محتوای یک سایت دسکتاپ موجود به نسخه ی موبایل با استفاده از بخش های موجود محتوا از سایت دسکتاپ و سازماندهی اونها در الگوی طراحی تلفن همراه انجام میشه.
چقدر ممکنه هزینه داشته باشه؟
خب معلومه. بستگی داره! موارد زیر بیشتر در موردش توضیح میده.
• اگه یک قالب یا تم ریسپانسیو برای وب سایتتون انتخاب کنید هزینه ی نسخه ی تلفن همراه می تونه رایگان باشه. قالب یا تم ریسپانسیو صفحه نمایش رو بسته به وسیله ای که کاربر استفاده میکنه تطبیق می ده بدون توجه به اینکه دسکتاپ، تبلت یا تلفن همراه باشه.
• اگه برای ساختن سایت سازگار با تلفن همراه خود مهارت فنی لازم داشته باشید هزینه ی اون واستون رایگان میشه.
• همینطور شما میتونید این کار رو به یه طراح بسپارید که با تکنیکهای جدید این کارو واستون انجام بده و دیگه شما زمانی برای این کار نذارید. میتونید رو دارکوب حساب کنید.
طراحی نسخه ی موبایلی سایت:
کاربران موبایل می خوان نسخه ای از سایت شما رو با رنگ ها، تم ها و محتوای شبیه به سایت اصلی ببینن، اما انتظار دارن که ساختار واقعی صفحه کاملا متفاوت باشه: صفحه نمایش فقط باید یک یا دو مورد رو در یک زمان نمایش بده، نه تعداد زیادی از گزینه هایی که کاربران دسکتاپ در یک زمان میبینن.
سازماندهی محتوا:
• اول طراحی نسخه ی موبایلی توصیه میشه:
طراحی موبایل قبل از طراحی سایت برای کامپیوتر یه جنبش رو به رشد در دنیای طراحی است. ایده ی اصلی این است که سایت های موبایل باید ابتدا طراحی بشن و سپس برای تبلت و دسکتاپ ها گسترش پیدا کنه. هیچ چیزی روی صفحه ی سایت تلفن همراه وجود نداره که توی نسخه ی دسکتاپ استفاده نشه. این رویکرد به ویژه برای سایت های ریسپانسیو یا کنشگرا و پویا مفید است، در حالی که محتوای نسخه تلفن همراه باید با محتوای صفحه ی دسکتاپ یکسان باشه.
• طراحی سایت برای موبایل بعد از طراحی نسخه ی کامپیوتری آن:
اگه قرار نباشه اول نسخه ی موبایلیشو بسازین یه خورده کارتون سخت میشه ولی غیر ممکن نیست.
با این شروع کنید که کدوم بخش هم برای نسخه ی کامپیوتری نیازه هم نسخه ی موبایل.
کدوم محتوا برای کاربران مهمتره؟
کدوم نادیده گرفته میشه؟
موارد شبیه به این رو در نظر بگیرید تا بتونید تشخیص بدید که چه مواردی لازمه یا چه مواردی برای نسخه ی موبایلی سایتتون لازم نیست. این روش بهتون کمک میکنه که نسخه ی دسکتاپ سایتتون خیلی شلوغ نباشه. اگه محتوایی وجود داره که از چشم کاربران دور مونده چه نیازی هست که توی نسخه ی دسکتاپ وجود داشته باشه؟!
مشکلات طراحی سایت سازگار با موبایل:
• هدایت صفحه های کوچک موبایل:
صفحه نمایش تلفن همراه برای نمایش منوی راهبری بزرگ علاوه بر محتوای اولیه اون بسیار کوچک است. به جای نشان دادن منوهای دسکتاپ، منوهای راهبری موبایل باید به حداقل برسد.
• سایزهای متفاوت صفحه نمایش موبایل:
صفحه نمایش اکثر گوشی های هوشمند از 320 پیکسل تا 400 پیکسل است، هرچند که آیفونهای قدیمی فقط 240 پیکسل هستند اما اگه به صورت افقی استفاده بشن، می تونن تا 640 پیکسل باشند. تبلتها به صورت عمودی از 480 پیکسل تا 800 پیکسل سایز دارن، اما اگه افقی گرفته بشن سایزشون به حداکثر 1280 پیکسل میرسه. گذشته از همه ی اینها بهتره سایتتون با صفحه ای سازگار باشه که بیشتر کاربرانتون از اون استفاده میکنن. واسه فهمیدن این میتونین از گوگل آنالیتیکس استفاده کنین.
طراحی برای گوشی های لمسی:
انگشتها عملکرد موس کامپیوتر رو ندارن. نمیتونیم ازشون انتظار داشته باشیم مثه راست کلیک عمل کنن! پس باید یه فضای مناسبی واسشون در نظر بگیرید که اشتباهی روی لینکهای دیگه کلیک نکنن. زمانی که برای گوشی های لمسی طراحی سایت می کنید باید بعضی موارد رو جدی بگیرید:
فضای کافی برای انگشت در نظر بگیرید: همونطور که گفتیم انگشتان به دقیقی موس نیستن. هنگام لمس کردن محو هستن و مثل موس نشانه ای روی صفحه نمیندازن و فضای بیشتری برای لمس یه مورد اشغال میکنن. مطمئن بشید که فضایی حدود 28در28 پیکسل اطراف لینکهاتون خالی است.
• هنگام لمس شدن صفحه به کاربرانتون بازخورد بدید: بسیاری از بازدیدکنندگان شما با اتصال کند یا قطع و وصلی باید چندین بار صبر کنن تا با لمس لینک یا دکمه به صفحه ی بعدی برسن. با هایلایت کردن دکمه یا لینک بهشون اطلاع بدین که اون رو لمس کردن و حالا باید منتظر لود شدنش بمونن. اگه اونها رو مطلع نکنید در نهایت خسته میشن و ممكنه به هدفی که میخوان نرسن و سایتتون رو ترک کنن.
• از دکمه ها استفاده کنید: دکمه ها به وضوح نشون میدن که کاربران می تونن روی لینک فعال سازی کلیک کنن یا نه. از اونجا که، بر خلاف صفحه نمایش دسکتاپ، شما نمیتونید از نشونه ای استفاده کنید تا بهشون بگید که انگشتشون جای مناسبی رو ضربه زده، به همین دلیل بهتره فضای قابل کلیک کردنی برای صفحتون در نظر بگیرید.
منوهای کشویی رو مجددا طراحی کنید: این منوها هنوز روی تلفن همراه کار می کنن و می تونن راهی عالی برای پنهان کردن اطلاعات تا زمانی که بهشون نیاز باشه بشن، اما اغلب با کلیک کردن موس، باز می شن. منوهای کشویی موبایل باید با یه ضربه باز بشن و بین گزینه ها فاصله وجود داشته باشه.
نوشتار متن رو به حداقل برسونید: تایپ کردن با تلفن همراه کندتر است و نیاز به یک صفحه کلید روی صفحه داره که صفحه نمایش قابل مشاهده رو نصف اون چیزی میکنه که هست. اینپوتهایی که ضروری نیستن رو بردارید. فرم ها رو به چندین صفحه تقسیم کنید که تنها نصف صفحه رو بگیره و با یه دکمه ی "بعدی" به صفحه ی بعد بره تا دیگه کاربران مجبور به حرکت صفحه نباشن.
از ویژگی های خاص تلفن همراه استفاده کنید: از امکانات موبایلتون استفاده کنید. مثالا شما می تونید در قسمت "تماس با ما"ی سایت با یه ضربه روی شماره، تماس حاصل کنید و حتی با گذاشتن لینک آدرستون به کاربرا کمک کنید که به راحتی جای شما رو از طریق جی پی اس پیدا کنن.
اندازه ی وب سایت رو تغییر بدید:
• محتوا رو کاهش بدید:
همونطور که عرض صفحه کوچکتر می شه، تمام عناصر به جز متن باید کوچک بشن. ایجاد این تغییر سایز بهتره خیلی مشخص نباشه، عرض اشیای مهم رو چند درصدی از اندازه ی صفحه نمایش کاهش بدید.
• سازماندهی مجدد محتوا:
کم کردن عناصر سایت برای استفاده با موبایل ممکنه باعث سردرگمی کاربر بشه. برای بعضی بخشها مثل متنهای بنر سایت بهتره که در نمای کوچکتر پایین بنر قرار بگیره.
همینطور بهتره که محتوا برای بهتر دیده شدنشون سمت چپ صفحه نمایش موبایل قرار بگیرن.
• محتوا رو ستونی وارد کنید:
سایتهای با محتوای طولانی رو میشه به سادگی کوتاه یا ستونی کرد تا متناسب فضای موبایل بشن. از سوی دیگر، محتوای سایتهای تجارت الکترونیک بیشتر نمای جدا جدا دارن و تصویری هستن. چند گزینه طراحی برای این مدل سایتها وجود داره:
محتوا رو در یک ستون قرار بدید: اگه محتوای جدا شده در سایت اصلی به راحتی جریان داره، پس اون رو در جهت درست قرار بدید، با استفاده از نشانه های بصری شروع و پایان یه متن رو به کاربر نشون بدید. این کار برای صفحات با محتوای زیاد ایده ی خوبی است که به کاربران اجازه می ده تا بخشهای مورد علاقشون رو راحتتر پیدا کنن.
مخفی کردن محتوا در بارگیری: سعی کنید از طرح آکاردئونی برای بعضی از مطالب استفاده کنید طوری که متن رو با ضربه روی عنوان نمایش بده. با این کار شما بعضی از محتوا رو مخفی می کنید تا کاربر بسته به علاقش اون رو برای خودش نمایش بده.
سعی کنید از دید کاربران نسخه ی موبایلی سایتتون رو بسازید:
کلا سعی کنید مشتریها و کاربراتون رو اولویت قرار بدید. در صورت امکان ازشون بخواین که نسخه ی موبایلی سایتتون رو بررسی کنید و از دیدگاه خودشون راهنماییتون کنن. اینطوری شما راحت تر میتونین متوجه بشین که چیزی رو از قلم انداختین یا چیزی رو نباید اونجا می آوردین.
به فکر شارژ باطری موبایل یا تبلت کاربرهاتون باشید:
خب معلومه وقتی نسخه ی موبایلی سایتتون رو می سازید نباید باطری موبایل بازدیدکنندگانتون واستون مهم باشه. اما اگه به فکر این یک مورد هم باشید قطعا از شما راضی تر خواهند بود. برای رسیدن به این هدف می تونید از انمیشینها و پردازشگرهای با سطح پایینتری استفاده کنید. چون گوشی های هوشمند پردازشگرهای قوی و عمر باطری پایینتری دارند و استفاده ی بیش از حد از اونها میتونه به کم شدن شارژ باطریشون کمک کنه.
همینطور که در ابتدای مقاله گفته شد اکثر افراد از موبایلشون برای وبگردی استفاده میکنن و بیشتر وقتشون رو از این طریق میگذرونن پس اگه شما سایت دارید یا درصدد طراحی سایت برای کسب و کارتون هستید حتما به فکر نسخه ی موبایلی باشید و سایتتون رو با موبایلهای مختلف سازگار کنین. قطعا شما برای رسیدن به این هدف به یک توسعه دهنده ی مجرب نیاز دارید. گروه طراحی سایت دارکوب می تونه یک انتخاب عاقلانه برای هدف شما باشه.