Kích thước trang web là một yếu tố cực kỳ quan trọng trong việc xác định giao diện web. Một website được thiết kế phù hợp về mặt quy mô sẽ mang lại cho người dùng trải nghiệm tốt và hỗ trợ việc trình bày thông tin website một cách khoa học, rõ ràng. Hãy cùng ACC tìm hiểu vấn đề này trong bài viết sau.
1. Các loại kích thước trang web hiện nay
Trong lập trình web hiện nay, có 2 loại kích thước website: cố định (fixed layout) và thả nổi (fluid layout). Mỗi loại có tiêu chuẩn kích thước khác nhau. Hãy cùng khám phá những ưu nhược điểm của chúng để hiểu rõ hơn trong thông tin dưới đây.
Kích thước trang cố định (bố cục cố định)
Trang web được thiết kế với kích thước cố định được hiểu là trang web mà kích thước và chiều rộng màn hình không thể thay đổi được. Kích thước tiêu chuẩn khi thiết kế các trang web như vậy thường là 960px để phù hợp với hầu hết các màn hình có độ phân giải tiêu chuẩn là 1024px.
Ưu điểm:
- Dễ thiết kế vì các nhà thiết kế có thể kiểm soát kích thước trang web của họ.
- Dễ dàng phối hợp với bộ phận lập trình vì dung lượng site cố định sẽ giúp bạn cắt HTML dễ dàng hơn
- Nội dung hiển thị tốt trên máy tính có độ phân giải cao
Nhược điểm:
- Khi website hiển thị trên màn hình lớn sẽ dễ tạo ra những khoảng trống khiến website mất cân đối, thiếu thẩm mỹ.
- Độ phân giải màn hình nhỏ và kích thước màn hình sẽ không tự động giảm xuống, dẫn đến thanh kéo ngang, không thể hiển thị tất cả nội dung trang web và gây khó khăn cho việc lướt Internet.
Kích thước cho trang web di động (bố cục linh hoạt)
So với kích thước trang cố định, kích thước trang di động có thể thay đổi độ rộng theo kích thước màn hình dựa trên tham số %.
Lợi thế:
- Khắc phục nhược điểm “trống website” và các thanh kéo ngang, giúp giao diện website hiển thị đẹp trên mọi kích thước màn hình.
- Cung cấp trải nghiệm người dùng tuyệt vời cho dù họ đang sử dụng thiết bị nào
Nhược điểm
- Nhà thiết kế khó kiểm soát thiết kế vì bố cục trang web có thể khác với thiết kế khi trình bày cho người dùng.
- Khó kết hợp các yếu tố trên một trang web, chẳng hạn như video, hình ảnh (các phần có kích thước cố định).
- Mỗi kiểu thiết kế đều có ưu và nhược điểm riêng. Để có thể kết hợp chúng và tạo ra sản phẩm thiết kế website hoàn hảo, bạn cần nắm vững một số lý thuyết về thiết kế website, bao gồm các đơn vị trong thiết kế kích thước website chuẩn.
2. Các đơn vị trong thiết kế kích thước website chuẩn
Pt, pc, cm mm, inch
Đây là một bộ đơn vị cố định trên tất cả các màn hình. Chúng độc lập với các đối tượng hiển thị chúng. Ví dụ: một câu văn bản được thiết kế có kích thước 18pt và chúng sẽ hiển thị giống nhau trên điện thoại di động, màn hình máy tính hoặc ipad.
Đây là một bộ đơn vị cố định trên tất cả các màn hình. Chúng độc lập với các đối tượng hiển thị chúng. Ví dụ: một câu văn bản được thiết kế có kích thước 18pt và chúng sẽ hiển thị giống nhau trên điện thoại di động, màn hình máy tính hoặc ipad.
Px
px hay còn gọi là pixel, là kích thước thể hiện độ phân giải của hình ảnh. Ví dụ: màn hình điện thoại di động có kích thước 1920x1080 sẽ chứa 2073600 pixel, 1920 pixel theo chiều dọc và 1080 pixel theo chiều ngang.
%,em,rem.
Các đơn vị này thường được sử dụng để định cỡ trang web dành cho thiết bị di động. Nó cho phép thiết lập các đơn vị đo lường tương đối.
3. Kích thước ảnh chuẩn khi thiết kế web là bao nhiêu?
Mỗi trang web có kích thước hình ảnh tiêu chuẩn khác nhau tùy thuộc vào phong cách thiết kế trang web. Độ phân giải màn hình 1024px phổ biến hiện nay, bạn có thể tham khảo một số kích thước ảnh chuẩn khi thiết kế website:
- Hình ảnh trình chiếu trên trang chủ: 1360x540px
- Hình minh họa trong bài viết: 600x400px
- Hình ảnh sản phẩm: 300x400px (hoặc 600x800px để hiển thị tốt hơn)
4. Kích thước banner website chuẩn là bao nhiêu?
Ngoài kích thước hình ảnh chuẩn, kích thước của banner website cũng cần được chuẩn hóa để thống nhất trong quá trình thiết kế và hiển thị tốt trên trang. Một số kích thước banner website chuẩn bạn có thể tham khảo như:
- Bảng xếp hạng: 728x90
- Hình chữ nhật: 300x100
- Từ thông dụng: 720x300
- Hình chữ nhật trung bình: 300x200
- Quảng cáo nửa trang: 300x600
- Nhà chọc trời rộng: 160x600
- Tòa nhà chọc trời: 120x600
Bài viết trên cung cấp nhiều thông tin về các kích thước chuẩn khi thiết kế website và các loại thành phần có trên website (kích thước ảnh, kích thước banner…). Mong rằng qua những kiến thức trên bạn đã hiểu rõ hơn về lĩnh vực thiết kế website, từ đó đưa ra những yêu cầu thiết kế website đúng với đơn vị thực hiện.
Nội dung bài viết:
Hãy để lại bình luận của bạn tại đây!