موبایل فرندلی (mobile-friendly) 

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

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

به همین خاطر استفاده از تکنولوژی ریسپانسیو برای ارائه ی محتوای متناسب در موبایل بسیار مفید می باشد . وبسایت هایی که از این تکنولوژی ااستفاده می کنند را اصطلاحا وب سایت های mobile-friendly  مینامیم.

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

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

 

در این نوشته ابتدا موبایل فرندلی (mobile-friendly) را تعریف کرده و سپس ابزاری که گوگل برای تست موبایل فرندلی (mobile-friendly) طراحی کرده است را به شما بازدیدکننده گرامی سایت فروشگاه ساز و مارکت ساز لایوگالری معرفی خواهیم کرد .

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

الگوریتم mobile friendly تنها بر نتایج جستجو که توسط موبایل انجام می‌شود تأثیر دارد. با به روزرسانی که برای الگوریتم موبایل فرندلی گوگل انجام شد سایت های که متناسب با موبایل نباشند جایگاه خود را در رتبه‌بندی گوگل از دست خواهند داد و بر عکس سایت های که در بر اساس موبایل فرندلی بودن طراحی‌شده‌اند جایگاه بالاتری در موتور جستجو گوگل کسب خواهند کرد. در نتیجه سایت های که به صورت mobile friendly طراحی نشده باشند کاربران خود را از دست خواهند داد.

 

مواردی که در mobile friendly باید و باید انجام شود :

بارگذاری سریع صفحات

استفاده نکردن بیش از اندازه تبلیغات در صفحات

استفاده اصولی از ریسپانسیو

استفاده از تصاویر بهینه با ابعاد مناسب

استانداردهای mobile friendly چیست؟

در ابتدا برای تعریف استانداردهای mobile friendly به سراغ سایت رسمی انتشار این استاندارد خواهیم رفت، سایت https://www.w3.org/standards/webdesign/mobilweb به تعریف استاندارد طراحی سایت برای موبایل میپردازد. سایت w3 استانداردهای وب را پایه گذاری می کند. این سایت رفرنس تمام برنامه نویسان وب است و مطلبی که در این سایت تائید شود، میتواند بدون تردید توسط طراحان سایت مورد استفاده قرار بگیرد. موتورهای جستجو تلاش می کنند، تا همواره استانداردهای امتیاز دهی به صفحات وب را با استاندارد های ارائه شده در این سایت هماهنگ کنند. بنابراین میتوانید از سئو بیس بودن اطلاعات این سایت کاملا مطمئن باشید. چرا که در واقع این سایت، مرجع موتورهای جستجو، برای تعیین استاندارد بودن صفحات است.

و...


چگونه می‌توان  از موبایل فرندلی (mobile-friendly) بودن وب سایت خود برای نمایش در موبایل اطمینان پیدا کرد ؟

1- برای تطبیق با الگوریتم موبایل فرندلی گوگل می‌توانید از ابزاری دیگر به نام Mobile Friendly Test  استفاده کنید. این ابزار سودمند مانند ابزار page speed insight است. ولی از ربات های گوگل پیروی می‌کند. و به شما کمک می‌نماید که فایل های مهمی را که در robots.txt  مسدود شده‌اند را پیدا کنید. زیرا که این فایل ها باعث عدم ارائه سایت های مناسب جهت نمایش در موبایل خواهند شد.

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

 

2- برای چک کردن یک سایت می توانید به آدرس https://search.google.com/test/mobile-friendly مراجعه کنید.کار کردن با این سایت بسیار ساده است.کافیست که آدرس سایت خود را بصورت کامل در نوار ابزار سایت قرار داده و روی دکمه موجود در پایین نوار ابزار کلیک کنید.

 

برای تبدیل یک سایت به نسخه موبایل فرندلی

برای تبدیل یک سایت به نسخه موبایل فرندلی سه راهکار وجود دارد که هر کدام از این راهکارها نقاط ضعف و قدرتی دارد،از جمله:

روش ریسپانسیو:

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

روش آداپتیو:

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

روش AMP:

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

نکات مهم در MOBILE FRIENDLY:

استفاده از فلش ممنوع

سالهاست که استفاده از فلش در وب کنار گذاشته شده است ولی هنوز هم برخی کاربران در سایتهای خود از فایل های فلش استفاده می کنند. باید به خاطر داشته باشید که فلش ها در موبایل اجرا نخواهد شد.از ویژگی Canvas درHTML5 به همراه جاوا اسکریپت به عنوان جایگزین میتوانید استفاده کنید.

فرمت فیلم ها

موبایل ها برای پخش فیلم باید نرم افزار پخش را در گوشی خود داشته باشند.اکثر مرورگرهای جدید با خود کدک های تصویری لازم برای پخش فیلم را دارند و میتوانید با استاندارد های HTML5 در صفحات خود از فیلم استفاده کنید.

منوهای شناور ممنوع

موبایل ها امکان هاور کردن ندارند. بنابراین نمیتوان در موبایل از منوی شناور استفاده کرد. در بوت استرپ کدهای لازم برای تبدیل یک منوی شناور به یک منوی قابل استفاده در موبایل وجود دارد. میتوانید از سایت رسمی بوت استرپ و یا از سایت W3schools این کدها را ذخیره کنید.

اسلایدر ها را برای نسخه موبایل حذف کنید

اسلایدرهای ریسپانسیو زیادی در بازار هستند ولی در عمل در گوشی های کوچک یک اسلایدر جلوه خاصی ندارد بنابراین میتوانید َآن را با عکس ثابت تغییر دهید.

نکات آخر:

در طراحی Mobile Friendly چنیدن روش مختلف وجود دارد که هنگام انتخاب یک روش باید به چند نکته توجه کنید.

 

1. آیا برای نوشتن سایت برای موبایل باید از کد های خاصی استفاده کنیم؟

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

دلیل این امر مسائل فنی مانند محدودیت های CPU و حافظه و یا جایگزینی کلیک موس با فشردن صفحه است.

W3C در سه سال گذشته بر روی ایجاد تکنولوژی های جدید برای هماهنگی میان وب و دستگاه های موبایل کار کرده است.از میان این تکنولوژی ها میتوان موارد زیر را مثال زد:

CSS mobile

SVG Tiny

XHTML for mobile

2.آیا آدرس صفحات سایت شما باید تغییر کند؟

 

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

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