بهترین ابزار برای آزمایش طرح‌بندی واکنش‌گرا. چگونه طراحی ریسپانسیو را تست کنیم؟ بررسی طرح تطبیقی

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

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

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

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

بررسی سریع طرح تطبیقی

مرورگر اینترنتی محبوب (مرورگر) موزیلا فایرفاکسمجهز به یک ابزار داخلی برای بررسی طراحی سایت از نظر مناسب بودن برای نمایش در دستگاه های تلفن همراه. برای استفاده از آن، به "منو" - "توسعه" - "طراحی تطبیقی" بروید. یا فقط سه کلید روی صفحه کلید را همزمان فشار دهید ++[M]

شما باید چیزی شبیه به این را ببینید:

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

مرورگر گوگل کرومهمچنین دارای پشتیبانی داخلی برای بررسی سازگاری طراحی سایت است. برای انجام این کار، به منو بروید، مورد را انتخاب کنید " ابزارهای اضافی" و سپس "ابزار توسعه دهنده" (یا کلید را فشار دهید ).

پس از آن، نماد طراحی واکنشگرا را فشار دهید (یا به طور همزمان روی صفحه کلید فشار دهید ++[M]):

در وسط صفحه مشاهده خواهید کرد که چگونه سایت شما بر روی صفحه نمایش دستگاه های تلفن همراه نمایش داده می شود:

تست سئو طراحی موبایل

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

برای بررسی سازگاری با سرویس گوگلبه آدرس زیر بروید و به نام سایت خود درایو کنید: https://www.google.com/webmasters/tools/mobile-friendly/.

نتیجه بررسی وبلاگ من به این صورت است:

با Yandex، کار کمی پیچیده‌تر است؛ برای بررسی، باید در سرویس Yandex.Webmaster ثبت نام کنید و از نسخه بتا رابط استفاده کنید:

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

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

تغییر اندازه گوگل

من دوباره با Google شروع می کنم، که سرویس نمایش سازگاری خود را دارد: http://design.google.com/resizer/#

Quirktools screenfly

دومین سرویس خوب http://quirktools.com/screenfly/ است. این نشان می دهد که سایت شما چگونه می تواند حتی در تلویزیون به نظر برسد!

Symby.ru adaptest

خوب، برای اینکه "تولید کننده داخلی" را توهین نکنم، نمونه ای از سایت دیگر را ارائه می کنم: http://symby.ru/adaptest/. در یک صفحه، چندین نما با رزولوشن های مختلف صفحه نمایش را به طور همزمان خواهید دید.

سرعت نسخه موبایل سایت

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

PageSpeed ​​Insights

گوگل همیشه جلوتر از منحنی است: https://developers.google.com/speed/pagespeed/insights/. این سرویس نحوه ظاهر سایت را بر روی صفحه تلفن نشان می دهد و توصیه هایی در مورد نحوه بهینه سازی کد برای افزایش سرعت دانلود در دستگاه های تلفن همراه ارائه می دهد.

WebPageTest

و در پایان، من نمونه ای از خدماتی را ارائه می کنم که نه تنها نحوه ظاهر سایت را در دستگاه تلفن همراه نشان می دهد، بلکه سرعت کار آن را نیز نشان می دهد: http://www.webpagetest.org/

نتیجه گیری

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

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

XRespond

این ابزار از مجموعه عظیمی از دستگاه‌ها پشتیبانی می‌کند که می‌توان آن‌ها را با پیمایش به سمت سایت مشاهده کرد. توصیه می کنیم XRespond را نشانه گذاری کنید.

پاسخگو

سرویس Responsinator به شما امکان می دهد نمایش سایت را در جهت افقی و عمودی بررسی کنید گوشی های هوشمند آیفون، نکسوس و تبلت آیپد. همچنین امکان جابجایی بین HTTP و HTTPS وجود دارد.

چک کننده طراحی واکنشگرا

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

مت کرسلی

Matt Kersley، طراح و توسعه دهنده از انگلستان، سرویس خود را در وب سایت خود راه اندازی کرد که در آن می توانید سازگاری سایت را بررسی کنید، جایی که عرض پیش فرض 240 پیکسل است. کرسلی تصمیم گرفت سایز اضافی اضافه نکند و خود را به پنج اندازه محدود کرد: 240 پیکسل، 320 پیکسل، 480 پیکسل، 768 پیکسل، 1024 پیکسل.

طراح کد ابزار را در github برای کسانی که مایل به نصب آن در سایت خود هستند قرار داده است.

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

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

تست موبایل دوستانه

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

موتورهای جستجو برای بهبود نتایج جستجو برای کاربران دستگاه های تلفن همراه (تلفن های هوشمند، تبلت ها) تلاش می کنند، بنابراین سایت هایی که برای اندازه های مختلف صفحه نمایش بهینه شده اند، بالاتر از سایت هایی که چنین بهینه سازی ندارند نمایش داده می شوند. این نیز شامل می شود نسخه های موبایلسایت های.

نشانه های یک وب سایت سازگار با موبایل:

1. محتوای قابل خواندن راحت (خواندن بدون بزرگنمایی)، فیلدها و دکمه های فرم بزرگ.
2. عدم وجود تصاویر "سنگین"، فلش - عناصر و انیمیشن بیش از حد.
3. عدم وجود اپلت های جاوا و پلاگین های Silverlight.
4. بدون نوار اسکرول افقی
5. حداقل سرعت بارگذاری سایت
6. ساده ترین ناوبری.
7. متا تگ viewport اضافه شده است.

خدمات برای بررسی سایت برای "تحرک"

برای نشان دادن کار خدمات، بیایید از سایت شرکای خوب من - آژانس ترجمه CONTEXT استفاده کنیم.

1.Google Mobile Friendly

شما می توانید هر سایتی را به سادگی با وارد کردن آدرس آن در خط بررسی کنید.

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

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

این سرویس رتبه بندی کلی را نشان می دهد، 6 نقطه انطباق را بررسی می کند و نشان می دهد که سایت در گوشی هوشمند چگونه به نظر می رسد.

3. جستجوگر بینگ

بهینه سازی عمومی به علاوه مطابقت با 4 نقطه بررسی می شود.

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

4. Mobile Checker توسط W3C

"طولانی ترین" از همه خدمات. آنقدر "طولانی" که هرگز منتظر پایان آزمون نشدم =)

من 5 دقیقه صبر کردم، در حالی که بقیه خدمات در 5-20 ثانیه انجام شد.

5. مسئولیت پذیر

برخلاف بقیه، هیچ رتبه بندی نمی دهد، اما نشان می دهد که سایت شما در 6 چگونه به نظر می رسد دستگاه های مختلفدر دو جهت در IOS و Android که بسیار جالب است.

UPD1: 2017/07/20:

6. آداپتور

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

UPD2: 3.11.2017:

7. iloveadaptive.com

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

نتیجه

بدون شک، تطبیق یک سایت برای دستگاه های تلفن همراه تنها ادای احترام به مد و زمان نیست، بلکه ویژگی ضروری یک سایت مدرن است که نه تنها به کاربر نهایی کمک می کند.

بنابراین، توصیه می‌کنم همه کسانی که می‌خواهند به مشتری نزدیک‌تر باشند و بازدیدها/سرنخ‌های بیشتری داشته باشند، سایت‌های خود را در اسرع وقت تطبیق دهند. از من یک سوال بپرس -

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

P.S.

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

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

نتیجه گیری

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

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

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