Xác định kích thước responsive tốt nhất trong thiết kế website (cập nhật 2024)

• Thiết kế web chuẩn responsive

• Giá thiết kế website responsive

Breakpoint

Để xác định kích thước responsive, cần phải làm quen với thuật ngữ breakpoint (Tạm dịch là điểm dừng). Điểm dừng là điểm mà website sẽ định dạng lại để cung cấp cho người dùng bố cục tốt nhất, mang đến những trải nghiệm tốt hơn trong quá trình duyệt web.
 

Nếu bạn nghĩ rằng, những breakpoint này xác định độ rộng chính xác của thiết bị được nhắm mục tiêu (như Samsung Galaxy hay IphoneX) thì bạn đang tiếp cận sai cách! Bất cứ điểm nào mà tại đó, website của bạn hiển thị thật tệ thì đó là nơi bạn nên thêm 1 điểm dừng. Những điểm dừng này nhắm vào độ phân giải của màn hình và cụ thể hơn là chiều rộng.
 

Tại sao không nhắm mục tiêu thiết bị?

 

Bạn thắc mắc rằng, tại sao lại không nhắm vào những thiết bị cụ thể. Có thể trong 1 số trường hợp, bạn muốn nhắm đến một thiết bị cụ thể. Nhưng, web responsive là website hiển thị hoàn hảo trên MỌI THIẾT BỊ chứ không phải chỉ 1 hay 2 thiết bị cụ thể. Có cả ngàn thiết bị với kích thước khác nhau được sử dụng và nếu bạn thực hiện nhắm mục tiêu cho thiết bị cụ thể, có 2 điều xảy ra:

 

• 1 là website của bạn trông tệ ở một kích thước nào đó.
• 2 là bạn đang tự làm khó mình với một công việc phức tạp và luôn phải cập nhật mọi thứ!

Ví dụ như:

• Nếu màn hình thiết bị nhỏ hơn 480px, website sẽ hiển thị bố cục dành cho điện thoại thông minh

• Nếu chiều rộng màn hình trong khoảng 480px đến nhỏ hơn 1024px, bố cục máy tính bảng sẽ được hiển thị

• Nếu chiều rộng màn hình bằng hoặc lớn hơn 1024px, website sẽ hiển thị bố cục thông thường (dàng cho máy tính để bàn).

Tại sao mục tiêu lại là chiều rộng mà không phải chiều cao?

• Người dùng mong muốn một website có nội dung vừa với cửa sổ trình duyệt mà không có thanh cuộn ngang. 

• Chiều cao là tương đối và rất khó để có thể xác định cũng như tạo bố cục phù hợp với chiều cao.

• Cuộn dọc tạo cảm giác tự nhiên hơn (chúng ta vẫn thường cuộn chuột hoặc lướt ngón tay theo chiều dọc một cách tự nhiên), còn cuộn ngang thì không!

Bỏ qua chiều cao trong kích thước responsive?

Điều này phụ thuộc vào nội dung website của bạn. Rất khó để đảm bảo một người sẽ kéo xuống tận cuối trang web của bạn và đọc tất cả nội dung có trong đó. Vì vậy, hãy sắp xếp thông tin theo mức độ quan trọng giảm dần. Những thông tin quan trọng nhất cần phải hiển thị ở trước lần cuộn trang đầu tiên (Có thể nhìn thấy ngay khi truy cập mà không cần cuộn trang), bởi đây là vị trí mà người dùng đọc nhiều nhất.
 

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

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 responsive bao nhiêu là hợp lý?

• Nhỏ hơn hoặc bằng 768px (Điện thoại thông minh)

• Lớn hơn 768px (Các thiết bị nhỏ, máy tính bảng)

• Lớn hơn 992px (Các thiết bị trung bình)

• Lớn hơn 1200px (Các thiết bị lớn)

Kích thước website responsive thường được sử dụng?

• Khả năng hiển thị ban đầu: Tất cả thông tin quan trọng được hiển thị trên màn hình đầu tiên mà không cần cuộn trang

• Khả năng đọc website: Việc đọc văn bản trong các cột khác nhau có dễ dàng không, với cách phân bổ chiều rộng của cột?

• Thẩm mỹ website: Các yếu tố có kích thước và vị trí phù hợp cho độ phân giản này không? Website của bạn có hiện thị tốt ở độ phân giải đó không?

Sự thay đổi ở mỗi kích thước responsive?

• Thay đổi phông chữ, màu sắc, khoảng cách

• Thay đổi hình ảnh

• Hiển thị/ẩn các yếu tốt

• Thay đổi độ rộng, bộ cục website

• Các yếu tố giao diện như nút bấm cũng cần được thay đổi để phù hợp.