طراحی سایت موبایل اول

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

طراحی موبایل اول چیست؟

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

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

بنابراین طراحی موبایل می تواند از فرآیند تجربه کاربر از ارتباط اولیه تا تبدیل شدن وی به مشتری، و سپس تکرار این فرایند و به وجود آمدن وفاداری مشتری به برند بسیار موثر باشد.

 

آیا کاربران موبایل و دسکتاپ با هم متفاوت می باشند؟

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

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

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

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

گوگل چه می خواهد؟

در سال 2017 گری ایلیز از گوگل تایید که کرد که دستگاه های موبایل بزرگترین محرک این سال هستند.

در ادامه عبارتی از میان مطالب منتشر شده توسط گوگل انتخاب کردم که از اهمیت بهینه سازی وب برای موبایل می گوید:

• امروز، بیشتر مردم از دستگاه های موبایل جستجو های خود را انجام می دهند تا دسکتاپ.
• اگر وب سایتی با دستگاه موبایل سازگار نباشد احتمال اینکه افراد آن را ترک کنند 5 برابر است.
• نیمی از کاربران موبایل اگر سرعت بارگذاری شدن وب سایت بیش از 3 ثانیه باشد، آن را ترک می کنند.

بسیار ساده و مشخص است، اگر وب سایت شما با موبایل سازگار نباشد و یا سرعت آن پایین باشد، دستتان به مشتری نمی رسد.

فهرست موبایل-اول

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

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

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

 

رویکرد موبایل اول

هدف ما از این رویکرد ارائه محتوا برای صورت سازگار با دستگاه موبایل است، که برای این رویکرد سه کار انجام می گیرد:

• طراحی واکنش گرا یا Responsive
• محتوای پویا یا Dynamic
• سازگاری URL ها

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

 

برای طراحی موبایل چه کار کنیم؟

گوگل چندین ابزار برای تست کارکرد موبایل وب سایت دارد (https://search.google.com/test/mobile-friendly). شما باید از این ابزار ها برای بررسی مشکلات وب سایت تان بهره ببرید.

همچنین کنسول جستجو Search Console به موارد زیر توجه دارد:

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

 

فواید طراحی واکنش گرا یا Responsive

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

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

آیا طراحی موبایل اول برای شما مناسب است؟

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