Tìm hiểu về Responsive trong thiết kế web

Responsive là phong cách thiết kế website phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình.

Responsive là gì?

Hiểu một cách đơn giản Web Responsive là phong cách thiết kế website làm sao cho phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình. Một website đẹp trên máy tính nhưng khi xem trên điện thoại bố cục lộn xộn, hình ảnh, bài viết không cân đối thì không thể gọi là Web Responsive.

Ứng dụng đơn giản Responsive Web Design

Để thực hiện được những gì mà ta mong muốn bên trên thì chúng ta cần phân ra các cỡ màn hình chuẩn cơ bản và set theo các kích thước đó.
Độ phân giải màn hình thường gặp: 320px, 480px, 600px, 768px, 900px, 1200px, 1680px, 1050px …. có thể xếp thành các cặp như: 320 x 480, 1024 x 768, 1680 1050 …

Một số độ phân giản màn hình phổ biến được sử dụng 

Tham khảo một số độ phân giản màn hình phổ biến được sử dụng trên thế giới để làm kim chỉ nam cho kích thước responsive của bạn

Kích thước độ phân giải máy tính bàn phổ biến

  • 1366 × 768
  • 1920 × 1080
  • 1440 × 900
  • 1600 × 900
  • 1280 × 800
  • 1280 × 1024

Kích thước độ phân giải di động phổ biến

  • 360 × 640
  • 375 × 667
  • 720 × 1280
  • 320 × 568
  • 414 × 736
  • 320 × 534

Kích thước độ phân giải máy tính bảng phổ biến

  • 768 × 1024
  • 1280 × 800
  • 600 × 1024
  • 601 × 962
  • 800 × 1280
  • 1024 × 600

Kích thước tham khảo

Một số yếu tố quan trọng cần lưu ý khi thiết kế website responsive

Sự khác biệt Responsive và Adaptive

Responsive và Adaptive là 2 khái niệm hoàn toàn khác nhau.

Nếu chỉ xét trên phương diện chức năng thì Responsive và Adaptive đều nhằm đến việc giúp website có thể hiển thị đầy đủ nội dung và chức năng trên các thiết bị có kích thước màn hình khác nhau.

Tuy nhiên, Responsive và Adaptive thực chất là hai phương pháp cực kỳ khác biệt. Bạn cần dựa trên các định hướng nội dung để lựa chọn phương pháp phù hợp.

Dòng chảy hiển thị

Ở các thiết bị di động, bề ngang của giao diện hiển thị được thu hẹp lại khá nhiều so với màn hình máy tính. Cùng với đó, người dùng lại có thói quen lướt từ trên xuống dưới để đọc các nội dung trên website. Vì vậy, khi thiết kế responsive cho thiết bị di động, các trang web thường sẽ có xu hướng đẩy các nội dung xuống phía dưới tạo thành một dòng chảy hiển thị.

Khi đó, người thiết kế phải đảm bảo rằng dòng chảy hiển thị của trang web sẽ hiển thị được đầy đủ nội dung nhưng vẫn đảm bảo tính thẩm mỹ, giúp đem đến trải nghiệm tốt nhất cho người sử dụng. Đặc biệt là thao tác vuốt trên mobile, không nên để hiển thị quá nhiều liên kết, nút bấm trên giao diện khiến người dùng dễ dàng click nhầm.

Breakpoint 

Breakpoint trong thiết kế responsive giúp cho thiết bị tự xác định được các điểm giới hạn khi hiển thị nội dung. Ví dụ như, khi nhìn trên giao diện máy tính, nội dung được chia thành ba cột khác nhau, nhưng trên điện thoại, vì có breakpoint ở cột nội dung đầu tiên nên bạn sẽ chỉ nhìn thấy phần nội dung của cột đó, hai cột còn lại sẽ được tách xuống hiển thị bên dưới. Nghĩa là nếu ở desktop sẽ hiển thị 3 cột nhưng trên mobile thì sẽ được cắt thành 3 dòng.

Việc xếp các điểm breakpoint cần được cân nhắc cẩn thận vì chúng có thể khiến trang web của bạn trở nên lộn xộn khi hiển thị trên các thiết bị khác nhau. Tương tự như việc bạn ngắt dòng một cách lung tung có thể khiến nội dung  bị xáo trộn, ngữ nghĩa của câu không liền mạch.

Các giá trị Max và Min

Phần nội dung – bao gồm cả chữ viết, hình ảnh hay bất kỳ định dạng lưu trữ thông tin khác – thường sở hữu kích thước không đồng nhất. Điều này khiến cho một số phần nội dung hiển thị vừa đủ trên giao diện, một số khác lại bị tràn qua, vượt quá bề ngang của thiết bị, hay còn gọi là tràn nội dung.

Khi đó, các giá trị Max/Min sẽ giúp cho designer giới hạn được vị trí, không gian hiển thị các nội dung này trên website theo từng thiết bị (cụ thể theo kích thước màn hình) giúp việc hiển thị nội dung được tối ưu hơn.

Thiết kế Mobile-first hay Desktop-first

Mobile First vẫn là xu hướng hiện nay bởi sự phổ biến của smartphone.

  • Desktop-first: Thiết kế giao diện trang web tương thích với tỉ lệ giao diện máy tính, sau đó sẽ điều chỉnh, thu nhỏ các nội dung sao cho phù hợp với giao diện máy tính bảng, cuối cùng là điện thoại.
  • Mobile-first: Thiết kế giao diện trang web theo tỉ lệ màn hình điện thoại sau đó tiến hành bố trí, sắp xếp và điều chỉnh kích thước các nội dung cho phù hợp với máy tính bảng, cuối cùng là máy tính và các thiết bị có kích thước màn hình lớn.

Mobile-first thường sẽ là phương thức thuận tiện, hiệu quả và phù hợp với sự phổ biến của smartphone. Hầu hết các website hiện nay đều được thiết kế theo xu hướng mobile-first bởi số lượng thiết bị di động hiện nay là quá lớn, bao gồm nhiều kích thước màn hình khác nhau cũng như sự phổ biến của smartphone khiến cho các developer phải ưu tiên cho giao diện này hơn, sau đó mới đến giao diện desktop.

Nói như vậy không có nghĩa là bạn bỏ qua phiên bản máy tính, bởi giao diện desktop cũng rất quan trọng và cần phải được tối ưu, tùy vào đặc thù của website và ý định của người làm web mà có thể thay đổi và nên ưu tiên giao diện nào trước.

English

Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size.

Leave a Reply

Your email address will not be published. Required fields are marked *