Trang chủ » Kiến thức » Kiến thức Responsive Web Design

Lợi ích của Responsive Web Design trên thiết bị di động

Xây dựng website bán hàng tối ưu thiết bị di động là điều rất quan trọng
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 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ế? 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ụ ở vGing, 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.

 Lợi ích của Responsive Web Design trên thiết bị di động
Các div mà vGing 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).

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 vGing 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 vGing đặ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 vGing 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 vGing.

 Lợi ích của Responsive Web Design trên thiết bị di động
vGing 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 vGing 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ế.

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.

 Lợi ích của Responsive Web Design trên thiết bị di động
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.

 Lợi ích của Responsive Web Design trên thiết bị di động

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

Bài viết liên quan

      Xây dựng website bán hàng tối ưu thiết bị di động là điều rất quan trọng
Bạn phải click vào đây
để like, thì comment face của bạn mới được lên đầu
Để comment nhiều người biết đến
Kiến thức tiếp theo
Kiến thức đọc nhiều

Bán hàng trực tuyến hiệu quả với Web Responsive

Tại sao nhất định phải xây dựng một trang web responsive? Xây dựng một trang web hiệu quả chiếm 80% thành công của việc mua bán trực tuyến. Web responsive hay còn gọi là web ứng dụng là dạng web có thể thích ứng được với mọi định dạng màn hình như máy tính, di dộng, tablet…

Web Responsive giải pháp tốt nhất để quảng bá thương hiệu trên Mobile

Để đáp ứng cho đối tượng người dùng di động có nhiều cách. Xây dựng một trang web di động riêng biệt có một vài lợi ích riêng của mình, và trong một số trường hợp tạo ra một phiên bản di động độc lập hoạt động tốt. Nhưng một web responsive chắc chắn sẽ có những ưu thế nổi trội khi tiết kiệm thời gian tiền bạc cũng như chiếm ưu thế lớn trong các chiến dịch Marketing online.

Lợi ích của Responsive Web Design trên thiết bị di động

Để 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.

Bắt đầu thiết website di động với Responsive Web Design và Html 5 Css3

Thiết kế web phải đáp ứng hỗ trợ đa giao diện di động(Responsive Web Design), được xây dựng với các công nghệ HTML5 và CSS3, cho phép một trang web để 'chỉ làm việc "trên nhiều thiết bị và màn hình...

Web 2.0 là gì? Và ý nghĩa của web 2.0

Hiện nay khái niệm web 2.0 đang ngày trở nên phổ biến. Mới nghe thì có vẻ như khái niệm web 2.0 là để chỉ một nền tảng, một công nghệ hoặc một bộ mã nguồn nào đó. Nhưng tất cả đều không phải. Hôm nay, hãy cùng vGing tìm hiểu xem web 2.0 là gì nhé.

Tại sao doanh nghiệp của bạn cần thiết kế web đáp ứng Responsive?

Trong năm qua responsive web đã trở thành chủ đề nóng trong cộng đồng thiết kế web. Responsive web là thiết kế web ứng dụng trong đó website linh hoạt điều chỉnh sao cho phù hợp kích cỡ màn hình cũng như nền tảng mà người truy cập sử dụng...

Xây dựng website bán hàng tối ưu thiết bị di động là điều rất quan trọng

Hiện nay với sự xuất hiện của rất nhiều các điện thoại thông minh được sản xuất và nó có giá phục vụ nhu cầu của rất nhiều tầng lớp khách hàng. Người dùng truy cập điện thoại thông minh để tìm kiếm những gì họ cần là rất nhiều vì vậy có một trang web đáp ứng điện thoại di động có lẽ là quan trọng nhất, và như vậy đòi hỏi các doanh nghiệp bán hàng trực tuyến là tạo ra một trang website tối ưu di động.

Responsive Design ông vua mới của thiết kế web

Mục đích của thiết kế web responsive là giúp hiển thị nội dung tốt nhất trong mọi điều kiện có thể, trong mọi hoàn cảnh có thể. Bạn có thể thống nhất nội dung mình muốn quảng bá, đưa nó tới mọi người bằng mọi thiết bị với Web responsive...

Cuộc đột phá của công nghệ thiết kế Web Responsive

Hiện nay, Responsive website không còn là khái niệm xa lạ trên thế giới. Với tốc độ phát triển đáng ngạc nhiên của các thiết bị di động, chắc chắn rằng chỉ trong thời gian ngắn nữa, bạn sẽ thấy các website Việt Nam cũng dần thay đổi theo xu thế này. Đơn giản bởi vì website của chúng ta phải thay đổi phù hợp với xu hướng của người dùng...

Ứng dụng của Responsive Web Design khi thiết kế website phần 2

CSS3 hỗ trợ tất cả các loại thiết bị truyền thông tương tự như CSS 2.1 , chẳng hạn như màn hình , in ấn và thiết bị cầm tay , nhưng đã có thêm hàng chục tính năng hỗ trợ phương tiện truyền thông mới , bao gồm cả chiều rộng tối đa , thiết bị rộng , định hướng và màu sắc.

Web Responsive giải pháp tối ưu cho nền tảng di động.

Web Responsive nổi lên như một xu hướng mà các nhà kinh doanh đang tìm kiếm, giải quyết các vấn đề không chỉ về "tầm nhìn" mà còn góp phần làm trang web của bạn thân thiện và chuyên nghiệp hơn, thu hút khách hàng và tạo lợi nhuận cho doanh nghiệp.

So Sánh Thiết Kế Responsive Web Design, Web Mobile, Mobile App. Thiết kế nào ưu điểm nhất?

Khuynh hướng thiết kế một website đáp ứng với các thiết bị di động là điều tất yếu đối với nhu cầu sử dụng của người dùng hiện nay. Responsive Web Design , Web Mobile và Ứng dụng Mobile là 3 thiết kế ứng dụng giúp website hiển thị trên các thiết bị di động. Thiết kế nào nào tốt nhât...

Hãy like face để theo dõi bài viết mới
vGing · Giới thiệu · Dịch vụ · Khách hàng · Blog · Kiến thức · Liên hệ