زمان مطالعه 6 دقیقه

چرا تست پاسخگویی وب سایت ها مهم است؟ به گفته Yandex.Metrica، تعداد افرادی که از دستگاه های تلفن همراه در روسیه استفاده می کنند به 50 درصد نزدیک می شود و دائماً در حال افزایش است.

مربوط به موتورهای جستجوتلاش کنید تا صدور موبایل برای کاربران راحت تر شود. در فوریه 2015، گوگل اعلام کرد که داشتن یک نسخه ریسپانسیو یا موبایل تاثیر مثبتی بر رتبه بندی دارد. دقیقاً یک سال بعد، در فوریه 2016، Yandex همین موضوع را اعلام کرد.

یک وب سایت واکنش گرا چه ویژگی هایی باید داشته باشد؟

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

خدمات بررسی آنلاین سازگاری سایت

1. Google Mobile Friendly - https://search.google.com/test/mobile-friendly

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

مزایای

• سرویس رسمی گوگل
• خطاهای خاص را نشان می دهد.
• قادر به تعیین وجود نسخه موبایل.

ایرادات

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

1. Yandex.Webmaster Mobile Friendly - https://webmaster.yandex.ru/site/tools/mobile-friendly/

برخلاف ابزار Google، فقط می‌توانید منابع خود را بررسی کنید که حقوق آنها را در Yandex.Webmaster تأیید کرده‌اید. رتبه بندی کلی را نشان می دهد و نشان می دهد که سایت در گوشی هوشمند چگونه به نظر می رسد.

مزایای

• سرویس رسمی Yandex.
• مشکلات خاص در بهینه سازی را نشان می دهد.
• متوجه می شود که آیا سایت نسخه موبایلی دارد یا خیر.

ایرادات

• شما فقط می توانید سایت های خود را بررسی کنید.
• هیچ راهی برای مشاهده نحوه ظاهر سایت در صفحه های مختلف وجود ندارد

1. ابزارهای عجیب و غریب- http://quirktools.com/screenfly/

خدمات راحت و کاربردی، می توان دید که سایت چگونه به نظر می رسد دستگاه های مختلفاز گوشی های هوشمند گرفته تا تلویزیون

مزایای

• شما می توانید از لیست آماده ای از دستگاه ها انتخاب کنید یا وضوح خود را تنظیم کنید
• می توانید با سایت تعامل داشته باشید

ایرادات

• نمی توان نسخه موبایل را تشخیص داد
• لیست خطا وجود ندارد

1. Ilove Adaptive- http://iloveadaptive.com/

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

مزایای

• این امکان وجود دارد که ببینید سایت چگونه به نظر می رسد متفاوت است سیستم های عامل(IOS و اندروید)
• خودش میفهمه نسخه موبایلی هست یا نه
• پسوند برای گوگل کروم

ایرادات

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

1. http://adaptivator.ru/

مزایای

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

ایرادات

• نسخه موبایل را نمی بیند.
• هیچ راهی برای تنظیم اندازه صفحه نمایش شما وجود ندارد.

نتیجه

اگر به خدمات وب مستر (Yandex.Webmaster یا Google Search Console) دسترسی دارید، بهتر است با کمک آنها سازگاری را آزمایش کنید. آنها مرتبط ترین الزامات موتور جستجو را برای سایت شما منعکس می کنند.

اگر این امکان پذیر نیست، می توانید از http://iloveadaptive.com/ در ارتباط با http://adaptivator.ru/ استفاده کنید، زیرا آنها از نظر عملکرد مکمل یکدیگر هستند.

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

استفاده

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

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

مقدار متا تگ Viewport تنظیم نشده است

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

متا تگ viewport باید دارای مقدار عرض دستگاه باشد

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

محتوا گسترده تر از صفحه نمایش است

این گزارش صفحاتی را که برای مشاهده متن و تصاویر باید به صورت افقی اسکرول کنید را مشخص می کند. این مشکل زمانی رخ می‌دهد که اندازه‌های CSS روی مقادیر مطلق تنظیم می‌شوند، یا زمانی که از تصاویری استفاده می‌شود که برای عرض پنجره مرورگر خاصی طراحی شده‌اند. مطمئن شوید که مقادیر عرض و موقعیت باید باشد عناصر cssنسبی هستند و تصاویر مقیاس بندی شده اند. اطلاعات دقیق در مورد این در بخش اندازه‌های محتوای Viewport راهنمای ما ارائه شده است.

فونت خیلی کوچک

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

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

ابزار تست وب سایت واکنش گرا از Adobe. برای استفاده از آن، باید آن را روی رایانه خود نصب کنید.
این برنامه به شما امکان می دهد دستگاه های خود را از طریق WIFI همگام سازی کنید و سایت را همانطور که در دستگاه شما نمایش داده می شود مشاهده کنید. در این لحظهدستگاه های پشتیبانی شده با سیستم عامل های زیر: iOS، Android، Kindle Fire.

«مدیر پروژه تیم بیزینس موتور، مدیر وب سایت، کپی رایتر.
سازگاری موبایل مرحله مهمی از کار با سایت است. با معرفی فاکتور رتبه بندی موبایل، Onboarding اهمیت بیشتری پیدا کرده است. ما به شما می گوییم که چگونه تست تحرک اولیه سایت را انجام دهید»

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

گوگل در تاریخ 1394/04/21 رسما تاثیر این عامل را بر جایگاه سایت اعلام کرد. اخیراً اطلاعاتی در مورد در وبلاگ Yandex ظاهر شد. این الگوریتم، که راحتی نمایش سایت در دستگاه های تلفن همراه را در نظر می گیرد، "ولادی وستوک" نام داشت و به گفته نمایندگان Yandex، در حال حاضر به طور فعال در روسیه اجرا می شود.

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

آیا سایت موبایل فرندلی است؟

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

• در تلفن هوشمند با جهت صفحه نمایش عمودی (از جمله در صفحه نمایش های باریک با عرض حدود 300 پیکسل)؛
• در گوشی هوشمند با جهت افقیصفحه نمایش (از 480 پیکسل عرض)؛
• در تبلت هایی با جهت صفحه نمایش عمودی و افقی (از عرض 768 پیکسل).

این کاملا طبیعی است که یک سایت را امتحان کنید دستگاه های مختلفهمیشه ناراحت کننده نیست اگر فقط به این دلیل که ممکن است همه ابزارهای لازم برای این کار در دسترس نباشد. با استفاده از شبیه سازهای مختلف صفحه نمایش موبایل می توانید این مشکل را حل کنید. با این حال، نیازی به تماس با یک سرویس شخص ثالث نیست: یک شبیه ساز مشابه در Google Chrome از قبل نصب شده است. برای استفاده از آن، فقط سایت مورد نظر را باز کنید، F12 را فشار دهید (با کنسول توسعه دهنده تماس بگیرید) و روی نماد با تصویر تلفن همراه کلیک کنید:

در نظر گرفتن ویژگی های مرورگرهای تلفن همراه بسیار مهم است، زیرا آنها نیز می توانند ویژگی های خاص خود را داشته باشند. هنگام آزمایش، مهم است که سایت را در موارد زیر مشاهده کنید:

• مرورگر سیستم عامل اندروید از پیش نصب شده؛
• موبایل گوگل کروم؛
• مرورگرهای "سریع" - به عنوان مثال، مرورگر Opera Mini یا UC.
• سافاری (به عنوان مثال، در آیفون).

موتورهای جستجو چگونه سایت شما را می بینند؟

اولین بررسی خودکار، که اگر به مشکل انطباق پذیری سایت خود علاقه مند هستید، ارزش مرور دارد تست موبایل فرندلی توسط گوگل. این ابزار بسیار ساده است و در مورد بهینه‌سازی صفحه برای دستگاه‌های تلفن همراه، حکمی روشن می‌دهد. و اگر پاسخ منفی است، تقریباً مطمئن است که سایت برای نمایشگرهای کوچک و در سطح الگوریتم های گوگل ناخوشایند در نظر گرفته می شود - با تمام عواقب بعدی.

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

لطفا توجه داشته باشید: اسکرین شات از سایت در صفحه نمایش موبایلدر نتایج اسکن ممکن است با روشی که آن را در تلفن هوشمند خود می بینید مطابقت نداشته باشد. بیشتر اوقات این به این دلیل است که فقط فایل های فهرست شده توسط موتور جستجو در آزمون موبایل فرندلی شرکت می کنند و فایل های سبک (css) و اسکریپت ها (js) اغلب برای نمایه سازی در سطح robots.txt بسته می شوند. به هر حال، مطابق با آخرین توصیه های گوگل، آنها باید برای موتورهای جستجو قابل مشاهده باشند.

بهینه سازی وب سایت برای دستگاه های تلفن همراه در دفتر وب مستر گوگل و Yandex

توجه به این نکته ضروری است که اطلاعات مربوط به نحوه مطابقت سایت با ایده های موتورهای جستجو در مورد راحتی نمایش در دستگاه های تلفن همراه را می توان در دفاتر وب مسترها به دست آورد - کنسول جستجوی گوگلو Yandex.Webmaster (تاکنون فقط در نسخه بتا حساب جدید).

نتایج کنسول جستجوی گوگل چک فعلیصفحات در اینجا در دسترس هستند: جستجوی ترافیک => قابلیت مشاهده در دستگاه های تلفن همراه. این صفحه اطلاعاتی را که می‌توانیم با استفاده از تست موبایل فرندلی به دست آوریم کپی می‌کند، اما برای همه صفحات فهرست‌شده سایت به‌عنوان خزیدن توسط روبات‌های Google داده می‌شود:

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

P.S.

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

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

نتیجه گیری

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

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

برای اینکه بفهمید موتورهای جستجو چگونه راحتی نمایش یک سایت در دستگاه های تلفن همراه را ارزیابی می کنند، تست موبایل فرندلی از Google کمک خواهد کرد و همچنین عملکردهای مربوطه در دفاتر مدیر وب سایت (Google Search Console و دفتر جدیدمدیر وب سایت در Yandex).

2015-09-11 8204 4 دنیس عبدلین

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

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

توجه دارم که در فروشگاه رسمی قالب uCoz، همه تم ها واکنش گرا هستند، زیرا. این یکی از شرایط اصلی انتشار قالب برای فروش است.

Screenfly - بررسی سازگاری سایت با انتخاب دستگاه

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

Mattkersley - همه اندازه ها در یک صفحه

این پروژه از این نظر خوب است که شما یک لینک به سایت خود وارد می کنید و آن را در تمام فریم هایی که در صفحه هستند بارگذاری می کند. بلافاصله می توانید سایت را در 5 سایز تست کنید. 2 حالت وجود دارد: فقط عرض را آزمایش کنید یا نام دستگاه و ارتفاع آنها را نشان دهید.

Responsive.is - تست پاسخگویی در چندین دستگاه

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

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

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