Responsive Web Design là gì và nó giúp ích như thế nào cho việc duyệt web trên thiết bị di động
Duy Luân
7 năm trướcBình luận: 154Lượt xem: 98.953
Responsive_Web_Tinhte_500px.jpg

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" (tạm dịch: "thiết kế web có độ phản hồi cao"). Bài viết này nói về 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 như người ta vẫn thường làm trước đó. 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 HTML5CSS3, 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ế? Trong bài viết này mình xin chia sẻ một ít thông tin với các bạn.

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 vào nó biết phải làm gì với 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 <p> để 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 </p>.

Trong số những tag của HTML có một cặp tag đặc biệt là <div></div> (div là division, tức là "chia cắt"). 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. Lấy ví dụ ở Tinh tế, chúng ta có một div để hiển thị phần đầu trang (chỗ có logo tinhte), một div nữa nằm bên dưới để hiển thị menu, một div khác để hiển thị nội dung và div cuối cùng dành cho việc hiển thị sơ đồ trang. Các div còn có thể lồng vào nhau nữa.

div_tinhte.png
Các div mà Tinh tế dùng, nhiều ha mấy bạn

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, nói chung là để 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), 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 sát vào cạnh phải của trình duyệt, 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 gì để vào web. Ví dụ, UserAgent của IE 10.0
còn của Safari trên iPad
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).

Google Chrome - Download the Fast, Secure Browser from Google

Get more done with the new Google Chrome. A more simple, secure, and faster web browser than ever, with Google’s smarts built-in. Download now.
google.com


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 "luật", 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 vào Tinh tế xem, phần bài viết nổi bật, banner quảng cáo ở trên đầu và loạt quảng cáo ở 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 "luật" mà các anh kĩ thuật của Tinh tế đặ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 Tinh tế 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 Tinh tế.

Responsive_Web_Tinhte.jpg
Tinh tế 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. Hai cái bên trái là giao diện mobile, cái bên phải là giao diện chuẩn

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 (http://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 một đống quảng cáo trên Tinh tế thì sẽ thế nào? Nếu là mình, mình sẽ phát điên lên. May mắn là mấy anh kĩ thuật đã làm RWD nên chúng ta không cảm thấy phiền phức.

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 đầy đủ chứ không còn cùi bắp như xưa, 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 chẳng thèm quay lại web đó nữa.

Nói tóm lại, 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ị chuyên 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 http://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ế.
Media Queries
mediaqueri.es


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 hoàn toàn nằm trong tay lập trình viên và nhà thiết kế web.

So_sanh.jpg
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.

bieudo.png

Có thể bạn sẽ nói rằng "Trời ơi lo gì, bây giờ kết nối Internet trên di động đã nhanh lắm rồi!". Đúng là 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", và đó là điều mà lập trình viên phải nghĩ đến khi làm RWD.

Độ phức tạp

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 (ví dụ: m.tinhte.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. Một số cuộc thảo luận trên mạng cũng có nói rằng ngay cả một website tối ưu hóa cực kì tốt với RWD cũng tải chưa nhanh bằng trang web mobile riêng.

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. Lập trình viên 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. Như vậy cũng đã đủ đối với một số trang web rồi.

Responsive web design thì ngược lại, nó vốn dĩ là phức tạp hơn bởi nhà thiết kế web đang cố gắng nhiều trải nghiệm xem khác nhau chứ không nhắm đến một loại thiết bị cụ thể nào cả. Điều đó có nghĩa là trình duyệt trên máy mobile phải đảm đương một file HTML lớn, một tập tin CSS cũng lớn không kém. Nếu không được tích hợp tốt, RWD có thể làm cho việc duyệt web di động trở nên chậm chạp hơn mặc dù bố cục rất tốt.

Tham khảo: Sixrevision
Chỉ có dân IT mới hiểu, và web của mình cũng dạng này http://gobmt.vn/v1
@accnet Đâu có phức tập thế đâu anh, cái này rất đơn giản và cơ bản ;)

Vấn đề là khi dùng điện thoại duyệt web mà nằm trên giường đều tắt xoay màn hình cả, ko nó cứ xoay ngược mắt tức lắm 😆
@accnet Giờ cái này nó là xu hướng rồi
Tai thỏ là gì?

Vâng, Nokia Vietnam vừa release phiên bản Responsive Design 2 ngày trước 😁
phức tạp phết chỉ biết là xoay ngang tinhte trên android sẽ đc duyệt web theo giao diện máy tính
Liệu đây có thực sự là xu hướng tương lai?
bây giờ kết nối Internet trên di động đã nhanh lắm rồi
Giao diện mobile người ta thường gọi là WAP demo http://wapsv.mobi 😁
@H.Thuong WAP lỗi thời rồi bạn ơi, giờ smartphone có thể nạp được HTML tốt.

Sent from my GT-N7100 using Tinhte.vn
@lechien.us
WAP là 1 giao thức chứ ko phải là 1 trang web.

Người ta dùng lẫn lộn đấy, như kiểu ta vẫn hay gọi "cái USB" nhưng thực chất phải là "cái Flash Memory" mới đúng. USB chỉ là cổng giao tiếp thôi.
@CrystalShield Mình thấy nói chuyện sao cũng được miễn hiểu nhau là được rồi ^^
@H.Thuong Thì đâu ai bắt lỗi bạn.
Responsive Web tốt, có đều nó phải load hết css,div ... nên cũng bất lợi. Ở VN Responsive Web chưa phát triển rộng rãi lắm.
Trnag của mình có vẻ không ổn. Chắc phải làm lại.
www.xegiadinh.vn
css cũng được gọi là ngôn ngữ à

Sent from my Nexus 4 using Tinhte.vn
@gaucon3503 Tử hình luôn ấy chứ 😃)
@taigamechode.com bạn thật là nguy hiểm 😁
@smallgent CSS là ngôn ngữ, nhưng không phải là ngôn ngữ lập trình
@taigamechode.com ở đâu ra cái ngôn ngữ CSS ?
Người ta nói còn cãi. 😕

Đính chính: bài này nói CSS là ngôn ngữ lập trình là sai hoàn toàn. Còn chi tiết thế nào thì tóm gọn như sau:

CSS:
- quy định cách mà các thành phần HTML hiển thị như thế nào.
- cách định dạng HTML có thể được lưu thành file riêng biệt để tiện trong quá trình thiết kế, file đó được gọi là CSS
- ở HTML 4.0 , CSS được dùng để giải quyết một số vấn đề bất cập của HTML.

Đây là nguyên văn, thật khó để dịch hoàn hảo qua tiếng việt, ai hiểu thì hiểu.
Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.
All browsers support CSS today.
Suy nghĩ logic cũng thấy rằng hiện tại Reponsive không thể giúp giảm băng thông cũng như thời gian tải trang. Browser chỉ có thể dàn trang dựa vào các file HTML, CSS, JS khi chúng đã được tải về đầy đủ ở máy không thiếu 1 file nào, như vậy mobile hay không cũng đều phải tải hết như nhau. Chỉ có thể cải thiện cái này bằng mã Server, giúp Server nhận ra thiết bị mà cho hay không cho phép tải 1 file nào đó nhưng cách tiếp cận này lại giống khi xây dựng trang mobile riêng.
Chắc sẽ sớm có phương án hybrid để kết hợp ưu điểm của cả hai. Cá nhân mình thích trang mobile cũ của tinhte hơn hiện tại, nhìn giao diện hiện tại trên mobile thấy gượng ép.
Không hiểu thuật ngữ lắm. Cơ bản là nhận diện thiết bị và chọn template phù hợp cho thiết bị?
dùng thuật ngữ cho có vẻ chuyên nghiệp chứ thực chất nó giống như "tuỳ cơ ứng biến", thay vì gán vị trí và sizing cố định thì cho nó biến động tuỳ vào kích thước màn hình, đơn giản vậy thôi.
Đây nên là cách lập trình chung của tất cả các phần mềm chứ không riêng gì web, các app trên Android nên dùng cách này để thiết kế giao diện để có thể tương thích trên tất cả các kích thước màn hình.
Yêu cầu là truy cập nhanh không bị lag là OK .


Còn thiết kế rồng bay phượng múa ra sao cũng được.
bootstrap của twitter khá nặng (css) nhiều elements load hơi thừa.
Website mới của công ty mình đang theo thiết kế này Aquarius Vietnam, có sử dụng flex image nữa. Mới chỉ là nghiên cứu bước đầu nên còn nhiều lỗi.
@supzzo Mình thấy cái này có vẻ phản hồi hơn bên bạn nè:
vietbuildcenter.com
Test xem trang Mạng Thủy sản Việt Nam như vậy ổn chưa nhé các bạn, nhớ cho mình vài nhận xét về thiết kế cũng như nội dung trang web với nhé http://aquanetviet.org/. Xin cảm ơn rất nhiều 😃
SHOP HÀNG ĐẸP mình cũng xin giới thiệu 1 site bán quần áo thời trang ứng dụng công nghệ RWD.
http://shophangdep.com
Mọi người cho ý kiến nhé.
Trang này chuyên thiết kế web tại bình dương đã xử dụng responsive từ lâu lắm rồi
@boy_aptech2 Trang này bị lỗi sử dụng Font không có đủ từ tiếng Việt nên bị lỗi rồi bạn.
ErrorFont_ thietkewebbd.png
  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2020 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: 209 Đường Nam Kỳ Khởi Nghĩa, Phường 7, Quận 3, TP.HCM
  • Số điện thoại: 02862713156
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019