Thiết kế di động đáp ứng. Bố cục thích ứng hay phiên bản di động? Còn chuyển đổi và CTR thì sao?

Với sự khởi đầu của kỷ nguyên bùng nổ của thiết bị di động, các nhà phát triển phải đối mặt với một lựa chọn: họ nên giữ phiên bản di động của trang web của mình cùng với phiên bản "chính thức" hay các trang web nên thích ứng và điều chỉnh độc lập với các kích thước màn hình khác nhau?

Hiện nay, khi xây dựng website phiên bản di động có 3 cách chính để xây dựng website:

Thiết kế thích ứng;
Phiên bản di động riêng biệt của trang web;
RESS (Thiết kế đáp ứng + Phía máy chủ).

Mỗi phương pháp đều có ưu và nhược điểm riêng, tôi sẽ cố gắng mô tả chi tiết.

Thiết kế thích ứng

Truy vấn phương tiện CSS3 thường được sử dụng để triển khai thiết kế đáp ứng. Tùy thuộc vào kích thước màn hình mà người dùng sẽ nhìn thấy hình ảnh khác nhau:

@media screen và (max-width: 1600px) ( div.for-example (width: 1500px;) ) @media screen và (max-width: 1280px) ( div.for-example (width: 1100px;) ) @media màn hình và (độ rộng tối đa: 1024px) ( div.for-example (width: 980px;) )

Lợi ích của thiết kế đáp ứng

Dễ dàng phát triển - Với bố cục thích ứng, toàn bộ cấu trúc trang web sẽ tự động điều chỉnh theo các độ rộng màn hình khác nhau. Để có được một sản phẩm hoạt động, bạn không cần phải viết mọi thứ từ đầu - bạn chỉ cần điều chỉnh CSS và HTML... Có tính đến sự sẵn có của các khung như Bootstrap, việc phát triển như vậy không khó lắm với một tiêu chuẩn thực hiện. Hơn nữa, việc hỗ trợ một sản phẩm như vậy sẽ là một nhiệm vụ tương đối đơn giản.
Một URL - giúp chúng tôi tránh khỏi những chuyển hướng không cần thiết và người dùng cần phải nhớ địa chỉ của phiên bản dành cho thiết bị di động (ngay cả khi đó chỉ là tiền tố m.). Ngoài ra, việc có một địa chỉ duy nhất sẽ có tác động tích cực đến việc quảng bá trang web, vì nó sẽ “thuận tiện hơn” cho các công cụ tìm kiếm hoạt động.

Nhược điểm của thiết kế đáp ứng

Các nhiệm vụ khác nhau - Nhiệm vụ điển hình của người dùng “di động” trên các trang web lớn thường khác với nhiệm vụ của người dùng PC. Nếu bạn là khách hàng của ngân hàng, thì rất có thể, trong phiên bản di động của trang web, bạn sẽ quan tâm đến một lượng thông tin rất hạn chế - địa chỉ của các chi nhánh, máy ATM gần nhất, v.v.
Nhìn chung, với bố cục thích ứng, cách tiếp cận phổ biến nhất là tạo một bản sao của một trang web thông thường và đáp ứng nhu cầu của tất cả các nhóm đối tượng mục tiêu trong bố cục dành cho điện thoại. Nhưng sau đó bạn có thể quên đi khả năng sử dụng. Các phần phụ dành cho 5% du khách sẽ tạo ra sự bất tiện cho đa số khách hàng.
Vô vọng - Một trong những ưu điểm không thể phủ nhận của phiên bản di động: nếu không thích, bạn có thể tắt nó và chuyển sang miền thông thường. Các trang web thiết kế đáp ứng không cung cấp cho bạn sự lựa chọn đơn giản nhưng quan trọng này. Nếu bố cục được điều chỉnh không thuận tiện, có lỗi hoặc nếu nó ẩn một phần tử điều hướng quan trọng, hãy viết nó ra: bạn không thể làm gì để xem lại nó. Bạn sẽ phải chạy để tìm kiếm máy tính để bàn hoặc trang web của đối thủ cạnh tranh. Bạn có thể nghĩ ra những chiếc nạng để vượt qua hạn chế này (sử dụng cookie và kết nối các style sheet khác nhau). Nhưng cách tiếp cận này làm phức tạp sự phát triển.

Nhìn chung, ý tưởng phát triển phiên bản di động theo thiết kế responsive khá phổ biến, bất chấp những nhược điểm nêu trên. Đặc biệt, khái niệm này được hỗ trợ đầy đủ bởi những gã khổng lồ như Google chẳng hạn.

Phiên bản di động riêng biệt của trang web

Để làm cho trang web trở nên thuận tiện cho người dùng di động, các phiên bản riêng biệt của trang web thường được tạo - nhắm mục tiêu cụ thể đến người dùng có điện thoại thông minh/máy tính bảng. Cách phổ biến nhất là chuyển hướng người dùng thiết bị di động đến một tên miền phụ đặc biệt (m.example.com, mobile.example.com, v.v.). Có lẽ, trong 99% trường hợp, phiên bản di động là phiên bản chính rút gọn - chỉ với chức năng mà theo các nhà phát triển là cần thiết và hữu ích cho người dùng thiết bị di động và máy tính bảng.

Ưu điểm của phiên bản di động

Dễ dàng thay đổi - Vì trang web tồn tại, trên thực tế, tách biệt với phiên bản chính nên việc thực hiện các thay đổi đối với nó chỉ liên quan đến phiên bản di động sẽ dễ dàng hơn nhiều vì phiên bản di động thường không cung cấp chức năng dư thừa, không cần thiết.
Người dùng thân thiện - Phiên bản dành cho thiết bị di động thường được đơn giản hóa rất nhiều so với phiên bản dành cho máy tính để bàn, vì vậy người dùng sẽ không phải đi xa để tìm thấy thông tin mình cần.
Tốc độ - do trang web được đơn giản hóa tương tự nên phiên bản di động tải nhanh hơn. Điều này rất cần thiết với những người dùng vẫn sử dụng GPRS hoặc 3G yếu.
Sự lựa chọn- Thông thường, trong phiên bản di động, bạn có thể chuyển sang phiên bản chính của trang web.

Nhược điểm của phiên bản di động

Một số địa chỉ -
Bất tiện cho người sử dụng - Có nhiều địa chỉ khác nhau cho phiên bản máy tính để bàn và thiết bị di động. Đối với một số người, đây có thể là một điểm cộng, đối với những người khác, nó có thể là một yếu tố cực kỳ khó chịu khi để xem trang web một cách thuận tiện, bạn cần phải nhớ một địa chỉ khác. Ngoài ra còn có vấn đề với các công cụ tìm kiếm: để tránh trùng lặp nội dung, các chuyên gia SEO cần sử dụng thẻ meta rel=“alternative” và rel=“canonical”. Ngoài ra, khi người dùng tìm kiếm trên thiết bị di động của Google nhấp vào liên kết trong kết quả, họ sẽ được đưa đến phiên bản dành cho máy tính để bàn hoặc được chuyển hướng đến phiên bản dành cho thiết bị di động. Nhưng nếu phiên bản di động của trang này không tồn tại, anh ấy sẽ nhận được thông báo lỗi.
Giới hạn - Tạo một trang web dành cho thiết bị di động riêng có nghĩa là loại bỏ một số nội dung và chức năng. Ngoài ra, bạn có thể có hai bộ nội dung khác nhau, điều này có thể tác động tiêu cực đến bức tranh thông tin tổng thể.

Nhìn chung, việc tạo phiên bản di động của trang web mang lại kết quả khá tốt, đặc biệt đối với các dự án lớn. Ví dụ: Amazon sử dụng phiên bản di động đặc biệt của trang web của mình.

RESS

Bản thân Google, mặc dù hỗ trợ quản trị viên web sử dụng thiết kế đáp ứng, nhưng lại sử dụng một hệ thống khác trong các sản phẩm của mình. Ví dụ: nếu bạn truy cập trang chính trong các Tác nhân người dùng khác nhau, bạn có thể thấy HTML khác nhau cho các thiết bị khác nhau. RESS - Thiết kế đáp ứng + Phía máy chủ. Một ví dụ về cách triển khai được phác thảo “trên đầu gối”:

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser:: detectDevice(); if($device == DEVICE_TYPE_MPHONE)( $tmpl = "template.m.php"; ) else if($device == DEVICE_TYPE_TABLET)( $tmpl = "template.t.php";) else( $tmpl = "template .php"; ) include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

Ưu điểm của RESS

Trên thực tế, phương pháp này có thể bao gồm các lợi ích của cả phiên bản trang web dành cho thiết bị di động và phản hồi riêng biệt, tùy thuộc vào việc triển khai. Từ những gì sẽ là mới:

Giảm thiểu lưu lượng truy cập - Những JavaScript không cần thiết có thể được loại bỏ khỏi HTML, giúp giải phóng CPU, bộ nhớ và bộ nhớ đệm trên thiết bị di động. HTML và CSS cũng có thể được tối ưu hóa đặc biệt.
Có thể sử dụng nhắm mục tiêu - ví dụ: đối với thiết bị Android, bạn nên tải xuống ứng dụng từ GooglePlay và đối với Apple - từ iTunes. Bạn có thể tạo bố cục của riêng mình cho từng thiết bị.

Nhược điểm của RESS

Khó khăn trong phát triển - phương pháp như vậy sẽ yêu cầu cài đặt máy chủ phù hợp và công việc của nhiều lập trình viên hơn. Cũng cần phải thực hiện một số tùy chọn bố cục khác nhau.
Cơ chế phát hiện thiết bị - Thật không may, ngay cả ở thời đại chúng ta, nó vẫn chưa được hoàn thiện. Những câu chuyện về việc chiếc điện thoại hiếm của ai đó không được xác định là thiết bị di động xuất hiện khá thường xuyên.

Nhìn chung, RESS là phương án tốt nhất trong ba phương án được đề xuất, nhưng nó đòi hỏi nhiều lao động hơn trong quá trình phát triển.

Bản tóm tắt

Theo quan điểm cá nhân của tôi, không có lựa chọn lý tưởng nào mà mọi người nên sử dụng. Lựa chọn tốt nhất cho tôi là RESS. Tuy nhiên, đây là một trong những phương án hiếm hoi vì đòi hỏi nhiều công sức để thực hiện. Nhìn chung, cả 3 lựa chọn đều có ưu và nhược điểm, tùy thuộc vào bản chất và trọng tâm của trang web.

Không có gì ngạc nhiên khi hiện nay hầu hết mọi người truy cập Internet từ điện thoại di động vì nó tiện lợi và quen thuộc hơn. Mạng xã hội, trang tin tức, cửa hàng trực tuyến và miền dành riêng cho lĩnh vực dịch vụ - bất kỳ địa chỉ nào cũng có thể được truy cập từ thiết bị di động ở giữa, thay vì ngồi trước máy tính. Do đó, điều đặc biệt quan trọng là trang web phải thoải mái khi làm việc trên mọi thiết bị.

Thiết kế đáp ứng là gì và nó có liên quan như thế nào? Khi tạo một trang web, nên sử dụng phiên bản dành riêng cho thiết bị di động hay phiên bản phổ thông phù hợp với điện thoại, máy tính bảng, máy tính xách tay, v.v.?

Nếu thiết kế trang web của bạn gây bất tiện cho người dùng truy cập từ thiết bị di động, rất có thể họ sẽ tìm đến đối thủ cạnh tranh của bạn. Lợi nhuận và lưu lượng truy cập cũng sẽ không đến với bạn. Vì lý do này và nhiều lý do khác, trang web của bạn chắc chắn cần có thiết kế đáp ứng hoặc phiên bản dành cho thiết bị di động. Lựa chọn nào trong số này là thích hợp hơn? Hãy so sánh sau trong bài viết của chúng tôi.

Nếu một trang web hiện không có phiên bản thích ứng cũng như phiên bản dành cho thiết bị di động, nó trông khá lạ và không thể giúp tăng lưu lượng truy cập và lợi nhuận.

Gần đây, số lượng thiết bị mà mọi người truy cập trang web đã tăng mạnh. Điều này đòi hỏi cần có một phiên bản phù hợp với mọi kích thước và độ phân giải màn hình. Một số người truy cập Internet từ những chiếc điện thoại khá cũ, trong khi những người khác thậm chí còn sử dụng TV làm màn hình máy tính và đối với mỗi tùy chọn này, cần có một phiên bản phù hợp.

Do việc đăng nhập từ điện thoại khá đơn giản và có thể thực hiện bất cứ lúc nào nên số lượng người dùng chọn phương thức này cũng tăng lên, điều này làm tăng lưu lượng truy cập.

Để xếp hạng tìm kiếm của một trang, tốt nhất nên có phiên bản đáp ứng, vì điều này cho phép tính đến một trang web mà không có bất kỳ sự trùng lặp nào của các trang.

Thiết kế thích ứng

Điều này được hiểu rằng thiết kế thích ứng được thiết kế ngay lập tức cho máy tính, máy tính bảng và điện thoại thông minh. Tự động thích ứng, chia tỷ lệ và điều chỉnh theo từng kích thước màn hình cụ thể rất thuận tiện.

Điều quan trọng là tất cả thông tin và chức năng đều được hiển thị và hoạt động chính xác, bất kể loại thiết bị. Khi bạn truy cập một trang web từ điện thoại thông minh không có phiên bản phản hồi, bạn phải điều chỉnh tỷ lệ trang theo cách thủ công bằng cách làm cho các nút lớn hơn hoặc nhỏ hơn. Cách làm việc này rất bất tiện và bản thân phiên bản thích ứng sẽ chia tỷ lệ chính xác các khối trên trang web cho bạn.

Những tùy chọn bố cục nào được sử dụng cho một trang web đáp ứng?

Cao su. Ngày nay, kiểu bố cục này đang dần bị loại bỏ vì nó chỉ đơn giản là nén các khối trên trang. Trong phiên bản dành cho thiết bị di động, bố cục này chỉ đơn giản là tạo các khối trên trang web thành một nguồn cấp dữ liệu liên tục.
Nhiều bố cục có sẵn. Cách tiếp cận này sẽ đòi hỏi một lượng đáng kể nguồn tài chính, nhân lực và thời gian, vì nó liên quan đến việc tạo bố cục cho từng độ phân giải màn hình cụ thể, có tính đến tất cả các cấu hình có thể có. Đó là chất lượng cao nhất về kết quả, nhưng cũng tốn nhiều công sức nhất.
Chia tỷ lệ – nếu trang web của bạn không có cấu trúc phức tạp, chẳng hạn như trang đích, thì nó có thể được chia tỷ lệ một cách đơn giản.

Thiết kế đáp ứng có rất nhiều lợi thế

Ví dụ: khi sử dụng phiên bản thích ứng, bạn sẽ chỉ có một miền, 1 mã trang web cho tất cả các thiết bị và lại một nội dung và một cơ sở dữ liệu.

Những ưu điểm này của phiên bản thích ứng trở thành nhược điểm của phiên bản di động - nó sẽ yêu cầu tên miền phụ có tiền tố m, các lập trình viên sẽ cần tạo tùy chọn này một cách riêng biệt và việc điền thông tin cũng sẽ diễn ra riêng biệt và sẽ lại có hai cơ sở dữ liệu ( cho phiên bản di động và phiên bản máy tính để bàn).

Thiết kế thích ứng còn được gọi là đáp ứng và đây là một định nghĩa rất tốt để hiểu tất cả các thuộc tính của nó. Thích ứng có một số điểm nhất định Uyển chuyển– các khối trên trang web thay đổi vị trí, thích ứng với máy tính, điện thoại thông minh và máy tính bảng.

Ưu điểm rõ ràng nhất của phiên bản thích ứng là sự tiện lợi– khả năng xem trang web từ bất kỳ thiết bị nào sẽ thu hút người dùng.

Đối với các lập trình viên, nhà thiết kế và bản thân khách hàng, đây là một lợi thế rất lớn sự nhanh chóng phát triển, vì bạn cần suy nghĩ kỹ và chỉ viết một phiên bản chứ không phải hai phiên bản (máy tính để bàn + cho điện thoại thông minh).

Vì bộ phận SEO Sẽ thuận tiện hơn khi làm việc với cách tiếp cận thích ứng, vì nếu không, sẽ cần có các quy trình riêng biệt để lên đầu các công cụ tìm kiếm. Ngoài ra, robot không thích các trang trùng lặp và tài liệu giống hệt nhau trên hai trang web. Làm việc với một URL dễ dàng hơn nhiều. Ngoài ra, trong tài khoản Google Analytics của bạn, bạn sẽ ngay lập tức có thông tin về cả khách truy cập trang web trên máy tính để bàn và thiết bị di động và các chỉ số sẽ tăng lên.

Hỗ trợ trang web thuận tiện hơn cho phiên bản thích ứng, vì có thể thay đổi tất cả thông tin cùng một lúc chứ không phải ở hai phiên bản, như trường hợp của phiên bản dành cho thiết bị di động. Rất thường xuyên, bạn cần thay đổi và thêm nội dung nào đó vào trang web và do đó, tiết kiệm công sức là ưu tiên hàng đầu. Nếu có thể giảm thiểu các công việc thường ngày thì điều này đáng làm để các chuyên gia có thể dành thời gian cho những công việc phức tạp và hữu ích hơn.

Chúng tôi đã đề cập đến việc tiết kiệm thời gian phát triển, điều đáng nói trị giá. Giá tạo một trang web thông thường + một phiên bản dành cho thiết bị di động và một phiên bản thích ứng khác nhau tùy thuộc vào studio web hoặc đại lý kỹ thuật số, nhưng nhìn chung giá sẽ xấp xỉ nhau hoặc phiên bản thích ứng sẽ có giá thấp hơn.

Tiêu chí trong phiên bản thích ứng không rõ ràng để đánh giá. Đối với một số người dùng đăng nhập từ thiết bị di động, việc xem tất cả các khối thông tin vừa không thú vị vừa bất tiện. Ngược lại, ai đó cần thông tin chi tiết, và phiên bản di động hơi “rút gọn” sẽ không vừa ý họ. Nó ảnh hưởng nhân tố con người và sở thích cụ thể của từng người dùng.

Tất nhiên, thiết kế đáp ứng cũng có nhược điểm của nó. Ví dụ: tất cả các khối thông tin và chức năng của trang web sẽ được tải cho người dùng, ngay cả khi họ đăng nhập từ điện thoại của mình. Việc này có thể mất khá nhiều thời gian do tốc độ Internet thấp. Ngoài ra, không phải tất cả mọi người đều có thể đủ kiên nhẫn để cuộn qua tất cả thông tin trang web trên điện thoại thông minh, chẳng hạn như tìm kiếm số điện thoại.

Phiên bản di động của trang web

Phiên bản di động dành riêng cho màn hình điện thoại thông minh.

Hãy bắt đầu với những ưu điểm không thể phủ nhận của phiên bản di động.

Tốc độ tải: Phiên bản di động được thiết kế đặc biệt để tải xuống qua Internet di động, phiên bản này thường không hoạt động tốt. Để phiên bản di động tải nhanh hơn, ở giai đoạn lập kế hoạch, người ta nghĩ ra cách loại bỏ một số thông tin không có nhu cầu và cần thiết đối với người dùng đăng nhập từ điện thoại thông minh.

Ngoài ra, sẽ thuận tiện hơn nhiều cho bản thân người dùng khi họ có thể tìm thấy thông tin ngay lập tức bằng cách sử dụng chức năng tối thiểu. Như chúng tôi đã nói, lượng lưu lượng truy cập trên thiết bị di động đang tăng nhanh và chúng ta không nên bỏ lỡ những người thích lướt Internet từ điện thoại của họ.

Những nguyên tắc nào được sử dụng để xác định cách làm cho phiên bản di động của một trang web trở nên dễ dàng hơn? Thông thường mọi người thích thực hiện bất kỳ quy trình phức tạp, quan trọng và nhiều giai đoạn nào thông qua phiên bản máy tính để bànđịa điểm. Ví dụ, ít người sẽ soạn thảo tài liệu qua điện thoại di động, điền vào các mẫu đơn quan trọng hoặc chọn một căn hộ. Do đó, chúng khó có thể cần thiết trong phiên bản di động của trang web bảng, máy tính, bài viết mở rộng vân vân.

Sự tiện lợi là một ưu điểm khác của phiên bản điện thoại. Nhưng ở đây phụ thuộc rất nhiều vào các nhà phát triển - sự tương tác phải thực sự thoải mái, thuận tiện và hiệu quả cho người dùng. Điều đáng ghi nhớ về SEO - nếu khách hàng cảm thấy bất tiện khi làm việc trên trang web, họ sẽ chỉ cần đóng nó lại và robot tìm kiếm sẽ theo dõi điều này, hạ thấp vị trí của trang web trong kết quả tìm kiếm.

Khi bạn sử dụng phiên bản dành cho thiết bị di động, luôn có một liên kết hiển thị để truy cập phiên bản đầy đủ của trang web nếu bạn cần thông tin hoặc chức năng đầy đủ hơn. Không có tùy chọn như vậy trong phiên bản thích ứng.

Phiên bản điện thoại thông minh cũng có nhược điểm của nó. Việc tạo phiên bản cho điện thoại sẽ cần thêm thời gian và tiền bạc, và không phải khách hàng nào cũng sẵn sàng chờ đợi lâu hơn và do đó chọn phiên bản thích ứng.

Hôm nay chúng ta đã nói về điều gì tốt hơn, thiết kế đáp ứng hoặc phiên bản di động. Cả hai lựa chọn đều có ưu điểm và nhược điểm. Ngày nay, việc có một phiên bản di động được coi là một thông lệ tốt vì nhiều lý do. Điều này vừa mang lại sự thoải mái cho các khách hàng tương lai của bạn (khách hàng, khách truy cập, v.v.) vừa mang lại mong muốn SEO mang lại hiệu quả cho bạn (công cụ tìm kiếm xếp hạng các trang web có phiên bản di động tốt hơn). Tùy chọn thích ứng thuận tiện do tính linh hoạt của nó. Sự lựa chọn phụ thuộc vào tham số nào được ưu tiên.

Trong mọi trường hợp, chỉ có khách hàng mới quyết định phiên bản nào của trang web được yêu cầu.

Chi phí quảng cáo trên công cụ tìm kiếm và kết quả của nó phụ thuộc vào cách chúng tôi điều chỉnh trang web cho phù hợp với thiết bị di động.

Để đánh dấu

Dmitry Mrachkovsky, một nhà tối ưu hóa từ Ashmanov and Partners, đã cho biết cách lựa chọn giữa trang web thích ứng và trang web dành cho thiết bị di động cũng như những vấn đề không rõ ràng mà bạn sẽ gặp phải.

Lợi ích của các trang web đáp ứng và di động

Thật khó để trả lời dứt khoát câu hỏi công nghệ thích ứng nào cho điện thoại thông minh và máy tính bảng hiệu quả hơn theo quan điểm SEO. Ngay cả trong số những người chơi chính, tôi cũng không nhận thấy có nhiều người ủng hộ bất kỳ giải pháp nào. M.Video, DNS, Wildberries, Aviasale sử dụng bố cục thích ứng và Lamoda, 220 Volt, Yulmart, Yandex.Market sử dụng các trang web dành cho thiết bị di động. Nhưng hãy xem người thứ nhất và người thứ hai nhận được lợi ích gì.

Bố cục thích ứng của trang web M.Video và phiên bản di động của trang web 220 Volt

Bố cục thích ứng giúp bạn tránh phải phát triển một phiên bản di động riêng biệt. Điều này có lợi thế:

Chúng tôi không yêu cầu cấu trúc trang riêng để hiển thị trên thiết bị di động. Chỉ cần điều chỉnh phiên bản máy tính để bàn của trang web bằng CSS là đủ.
Một URL duy nhất được sử dụng cho phiên bản máy tính để bàn và thiết bị di động. Do đó, nội dung của trang web không bị trùng lặp, các trang không cạnh tranh với nhau và công việc quảng cáo ảnh hưởng đến thứ hạng trong tìm kiếm trên máy tính để bàn và thiết bị di động.

Phiên bản di động là một giải pháp đắt tiền và linh hoạt hơn. Nó có thể được chỉnh sửa mà không ảnh hưởng đến trang web chính. Điều này mang lại lợi thế:

Trang web dành cho thiết bị di động có thể được tải dễ dàng và nhanh nhất có thể bằng cách loại bỏ chức năng không cần thiết ở cấp mã.
Giao diện có thể được cải thiện cho người dùng di động bằng cách thêm chức năng không có sẵn trên phiên bản máy tính để bàn của trang web.
Người dùng luôn có thể chuyển sang phiên bản chính của trang web trên thiết bị di động nếu muốn.

Tôi muốn đề cập đến một công nghệ nữa - RESS. Nó hiển thị các mẫu trên máy tính để bàn hoặc thiết bị di động của người dùng tùy thuộc vào thiết bị, nhưng URL trang không thay đổi. RESS kết hợp những ưu điểm của phiên bản thích ứng và di động được mô tả ở trên. Nhưng nó cũng có hai nhược điểm: việc thực hiện phức tạp, tốn kém và sai sót trong việc xác định các mẫu điện thoại hiếm và không được ưa chuộng.

Sự cố với bố cục thích ứng

Thích ứng là một giải pháp kinh tế và tiện lợi, nhưng xét từ quan điểm quảng bá công cụ tìm kiếm, nó có một số cạm bẫy.

Giải thích sai về thích ứng

Một số người triển khai bố cục thích ứng không chính xác và hiển thị hai mẫu trên một trang bằng mã cùng một lúc - máy tính để bàn và thiết bị di động. Tùy thuộc vào thiết bị của người dùng, phần mã mong muốn vẫn hiển thị và phần còn lại bị ẩn bằng cách sử dụng display: none . Điều này tạo ra ba vấn đề:

Tất cả các thành phần nội dung được tải hai lần: văn bản, hình ảnh, tiêu đề H1 và H6, đường dẫn, các sản phẩm liên quan và được đề xuất, v.v. Và công cụ tìm kiếm thực sự không thích sự trùng lặp.
Những phần nội dung không sử dụng sẽ được ẩn đi bằng CSS. Ý kiến của các công cụ tìm kiếm về vấn đề này là mơ hồ. Google tuyên bố rằng họ bỏ qua nội dung của các khối ẩn và Yandex tuyên bố rằng họ tính đến nội dung của toàn bộ trang. Hầu hết các chuyên gia SEO đều đồng ý rằng kế hoạch như vậy có nguy cơ bị trừng phạt.
Mã bị trùng lặp và trang web tải chậm hơn.

Việc triển khai như vậy là cách tiếp cận sai lầm đối với công nghệ RESS.

Ẩn các yếu tố không cần thiết

Để làm cho giao diện của phiên bản thích ứng thuận tiện hơn, một số loại bỏ một số chức năng: các khối gây mất tập trung, văn bản lớn trong danh mục danh mục, v.v. Mọi thứ không cần thiết đều bị ẩn bằng cách sử dụng display: none . Nhưng vấn đề là tất cả mã đều được sử dụng để tải trang và trang web bị chậm. Ngoài ra, như đã đề cập ở trên, các công cụ tìm kiếm có thái độ gây tranh cãi đối với nội dung đó - có nguy cơ bị trừng phạt.

Sử dụng JavaScript không đúng cách

Một số người sử dụng JS để tránh hiển thị các khối không cần thiết trên thiết bị di động. Nhưng phương pháp này không tốt hơn display: none . Có nguy cơ là các công cụ tìm kiếm sẽ không lập chỉ mục nội dung dành cho chúng, ngay cả trên phiên bản dành cho máy tính để bàn. Các công cụ tìm kiếm thường không phải lúc nào cũng hiểu đúng nội dung AJAX, đặc biệt nếu không đáp ứng một số điều kiện để lập chỉ mục chính xác.

Tại sao mọi người vẫn sử dụng thiết kế đáp ứng?

Việc lựa chọn thích ứng thường là do hai ưu điểm chính: chỉ phát triển một phiên bản của trang web và không gặp vấn đề với nhiều URL.

Đây cũng là giải pháp thuận tiện cho việc quảng bá tới nhiều khu vực. Chúng tôi tập trung mọi nỗ lực vào một miền và nhận được kết quả trong tìm kiếm trên máy tính để bàn và thiết bị di động. Để thực hiện việc này, bạn cần liên kết các khu vực quan tâm với trang web trong Yandex.Directory.

Và đối với Google, hãy tạo một trang có địa chỉ chi nhánh để công cụ tìm kiếm hiểu được bạn hoạt động ở khu vực nào. Bố cục thích ứng với một miền duy nhất được M.Video sử dụng rất thành công. Cửa hàng có vị trí cao trong kết quả tìm kiếm trên thiết bị di động và máy tính để bàn cho các truy vấn về sản phẩm, danh mục và thông tin.

Bạn có thể làm theo cách khác - sử dụng tên miền phụ địa lý để tăng mức độ liên quan về mặt văn bản của các trang. Trong trường hợp này, các tên miền phụ như spb.site.ru, samara.site.ru, kazan.site.ru được chỉ định các vùng thông qua Yandex.Webmaster, sau đó các tiêu đề và thẻ meta được viết chỉ ra từ đồng nghĩa. Một điểm cộng nữa là dễ dàng thiết lập các phân tích riêng cho tên miền địa lý phụ để theo dõi kết quả theo khu vực. Phương thức quảng cáo này được MediaMarkt thực hiện.

Sự cố với phiên bản di động của trang web

Chi phí phát triển tương đối cao không phải là nhược điểm duy nhất của các trang web di động. Dưới đây là danh sách các vấn đề ít rõ ràng hơn mà bạn có thể gặp phải khi lựa chọn công nghệ này.

Công tác xúc tiến kép

Trang web dành cho thiết bị di động được tối ưu hóa và quảng bá riêng biệt với trang chính và điều này đòi hỏi nhiều tài nguyên hơn so với trường hợp trang web thích ứng. Bạn cần bắt đầu tối ưu hóa bằng cách đảm bảo rằng phiên bản di động được lập chỉ mục chính xác và không cạnh tranh với phiên bản dành cho máy tính để bàn. Để thực hiện việc này, hãy liên kết chúng trong Yandex.Webmaster và Search Console, chỉ định các thuộc tính rel="alternate" chính xác, định cấu hình lập chỉ mục và tạo bản đồ XML.

Hỗn loạn do liên kết tuyệt đối trong nội dung

Các mẫu dành cho máy tính để bàn và thiết bị di động tải nội dung từ cùng một cơ sở dữ liệu trong 99% trường hợp. Nếu nó sử dụng các liên kết tuyệt đối đến trang nội bộ của trang dành cho máy tính để bàn cho biết giao thức và tên miền thì chúng sẽ được hiển thị trên trang dành cho thiết bị di động. Khi click vào link sẽ xảy ra một trong hai trường hợp:

Nếu phiên bản dành cho máy tính để bàn đã xác định tác nhân người dùng thì phiên bản dành cho thiết bị di động của trang sẽ mở ra cho người dùng.
Trong các trường hợp khác, người dùng sẽ nhìn thấy trang dành cho máy tính để bàn và công việc tạo phiên bản dành cho thiết bị di động sẽ vô ích.

Trong trường hợp này, liên kết nội bộ của trang web có thể bị hỏng. Để tránh vấn đề này, hãy sử dụng các liên kết tương đối trong nội dung của bạn. Nghĩa là, đối với thuộc tính href, hãy chỉ định /page/ thay vì https://site.ru/page/ .

Nội dung và cấu trúc của trang web dành cho máy tính để bàn và thiết bị di động có thể khác nhau. Vì vậy, việc lập chỉ mục nội dung của cả hai trong quá trình tìm kiếm là hợp lý để tránh sai sót. Google khuyên bạn nên chỉ ra trên phiên bản di động rằng nội dung của trang dành cho máy tính để bàn là chuẩn. Mặt khác, công cụ tìm kiếm cho biết nội dung của các trang không chuẩn không được tính đến.

Yandex rất rõ ràng về vấn đề này - nó lập chỉ mục riêng biệt nội dung của trang dành cho thiết bị di động và máy tính để bàn. Để thực hiện việc này, chỉ cần đặt thuộc tính rel="alternate" từ phiên bản chính sang phiên bản dành cho thiết bị di động và bạn cũng có thể thiết lập chuyển hướng 301 từ phiên bản dành cho máy tính để bàn sang phiên bản dành cho thiết bị di động, có tính đến tác nhân người dùng của thiết bị.

Sự mơ hồ về các yêu cầu về chỉ mục ưu tiên thiết bị di động

Để chuẩn bị cho quá trình chuyển đổi sang chỉ mục ưu tiên thiết bị di động, việc chọn phiên bản di động của trang web làm trang chuẩn là điều hợp lý. Đúng, các đề xuất liên quan đến ưu tiên thiết bị di động có những điểm mơ hồ riêng. Ví dụ: nguyên tắc của Google nói rằng nội dung của phiên bản dành cho thiết bị di động và máy tính để bàn phải giống nhau nhưng không tiết lộ mức độ “tương tự”.

Điều gì sẽ xảy ra nếu xếp hạng trong tìm kiếm trên máy tính để bàn yêu cầu một khối nội dung nhất định, khối nội dung này sẽ không cần thiết trong phiên bản di động nhưng sẽ được ưu tiên cho phiên bản di động?

Trích từ hướng dẫn của Google về lập chỉ mục trang web dành cho thiết bị di động

Trích từ báo cáo của Google về việc triển khai chỉ mục ưu tiên thiết bị di động

Sử dụng các trang turbo một cách thiếu suy nghĩ

Một số giới thiệu những đổi mới của công cụ tìm kiếm một cách bừa bãi, với mong muốn ảnh hưởng đến thứ hạng. Ví dụ: các trang turbo Yandex, không thay thế các trang di động chính thức trong tìm kiếm, bao gồm một phần nhỏ chức năng của người dùng và ít chuyển đổi hơn. Nếu bạn có một trang web thương mại và tự tin vào chất lượng của phiên bản di động, đừng vội triển khai “turbo” - ngay cả đối với các trang có bài viết và đánh giá.

Giảm tác dụng của các liên kết bên ngoài

Liên kết vẫn quan trọng đối với việc xếp hạng, đặc biệt là trong tìm kiếm của Google. Khi chúng tôi có tên miền phụ dành cho thiết bị di động, một số người dùng bắt đầu liên kết với tên miền đó trên các mạng xã hội và diễn đàn. Và phần còn lại sử dụng liên kết đến địa chỉ trang web chính. Kết quả là các liên kết có ít tác dụng hơn trong tìm kiếm trên thiết bị di động và máy tính để bàn so với khi chúng ta có một tên miền.

Đặc điểm khuyến mãi theo khu vực

Ở trên, chúng tôi đã nói về hai cách để quảng bá một sản phẩm thích ứng theo khu vực - sử dụng một tên miền duy nhất và các tên miền phụ địa lý. Hãy xem xét các tùy chọn này cho phiên bản di động.

Trong trường hợp đầu tiên, chúng tôi quảng cáo tên miền chính và tên miền phụ di động m.site.ru. Mỗi vùng trong số chúng cần phải được chỉ định vùng thông qua Yandex.Directory. Vấn đề là đôi khi không thể liên kết độc lập phiên bản di động của trang web với chi nhánh. Bạn sẽ phải liên hệ với bộ phận hỗ trợ kỹ thuật, nhưng điều này không đảm bảo kết quả. Bạn không thể tạo một tổ chức riêng cho phiên bản di động của trang web. Vì vậy, nếu có nhiều nhánh thì việc ràng buộc có thể mất nhiều thời gian.

Chúng tôi thường loại trừ tùy chọn sử dụng tên miền phụ như m.spb.site.ru hoặc spb.m.site.ru. Mặc dù Kholodilnik.ru chẳng hạn, sử dụng nó. Nhưng trong trường hợp này, bạn cần định cấu hình địa chỉ giữa tất cả các khu vực của phiên bản dành cho thiết bị di động và máy tính để bàn, cập nhật chúng, theo dõi các thay đổi và giám sát các dịch vụ dành cho quản trị viên web. Đây là rất nhiều công việc khó có thể được đền đáp.

Gửi để kiểm tra tính phù hợp với thiết bị di động

Nếu bạn không gửi phiên bản được tối ưu hóa của trang web tới Yandex.Webmaster để kiểm tra tính thân thiện với thiết bị di động, nó có thể không xuất hiện trong kết quả tìm kiếm trên thiết bị di động. Vấn đề cũng áp dụng cho việc thích ứng. Điều này không phải lúc nào cũng xảy ra nhưng tôi khuyên bạn nên theo dõi các thông báo trong Webmaster.

Đoạn giao tiếp với bộ phận hỗ trợ kỹ thuật của Yandex về việc chỉ định khu vực cho phiên bản di động của trang web

Tại sao nên sử dụng phiên bản di động?

Ưu điểm chính của phiên bản di động chắc chắn là khả năng tạo mẫu riêng và tốc độ tải cao. Ngoài ra, các trang web cũ sẽ dễ dàng tạo phiên bản di động riêng hơn là triển khai phiên bản thích ứng.

Ngoài ra, nhiều chuyên gia SEO nhận thấy lưu lượng tìm kiếm tăng lên sau khi giới thiệu trang web dành cho thiết bị di động thay vì trang web thích ứng. Mặc dù tôi không loại trừ nguyên nhân của sự tăng trưởng là do có những sai sót trong cách bố trí thích ứng của họ đã ảnh hưởng tiêu cực đến thứ hạng.

Lựa chọn nào

Nếu bạn đang phát triển một trang web từ đầu hoặc có một dự án nhỏ, hãy xem xét kỹ hơn về bố cục thích ứng. Đây là giải pháp tiết kiệm và nhanh chóng hơn. Nhưng tốt hơn hết bạn nên lên kế hoạch cho chức năng này ngay lập tức để sau này bạn không phải ẩn một phần trang web khỏi hiển thị trên thiết bị di động.

Viết

Hiện nay, khi xây dựng website phiên bản di động có 3 cách chính để xây dựng website:

Thiết kế thích ứng;
Phiên bản di động riêng biệt của trang web;
RESS (Thiết kế đáp ứng + Phía máy chủ).

Mỗi phương pháp đều có ưu và nhược điểm riêng, tôi sẽ cố gắng mô tả chi tiết.

Thiết kế thích ứng

Lợi ích của thiết kế đáp ứng

Dễ dàng phát triển - Với bố cục thích ứng, toàn bộ cấu trúc trang web sẽ tự động điều chỉnh theo các độ rộng màn hình khác nhau. Để có được một sản phẩm hoạt động, bạn không cần phải viết mọi thứ từ đầu - bạn chỉ cần điều chỉnh CSS và HTML... Có tính đến sự sẵn có của các khung như Bootstrap, việc phát triển như vậy không khó lắm với một tiêu chuẩn thực hiện. Hơn nữa, việc hỗ trợ một sản phẩm như vậy sẽ là một nhiệm vụ tương đối đơn giản.
Một URL - giúp chúng tôi tránh khỏi những chuyển hướng không cần thiết và người dùng cần phải nhớ địa chỉ của phiên bản dành cho thiết bị di động (ngay cả khi đó chỉ là tiền tố m.). Ngoài ra, việc có một địa chỉ duy nhất sẽ có tác động tích cực đến việc quảng bá trang web, vì nó sẽ “thuận tiện hơn” cho các công cụ tìm kiếm hoạt động.

Nhược điểm của thiết kế đáp ứng

Các nhiệm vụ khác nhau - Nhiệm vụ điển hình của người dùng “di động” trên các trang web lớn thường khác với nhiệm vụ của người dùng PC. Nếu bạn là khách hàng của ngân hàng, thì rất có thể, trong phiên bản di động của trang web, bạn sẽ quan tâm đến một lượng thông tin rất hạn chế - địa chỉ của các chi nhánh, máy ATM gần nhất, v.v.
Nhìn chung, với bố cục thích ứng, cách tiếp cận phổ biến nhất là tạo một bản sao của một trang web thông thường và đáp ứng nhu cầu của tất cả các nhóm đối tượng mục tiêu trong bố cục dành cho điện thoại. Nhưng sau đó bạn có thể quên đi khả năng sử dụng. Các phần phụ dành cho 5% du khách sẽ tạo ra sự bất tiện cho đa số khách hàng.
Vô vọng - Một trong những ưu điểm không thể phủ nhận của phiên bản di động: nếu không thích, bạn có thể tắt nó và chuyển sang miền thông thường. Các trang web thiết kế đáp ứng không cung cấp cho bạn sự lựa chọn đơn giản nhưng quan trọng này. Nếu bố cục được điều chỉnh không thuận tiện, có lỗi hoặc nếu nó ẩn một phần tử điều hướng quan trọng, hãy viết nó ra: bạn không thể làm gì để xem lại nó. Bạn sẽ phải chạy để tìm kiếm máy tính để bàn hoặc trang web của đối thủ cạnh tranh. Bạn có thể nghĩ ra những chiếc nạng để vượt qua hạn chế này (sử dụng cookie và kết nối các style sheet khác nhau). Nhưng cách tiếp cận này làm phức tạp sự phát triển.

Phiên bản di động riêng biệt của trang web

Ưu điểm của phiên bản di động

Dễ dàng thay đổi - Vì trang web tồn tại, trên thực tế, tách biệt với phiên bản chính nên việc thực hiện các thay đổi đối với nó chỉ liên quan đến phiên bản di động sẽ dễ dàng hơn nhiều vì phiên bản di động thường không cung cấp chức năng dư thừa, không cần thiết.
Người dùng thân thiện - Phiên bản dành cho thiết bị di động thường được đơn giản hóa rất nhiều so với phiên bản dành cho máy tính để bàn, vì vậy người dùng sẽ không phải đi xa để tìm thấy thông tin mình cần.
Tốc độ - do trang web được đơn giản hóa tương tự nên phiên bản di động tải nhanh hơn. Điều này rất cần thiết với những người dùng vẫn sử dụng GPRS hoặc 3G yếu.
Sự lựa chọn- Thông thường, trong phiên bản di động, bạn có thể chuyển sang phiên bản chính của trang web.

Nhược điểm của phiên bản di động

Một số địa chỉ -
Bất tiện cho người sử dụng - Có nhiều địa chỉ khác nhau cho phiên bản máy tính để bàn và thiết bị di động. Đối với một số người, đây có thể là một điểm cộng, đối với những người khác, nó có thể là một yếu tố cực kỳ khó chịu khi để xem trang web một cách thuận tiện, bạn cần phải nhớ một địa chỉ khác. Ngoài ra còn có vấn đề với các công cụ tìm kiếm: để tránh trùng lặp nội dung, các chuyên gia SEO cần sử dụng thẻ meta rel=“alternative” và rel=“canonical”. Ngoài ra, khi người dùng tìm kiếm trên thiết bị di động của Google nhấp vào liên kết trong kết quả, họ sẽ được đưa đến phiên bản dành cho máy tính để bàn hoặc được chuyển hướng đến phiên bản dành cho thiết bị di động. Nhưng nếu phiên bản di động của trang này không tồn tại, anh ấy sẽ nhận được thông báo lỗi.
Giới hạn - Tạo một trang web dành cho thiết bị di động riêng có nghĩa là loại bỏ một số nội dung và chức năng. Ngoài ra, bạn có thể có hai bộ nội dung khác nhau, điều này có thể tác động tiêu cực đến bức tranh thông tin tổng thể.

RESS

Ưu điểm của RESS

Giảm thiểu lưu lượng truy cập - Những JavaScript không cần thiết có thể được loại bỏ khỏi HTML, giúp giải phóng CPU, bộ nhớ và bộ nhớ đệm trên thiết bị di động. HTML và CSS cũng có thể được tối ưu hóa đặc biệt.
Có thể sử dụng nhắm mục tiêu - ví dụ: đối với thiết bị Android, bạn nên tải xuống ứng dụng từ GooglePlay và đối với Apple - từ iTunes. Bạn có thể tạo bố cục của riêng mình cho từng thiết bị.

Nhược điểm của RESS

Khó khăn trong phát triển - phương pháp như vậy sẽ yêu cầu cài đặt máy chủ phù hợp và công việc của nhiều lập trình viên hơn. Cũng cần phải thực hiện một số tùy chọn bố cục khác nhau.
Cơ chế phát hiện thiết bị - Thật không may, ngay cả ở thời đại chúng ta, nó vẫn chưa được hoàn thiện. Những câu chuyện về việc chiếc điện thoại hiếm của ai đó không được xác định là thiết bị di động xuất hiện khá thường xuyên.

Nhìn chung, RESS là phương án tốt nhất trong ba phương án được đề xuất, nhưng nó đòi hỏi nhiều lao động hơn trong quá trình phát triển.

Bản tóm tắt

Đây là phiên bản đơn giản hóa bổ sung của trang web, thường nằm trên tên miền phụ có tiền tố “m” (ví dụ: m.site).

Như bạn có thể thấy trong hình, trên máy tính bảng, phiên bản dành cho điện thoại cũng mở ra và nó được kéo dài về chiều rộng, bởi vì máy tính bảng thực tế là một điện thoại thông minh rất rất rộng :)

Tất nhiên, về mặt bên ngoài và phong cách, nó có thể được làm giống như trang web chính (để bạn không có cảm giác như đang ở trên trang của người khác): cùng màu sắc, phông chữ, thành phần. Nhưng cấu trúc có thể hoàn toàn khác nhau và thường là như vậy. Chắc chắn sẽ không có ai chọn được căn hộ, nhận xe qua điện thoại, hay vay vốn ngân hàng. Rốt cuộc, điều này thật bất tiện vì màn hình nhỏ (so với máy tính xách tay hoặc máy tính). Nhưng việc tìm máy ATM gần nhất hoặc địa chỉ của tiệm bánh pizza thì ngược lại. Do đó, các phiên bản di động được thực hiện rất đơn giản, không có bất kỳ máy tính phức tạp nào, các bảng khổng lồ so sánh hai hoặc nhiều sản phẩm tương tự. Họ loại bỏ tất cả những thứ phức tạp nhất và đơn giản hóa việc truy cập vào danh bạ, giờ làm việc, v.v.

Thuận lợi

Vì đây là phiên bản bổ sung của trang web nên nó được tải riêng (tức là trang chính không tải). Và tôi nhắc lại một lần nữa: như một quy luật, nó được đơn giản hóa rất nhiều. Do đó, nó tải nhanh chóng so với phiên bản thích ứng.
Việc duy trì phiên bản di động khá đơn giản: những thay đổi và cải tiến không ảnh hưởng đến máy tính.

sai sót

Với tư cách là một nhà thiết kế, tôi sẽ bày tỏ ngay quan điểm của mình về máy tính bảng: phiên bản kéo dài dành cho điện thoại thông minh trông rất tệ trên chúng. Không, tất nhiên là bạn có thể sử dụng nó. Nhưng phương pháp thích ứng đã tiến rất xa về mặt này.
Tất cả điều này cực kỳ bất tiện cho việc tối ưu hóa SEO. Hai địa chỉ - trang chính và phiên bản di động - có nghĩa là nội dung sẽ bị trùng lặp.