TẠO LẬP MỘT WEBSITE THÂN THIỆN VỚI CÁC THIẾT BỊ DI ĐỘNG

Trong những năm qua, số người dùng diện thoại di dộng, kể cả thiết bị di động không ngừng gia tăng. Xu hướng này vẫn đang tiếp tục và theo nghiên cứu gần đây, trong năm 2015, sẽ có nhiều thiết bị di động ra đời phục vụ cho nhu cầu người dùng trên toàn thế giới. Ngày nay, người dùng lướt web sử dụng nhiều công nghệ di động, điều đó ngụ ý rằng người sở hữu web cần làm cho website của họ thân thiện hơn với thiết bị di động để thu hút người khách truy cập nhiều hơn và nhà lập trình web cần học cách làm điều đó để có thể tạo ra nhiều tiền hơn. Hãy theo dõi bài viết dưới đây để tìm hiểu các cách thức tạo nên một website thân thiện với thiết bị di động, những thuận lợi của nó và cách để ứng dụng nó.

Giải pháp 1- Tách biệt website cho Desktop và cho thiết bị di động

Trong cách tiếp cận này, chúng ta sẽ tạo ra 2 website , 1 cho người dùng desktop, và 1 cho người dùng các thiết bị di động. Việc tách biệt hoàn toàn giữa website cho desktop và thiết bị di động cho bạn nhiều khả năng điều khiển các đặc tính hơn, Ví dụ, bạn có thể dễ dàng thêm đặc tính mới chỉ cho người dùng di động hoặc tạo ra vài tính năng cho desktop mà không muốn sự thay đổi này có hiệu lực trong website cho di động.

Hơn nữa, nghiên cứu gần đây đã cho thấy rằng hơn một nửa số lượng người dùng thiết bị di động trên toàn thế giới có sự kết nối với internet khá chậm, điều đó có nghĩa là phiên bản cho di động phải có tốc độ kết nối nhanh hơn so với desktop để có thể hiển thị tốt. Bất lợi cuả giải pháp này là những thay đổi trên website sẽ phải thực hiện trên cả 2 phiên bản, việc bảo dưỡng web cũng khó khăn hơn.

Cách thức để tạo ra sự phân tách website cho Desktop và cho Di động trong PHP

Để đảm bảo rằng website của bạn đã tồn tại. Đầu tiên, hãy tạo ra một miền phụ, cho người dùng di động : ví dụ m.yourdomain.com hoặc mobile.yourdomain.com. Copy tất cả dữ liệu quan trọng trên website đến subdomain đó. Tránh tạo ra sự trùng lặp về cơ sở dữ liệu.

Tại thời điểm này, website cho mobile đang được thiết lập, nhưng vẫn còn khá giống với phiên bản cho desktop. Nó cần được điều chỉnh. Sự điều chỉnh bao gồm 2 bước:

1) Loại bỏ những dữ liệu và tính năng không cần thiết

2) Tạo thiết kế thân thiện với di động.

Trong bước đầu tiên, chúng ta làm giảm sức tải của website di động bằng cách loại bỏ những tính năng không cần thiết như dữ liệu Javascript, CSS, và điều chỉnh hình ảnh kích cỡ nhỏ hơn, điều này có nghĩa là bạn đang thực hiện mọi hành động để website của bạn có được tốc độ tải càng nhanh càng tốt. Bước thứ 2 sẽ cho ra thiết kế mới. Đa số trường hợp, một thiết kế mới hoàn toàn được tạo ra thường có độ rộng 320px.

Hiện tại, webite cho di dộng đã sẵn sàng và có khả năng điều chỉnh, nhưng người dùng di động không chủ động truy cập trở lại đến phiên bản mobile của website. Để giải quyết vấn đề này, chúng ta sử dụng PHP MobileDetect class, cái có thể nhận diện một người dùng đang sử dụng điện thoại, máy tính bảng hay thiết bị máy tính để truy cập vào website. Bạn có thể tải PHP class tại đây https://code.google.com/p/php-mobile-detect/. Bao gồm class trong tất cả file PHP và thêm mã sau:

Code trong file PHP

URL chức năng hiện hành là:

Mã PHP

Mã này sẽ cho phép nhận diện nếu một người dùng truy cập vào website của bạn thông qua điện thoại di động và quay trở lại với phiên bản di động của cùng một URL mà anh ấy muốn truy cập. Mã PHP này cũng cho phép bạn sở hữu một nút “Go to full site” cho người dùng di động chỉ với việc đặt link following sau: http://www.yourdomain.com/?desktop=1

Giải pháp 2- thiết kế web tương thích

Giải pháp thứ 2 cho việc tạo ra một website thân thiện với thiết bị di động là thiết kế web có tính tương thích. Đúng như cái tên của nó, trong hướng tiếp cận này, chỉ có thiết kế thay đổi, ví dụ, các file CSS. Điều này rất tốt trong trường hợp bảo trì và SEO google cũng cân nhắc thiết kế web tương thích như là một giải pháp tốt nhất khi tạo ra một website cho di động. Mặt khác, việc vô hiệu hóa khả năng loại bỏ những file và bản thảo không cần thiết có thể có một tác động tuyệt vời đối với khả năng thực thi của website cho di động

Cách thức để tạo ra thiết kế web tương thích

Trong thiết kế web tương thích, chúng ta có rất nhiều cách thức thực hiện cho từng kích cỡ màn hình khác nhau. Kích cỡ màn hình được tiêu chuẩn hóa sử dụng media CSS query, cái được lưu trữ sẵn trong CSS3. Độ rộng tiêu chuẩn cho điện thoại và máy tính bảng được trình bày dưới đây.

Sử dụng Media CSS queries

Dĩ nhiên, bạn có thể bỏ đi một vài queries, tùy thuộc vào nhu cầu của bạn. Sau khi quyết định kích cỡ mà bạn sẽ điều chỉnh, bạn cần quyết định cách thức mà thiết kế cho thiết bị di động nên hướng đến, ví dụ, yếu tố nào sẽ được xóa bỏ và yếu tố nào sẽ được điều chỉnh. Sau đó tạo CSS và áp dụng chúng cho mỗi view trên di động. Thêm following meta tag dưới đây vào phần đầu của mã HTML .

Lưu ý rằng meta tag đôi lúc có thể gây ra những vấn đề đối với iPad, vì thế thiết kế không được hiển thị tốt trên Ipad thì tốt hơn cả là nên loại bỏ tag này

Kết luận

Tạo ra sự tách biệt giữa website cho di động và và thiết kế web tương thích với mọi thiết bị là hai cách tiếp cận trong việc tạo ra một website thân thiện với thiết bị di động. Không có cách nào là đúng hoặc sai. Hãy lựa chọn cách tốt nhất theo nhu cầu của bạn.

Mọi khó khăn khi tiếp cận với một ngôn ngữ lập trình mới hay cần sự tư vấn, định hướng theo ngôn ngữ lập trình nào, công nghệ nào, phương pháp học hiệu quả,…?

Các bạn hãy liên hệ với Stanford qua số hotline: (04) 6275.2212 - 0936.172.315 - 0963.723.236 để được gọi lại tư vấn miễn phí.

Stanford hân hạnh được đồng hành cùng bạn!