از زمانی که گوگل استفاده از قالب ریسپانسیو را اجباری کرده است شاهد هستیم که بسیاری از وبمسترها در حال تبدیل قالب وب سایت خود به قالب ریسپانسیو هستند.
گوگل چند شرط برای پذیرفتن قالبها به عنوان قالب ریسپانسیو گذاشته است:
- Flash usage (عدم استفاده از فایلهای فلش در قالب)
- Viewport (استفاده از متا تگ Viewport)
- Fixed-width viewport (عدم استفاده متا تگ ویوپورت با عرض ثابت)
- Content not sized to viewport (پهنای محتوای وب سایت از پهنای دستگاه موبایل بیشتر نباشد)
- Small font size (عدم استفاده از فونتهای کوچک و ناخوانا در دستگاههای موبایل)
- Touch elements too close (عدم رعایت فاصله عناصر صفحه)
- Interstitial usage (مجبور نکردن کاربران به دانلود اپلیکیشن موبایل)
یک اشتباه مهلک در زمان ساخت قالب ریسپانسیو
با توجه به اینکه اضافه کردن متا تگ Viewport ساده تر از سایر شروط میباشد لذا گاهی مشاهده میشود که برخی از توسعه دهندگان که سرشان شلوغ است و یا برخی از وبمسترها که اطلاعات فنی کافی ندارند برای اینکه گوگل را تا اندازه ای راضی نگه دارند این متا تگ را به سورس صفحات وب سایت خود اضافه میکنند و از سایر موارد چشم پوشی میکنند و یا آنها را به زمان دیگری موکول میکنند.
این متا تگ به مرورگر میگوید عرض صفحه را به اندازه عرض مانیتور در نظر بگیر ولی اگر عرض صفحه از عرض مانیتور بیشتر بود، قسمتهای اضافه را حذف کن!
اما این کار یک خطای بزرگ است و نتایج نامطلوبی به دنبال دارد.
زیرا وقتی این متا تگ را اضافه میکنیم ولی قالب را ریسپانسیو نمیکنیم، باعث 3 اتفاق میشویم:
- اگر عرض صفحه 1200 پیکسل باشد فقط 400 پیکسل از عرض صفحه در گوشی موبایل نمایش داده شود
- اسکرول افقی غیر فعال میشود
- بخشهایی از صفحه که در صفحه تصویر نمایش داده میشوند قابلیت زوم دارند ولی 800 پیکسل دیگر از عرض صفحه نمایش داده نمیشود و با زوم کردن هم نمیتوانیم آن بخشها را ببینیم!
توجه: عددهای فوق تقریبی هستند و در دستگاههای مختلف ممکن است فرق کنند.
به عنوان مثال ممکن است بنر تبلیغاتی به این صورت نمایش داده شود و نتوانید با زوم کردن بقیه قسمتهای بنر و سایر بخشهای صفحه که نمایش داده نمیشوند را ببینید:
این کار نتنها تاثیر مثبتی ندارد بلکه باعث میشود که کاربرند از سایت شما خسته شوند و سایت را ببندند و به سراغ بقیه سایتها بروند.