Thực đơn
trang chủWindows 7

Kiểm tra khả năng thích ứng. Kiểm tra tối ưu hóa cho thiết bị di động. Mattkersley - tất cả các kích cỡ trên một trang

“Quản lý dự án của nhóm Business Motor, quản trị trang web, người viết quảng cáo.
Thích ứng với thiết bị di động là một giai đoạn quan trọng khi làm việc với một trang web. Với sự ra đời của các yếu tố xếp hạng trên thiết bị di động, việc giới thiệu đã trở nên quan trọng hơn. Chúng tôi cho bạn biết cách tiến hành thử nghiệm cơ bản về tính di động của trang web"

Sự dễ dàng hiển thị trang web trên thiết bị di động là một yếu tố có tầm quan trọng ngày càng tăng trong những năm gần đây. Và điều này không chỉ do số lượng người dùng xem trang web từ điện thoại thông minh và máy tính bảng ngày càng tăng mà còn do thứ hạng ở cấp độ công cụ tìm kiếm.

Google chính thức công bố tác động của yếu tố này tới vị trí của trang web vào ngày 21/04/2015. Gần đây hơn, thông tin về nó đã xuất hiện trên blog Yandex. Thuật toán, tính đến sự tiện lợi của việc hiển thị trang web trên thiết bị di động, được gọi là “Vladivostok” và theo đại diện của Yandex, nó đã được triển khai tích cực ở Nga.

Tầm quan trọng của việc điều chỉnh trang web cho phù hợp với nhu cầu của người dùng di động ngày càng tăng và sẽ tiếp tục tăng. Khả năng thích ứng với thiết bị di động sẽ được phản ánh cả trong việc chuyển đổi khách truy cập và thứ hạng của các trang trong kết quả tìm kiếm. Nhưng làm thế nào để bạn biết liệu dự án của bạn có đáp ứng được những yêu cầu này hay không? Làm cách nào để xác định xem một trang web có thân thiện với thiết bị di động đến từng chi tiết hay không? Chúng tôi sẽ nói về điều này trong bài đánh giá ngày hôm nay của chúng tôi.

Trang web có thân thiện với thiết bị di động không?

Giai đoạn chẩn đoán đầu tiên là tự mình mở trang web trên thiết bị di động. Nhưng ngay cả ở đây, không phải mọi thứ đều đơn giản như vẻ ngoài của nó, bởi vì một số vấn đề về khả năng phản hồi nhất định chỉ có thể biểu hiện ở một số trình duyệt nhất định và trên một số kích thước màn hình nhất định. Vì lý do này, chúng tôi khuyên bạn nên chạy thử nghiệm:

  • trên điện thoại thông minh có hướng màn hình dọc (bao gồm cả trên màn hình hẹp rộng khoảng 300 pixel);
  • trên điện thoại thông minh có hướng màn hình ngang (rộng từ 480 pixel);
  • trên máy tính bảng có hướng màn hình dọc và ngang (rộng từ 768 pixel).

Điều khá tự nhiên là việc thử một trang web trên các thiết bị khác nhau không phải lúc nào cũng bất tiện. Nếu chỉ vì bạn có thể không có sẵn tất cả các tiện ích cần thiết. Bạn có thể giải quyết vấn đề này bằng nhiều trình giả lập màn hình di động khác nhau. Tuy nhiên, không nhất thiết phải chuyển sang dịch vụ của bên thứ ba: một trình giả lập tương tự được cài đặt sẵn trong Google Chrome. Để sử dụng nó, chỉ cần mở trang web bạn quan tâm, nhấn F12 (gọi bảng điều khiển dành cho nhà phát triển) và nhấp vào biểu tượng có hình ảnh điện thoại di động:

Điều cực kỳ quan trọng là phải tính đến các tính năng của trình duyệt di động, vì chúng cũng có thể có các tính năng riêng. Khi kiểm tra, điều quan trọng là phải xem trang web tại:

  • trình duyệt hệ điều hành Android được cài đặt sẵn;
  • Google Chrome dành cho thiết bị di động;
  • các trình duyệt “nhanh” – ví dụ: Opera Mini hoặc UC Browser;
  • Safari (ví dụ: trên iPhone).

Làm thế nào để công cụ tìm kiếm nhìn thấy trang web của bạn?

Việc kiểm tra tự động đầu tiên mà bạn nên thực hiện nếu quan tâm đến vấn đề về khả năng thích ứng của trang web của mình là thử nghiệm thân thiện với thiết bị di động từ Google. Công cụ này khá đơn giản và đưa ra phán quyết rõ ràng về việc tối ưu hóa trang cho thiết bị di động. Và nếu câu trả lời là không, trang web gần như chắc chắn được coi là bất tiện cho màn hình nhỏ và ở cấp độ thuật toán của Google - với tất cả những hậu quả sau đó.

Nếu có bất kỳ khiếu nại nào về định dạng nội dung trên màn hình điện thoại thông minh, chúng sẽ được liệt kê tại đây. Điều này sẽ cho phép bạn chẩn đoán nhanh các sự cố hiển thị cụ thể và ngay lập tức chuyển sang giải quyết chúng:

Xin lưu ý: ảnh chụp màn hình của trang web trên màn hình thiết bị di động trong kết quả xác minh có thể không tương ứng với cách bạn nhìn thấy nó trên điện thoại thông minh. Thông thường, điều này là do thực tế là chỉ các tệp được công cụ tìm kiếm lập chỉ mục mới tham gia vào quá trình kiểm tra tính thân thiện với thiết bị di động và các tệp kiểu (css) và tập lệnh (js) thường bị đóng để lập chỉ mục ở cấp độ robots.txt. Nhân tiện, theo các khuyến nghị mới nhất của Google, chúng phải được hiển thị cho các công cụ tìm kiếm.

Tối ưu hóa trang web cho thiết bị di động trong tài khoản quản trị trang web Google và Yandex

Điều quan trọng cần lưu ý là thông tin về mức độ trang web tuân thủ các ý tưởng của công cụ tìm kiếm về tính dễ hiển thị trên thiết bị di động có thể được lấy trong tài khoản của quản trị viên web – Bảng điều khiển tìm kiếm của Google và Yandex.Webmaster (cho đến nay chỉ có trong phiên bản beta của tài khoản mới).

Trong Google Search Console, kết quả kiểm tra trang hiện tại có tại đây: Lưu lượng tìm kiếm => Dễ xem trên thiết bị di động. Trang này sao chép thông tin mà chúng tôi có thể nhận được bằng cách sử dụng thử nghiệm tính thân thiện với thiết bị di động nhưng được cung cấp cho tất cả các trang được lập chỉ mục của trang web khi robot Google thu thập dữ liệu chúng:

Trong tài khoản của quản trị viên web mới ở Yandex, dữ liệu xác minh hàng loạt hiện tại vẫn chưa được hiển thị. Thay vào đó, bạn có thể tìm thấy một công cụ tương tự như bài kiểm tra tính thân thiện với thiết bị di động của Google. Với sự trợ giúp của nó, bạn có thể kiểm tra thủ công xem thuật toán của công cụ tìm kiếm có xem xét một trang cụ thể phù hợp để xem trên điện thoại thông minh hay không.

tái bút

Làm thế nào trang web và khả năng phản hồi của nó được các công cụ tìm kiếm cảm nhận là một vấn đề cực kỳ quan trọng, nhưng trải nghiệm của người dùng cũng không kém phần quan trọng. Do đó, theo tiêu chí hình thức, một trang có thể đáp ứng đầy đủ yêu cầu về tính dễ xem trên thiết bị di động, nhưng trên thực tế – đối với người dùng “trực tiếp” – sự tiện lợi này sẽ là một vấn đề đáng nghi ngờ. Kết quả trực tiếp của việc này là giảm chuyển đổi, mất doanh số bán hàng và các yếu tố hành vi ngày càng tồi tệ (do đó cũng ảnh hưởng đến thứ hạng).

Trong bài viết tiếp theo của loạt bài này, trong một tuần nữa, chúng tôi sẽ cho bạn biết cách nhìn một trang web qua con mắt của khách truy cập, cách tìm ra "điểm nghẽn" trong màn hình di động và những tiêu chí nào nên được sử dụng để đánh giá khả năng sử dụng của nó.

kết luận

Sự dễ dàng xem một trang web trên thiết bị di động đang đóng một vai trò ngày càng nổi bật trong cả chuyển đổi và xếp hạng tìm kiếm của trang.

Bước đầu tiên để đánh giá khả năng phản hồi của trang web là thử nghiệm trên các màn hình khác nhau và trong các trình duyệt di động khác nhau.

Kiểm tra tính thân thiện với thiết bị di động của Google, cũng như chức năng tương ứng trong tài khoản quản trị trang web (Google Search Console và tài khoản quản trị trang web mới trong Yandex) sẽ giúp bạn tìm hiểu cách các công cụ tìm kiếm đánh giá mức độ dễ dàng hiển thị trang web trên thiết bị di động.

Thời gian đọc 6 phút


Tại sao việc kiểm tra khả năng phản hồi của các trang web lại quan trọng đến vậy? Theo Yandex.Metrica, số người sử dụng thiết bị di động ở Nga chiếm gần 50% và không ngừng tăng lên.

Về vấn đề này, các công cụ tìm kiếm đang nỗ lực làm cho kết quả tìm kiếm trên thiết bị di động trở nên thuận tiện hơn cho người dùng. Vào tháng 2 năm 2015, Google tuyên bố rằng việc có phiên bản đáp ứng hoặc di động có tác động tích cực đến thứ hạng. Đúng một năm sau, vào tháng 2 năm 2016, Yandex cũng công bố điều tương tự.

Một trang web đáp ứng nên có những phẩm chất gì?

  • Không cuộn ngang.
  • Thẻ meta khung nhìn được viết chính xác.
  • Các yếu tố tương tác (liên kết, nút, biểu mẫu, v.v.) không quá gần nhau.
  • Thiếu các phần tử Flash và plugin Silverlight.
  • Điều hướng thuận tiện qua các phần.
  • Nội dung (văn bản và hình ảnh) được điều chỉnh phù hợp với kích thước màn hình và có thể đọc được mà không cần phóng đại.

Dịch vụ kiểm tra trực tuyến khả năng thích ứng của trang web

    1. Thân thiện với thiết bị di động của Google - https://search.google.com/test/mobile-friend

Hiển thị màn hình đầu tiên của trang web trông như thế nào trên điện thoại thông minh và đưa ra đánh giá tổng thể về chất lượng tối ưu hóa.

Thuận lợi

  • Dịch vụ chính thức của Google.
  • Chỉ ra các lỗi cụ thể.
  • Có thể xác định sự sẵn có của phiên bản di động.

sai sót

  • Bạn không thể thấy trang web trông như thế nào ở các kích cỡ màn hình khác nhau.
  • Chỉ hiển thị màn hình đầu tiên, bạn không thể tương tác với trang web.
  1. Yandex.Webmaster thân thiện với thiết bị di động - https://webmaster.yandex.ru/site/tools/mobile-friend/

Không giống như công cụ của Google, bạn chỉ có thể kiểm tra các tài nguyên mà bạn đã xác nhận quyền trong Yandex.Webmaster. Hiển thị điểm tổng thể và cho biết trang web trông như thế nào trên điện thoại thông minh.

Thuận lợi

  • Dịch vụ Yandex chính thức.
  • Chỉ ra các vấn đề cụ thể trong việc tối ưu hóa.
  • Hiểu liệu trang web có phiên bản dành cho thiết bị di động hay không.

sai sót

  • Bạn chỉ có thể kiểm tra các trang web của riêng bạn.
  • Không có cách nào để xem trang web trông như thế nào trên các màn hình khác nhau
  1. Quirktools- http://quirktools.com/screenfly/

Một dịch vụ tiện lợi và đầy đủ chức năng, có thể xem trang web sẽ trông như thế nào trên nhiều thiết bị khác nhau từ điện thoại thông minh đến TV.

Thuận lợi

  • Bạn có thể chọn từ danh sách thiết bị có sẵn hoặc đặt độ phân giải của riêng bạn
  • Bạn có thể tương tác với trang web

sai sót

  • Không thể phát hiện sự hiện diện của phiên bản di động
  • Không có danh sách lỗi
    1. Tôi Yêu Thích Nghi - http://iloveadaptive.com/

Một dịch vụ mà bạn có thể kiểm tra khả năng thích ứng của các thiết bị di động và hệ điều hành phổ biến.

Thuận lợi

  • Có thể xem trang web trông như thế nào trên các hệ điều hành khác nhau (IOS và Android)
  • Nó hiểu liệu có phiên bản di động hay không
  • Tiện ích mở rộng cho Google Chrome

sai sót

  • Bạn không thể tự mình chỉ định kích thước màn hình, bạn chỉ có thể chọn từ danh sách có sẵn
  • Không có danh sách lỗi
  • Luôn tự động tải xuống phiên bản dành cho thiết bị di động mà không có khả năng xem phiên bản dành cho máy tính để bàn trông như thế nào ở các độ phân giải khác nhau
  1. http://adaptivator.ru/

Thuận lợi

  • Đưa ra đánh giá chung về chất lượng tối ưu hóa và đưa ra lời khuyên về cách sửa lỗi.
  • “Không thấy” phiên bản di động.

sai sót

  • “Không thấy” phiên bản di động.
  • Không có cách nào để chỉ định kích thước màn hình của bạn.

Phần kết luận

Nếu bạn có quyền truy cập vào các dịch vụ quản trị trang web (Yandex.Webmaster hoặc Google Search Console), tốt nhất bạn nên tiến hành kiểm tra khả năng thích ứng với sự trợ giúp của họ. Chúng phản ánh những yêu cầu mới nhất của công cụ tìm kiếm đối với trang web của bạn.

Nếu điều này là không thể thì bạn có thể sử dụng http://iloveadaptive.com/ kết hợp với http://adaptivator.ru/, vì chúng bổ sung cho nhau về chức năng.

Xin chào các độc giả blog thân mến. Không có gì đáng ngạc nhiên khi thiết kế thích ứng ngày càng trở nên phổ biến trên Internet Nga. Và tất nhiên người thiết kế bố cục cần phải nghiên cứu nó. Vì thiết kế đáp ứng sẽ sớm có mặt trên hầu hết các trang web vì ngày càng có nhiều người sử dụng thiết bị di động.

Và tôi muốn nói rằng các trang web có nó sẽ thuận tiện hơn nhiều khi đọc trên các thiết bị như vậy hơn là không có nó.

Hôm nay tôi muốn giới thiệu với bạn 5 dịch vụ rất hữu ích và thú vị mà bạn có thể kiểm tra khả năng thích ứng của trang web của mình.

Và vì thế, hãy đi thôi.

5 dịch vụ nơi bạn có thể kiểm tra khả năng thích ứng của trang web.

www. responsivedesigntest.net

Một dịch vụ tốt để kiểm tra các trang web. Có nhiều độ phân giải màn hình cho cả máy tính bảng và điện thoại.

matkersley.com

Một dịch vụ đơn giản để kiểm tra một trang web từ Matt Kersley. Tất cả các độ phân giải thiết bị di động phổ biến cũng có sẵn.

screenqueri.es

Một dịch vụ rất thú vị sẽ kiểm tra bất kỳ trang web nào. Tôi thực sự thích thiết kế cũng như chức năng.

quirktools.com

Dịch vụ rất đẹp và chức năng. Thậm chí có thể kiểm tra xem trang web sẽ trông như thế nào trên TV :-)

Các công cụ tìm kiếm cố gắng cải thiện kết quả tìm kiếm cho người dùng thiết bị di động (điện thoại thông minh, máy tính bảng), vì vậy các trang web được tối ưu hóa cho các kích thước màn hình khác nhau sẽ được hiển thị cao hơn các trang web không được tối ưu hóa như vậy. Điều này cũng bao gồm các phiên bản di động của trang web.

Dấu hiệu của một trang web thân thiện với thiết bị di động:

  1. Nội dung dễ đọc (có thể đọc mà không cần phóng to), các trường và nút có dạng lớn.
  2. Thiếu hình ảnh “nặng nề”, các yếu tố Flash và hoạt ảnh không cần thiết.
  3. Thiếu ứng dụng Java và plugin Silverlight.
  4. Không có thanh cuộn ngang.
  5. Tốc độ tải trang web tối thiểu.
  6. Điều hướng đơn giản nhất có thể.
  7. Thẻ meta khung nhìn đã được thêm vào.

Dịch vụ kiểm tra "tính di động" của một trang web

Để minh họa cách hoạt động của dịch vụ, hãy lấy trang web của đối tác tốt của tôi - công ty dịch thuật CONTEXT.

1. Thân thiện với thiết bị di động của Google

Bạn có thể kiểm tra bất kỳ trang web nào bằng cách nhập địa chỉ của nó vào một dòng.

Hiển thị trên màn hình trang web trông như thế nào trên điện thoại thông minh và đưa ra đánh giá tổng thể về mức độ tối ưu hóa của nó cho thiết bị di động.

Không giống như các dịch vụ khác, tại đây bạn không thể kiểm tra mọi trang web mà chỉ trang web của riêng bạn. Đó là, sau khi trang web được thêm vào giao diện quản trị trang web với xác nhận quyền đối với nó.

Dịch vụ hiển thị xếp hạng tổng thể, kiểm tra 6 điểm tuân thủ và hiển thị trang web trông như thế nào trên điện thoại thông minh.

3. Trình kiểm tra Bing

Tối ưu hóa chung cộng với việc tuân thủ 4 điểm được kiểm tra.

Nó cũng hiển thị giao diện của trang web trên màn hình điện thoại thông minh (tất nhiên là trên Windows OS, trong khi các dịch vụ trước đó hiển thị trên điện thoại thông minh Android =)).

4. Trình kiểm tra di động từ W3C

Dịch vụ dài nhất trong tất cả các dịch vụ. “Dài” đến mức tôi còn không đợi kiểm tra xong =)

Tôi đợi 5 phút, trong khi các dịch vụ khác xử lý trong 5-20 giây.

5. Người phản hồi

Không giống như những trang khác, nó không đưa ra bất kỳ xếp hạng nào nhưng nó hiển thị trang web của bạn trông như thế nào trên 6 thiết bị khác nhau theo hai hướng: iOS và Android, điều này rất thú vị.

CẬP NHẬT1: 20/07/2017:

6. Bộ thích ứng

Dịch vụ được đề xuất trong phần bình luận cho bài viết này. Cá nhân tôi chưa sử dụng nó, nhưng nó có vẻ khá tốt. Khả năng tương tự như người phản hồi nhưng cũng có đánh giá về kết quả của khả năng thích ứng.

CẬP NHẬT2: 3.11.2017:

7. iloveadaptive.ru

Một dịch vụ mới khác được đề xuất trong phần bình luận. Theo tôi, nó hơi cồng kềnh và không thực tế, nhưng điều này còn mang lại nhiều lợi ích hơn với khả năng tuyệt vời. Thậm chí còn có sự sắp xếp theo hệ điều hành.

Phần kết luận

Không còn nghi ngờ gì nữa, việc điều chỉnh một trang web cho thiết bị di động không chỉ là sự tôn vinh thời trang và thời gian mà còn là một thuộc tính cần thiết của một trang web hiện đại, không chỉ giúp ích cho người dùng cuối.

Vì vậy, tôi giới thiệu cho bất kỳ ai muốn gần gũi hơn với khách hàng và có nhiều lượt truy cập/khách hàng tiềm năng hơn để điều chỉnh trang web của họ nhanh nhất có thể. Hãy hỏi tôi một câu hỏi -

Ở nhiều quốc gia, điện thoại thông minh thường được sử dụng để lướt Internet hơn là máy tính. Vì vậy, việc điều chỉnh trang web cho phù hợp với thiết bị di động là rất quan trọng. Một công cụ đặc biệt trong Search Console sẽ giúp bạn tìm hiểu xem các trang của bạn có thân thiện với người dùng điện thoại thông minh hay không.

Cách sử dụng

Thật dễ dàng để kiểm tra xem một trang có phù hợp để xem trên điện thoại thông minh hay không: chỉ cần nhập URL đầy đủ của trang đó. Quá trình kiểm tra thường mất chưa đầy một phút. Nếu có chuyển hướng trên trang, chúng cũng sẽ được xử lý.

Dựa trên kết quả kiểm tra, bạn sẽ biết trang này trông như thế nào trên điện thoại thông minh và tìm hiểu những vấn đề có thể phát sinh khi xem nó. Thông thường, đây là những phông chữ nhỏ (khó đọc trên màn hình nhỏ) và các phần tử Flash (không được hỗ trợ trên hầu hết các thiết bị di động).

Giá trị thẻ meta khung nhìn chưa được đặt

Mã trang không bao gồm thuộc tính khung nhìn, thuộc tính này cho trình duyệt biết cách thay đổi kích thước các thành phần trang một cách chính xác để phù hợp với kích thước màn hình của thiết bị. Để đảm bảo trang web của bạn hiển thị chính xác trên các kích thước màn hình khác nhau, hãy tùy chỉnh khung nhìn của bạn bằng thẻ meta khung nhìn. Để biết thêm thông tin về điều này, hãy xem phần Cơ bản về thiết kế web đáp ứng trong hướng dẫn của chúng tôi.

Thẻ meta khung nhìn phải chứa chiều rộng thiết bị

Không thể điều chỉnh trang cho các kích thước màn hình khác nhau vì mã của nó chỉ định thuộc tính khung nhìn có chiều rộng cố định. Trong trường hợp này, bạn cần áp dụng thiết kế đáp ứng bằng cách điều chỉnh tỷ lệ trang cho vừa với kích thước màn hình.

Nội dung rộng hơn màn hình

Báo cáo này xác định các trang yêu cầu cuộn ngang để xem văn bản và hình ảnh. Sự cố này xảy ra khi kích thước trong kiểu CSS được đặt thành giá trị tuyệt đối hoặc khi sử dụng hình ảnh được thiết kế cho chiều rộng cửa sổ trình duyệt cụ thể. Đảm bảo độ rộng của phần tử CSS và giá trị định vị là tương đối và hình ảnh được chia tỷ lệ. Để biết thêm thông tin về điều này, hãy xem phần Thứ nguyên nội dung khung nhìn trong hướng dẫn của chúng tôi.

Phông chữ quá nhỏ

Báo cáo này liệt kê các trang có chữ in nhỏ yêu cầu người dùng thực hiện cử chỉ chụm để thu phóng để đọc. Sau khi thiết lập khung nhìn, bạn cần xác định kích thước phông chữ để chúng hiển thị chính xác trong đó.