Responsive Web Design đang là một xu thế mới cho thiết kế website và seo. Một trang web có thể chạy tốt trên tất cả các nền tảng trình duyệt: Máy tính để bàn (PC), điện thoại (mobile) và máy tính bảng(tablet) vừa tiện lợi cho người dùng, vừa đơn giản hơn cho việc quản trị, phát triển là mơ ước của mọi đối tượng web. Ngoài ra, google còn khuyến khích sử dụng Responsive Web Design cho việc seo trên máy tính và seo trên điện thoại.
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.
Trong lĩnh vực thiết kế và phát triển web, chúng ta nhanh chóng nhận ra rằng không thể theo kịp với sự phát triển của các thiết bị mới với những độ phân giả màn hình khác nhau. Đối với các doanh nghiệp, tạo ra từng phiên bản website phù hợp với mỗi thiết bị có độ phân giải mới là điều không thể, hoặc ít nhất là không thực tế. Nên chúng ta phải lựa chọn là mất một lượng khách hàng truy cập từ các thiết bị di động mới hoặc có giải pháp…
Khái niệm về Responsive Web Design
Responsive Web Design (RWD) là xu hướng mới theo đó quy trình thiết kế và phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị. Để làm được điều đó chúng ta sẽ sử dụng linh hoạt kết hợp các kỹ thuật bao gồm flexible grid, responsive image và CSS media query. Khi người dùng chuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi để phù hợp với kích thước màn hình và kịch bản xử lý. Nói cách khác, các trang web cần phải có công nghệ tự động đáp ứng theo thiết bị của người dùng. Điều này sẽ loại bỏ sự cần thiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web.
Responsive Web Design là gì? Từ khái niệm tới thực tế
Điều chỉnh độ phân giải màn hình
Các thiết bị mới đang được phát triển mỗi ngày và mỗi thiết bị này có thể xử lý các biến kích thước, chức năng và ngay cả màu sắc khác nhau. Một số thích dùng màn hình nhỏ, một số dùng màn hình to, có người thích dùng theo chiều dọc và có người thích dùng chiều ngang. Như chúng ta biết từ sự phổ biến của điện thoại thông minh iPhone, iPad và các dòng điện thoại Android khác có thể chuyển đổi từ dọc sang ngang theo ý thích của người dùng. Vậy người thiết kế xử lý tình huống này như thế nào?
Giải pháp: Linh hoạt tất cả mọi thứ trên web (flexible content)
Một vài năm trước, khi flexible layout gần như là một thứ “xa xỉ” và “cao cấp” cho các trang web, điều duy nhất mà sự linh hoạt được sử dụng trong thiết kế là linh động trong layout dạng cột và nội dung text. Các hình ảnh có thể dễ dàng vỡ layout, và thậm chí các phần tử cấu trúc cũng gây ra việc làm vỡ layout khi chúng bỉ đẩy ra. Thiết kế linh hoạt chưa thực sự linh hoạt – các nhà thiết họ có thể cung cấp giao diện hàng trăm pixel, nhưng họ lại không thể điều chỉnh giao diện từ một màn hình máy tính lớn để phù hợp với một chiếc netbook.
Bây giờ chúng ta có thể làm cho mọi việc linh hoạt hơn. Hình ảnh có thể được tự động điều chỉnh, và chúng ta có cách giải quyết để layout không bao giờ bị phá vỡ . Giải pháp linh hoạt nội dung là hoàn hảo cho các thiết bị chuyển đổi từ cách truy xuất trên màn hình chiều ngang sang màn hình chiều đứng trên các thiết bị mobile như iPad hay iPhone.
Để xây dựng fexible content chúng ta có thể kết hợp các kỹ thuật như sau:
- Sử dụng fluid layout
- Sử dụng flexible image
- Sử dụng responsive navigation
CSS3 media queries
Chúng ta sẽ sử dung một tính năng trong CSS3 đó là media query nhằm tạo nên fluid layout và flexible content. Các thuộc tính min-width and max-width sẽ làm chính xác những gì chúng ta đề nghị để đáp kích thước của màn hình và trình duyệt của thiết bị. Thuộc tính min-width đặt trình duyệt và màn hình với chiều rộng tối thiểu theo một tập hợp của các style nhất định (hoặc phong cách đặc trưng riêng biệt) phù hợp thiệt bị phù hới với độ rộng tối thiểu đó. Nếu bất cứ thiết bị với kích cỡ màn hình dưới mức giới hạn này thì các định dạng stylesheets sẽ bị bỏ qua. Thuộc tính max-width làm điều ngược lại. Bất cứ thiết bị có trình duyệt hoặc chiều rộng tối đa màn hình vượt quá quy định sẽ không áp dụng các định dạng stylesheets tương ứng. Đoạn code dưới đây sẽ tự động thay đổi màu nền trang web theo các kích cỡ khác nhau của thiết bị:
Flexible images
Nếu thay đổi kích thước ảnh quá nhỏ, hình ảnh sẽ xuất hiện với chất lượng thấp, tuy nhiên chúng ta vẫn muốn nó sẽ xuất hiện trên web và không muốn bỏ nó đi vì nó quan trọng. Vì vậy, hình ảnh được chia thành 2 nhóm: một nhóm có thể cắt bỏ đi những phần không quan trọng và nhóm khác sẽ giữ nguyên ảnh nhưng sẽ bị zoom nhỏ hoặc to lên.
Có rất nhiều kỹ thuật dùng để tạo ra flexible image đáp ứng được với mọi kích cỡ màn hình khác nhau. Sau đây chúng tôi xin liệt kê ra 3 khuynh hướng thông dung:
- Sử dụng stylesheet với img{max-width: 100%;}
- Sử dụng phần tử HTML5 <picture> và javascript
- Sử dụng dịch vụ Cloud để đáp ứng hình ảnh phù hợp với từng thiết bị
Responsive navigation
Ở phần trên, chúng tôi đã giới thiệu các kỹ thuật để tạo ra responsive layout và content. Tuy nhiên, một điều rất quan trọng đối với việc sử dụng các chức năng chính của website liên quan mật thiết đến việc bố trí main menu. Làm thế nào để bố trí một menu phù hợp và hiệu qua trên mọi thiết bị với các kích cỡ màn hình khác nhau? Sau đây chúng tôi xin liệt kê một số navigation pattern phổ biến:
- Do nothing – Giữ nguyên định dạng của top main menu
- Tùy biến top main menu thành top flow menu (mỗi menu item sẽ chỉ hiện thị trên một row)
- Tùy biến top main menu thành dropdown list
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.
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 là
còn của Safari trên iPad là
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.
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
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.
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 “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.google.com). 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.
