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

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

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

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

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

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

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

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

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

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

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

مزایای

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

ایرادات

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

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

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

مزایای

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

ایرادات

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

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

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

مزایای

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

ایرادات

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

Ilove Adaptive- http://iloveadaptive.com/

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

مزایای

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

ایرادات

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

http://adaptivator.ru/

مزایای

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

ایرادات

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

نتیجه

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

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

تغییر اندازه پنجره مرورگر را متوقف کنید، تجاوز به آن را متوقف کنید! شرط می بندم این را بیش از یک بار شنیده اید. باشه شاید نشنیدی اما اگر یک توسعه‌دهنده وب واکنش‌گرای حرفه‌ای هستید، منظور من را می‌دانید: هر تغییر DOM یا ویرایش CSS، و دوباره شروع به کشیدن لبه مرورگر به جلو و عقب می‌کنید، تغییرات را آزمایش می‌کنید و می‌بینید آیا چیزی خراب است یا خیر.

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

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

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

برای آزمایش، من یک سایت واقعا واکنشگرا به نام PajamasOnYourFeet.com را انتخاب کردم که بر اساس یک قالب HTML5 ارائه شده توسط EGrappler به صورت رایگان است.

آیا من پاسخگو هستم؟

Am I Responsive، ابزاری بسیار ساده است که به شما امکان می دهد سایت خود را به سرعت در 4 دستگاه مشاهده کنید. همه آنها IOS هستند و توسعه دهنده این را با یکی از ویژگی های سایت توضیح می دهد. به طور کلی بدون تنظیمات، بدون انتخاب، اما بسیار ساده و واضح است.

اندازه های موجود:

مانیتور دسکتاپ - 1600 x 992 پیکسل؛
لپ تاپ - 1280 x 802 پیکسل؛
تبلت - 768 x 1024 پیکسل؛
تلفن همراه - 320 x 480 پیکسل.

من از توسعه دهنده نقل قول می کنم: "این یک ابزار تست نیست، آزمایش بر روی دستگاه های واقعی بسیار مهم است. آ این سازبه شما کمک می کند به سرعت یک اسکرین شات بگیرید و منظورتان را به مشتری نشان دهید."

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

دستگاه مثبت

deviceponsive بسیار شبیه به Am I Responsive است، زیرا به همان اندازه ساده و با حداقل تنظیمات و گزینه ها است. همه دستگاه های موجودبلافاصله در یک صفحه طولانی نمایش داده می شوند. از بین همه گزینه های موجود، این امکان ویرایش پس زمینه هدر و اضافه کردن لوگوی خود در آنجا است که زمانی که تصمیم به اشتراک گذاری یک اسکرین شات دارید مفید خواهد بود.

دستگاه ها و وضوح صفحه نمایش موجود.

مک بوک - 1280x800
پرتره iPad - 768 x 1024
پرتره iPad - 1024 x 768
پرتره کیندل - 600 x 1024
Kindle Landscape - 1024 x 600
پرتره آیفون - 320 x 480
جهت افقی آیفون - 480 x 320
پرتره کهکشان - 240 x 320
منظره کهکشان - 320 x 240

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

تست پاسخگو

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

30 رزولوشن مختلف در این سایت موجود است، از یک مانیتور بزرگ دسکتاپ گرفته تا چیزی که آن را "اندروید مزخرف" می نامند (انصافاً، یک اندروید معمولی نیز وجود دارد).

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

پاسخگو است

بسیار شبیه به دو ابزار قبلی است، اما یک چیز وجود دارد که باعث می‌شود Responsive. متفاوت از بقیه باشد. این یک انیمیشن صاف هنگام حرکت از یک دستگاه به دستگاه دیگر و همچنین یک منطقه نیمه شفاف است که ناحیه واقعی سایت را نشان می دهد که در ناحیه مشاهده قرار نمی گیرد.

گزینه‌های دستگاه موجود عبارتند از: خودکار (روشی که سایت را می‌بینید)، دسکتاپ، تبلت در حالت افقی و عمودی، تلفن هوشمند در حالت عمودی و افقی. متأسفانه، شما نمی توانید اندازه های دلخواه را در px تنظیم کنید.

صفحه نمایش

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

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

متأسفانه فایرفاکس نیز نتوانست اسلایدر را در اینجا نمایش دهد. نیازی به سرزنش من نیست، فایرفاکس مرورگر مورد علاقه من است، اما اوضاع اینگونه است.

Screenfly

Screenfly شاید کاربردی ترین از همه باشد. 9 دستگاه بیشتر از تبلت موجود است - از لپ‌تاپ‌های 10 اینچی، مانیتورهای 24 اینچی، 5 تبلت، 9 تلفن، 3 وضوح تلویزیون و همچنین وضوح‌های سفارشی. در اینجا یک سوئیچ جداگانه برای حالت عمودی و افقی و همچنین گزینه نمایش اسکرول اضافه کنید. همچنین می‌توانید پیوندی به آزمون را با یک دکمه به اشتراک بگذارید.

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

همه این مزایا به شما امکان می‌دهند که ادعای رهبری داشته باشید اگر یک چیز نباشد (نقل قول توسعه‌دهنده): «Screenfly می‌تواند از یک سرور پروکسی برای تقلید از دستگاه‌ها در حین مرور سایت شما استفاده کند. پروکسی رشته عامل کاربر را تقلید می کند، اما رفتار این دستگاه ها را تقلید نمی کند." Screenfly تنها سرویس موجود در لیست است که امکان تست بر اساس رشته عامل کاربر را می دهد.

آیا از این ابزارها در تمرین خود استفاده می کنید؟ اسرار توسعه وب سایت های واکنش گرا را در نظرات به اشتراک بگذارید.

P.S. اشکال در ترجمه، لطفا در یک شخصی گزارش دهید.

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

استفاده

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

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

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

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

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

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

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

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

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

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