موتور جست و جوی گوگل به سایت هایی که از تکنولوژی ریسپانسیو استفاده کرده باشند،لقب موبایل فرندلی می دهد. روز به روز استفاده از اینترنت تلفن همراه در میان افراد مختلف گسترش می یابد و این امر باعث می شود که کاربران بیشتری به صورت روزانه وارد سایت های اینترنتی بشوند و دنبال محصولات و یا خدمات مورد نیاز خود بگردند.خیلی از این افراد شاید امکان دسترسی به کامپیوتر و یا لپتاپ ندارند پس با تلفن همراه خود به این جست و جو می پردازند! با گسترش موبایل هایی که توانایی اتصال به اینترنت دارند. موبایل ها هدفی برای تولید کنندگان محتوا در دنیای وب شدند. بنابراین شناخت توانایی ها و محدودیت های این دستگاه و شناخت تکنولوژی هایی که این دستگاه ها استفاده می کنند،برای تولید کنندگان محتوا در وب از اهیمت بالایی برخوردار است. وبسایت هایی که از تکنولوژی های موجود در موبایل برای ارائه محتوای متناسب با آن استفاده می کنند را اصطلاحا وب سایت های mobile-friendly مینامیم.
یکی دیگر از ویژگی های موبایل فرندلی بودن این می باشد که تاثیر به سزا و مثبتی در سئو و بهینه ساژی سایت دارد. از نطر موتور جست وجوی گوگل هر سایتی که این ویژگی را داشته باشد سایت به روز و کاربردی تری از سایت های دیگر در زمینه همان فعالیت می باشد.
استانداردهای mobile friendly چیست؟
اولین سایتی که بصورت رسمی از پلتفرم موبایل فرندلی استفاده کرده است،سایت Audi است.این سایت که محصولات شرکت Audi را ارائه میدهد،با توجه به اینکه مشتریانش با گوشی های موبایل سایت را مشاهده می کردند، پایه گذار این استاندارد بصورت حرفه ای بود.نام و اعتبار این شرکت در گسترش پلتفرم موبایل فرندلی در بین سایت ها بی تاثیر نبوده است.
در ابتدا برای تعریف استانداردهای mobile friendly به سراغ سایت رسمی انتشار این استاندارد خواهیم رفت، سایت https://www.w3.org/standards/webdesign/mobilweb به تعریف استاندارد طراحی سایت برای موبایل میپردازد. سایت w3 استانداردهای وب را پایه گذاری می کند. این سایت رفرنس تمام برنامه نویسان وب است و مطلبی که در این سایت تائید شود، میتواند بدون تردید توسط طراحان سایت مورد استفاده قرار بگیرد. موتورهای جستجو تلاش می کنند، تا همواره استانداردهای امتیاز دهی به صفحات وب را با استاندارد های ارائه شده در این سایت هماهنگ کنند. بنابراین میتوانید از سئو بیس بودن اطلاعات این سایت کاملا مطمئن باشید. چرا که در واقع این سایت، مرجع موتورهای جستجو، برای تعیین استاندارد بودن صفحات است.
آیا برای نوشتن سایت برای موبایل باید از کد های خاصی استفاده کنیم؟
در حالت ایده آل، بدون تغییر یک خط کد باید بتوان سایت را در موبایل مشاهده کرد. در عالم حقیقت یک طراح سایت باید برای تجربه کاربری بهتر استفاده کنندگان گوشی های همراه برنامه ریزی کند. این موضوع حتی درباره گوشی های به روز نیز صادق است.
دلیل این امر مسائل فنی مانند محدودیت های CPU و حافظه و یا جایگزینی کلیک موس با فشردن صفحه است.
W3C در سه سال گذشته بر روی ایجاد تکنولوژی های جدید برای هماهنگی میان وب و دستگاه های موبایل کار کرده است.از میان این تکنولوژی ها میتوان موارد زیر را مثال زد:
CSS mobile
SVG Tiny
XHTML for mobile
و…
برای چک کردن یک سایت می توانید به آدرس https://search.google.com/test/mobile-friendly مراجعه کنید.کار کردن با این سایت بسیار ساده است.کافیست که آدرس سایت خود را بصورت کامل در نوار ابزار سایت قرار داده و روی دکمه موجود در پایین نوار ابزار کلیک کنید.
برای تبدیل یک سایت به نسخه موبایل فرندلی سه راهکار وجود دارد که هر کدام از این راهکارها نقاط ضعف و قدرتی دارد،از جمله:
روش ریسپانسیو:
امروزه اکثر منابع از طراحی Mobile First صحبت به میان میاورند. یعنی اینکه طراحی سایت باید بر اساس موبایل انجام شود و برای صفحات با اندازه های بزرگتر از مدیا کوئری ها استفاده شود.در طراحی ریسپانسیو در مدیا کوئری ها بر حسب درصد به تگهای تشکلیل دهنده سایت مقدار میدهیم تا این تگ ها در صفحات با اندازه مختلف بزرگ و کوچک شوند.مزیت ریسپانسیو این است که اگر دستگاه تغییر نکند و تنها اندازه پنجره نمایش عوض شود نیز تغییر اندازه تگ ها رخ میدهد.
روش آداپتیو:
در این روش تنها برای اندازه های خاصی از صفحه طراحی صورت میگیرد.این اندازه ها یک استاندارد خاص دارند و صفحه سایت تنها در صورت رسیدن به این اندازه ها تغییر حالت میدهد و دیگر بصورت درصدی به تگ ها اندازه نمی دهیم.
روش AMP:
یک صفحه است که بصورت جداگانه با کدهای خاص خود طراحی می شود و اگر کاربر با موبایل سایت را باز کند به آن صفحه منتقل میشود. طراحی AMP با استاندارد تک صفحه ای ارائه شده است و تبدیل یک سایت نسخه AMP میتواند چالش بزرگی محسوب شود.
نکات مهم در MOBILE FRIENDLY:
استفاده از فلش ممنوع
سالهاست که استفاده از فلش در وب کنار گذاشته شده است ولی هنوز هم برخی کاربران در سایتهای خود از فایل های فلش استفاده می کنند. باید به خاطر داشته باشید که فلش ها در موبایل اجرا نخواهد شد.از ویژگی Canvas درHTML5 به همراه جاوا اسکریپت به عنوان جایگزین میتوانید استفاده کنید.
فرمت فیلم ها
موبایل ها برای پخش فیلم باید نرم افزار پخش را در گوشی خود داشته باشند.اکثر مرورگرهای جدید با خود کدک های تصویری لازم برای پخش فیلم را دارند و میتوانید با استاندارد های HTML5 در صفحات خود از فیلم استفاده کنید.
منوهای شناور ممنوع
موبایل ها امکان هاور کردن ندارند. بنابراین نمیتوان در موبایل از منوی شناور استفاده کرد. در بوت استرپ کدهای لازم برای تبدیل یک منوی شناور به یک منوی قابل استفاده در موبایل وجود دارد. میتوانید از سایت رسمی بوت استرپ و یا از سایت W3schools این کدها را ذخیره کنید.
اسلایدر ها را برای نسخه موبایل حذف کنید
اسلایدرهای ریسپانسیو زیادی در بازار هستند ولی در عمل در گوشی های کوچک یک اسلایدر جلوه خاصی ندارد بنابراین میتوانید َآن را با عکس ثابت تغییر دهید.
نکات آخر:
در طراحی Mobile Friendly چنیدن روش مختلف وجود دارد که هنگام انتخاب یک روش باید به چند نکته توجه کنید.
1.آیا کدهای شما در این طراحی نیاز به تغییر دارد؟
2.آیا آدرس صفحات سایت شما باید تغییر کند؟
در طراحی موبایل فرندلی نکاتی مانند: تغییر اندازه فونت معمولا توسط برنامه نویسان فراموش میشود، ولی این نکته از نظر سئو از اهمیت برخوردار است، بنابراین بهتر است با یکی از تکنیک های درصد، فونت های خود را تعیین اندازه کنید.
همچنین استفاده از تکنیک Rem در بوت استرپ 4 برای ایجاد سایت های مبایل فرندلی بدلیل عدم پشتیبانی توسط مرورگرهای قدیمی توصیه نمی شود.
