Responsive Web Design hiển thị trên các trình duyệt smartphone

Responsive Web Design hiển thị như thế trên điện thoại martphone?

Năm 2010, trang web A List Apart cho đăng tải một bài viết với tiêu đề "Responsive Web Design" (thiết kế web có độ phân giải với nhiều thiết bị khác nhau). Việc áp dụng nhiều bố cục trang web cho các loại kích cỡ màn hình khác nhau chứ không chỉ thiết kế một giao diện cố định truyền thống trước đây (giao diện web chỉ hiển thị tốt trên trình duyệt máy tính để bàn hoặc latop). Kể từ đây, giới lập trình web bắt đầu để ý hơn đến responsive web design (RWD). Cộng với sự phát triển của các chuẩn HTML5 và CSS3, RWD đã trở thành một thứ quan trọng mà quản trị viên hay chủ sỡ hữu website cần phải nghĩ tới trong bối cảnh ngày càng nhiều thiết bị di động với đủ các kích cỡ, đủ loại độ phân giải màn hình khác nhau được tung ra thị trường. Vậy RWD là gì và ảnh hưởng của nó đến chúng ta như thế?

Panpic responsive web design là như thế nào?
Responsive một số màn hình phổ biến - ảnh Panpic

Người ta bố cục trang web như thế nào?

Để biết được RWD, trước tiên chúng ta hãy cùng tìm hiểu xem người ta làm như thế nào để có được một website hoàn chỉnh với đủ màu sắc, hình ảnh chứ không phải là hàng nghìn dòng chữ khô khan.

Trước hết, để viết ra được một trang web, người ta sẽ dùng đến ngôn ngữ HTML (Hyper Text Markup Language) và lưu tập tin dưới dạng *.html. File này thực chất chỉ là một tập tin văn bản, tuy nhiên nó bao gồm rất nhiều "thẻ" (tag) được chuẩn hóa để khi trình duyệt đọc hiểu, đọc nó & trả về định dạng của tag. Tag thường được viết theo một cặp, tức là tag mở và tag đóng. Ví dụ, chúng ta có tag mở <ten_tag> để bắt đầu một đoạn văn bản mới, sau khi viết văn bản xong thì sẽ đóng lại bằng </ten_tag>

Trong số những tag mã code của HTML có một cặp tag đặc biệt là div. Nó dùng để chia trang web thành nhiều phần khác nhau, và mỗi phần sẽ đại diện cho một bộ phận của web.

Ví dụ: Panpic.vn

Chúng ta có một div để hiển thị phần đầu trang chỗ class header, một div nữa nằm bên dưới để hiển thị phần nội dung chính của trang chỗ class bodymain và div cuối cùng dành cho việc hiển thị chân trang chỗ class footer. Các div còn có thể lồng vào nhau nữa.

Một thứ ngôn ngữ thứ hai được sử dụng trong thiết kế web là CSS (Cascading Style Sheet). CSS có thể nhúng như là một phần của file HTML hoặc nằm trong file riêng. Người ta sẽ dùng CSS để viết ra những dòng mã quy định kích thước các div, màu nền, ảnh nền, khung viền, để trang trí các thành phần đồ họa trên web. Ngoài ra, CSS còn dùng để bố cục trang (layout, themes), tức sắp xếp vị trí các div lại tùy theo mục đích của người thiết kế. Ví dụ, bạn có thể dùng CSS để bảo một div phải nằm ép ở bất cứ vị trí nào đó của trình duyệt web, div còn lại nằm kế bên và cả hai kéo dài đến cuối trang chứ không nằm cạnh nhau một cách vô trật tự như khi chưa xài CSS.

Nhận biết các loại thiết bị khác nhau và áp dụng RWD

Để nhận biết thiết bị nào đang truy cập vào trang web, người ta có rất nhiều cách. Thứ nhất, mỗi trình duyệt đều có một chuỗi kí tự cũ thể để xác định tên, bộ nguồn dựng trang của chính nó. Các website được phép đọc chuỗi này để biết được rằng người dùng đang dùng trình duyệt nào, thậm chí là thiết bị nào, tên là gì để vào web.

Ví dụ, UserAgent của IE 10.0 là
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)

còn của Safari trên iPad là
Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25.
Khi biết được máy nào đang truy cập website, người ta có thể dễ dàng xác định kích cỡ màn hình và nhiều thông tin khác liên quan đến thiết bị, từ đó dùng mã tinh chỉnh lại bố cục web ngay khi người dùng mới truy cập vào. Khi bạn truy cập vào một số trang web nhất định, nó cũng dùng UserAgent để biết bạn đang dùng máy nào và đưa ra đề xuất tương ứng (ví dụ, vào https://www.google.com/intl/en/chrome/browser/ bằng máy Mac thì nút download là dành cho Mac, vào bằng máy Windows thì nút dowload lại cho phép tải file exe của Windows).

Ngoài ra, việc nhận biết thiết bị để RWD còn có thể được tích hợp vào ngay trong file CSS và đây là cách mà người ta thường dùng. Nhà thiết kế web có thể đặt ra các "quy định", ví dụ như nếu thiết bị truy cập vào web có độ phân giải chiều ngang thấp hơn 700px thì không tải thành phần A, sắp xếp lại thành phần B và C. Còn nếu thiết bị có màn hình từ 700px trở lên, thành phần A sẽ xuất hiện, B và C giữ nguyên vị trí ban đầu. Ngoài ra lập trình viên còn có kết hợp thêm một số yếu tố khác như hướng xoay của màn hình, tỉ lệ dài:ngang nữa.

Bạn hãy thử lấy điện thoại của mình truy cập vào Panpic.vn xem, phần bài viết nổi bật, logo ở trên đầu và các menu bên tay phải sẽ biến mất, nội dung vừa khít với màn hình của bạn. Còn khi chuyển qua dùng PC hay máy tính bảng, tự nhiên những thành phần đó lại xuất hiện ra. Một trong những "quy định" mà Web Developer của Panpic.vn đặt ra đó là nếu chiều dài màn hình nhỏ hơn 700 pixel thì hiển thị thao giao diện mobile, còn trên 700 pixel thì hiển thị kiểu đầy đủ. Ngoài ra Panpic.vn còn kết hợp thêm một số yếu tố khác để bố cục nên khi bạn dùng một chiếc smartphone Full-HD (1080 x 1920) duyệt thì vẫn thấy giao diện mobile của Panpic.vn

Thiết kế web Panpic màn hình điệnt hoại
Responsive web design màn hình website Panpic trên các thiết bị Máy tính, iPad, Smartphone

Panpic.vn sẽ phản hồi lại với các kích thước màn hình/trình duyệt khác nhau bằng những bố cục khác nhau. Như hình ảnh bên trên: Bên trái là giao diện điện thoại mobile, ở giữa là giao diện máy tính, bên phải là giao diện table chuẩn​ (iPad, máy tính bảng...vv).

Một số giải pháp khác cũng được sử dụng cho mục đích RWD bao gồm bố cục dạng "lỏng" (các thành phần sẽ tự "chảy" tùy theo kích thước màn hình), hình ảnh linh hoạt (flexible image, một phần hoặc toàn bộ hình ảnh sẽ hiển thị), Javascript hoặc xác định kích thước các đối tượng đồ họa bằng phần trăm. Twitter cũng có cung cấp một bộ khung để phát triển giao diện website với tên gọi Bootstrap (https://twitter.github.io/bootstrap/) và nó cũng hỗ trợ thao đổi giao diện web tùy vào kích thước màn hình.

Lợi ích của Responsive Web Design

Như đã nói ở trên, RWD dùng để bố cục lại giao diện trang web cho tương thích với nhiều loại kích cỡ màn hình khác nhau. Hãy thử tưởng tượng xem, nếu màn hình trên điện thoại của bạn đã hẹp, diện tích rất hạn chế rồi mà bạn còn phải thấy đầy một nội dung của Panpic.vn thì sẽ thế nào? Sẽ rất là khó nhìn.

Hoặc bạn cũng có thể nghĩ đến tình huống như thế này: giờ đây các trình duyệt web di động đều đã hỗ trợ HTML và CSS để web hiển thị mượn mà, do đó toàn bộ trang web có thể hiển thị một cách đầy đủ trên màn hình di động. Tuy nhiên, nếu không áp dụng RWD, trang web khi xem trên thiết bị di động sẽ trở nên nhỏ xíu, bạn bắt buộc phải dùng kính lúp, còn không thì phải zoom vào và kéo qua lại, lên xuống liên tục để đọc nội dung. Đây là trải nghiệm tiêu cực và nó khiến bạn nghĩ xấu về website, và điều tất nhiên là bạn sẽ không quay lại trang web đó nữa.

RWD là một xu hướng thiết kế hoàn toàn có lợi bởi nó đảm bảo bạn sẽ luôn luôn có những trải nghiệm tốt nhất, đẹp nhất khi xem trang web dù bạn có đang dùng thiết bị nào đi nữa. Nó giúp nhà lập trình web tận dụng tối đa không gian để trình diễn những nội dung cho chúng ta xem theo cách thoải mái và thích thú nhất có thể.

Hiệu năng web của RWD

Năm ngoái, Guy Podjarny, trưởng nhóm kiến trúc sản phẩm của công ty Akamai (một đơn vị nghiên cứu và tối ưu hóa tốc độ cho các giải pháp điện toán) đã thử nghiệm 347 trang web RWD được trình diễn trên mediaqueri.es bằng cách dùng Chrome trên nhiều thiết bị khác nhau, cộng với công cụ WebPageTest. Podjarny nhận thấy rằng kích thước tải về cũng như tốc độ load của các trang web này không khác mấy khi sử dụng trên nhiều thiết bị khác nhau và màn hình với độ phân giải khác nhau. Sau đó Podjarny đã trình bày phát hiện của mình tại một hội nghị chuyên về thiết kế.

Vậy thử nghiệm trên có ý nghĩa gì? Nó cho thấy rằng mặc dù trang web đã phản hồi lại với kích thước màn hình bằng cách thu gọn nội dung, ẩn bớt những thành phần không cần thiết, thu nhỏ cỡ ảnh... nhưng điều đó không đồng nghĩa với chuyện web sẽ tải nhanh hơn. Nó cũng không đảm bảo rằng dung lượng tải về sẽ nhỏ hơn, ít chiếm băng thông hơn. Việc tối ưu hóa này đã được Panpic khắc phục để cài thiện tốc độ với các thiết bị khác nhau.

request-from-smartphone
Responsive web design là như thế nào?

Ghi chú: HTTP Request là những yêu cầu mà trình duyệt gửi đến máy chủ để tải hoặc làm một thứ gì đó. Máy chủ sẽ trả lời (response) lại tương ứng với request. Ví dụ: máy tính của bạn request để tải một trang web, server sẽ trả lời lại: "Đây, đây là file mà anh cần". Ngoài ra còn có request để tải ảnh, tải file XML,... Có thể thấy ở kết quả trên, số HTTP khác nhau giữa hai loại giao diện chỉ là 1 request, không đáng kể.

Còn bên dưới là biểu đồ so sánh về kích thước trang của các web RWD trên hai loại độ phân giải do Akamai thực hiện. Đến 86% trang web khi tải giữa hai loại màn hình không cho thấy sự khác biệt rõ rệt về dung lượng trang, tức là chúng ta chỉ tiết kiệm được một khoảng dung lượng không đáng kể khi duyệt web bằng mobile.

Có thể bạn sẽ nói rằng các mạng kết nối 3G, 4G ngày càng nhanh hơn, nhưng nó vẫn còn ở khoảng cách rất xa so với mạng Internet băng thông rộng. Hiện tại, việc tải một trang web ở trên máy tính vẫn nhanh hơn nhiều so với thiết bị di động, nhất là các trang có nhiều hình ảnh. Theo một nghiên cứu của Google, người dùng "mong đợi tốc độ tải web trên di động cũng nhanh như khi tải trên máy tính".

Độ phức tạp responsive web design

Thật ra trước đây các lập trình viên cũng có nghĩ đến một biện pháp khác khi mà RWD chưa phổ biến, đó là xây dựng một phiên bản di động dành cho web (m.tuoitre.vn). Cách này cũng tốt, tác dụng gần như tương đương với RWD. Tuy nhiên, nó là một trang tập tin HTML riêng, một file CSS riêng được viết riêng cho thiết bị di động, hình ảnh cũng được thiết lập với kích thước nhỏ hơn. Và mặc dù tốn công hơn nhưng các trang web m. đơn giản hơn việc tích hợp RWD vào chung với trang web chính, nhưng điểm yếu của các trang dạng này là người dùng không biết tuoitre.vn có phiên bản dành riêng cho mobile tại link m.tuoitre.vn.

Ngoài ra, một số dịch vụ online cũng có hỗ trợ chuyển RSS thành một trang web riêng biệt. Chúng ta có thể tận dụng điều này để thiết kế web cho thiết bị di động mà không phải đầu tư quá nhiều công sức. Họ chỉ cần làm cho RSS của mình đầy đủ nhất có thể là xong. Người dùng truy cập từ các smartphone, tablet sẽ không thấy giao diện chính mà chỉ thấy các dòng cập nhật mới nhất, tin tức mới nhất.

Một số frameworks hỗ trợ giao diện responsive tốt hiện nay

  • Bootstrap (năm 2021 đã phát triển tới version 5)
  • Skeleton
  • Foundation
  • HTML KickStart
  • Montage
responsive design web
Responsive web design: Desktop, notebook, table, smartphone

Xem thêm: » Các bước thiết kế website tại Panpic

Tin liên quan

Tin liên quan