Cách làm cho trang web của bạn phù hợp với người dùng di động

Rõ ràng: chúng ta hiện đang sử dụng rất nhiều điện thoại thông minh và máy tính bảng để lướt internet.

Vì vậy, bạn phải chắc chắn rằng trang web của bạn trông cũng tốt trên các thiết bị đó. Nhưng làm thế nào để bạn làm điều đó trong thực tế?

>Xem thêm: dịch vụ seo

Thiết kế đáp ứng

Có một số cách để làm cho trang web của bạn di động. Cách tốt nhất tôi tìm thấy là cách bố trí của trang web tự động điều chỉnh theo kích thước của màn hình mà nó được xem. Điều này được gọi là thiết kế đáp ứng.

Nói tóm lại, phương pháp này có nghĩa là bạn bao gồm một quy tắc kiểu bổ sung trong biểu định kiểu của bạn cho mỗi phần cần có giao diện khác nhau khi màn hình hẹp hơn hoặc rộng hơn. Trong quy tắc kiểu bổ sung đó, sau đó bạn chỉ định khi nào nên áp dụng quy tắc đó và những thay đổi đó có nghĩa chính xác.

>Xem thêm: dich vu seo

Thí dụ

Tôi chắc chắn một ví dụ sẽ làm cho điều này rõ ràng hơn một chút. Giả sử tôi đã đặt phần văn bản của trang web của mình (yếu tố bài viết) chiếm 80% chiều rộng của màn hình (chiều rộng: 80%;). Nếu ai đó nhìn vào trang web của tôi với độ phân giải màn hình 1366 x 768 pixel. Thì phần văn bản của trang web của tôi được hiển thị trên chiều rộng 1093 pixel (80% của 1366).

Nhưng nếu anh ta nhìn nó với độ phân giải màn hình 1920 x 1080 pixel. Thì phần đó đột nhiên rộng 1536 pixel. Tôi nghĩ rằng nó quá rộng (các dòng trở nên quá dài và văn bản do đó rất khó đọc).

Điều tôi thực sự muốn là phần tử bài viết chiếm 80% màn hình khi trang web của tôi.

Được xem ở độ phân giải màn hình rộng 1440 pixel hoặc thấp hơn và 65% khi độ phân giải màn hình cao hơn. Nếu màn hình rất hẹp (ví dụ dưới 800 pixel). Thì bài viết có thể chiếm 95% màn hình thay vì 80% tiêu chuẩn.

Với các quy tắc kiểu này, tôi chỉ ra rằng phần tử bài viết thường có chiều rộng bằng 80% màn hình. Trừ khi màn hình rộng hơn 1440 pixel (min-width: 1441px) hoặc hẹp hơn 800 pixel (max-width: 800px). Sau đó, cùng một phần tử có được chiều rộng tương ứng là 65% hoặc 95%.

Bằng cách này, bạn có thể kiểm tra tất cả các thành phần html của trang web của mình. Đưa ra một giá trị khác cho các thuộc tính phải thay đổi khi màn hình rộng hơn hoặc hẹp hơn trong biểu định kiểu của bạn.

>Xem thêm: dich vu seo website

Một phiên bản di động khác của trang web của bạn

Với thiết kế đáp ứng, sự xuất hiện của trang web của bạn thích ứng với chiều rộng của màn hình. Nội dung các trang web của bạn không thay đổi. Nó vẫn giống hệt với mọi chiều rộng màn hình. Nhưng đôi khi tốt hơn là tạo một phiên bản di động riêng của trang web của bạn.

Có thể khách truy cập yêu cầu trang web của bạn bằng điện thoại thông minh. Đang tìm kiếm thông tin rất khác so với người dùng máy tính để bàn hoặc máy tính xách tay truy cập trang web của bạn.

Một ví dụ điển hình là trang web của các hãng hàng không. Khách truy cập gọi trang web này trên điện thoại thông minh của họ sẽ có nhiều khả năng tìm kiếm thời gian khởi hành. Đến hiện tại hơn so với khách truy cập máy tính để bàn. Do đó, phiên bản di động của trang web trông rất khác so với phiên bản dành cho máy tính để bàn của công ty.

>Xem thêm: dịch vụ seo giá rẻ

Trong trường hợp này, bạn đang tạo hai trang web khác nhau.

Sau đó, bạn đặt một đoạn script trên máy chủ của bạn để có thể xem khách truy cập. Sử dụng thiết bị nào để gọi trang web của bạn.

Nếu đây là điện thoại thông minh, tập lệnh sẽ gửi khách truy cập này đến phiên bản di động của trang web của bạn. Nhưng nếu anh ta nhìn vào trang web của bạn trên máy tính để bàn hoặc máy tính xách tay, anh ta sẽ thấy phiên bản thông thường.

Điều đó nghe có vẻ khá phức tạp, nhưng nó không phải như vậy. Có những công ty nơi bạn có thể đưa ra phiên bản di động của trang web của mình. Họ cũng cung cấp cho bạn mã xác định xem khách truy cập có nên được chuyển hướng hay không.

>Xem thêm: seo bền vững

Nếu bạn muốn tự mình làm tất cả. Thì bạn đặt các trang di động của trang web của bạn vào một thư mục trên máy chủ của riêng bạn và với một trong các tập lệnh Phát hiện Trình duyệt Di động.

Bạn đảm bảo rằng khách truy cập của bạn được chuyển đến đúng trang. Nhưng để có thể làm như vậy, bạn cần có một số kiến ​​thức về html và php.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0938844990