وبلاگ

استراتژی موبایل‌وب به چه معناست؟

در 15 مارس، 2015 توسط

چه چیزی را هنگام ترک منزل هرگز فراموش نمی کنید و همیشه همراهتان هست حتی در هنگام خواب !؟ – بله ! تلفن های هوشمند جزئی از زندگی روزمره ما هستند و فراموش کردن آنها کارآسانی نیست. اینجاست که انتخاب یک استراتژی مناسب برای طراحی موبایل وب به شما کمک می کند تا کاربران موبایل را راضی نگه دارید.

mobile-strategy

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

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

 تفاوت کلیدی بین دسکتاپ و موبایل

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

  • موبایل یک دستگاه شخصی است.

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

  • هدف موبایل، استفاده آسان و دسترسی سریع.

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

  • تعامل لمسی، حالت کلی موبایل است.

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

فقط مقیاس صفحه را کاهش ندهید

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

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

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

همچنین بخوانید:  ۱۵ باید و نباید در بازاریابی شبکه های اجتماعی

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

روی تجربه کاربری تمرکز کنید

در عوض طراحی یک پوسته «سرهم بندی شده» به این فکر کنید که کاربر هنگام مشاهده صفحات چه انتظاری دارد. شما انتظار دارید چگونه با هر بخش ارتباط بر قرار کند؟. همیشه به سراغ اصل مطلب بروید. لزومی ندارد که تبلیغات تصویری را در نسخه موبایل نمایش دهید. (درواقع تبلیغات متنی در پایان هر مطلب بازدهی بیشتری دارد)

(به عقیده من) بهتر است در روند طراحی ابتدا از موبایل شروع کنید (Mobile-First Design) و چیدمان محتوای سایت را بر اساس عرض دستگاه ها تغیین نکنید (درست است که این یک معیار جهانی است، اما تمرکز تجربه کاربری روی افرادی است که از آن سرویس استفاده می کنند. نه عرض و مقیاس – بیشتر بخوانید)

ساختار صحیح قرارگیری محتوا

نمایش محتوای سایت به همان گونه که در نسخه دسکتاپ وجود دارد چندان ثمره بخش نیست. زیرا سلیقه افراد در انتخاب دستگاه ها محدود نیست. بنابر این حالت نمایش محتواباید کاملا برای موبایل بهینه شود. (یک مثال خوب)

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

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

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

 

اگر نوشته‌ای که خواندید مفید بود، آن را با دوستانتان به اشتراک بگذارید:

دیدگاه‌ها/سوالات کاربران

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

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

سلام
مقاله جالبي بود انشالله كه هرجا كه هستيد موفق باشيد
راستي هر كس آموزش HTML به صورت ويدئويي مي خواد به وبلاگ ما بياد
ازتون خواهش ميكنم اين پيام رو حذف نكنيد

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

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

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

سلام
مطلب جالب بود.

حالا ازکجا مطمئن بشیم قالبمون اوکیه از این جهت؟

سایتمونو چک کنید با موب، بهمون اطلاع بدید لطفا 😀

خیلی عالی بود…
ممنون…

بسیار عالی.

مقاله مفیدی بود ممنون

برای من این نکته که فرمودید از جاوا اسکریپت برای تغییر سایز عکس و افزایش سرعت لود استفاده کنید گنگه. مطلب مرتبطی دارید ازش؟

شما چه دیدگاهی دارید؟

    لطفا نکات زیر را در نظر داشته باشید:

  • لطفا دیدگاه/سوال خود را با زبان و کی‌برد فارسی ارسال کنید
  • لطفا از تبلیغ مستقیم وب‌سایت خود خودداری کنید
  • نظراتی که با چیزی به جز نام ارسال شده باشند تایید نخواهند شد حتی اگر مفید باشند

در خبرنامه ایمیلی فرنیان عضو شوید

هر هفته یک ایمیل، شامل محتواهایی که باید در زمینه بازاریابی بخوانید!

در خبرنامه ایمیلی فرنیان عضو شوید

هر هفته یک ایمیل، شامل محتواهایی که باید در زمینه بازاریابی بخوانید!