Hướng dẫn cách nâng cấp website tương thích với thiết bị di động

Hiện nay google đã bắt đầu thay đổi thuật toán tìm kiếm của họ, cụ thể các trang web có tính thân thiện với thiết bị di động sẽ được ưu tiên hiển thị và được khuyến nghị người tìm kiếm truy cập vào. Bên cạnh đó, với sự thay đổi nhanh chóng từ thói quen lướt web trên máy tính hay laptop chuyển sang sử dụng thiết bị di động để truy cập web mọi lúc mọi nơi thì việc làm cho trang web trở nên thân thiện với thiết bị di động trở nên vô cùng quan trọng đối với mọi trang web.

Cùng với số lượng người duyệt web từ di động đã vượt qua lượng người duyệt web trên PC nên việc nâng cấp website tương thích với thiết bị di động là cực kỳ cần thiết để website của bạn tiếp cận một cách thân thiện nhất với khách hàng. Dưới đây là một số bước cơ bản để nâng cấp website của bạn lên giao diện responsive, tương thích cả với máy tính truyền thống và thiết bị di động.

Bước 1: Kiểm tra mobile friendly với công cụ của google

Đầu tiên các bạn vào link này https://www.google.com/webmasters/tools/mobile-friendly/ và gõ đường dẫn đến website của bạn. Công cụ này sẽ thông báo cụ thể website của bạn có tương thích với thiết bị di động hay không?

Bước 2: Thiết lập khung nhìn cho các thiết bị di động (Mobile viewport set)

Thao tác này rất đơn giản bạn chỉ cần thêm đoạn code sau vào phần phần header của website và kiểm tra lại kết quả của mình bằng một smart phone bất kỳ hoặc bằng link kiểm tra của google nói trên

Bước 3: Xây dựng đoạn code nhận diện thiết bị đầu cuối

Mỗi một thiết bị khi truy cập vào một website đều phải gửi các thông tin cơ bản của nó lên máy chủ, các thông tin này bao gồm địa chỉ IP, hệ điều hành, tên của trình duyệt web.... Chúng ta sẽ viết một đoạn code để nhận diện các thông tin này và quyết định xem sẽ gửi trả cho thiết bị file trình bày như thế nào.

Các bạn có thể download đoạn code PHP nhận diện thiết bị đầu cuối ở đây và chạy thử đoạn code này để đảm bảo là nó nhận diện thành công thiết bị đầu cuối. Đoạn code này nhận diện hệ điều hành, tên trình duyệt, địa chỉ IP của thiết bị, từ đó xác định luôn vị trí địa lý của thiết bị bằng cách tham chiếu đến trang www.geoplugin.net.

Bước 4: Áp dụng cơ chế nhận thiết bị đầu cuối vào website chính thức.

Để áp dụng đoạn code nói trên, các bạn cần upload đoạn code đó lên một chỗ nào đó của website và sau đó dùng hàm include hoặc require_once của php để tải đoạn code đó mỗi khi vào trang. Lưu ý trước khi nhúng code này các bạn cần rào hoặc bỏ lệnh print_r đi để không in các thông tin nhận diện thiết bị đầu cuối ra màn hình.

Sau đó dùng 2 câu lệnh if để xử lý khi xác định được thiết bị đầu cuối là một thiết bị di động. Câu lệnh thứ nhất để lựa chọn style sheet sẽ load lên cùng với trang:

Câu lệnh thứ 2 sử dụng để tải layout phù hợp với thiết bị đầu cuối. Lưu ý các bạn cần tạo ra một file layout.php và đặt vào thư mục mobile trên website. Trang này tạm thời chỉ cần echo một dòng "Giao diện cho di động đang được xây dựng..."

Sau các bước này các bạn vào trang web của mình bằng PC và bằng một thiết bị di động. Khi vào bằng PC bạn sẽ thấy trang web xuất hiện bình thường, còn khi vào bằng di động các bạn sẽ thấy dòng chữ "Giao diện cho di động đang được xây dựng..."

Bước 5: Xây dựng giao diện responsive

Thiết kế website chuẩn seo với giao diện đẹp, phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình. Một website đẹp trên máy tính nhưng khi xem trên điện thoại bố cục lộn xộn, hình ảnh, bài viết không cân đối thì không thể gọi là Web Responsive

Chúc các bạn thành công!

CÔNG TY THIẾT KẾ PHẦN MÊM VINASOFT
Địa chỉ 1: 145 Phan Huy Ích, Phường 15, Quận Tân Bình, Tp.HCM

Điện Thoại: 0977 113 950 - 0904 050 003

Email: thanhthuc.vns@gmail.com

Wedsite: www.vina-soft.com