Không phải ngẫu nhiên hay vô cớ mà khi thiết kế web, các design lại chú ý, cân nhắc đến kích thước website trong suốt quá trình xây dựng trang web của mình đến thế!Vậy rốt cuộc kích thước của trang web ảnh hưởng như thế nào đến sự phát triển, việc lên top tìm kiếm của google và trải nghiệm của người dùng của trang web ? Làm thế nào để tạo ra kích thước website tốt nhất cho SEO và UX- UI ? Đây chắc hẳn là những câu hỏi mà nhiều bạn quan tâm muốn được hiểu rõ. Vậy bạn hãy cùng chúng tôi đi tìm hiểu và giải đáp các thắc mắc trên qua bài viết dưới đây nhé!
Kiến thức cần thiết về kích thước website
Trang web là cửa hàng thu nhỏ của công ty, doanh nghiệp, vậy lên để thu hút khách hàng vào xem hay tìm hiểu thì nó cần thiết kế bài trí đẹp mắt, hấp dẫn, đầy đủ nội dung, chất lượng hình ảnh và sản phẩm. Tất cả đều hướng tới mục tiêu chính là tạo ấn tượng, ‘thu hút khách hàng’ và’ tăng khả năng mua hàng’.
Và muốn làm được điều đó thì cần phải sự hỗ trợ kích thước trang sao cho hợp lý mà vẫn đảm bảo yếu tố chuẩn SEO lại vừa lòng được ông lớn khó tính như google. Vậy thì khi thiết kế website bạn cần tuân thủ theo tiêu chí của google trước sau đó đến các yếu tố khác sau. Cũng vì thế mà trong hơn 200 tiêu chí làm trang web của bạn lọt top tìm kiếm của google thì yếu tố kích thước website được quan tâm hơn cả.
Đối với google thì điều quan tâm của nó chưa phải là hình ảnh của website có sắc nét hay không. Mà cái nó ưu tiên đầu tiên là kích thước của website ( vì bot của google chỉ đọc được kích thước, thẻ alt). Tiếp theo là chất lượng vì đây chính là yếu tố quyết định tối ưu hóa trải nghiệm, níu kéo, giữ chân người dùng với trang web.
Kích thước website responsive có nhiều kích thước khác nhau lên từ đó cũng có thể tạo thành xu hướng thiết kế website
Dưới đây là một số kích thước website phổ biến mà bạn cần lưu ý khi thiết kế web cho công ty, doanh nghiệp đạt hiệu quả hơn:
- Fixed layout (Kích thước chuẩn) là kích thước mà chiều rộng được thiết lập cố định theo thông số chuẩn, không thể co giãn, hay thay đổi theo trình duyệt web.
- Fluid layout (Kích thước lưu động) là kích thước chỉ tính theo tỷ lệ %, do đó chiều rộng của web hoàn toàn có thể thay đổi co giãn theo kích thước của trình duyệt web. Kích thước này mang lại sự linh hoạt cho trang web của bạn hơn.
- Elastic layout (Kích thước co giãn) là sự kết hợp giữa kích thước chuẩn và kích thước lưu động
Ngoài chú ý đến kích thước tổng thể ra thì kích thước của thước banner, kích thước hình ảnh Slider ở trang chủ, kích thước hình ảnh trong bài viết, kích thước hình ảnh bên trong sản phẩm,… cũng cần được chú ý để sắp xếp trình bày hợp lý, bắt mắt, mang hiệu quả hơn.
Đơn vị được sử dụng trong kích thước của website
Pt, pc, cm mm, in
Trên đây là các kích thước chuẩn và tuyệt đối mà người thế trang web cần chú ý. Bởi kích thước này cho phép trang web của bạn dù có sử dụng trên thiết bị (máy tính, điện thoại,…) cũng không hề bị thay đổi. Tức là ví dụ như bạn sử dụng font chữ time new roman 12pt hay bất kỳ font chữ nào thì khi hiển trên các thiết bị đều hiển thị giống nhau toàn bộ.
Px (pixel)
Pixel là đơn vị tính cho một điểm trên màn hình và một màn hình thường được tạo lên bởi rất nhiều điểm nhỏ. Đây cũng được coi là thông số đơn vị cơ bản nhỏ nhất.Ví dụ như một màn hình có độ phân giải Full HD với 1920 × 1080 pixel. Ở đây bạn sẽ có 2.073.600 pixel chia đều cho 1920 cột và 1080 hàng. Tương tự như vậy bạn hoàn toàn tính được các màn hình khác với độ phân giải khác nhau.
Đơn vị %, em, rem
Như các bạn đã biết thì % là đơn vị cho kích thước lưu động. Nhờ vào đơn vị này bạn có thể dễ dàng thiết kế theo kích thước lưu động. Hiểu đơn giản như một hình ảnh được gán cho Width là 50% thì sẽ có độ rộng đúng bằng 50% màn hình điện thoại hoặc máy tính.
“Em” cũng là đơn vị giống với % nhưng nó được sử dụng cho kích thước font chữ. Còn “rem” thì được sử dụng với font-size của html. Hai kích thước này đảm bảo kích thước của font chữ và font size hợp lý, bố trí hài hòa trong trang web.
Tìm hiểu thế nào là kích thước website chuẩn (fixed layout)
Kích thước trang web chuẩn là gì?
Kích thước cố định của website được hiểu đơn giản là kích thước được thiết kế cố định về chiều rộng và nó sẽ không thay đổi cho dù được hiển thị trên thiết bị có độ phân giải màn hình khác nhau. Thông số thường dùng cho kích thước chuẩn này là 800px, 1000px, 960px hoặc 1260px.
Do kích thước này là cố định lên nhà thiết kế cần lựa chọn thiết kế phù hợp các thiết bị máy tính hiện nay, để không bị lỗi thời.
Kích thước cố định của web thường được các nhà thiết kế chọn là 960px. Kích thước này được chọn bởi sự hoàn hảo khi xuất hiện trên màn hình độ phân giải 1024 hoặc lớn hơn. Hơn thế nữa độ phân giải này cũng là tiêu chuẩn của các máy tính hiện nay giúp cho trang web thiết kế ra phù hợp và hoạt động hiệu quả nhất. ( bởi hầu hết các nhà sản xuất cũng như nhà thiết kế đều thiết kế như vậy )
Fixed Layout được các nhà thiết kế thích sử dụng hơn so với fluid layout( chiếm 80% hiện nay) cho các trang web. Bởi vì với Fixed Layout thì các đồ họa viên thao hồ thực hiện ý tưởng của mình mà không sợ ảnh hưởng đến lập trình hay bộ khác, tạo ra điểm độc đáo riêng cho website của mình. Hơn thế nữa, fixed layout cho phép đảm bảo kết quả cho ra thống nhất với mọi độ phân giải và mọi thiết bị, tính ổn định cao. Vậy lên các nhà thiết kế có thể kiểm soát dễ dàng kết quả hiển thị với user.
Ưu điểm
- Fixed layout dễ thiết kế và triển khai web hơn.
- Được hỗ trợ nhiều trên các thiết bị khác nhau mà không hề bị ảnh hưởng đến kích thước.
- Dù được thiết kế ở mức cố định 800px nhưng 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.
- Các yếu tố của HTML được triển khai đơn giản hơn và nhanh hơn nhờ vào việc chiều rộng thiết kế cố định.
Nhược điểm
- Do chiều rộng được thiết kế cố định lên dễ tạo ra khoảng trống lớn ở hai bên màn hình, nhất là các màn hình có độ phân giải lớn, gây mất thẩm mỹ, mất cân đối khá nhiều.
- Nếu thiết kế với fixed width cao hơn độ phân giải của màn hình thì có thể làm xuất hiện thanh cuộn ngang điều này gây khó khăn cho việc lướt web, gây khó chịu cho người dùng.
Kích thước website lưu động (Fluid layout) là gì?
Kích thước website động là gì?
Với kích thước website lưu động thì kích thước sẽ được tính theo %, mà không phải cố định. Vì vậy chiều rộng của website hoàn toàn có thể co giãn phù hợp với kích thước, độ phân giải của các thiết bị dễ dàng. Điều này giúp website hiển thị hài hoà, hợp lý, đẹp mắt trên tất cả các thiết bị khác nhau.
Do kích thước lưu động sử dụng % cho các thành phần HTML nên ít phải sử dụng pixel. Chính vì vậy mà layout có thể thay đổi theo từng độ phân giải khác nhau của các loại màn hình.
Và việc sử dụng kích thước lưu động cho website WIO SEO của tôi. Bạn có thể thấy ngay sự tiện lợi và khác biệt so với kích thước lưu động như dưới đây
Kích thước website chuẩn WIO SEO hiển thị trên máy tính
Kích thước website chuẩn WIO SEO hiển thị trên điện thoại
Ưu điểm
- Fluid layout thân thiện với người dùng hơn, có thể tự điều chỉnh độ phân giải, tăng khả năng giao diện và tương tác của website.
- Thanh cuộn ngang và khoảng trống hai bên màn hình do hiển thị trên thiết bị có độ phân giải cao không còn như trường hợp của fixed layout nữa.
Nhược điểm
- Làm cho việc sử dụng việc sử dụng các graphic trên website bị hạn chế hơn.
- Việc tính toán kích thước hình ảnh và video phải kỹ càng hơn. Nếu không thì bước căn chỉnh cũng như sắp xếp gặp nhiều khó khăn, dễ bị lệch bố cục khi hiển thị trên thiết bị khác nhau.
- Fluid layout chỉ phù hợp với Photoshop, nhưng lên máy khác thì dễ bị sai lệch.
- Nội dung bên trong website nếu thiết kế không đủ để lấp đầy bố cục thì sẽ có rất nhiều khoảng trắng, chưa kể máy nào có độ phân giải lớn còn bị khoảng trắng giữa các chữ, làm giảm đi sự thân thiện với người dùng.
Giới thiệu một số kích thước khác trong website
1. Hình ảnh Slider ở trang chủ có kích thước như thế nào?
Kích thước ảnh của slider có nhiều kích thước và tỷ lệ khác nhau, nhưng tỷ lệ chuẩn hay được các design lựa chọn khi thiết kế website là 1360 x 540 pixel.
Tỷ lệ này phù hợp với các loại máy tính, thiết bị hiện nay lên không hề bị lỗi thời.
2. Kích thước hình ảnh trong bài viết là bao nhiêu
Đây cũng là kích thước mà người thiết kế phải chú ý lựa chọn, sắp xếp cho hợp lý vì nếu lựa chọn kích thước không phù hợp dẫn đến khi hiển thị trên thiết bị có độ phân giải cao dễ bị lệch bố cục nhìn mất thẩm mỹ, hoặc nhiều khoảng trống, gây mất đi sự thân thiện với người dùng.
Kích thước ảnh minh họa hiển thị bên ngoài chuẩn tỷ lệ là 300 x 188 pixel.
Với kích thước hình ảnh trong bài viết thường chọn tỷ lệ là 600 x 375 pixel.
3. Kích thước tối ưu cho hình ảnh trong sản phẩm
Kích thước này thường được lựa chọn là 300 x 400 pixel. Với tỷ lệ này thì ảnh minh họa sản phẩm hài hòa cân đối và đẹp nhất.
Còn kích thước ảnh chi tiết sản phẩm chuẩn tỷ lệ là 600×800 pixel.
4. Kích thước chia sẻ website lên facebook sao cho hợp lý nhất
Facebook đang trở thành một trang tương tác với website khá tốt, lượng khách hàng ở đây cũng rất tiềm năng và đông đảo. Chính vì vậy việc chia sẻ trang web lên facebook là việc cần thiết và được nhiều công ty, doanh nghiệp lựa chọn.
Biết kích thước cover website upload lên Facebook là điều quan trọng
Khi chia sẻ lên Facebook thì bạn nên để ảnh Cover Website ở 1200 x 630 pixel. Hoặc ít nhất cũng phải đạt mức 600 x 315 pixel và dung lượng ảnh chỉ nên để nhỏ hơn 8MB để đảm bảo tốc độ load và tải trang nhanh chóng, không để khách hàng phải chờ đợi, đây cũng là cách tăng ưu thế cạnh tranh.
Bên cạnh đó bạn cũng có thể tải các ảnh khác lên từ máy tính hoặc điện thoại. Với mức tỷ lệ tối thiểu chỉ là 600 x 315 pixel.
Công cụ giúp bạn thay đổi kích thước website dễ dàng
Để có thể thay đổi kích thước của website dễ dàng hơn, chắc chắn cần sự trợ giúp của công cụ hỗ trợ. Sau đây chúng tôi gửi đến bạn một số công cụ thay đổi kích thước hay được sử dụng nhất:
- Adobe Photoshop: Không hề nói quá khi nó được đánh giá là phần mềm “quốc dân” dành cho các designer đồ họa cũng như chỉnh sửa ảnh, bởi mức độ sử dụng phổ biến của nó. Để có thể thực hiện tốt công việc, cũng như chỉnh sửa hình ảnh đẹp mắt thì bạn cần phải biết một chút kiến thức về sử dụng Photoshop.
- Paint: là một trong những công cụ chỉnh sửa kích thước ảnh được cài đặt sẵn trên windows hiện nay lên rất thuận tiện khi sử dụng nó, không cần phải tải về. Công cụ này không chỉ cho phép bạn điều chỉnh kích thước ảnh đơn giản, dễ dàng mà còn giúp việc tăng, giảm hay chèn text, thêm các ký tự, chú thích trong hình ảnh nữa.
- Chỉnh sửa trực tiếp trên WordPress: Việc chỉnh sửa này cho phép bạn thay đổi kích thước từng ảnh mà mình muốn khi đăng bài, hoặc trong thư viện ảnh. Cách chỉnh sửa này giúp trang web hoạt động một cách nhanh nhất, tối ưu hóa, load tải trang nhanh hơn.
- Cách thực hiện chỉnh kích thước ảnh như sau:
- Bước đầu tiên là dùng nút “Thêm Media” để tải ảnh lên website
- Là chọn ảnh mà bạn muốn tải.
- Sau khi tải ảnh lên để chèn vào bài hãy chọn “Kích cỡ”
- Lựa chọn kích thước phù hợp trong phần “Kích cỡ”, sẽ có ba lựa chọn là Ảnh thu nhỏ” “Trung Bình” và “Kích thước đầy đủ”. Tùy vào trang web mà mình lựa chọn cho phù hợp, thường chọn là kích thước “Trung Bình”
- Cuối cùng là bấm “Chèn vào bài viết” là xong rồi.
Bên cạnh đó bạn có thể tham khảo thêm các công cụ chỉnh sửa khác trên nền tảng online để có nhiều sự lựa chọn sử dụng sao cho phù hợp và thuận tiện nhất với mình nhé.
Pixlr: là phần mềm chỉnh sửa ảnh online miễn phí mà không hề thua kém các công cụ chỉnh sửa ảnh chuyên nghiệp khác. Pixlr hỗ trợ trên hầu hết các định dạng ảnh hiện có như PSD (Photoshop), PXD, Jpeg,.. Công cụ chỉnh sửa này gồm nhiều hiệu ứng, bộ lọc… khá tiện lợi khi sử dụng nhé.
Fotor: là một phần mềm chỉnh sửa ảnh mạnh mẽ, miễn phí được trang bị nhiều công cụ hỗ trợ giúp chỉnh sửa ảnh chuyên nghiệp vô cùng. Nó giúp thay đổi độ tương phản, độ sáng giúp bức ảnh trở lên đẹp, sắc nét hơn. Cùng với sự hỗ trợ của các công cụ chỉnh sửa ảnh trực tuyến, như bộ lọc, khung, văn bản, nhãn dán, các module để tạo ảnh ghép, thiệp chúc mừng và hình ảnh HDR tùy theo mục đích sử dụng của bạn. Bức ảnh được tạo ra sự độc đáo cả về màu sắc và khung hình, chữ viết đẹp, nổi bật.
- Canva: là một công cụ cho phép chỉnh sửa hình ảnh dựa vào sử dụng giao diện kéo và thả đơn giản, người dùng có thể hoạt động tốt ngay cả với người không rành về công nghệ. Nó có thể dễ dàng tạo tài khoản và hoạt động thông qua trình duyệt web hoặc trên ứng dụng iOS hoặc Android thuận tiện hơn cho người dùng. Canva giúp bạn giải quyết công việc thiết kế từ hình ảnh, banner, logo,… bạn chỉ việc thao tác kéo thả các đồ họa, font chữ… được cung cấp sẵn rất dễ dàng sử dụng.
Tổng kết bài viết
Chúng tôi vừa tổng hợp những kiến thức và giải đáp các thắc mắc của bạn về kích thước website tốt nhất cho SEO và UX- UI. Với các thông tin trên hi vọng mang lại cho bạn những hiểu biết cần thiết về kích thước website, rất mong có thể giúp ích cho bạn. Nếu bạn vẫn còn thắc mắc nào khác thì hãy đặt câu hỏi hoặc để lại thông trên website để WIO chúng tôi liên hệ lại tư vấn, giải đáp cho bạn nhé!
