Kích thước thiết kế website bạn cần biết

04/06/2019

 

Hiện nay, sự phát triển mạnh mẽ của Internet kéo theo nhu cầu mua bán, tiêu dùng online ngày càng tăng. Việc thiết kế website  cũng vì thế mà tăng theo để thúc đẩy quá trính mua bán qua mạng và thúc đẩy thương hiệu của doanh nghiệp. 

Khi thiết kế website sẽ có nhiều lưu ý làm sao để hiển thị chuẩn, tốt trên các thiết bị, màn hình khác nhau cần phải biết. Vậy kích thước khi thiết kế web chuẩn là như thế nào? Hãy tham khảo bài viết dưới đây của SOTA nhé!

 

kich-thuoc-thiet-ke-web-site-chuan

Kích thước thiết kế website 

Vì sao hiện nay thiết kế website lại quan trọng trong kinh doanh như vậy 

 Có thể nói, website thực sự là một kênh kinh doanh mới mang lại hiệu quả kinh tế cao cho các doanh nghiệp.

+ Các website không chỉ giúp doanh nghiệp quảng bá về sản phẩm hình ảnh doanh nghiệp với chi phí thấp, tiện lợi nhanh chóng và bền vững.

+ Website chuyên nghiệp còn giúp doanh nghiệp mở rộng cơ hội tìm kiếm khách hàng, khai thác nhóm khách hàng tiềm năng qua internet.

+ Website sẽ giúp bạn cung cấp thông tin nhanh chóng nhất đến với các nhóm đối tượng khách hàng. Chi phí rẻ mà khối lượng cung cấp thông tin không hạn chế như quảng cáo trên báo đài.

+ Bên cạnh đó, thông tin về doanh nghiệp, sản phẩm kinh doanh luôn có sẵn trên website. Chính vì thế bất cứ lúc nào khách hàng cần đều có thể xem và tìm kiếm.

+ Việc sử dụng website sẽ giúp bạn nhận được các phản hồi từ khách hàng, tư vấn trực tiếp cho họ một cách chi tiết và thuận tiện hơn. Thiết kế website sẽ giúp cho việc bán hàng được phục vụ 24/7 và 365 ngày.

Chỉ cần website của bạn luôn tồn tại thì bất cứ lúc nào bạn cũng có thể làm việc, quảng bá hình ảnh và tiếp cận người dùng không giới hạn.

Các kích thước chuẩn khi thiết kế website 

Khi thiết kế, để website đẹp hấp dẫn thì bạn phải chú ý đến kích thước chuẩn để thiết kế website.

Kích thước của website có 2 dạng chínhkích thước cố định (fixed layout)kích thước lưu động (fluid layout).

+ Kích thước cố định là kích thước mà chiều rộng (width) của website được thiết lập theo 1 thông số cố định: Ví dụ 800px, 1000px, 960px, 1260px, v.v.v

+ Kích thước lưu động là kích thước được tính theo thông số tỉ lệ % thay vì thông số cố định px và do đó, chiều rộng của website co giãn theo kích thước của cửa sổ trình duyệt (browser windows)

+ Ngoài ra còn có dạng bổ sung thứ 3 là kích thước co giãndạng kết hợp của 2 dạng trên

 

Kích thước cố định ( Fixed layout)  

kich-thuoc-thiet-ke-web

+ Kích thước cố định của website là kích thước mà chiều rộng được thiết lập theo một thông số cố định. Thường thì kích thước thiết kế website cố định là 800px, 1000px, 960px hay 1260px. Gọi là kích thước cố định vì chiều ngang của nó được thiết lập một con số cố định. Do đó, các website này không thay đổi kích thước theo độ phân giải màn hình mà vẫn giữ nguyên kích thước.

Kích thước chuẩn trong thiết kế web với fixed layout mà các nhà thiết kế website hay sử dụng là 960px. Bởi lẽ kích thước này phù hợp với màn hình có độ phân giải 1024 hoặc cao hơn. Ngoài ra, độ phân giải 1024 được xem là độ phân giải chuẩn của máy tính bởi hầu hết các nhà sản xuất cũng như nhà thiết kế.

Ví dụ: Website có chiều rộng 800px thì máy tính có độ phân giải 800×600 sẽ thấy website hiển thị toàn màn hình, lắp đầy màn hình khi trình duyệt ở chế độ maxium.

Tuy nhiên, khi máy tính có độ phân giải cao hơn như 1024 hoặc 1280 thì website không còn hiển thị toàn màn hình nữa nhưng sẽ dư ra một khoảng trông bên hông của website.

Đối với fixed layout, kích thước chuẩn khi được sử dụng bởi 90% các thiết kế website  mới là 960px vì kích thước này phù hợp với màn hình có độ phân giải 1024 hoặc cao hơn và độ phân giải 1024 được xem là độ phân giải chuẩn của máy tính bởi hầu hết các nhà sản xuất phần cứng cũng như nhà thiết kế.

Hầu hết các nhà thiết kế thích sử dụng fixed layout hơn là fluid layout vì đối với fixed layout,  graphic designers (đồ họa viên) có thể tự do thực hiện ý tưởng của mình mà không sợ làm khó cho bộ phận lập trình. Hơn nữa, fixed layout đảm bảo kết quả cho ra là thống nhất trên mọi độ phân giải, nhà thiết kế có thể kiểm soát kết quả hiển thị với user.

Ưu điểm: 

  • Trên phương diện thiết kế, fixed layout dễ thiết kế và triển khai hơn vì nhà thiết kế web có thể kiểm soát kích thước website của minh
  • Chiều rộng website là cố định và giống nhau trên tất cả trình duyệt bất chấp độ phân giải màn hình. Vì thế, các thành phần HTML có chiều rộng cố định được bố cục dễ dàng hơn, nhanh hơn
  • Được hỗ trợ bởi nhiều trình duyệt hơn (khi không cần sử dụng thuộc tính CSS như min-width, max-width)
  • Ngay cả khi website được thiết kế với độ phân giải 800×600, nội dung website vẫn có thể được đọc dễ dàng ở những máy có độ phân giải cao hơn rất nhiều.

Hạn chế: 

  • Website với kích thước cố định có thể tạo ra nhiều khoảng trắng không cần thiết ở bên hông website khi xem ở độ phân giải lớn, tạo nên cảm giác mất cân đối, thiếu tỉ lệ hài hòa và xung khắc với một số nguyên lý thiết kế website.
  • Nếu thiết kế website với fixed width cao hơn độ phân giải màn hình có thể làm xuất hiện thanh cuộn ngang (horizontal scrollbar) gây khó khăn cho việc lướt web.
  • phần web cần phải có chiều rộng cố định có thể gặp không ít khó khăn, trục trặc khi kết hợp với các thành phần có chiều rộng co giãn

 

Kích thước lưu động  (Fluid Layout)

 

Đối với kích thước lưu động (fluid layout / liquid layout), các thành phần trong website có chiều rộng là tỉ lệ % thay vì đơn vị cố định px . Nhờ đó, website có thể co giãn theo độ phân giải của màn hình.

Kích thước chuẩn trong thiết kế website theo kích thước lưu động là kích thước được tính theo thông số tỉ lệ % thay vì thông số cố định px. Vì vậy, chiều rộng của website co giãn theo kích thước của cửa sổ trình duyệt. Fluid layout hay còn gọi là liquid layout sử dụng tỉ lệ % cho các thành phần HTML của nó và hạn chế tối đa việc sử dụng px. Chính vì thế mà layout có thể thay đổi thao từng độ phân giải nhất định.

Fluid layout hay còn gọi là liquid layout sử dụng tỉ lệ % cho các thành phần HTML của nó và hạn chế tối đa việc sử dụng px. Do đó layout có thể thay đổi theo từng độ phân giải nhất định.

kich-thuoc-luu-dong-thiet-ke-web

Cũng như fixed layout, fluid layout có ưu, khuyết điểm tương đương như:

Ưu điểm: 

  • Thân thiện hơn với người dùng vì có thể tự điều chỉnh tùy từng độ phân giải
  • Khoảng trắng dư thừa không quá khác biệt cho dù trình duyệt và độ phân giải RẤT khác nhau. Điều này giúp tạo nên sự cân bằng tốt hơn fixed layout
  • Nếu được thiết kế tốt, fluid layout có thể chấm dứt tình trạng thanh cuộn ngang (horizontal scrollbar) ở máy có độ phân giải quá thấp

Hạn chế: 

  • Hạn chế hơn và khó khăn hơn trong việc sử dụng graphics để tô điểm cho website của mình
  • Giao diện có thể hiển thị tốt trên máy nhà thiết kế nhưng bị sai khi hiển thị trên máy người dùng vì nhà thiết kế khó kiểm soát bố cục sử dụng fluid layout hơn là fixed layout
  • Hình ảnh, video hoặc các thành
  • phần web cần phải có chiều rộng cố định có thể gặp không ít khó khăn, trục trặc khi kết hợp với các thành phần có chiều rộng co giãn
  • Với những máy có độ phân giải CỰC LỚN, mặc dù website có thể tự co giãn nhưng nếu nội dung bên trong website không đủ để lắp đầy bố cục thì nó có thể tạo ra RẤT NHIỀU những khoảng trắng không cần thiết

 

 

THÔNG TIN LIÊN HỆ

Công ty Cổ phần dịch vụ Công nghệ SOTA Việt Nam

🏢 Địa chỉ: Số 83, Yên Lãng, Đống Đa, Hà Nội

 

0856 766 986