وبمستر مارکت مکانی برای یافتن مشتریان جدید

قوانین جدید گوگل در رابطه با طراحی قالب واکنش گرا

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

قوانین گوگل برای طراحی قالب واکنشگرا

به این منظور باید استانداردی تدوین می شد که طراحان بر اساس آن بتوانند سایتها را برای این ابزارها بهینه سازی کنند.

برای پاسخ به این نیاز طراحان وب، در وب مستر تولر بخشی به عنوان mobile usability اضافه شده است. این بخش صفحاتی را که در ابزارهای موبایل به خوبی نمایش داده نمی شوند مشخص می کند.

در حال حاضر این بخش 6 ارور نمایش را مشخص می کند:

  1. Flash usage
  2. Viewport not configured
  3. Fixed-width viewport
  4. Content not sized to viewport
  5. Small font size
  6. Touch elements too close

در ادامه با این ارور ها بیشتر آشنا می شویم.

Flash usage

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

Viewport not configured

به دلیل اینکه ابعاد دستگاههایی که می توان با آنها به اینترنت متصل شد (گوشی موبایل، تبلت و مانیتورهای بزرگ) متفاوت است باید تگ meta viewport را به کد html صفحات اضافه کرد تا مرورگر بداند چگونه سایز صفحه را مطابق با سایر دستگاه تنظیم کند.

Fixed-width viewport

این ارور در صفحاتی نمایش داده می شود که متا تگ viewport را بصورت fixed width تعریف کرده اند. این ارور برای صفحاتی که بصورت ریسپانسوی طراحی نشده اند و دارای عرض ثابت و بزگتر از عرض دستگاه هستند نمایش داده می شود. گوگل پیشنهاد کرده است که با تعیین مقدار viewport برابر با عرض دستگاه width=device-width جلوی این مشکل گرفته شود.

Content not sized to viewport

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

Small font size

این ارور برای صفحاتی نمایش داده می شود که دارای متن ریز هستند و بازدید کنندگان برای دیدن متن نیاز دارند که صفحه را زوم کنند. این مشکل با تنظیم viewport بصورت initial-scale=1 حل می شود.

Touch elements too close

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



متن نظر *