Với sự phát triển mạnh mẽ của công nghệ 4.0 thì việc phát triển kinh doanh trên mạng internet không còn xa lạ. Tất cả các doanh nghiệp muốn kinh doanh đều phải có website bán hàng cho riêng mình. Tuy nhiên, vấn đề thiết kế website không chuẩn kích thước và các tiêu chí của Google còn rất phổ biến. Bài viết này, dựa vào kinh nghiệm lâu năm trong ngành, Ngọc Thắng sẽ chia sẻ với bạn đọc về kích thước website chuẩn tối ưu SEO, UX. Xem ngay nhé!

Những kích thước website cần biết

Thật sự thì một trang web chuẩn SEO được thiết kế cuốn hút cũng như một cửa hàng bày trí đẹp mắt vậy. Tại sao tôi ví dụ như vậy? Đơn giản cả 2 đều làm bạn ấn tượng và gia tăng khả năng “mua hàng” (đọc blog, mua hàng, sử dụng sản phẩm/dịch vụ,..). Nhưng trước hết phải làm hài lòng “chủ đất” Google của chúng ta đã nhé.

Chưa nói đến hình ảnh của bạn có đẹp hay sắc nét không. Google sẽ ưu tiên kích thước website trước tiên vì bot Google chỉ đọc kích thước, thẻ alt). Còn chất lượng chắc chắn phải cần rồi vì để tối ưu trải nghiệm người dùng.

Sau đây là một số kích thước của Website mà bạn cần lưu ý:

• Fixed layout (Kích thước chuẩn): là kích thước cố định mà chiều rộng được thiết lập theo thông số nhất định.
• Fluid layout (Kích thước lưu động): là kích thước tính theo tỷ lệ %, do vậy chiều rộng của web có thể co giãn theo kích thước của trình duyệt web.
• Elastic layout (Kích thước co giãn): là sự kết hợp giữa 2 dạng trên

Ngoài ra cũng cần chú ý kích thước banner website, 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ác đơn vị trong kích thước website

Pt, pc, cm mm, in

Đây là các kích thước chuẩn và tuyệt đối. Nghĩa là chúng không thay đổi khi bạn thay đổi thiết bị hiển thị (máy tính, điện thoại,…). Ví dụ bạn sử dụng font chữ time new roman 12pt thì 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, một màn hình thường có rất nhiều điểm nhỏ. Ví dụ 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.

Đơn vị %, em, rem

Như tôi đề cập ở trên, % là đơn vị cho kích thước lưu động. Ví dụ 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 được sử dụng cho font chữ. Còn “rem” thì được sử dụng với font-size của html.

Tìm hiểu về kích thước website chuẩn (fixed layout)

Với kích thước website chuẩn (fixed layout), kích thước được thiết kế cố định và chiều rộng của website có các thông số nhất định. Thông số phổ biến sử dụng cho kích thước chuẩn thông thường là 800px, 1000px, 960px và 1260px. 960px được sử dụng nhiều nhất vì kích thước này hiển thị trên màn hình phân giải cao sẽ hoàn hảo nhất.

Trang web sử dụng kích thước này đảm bảo tính nhất quán của website cao và độ phân giải chất lượng. Vì thế mà có khoảng 80% website hiện nay thực hiện theo kích thước này.

Ưu điểm

• Dễ dàng trong thiết kế và triển khai web
• Hỗ trợ nhiều trên các thiết bị khác nhau
• Dù được thiết kế ở mức 800px nhưng web vẫn cho khả năng đọc tốt với các thiết bị có độ phân giải cao
• Các yếu tố của HTML có chiều rộng cố định được triển khai đơn giản hơn và nhanh hơn.

Nhược điểm

• Tạo khoảng trống lớn 2 bên ở các màn hình có độ phân giải lớn. Điều này gây mất thẩm mỹ khá nhiều
• Nếu kích thước của Width cao hơn so với độ phân giải sẽ tạo ra thanh cuộn ngang.

Tìm hiểu về kích thước website lưu động (Fluid layout)

Với kích thước web lưu động, các thông số được thiết kế theo tỷ lệ phần trăm. Vì thế mà kích thước của website không cố định, có thể thay đổi co giãn tuỳ vào trình duyệt. Điểm UX/UI của website cũng vì thế mà được tăng cao hơn.

Tuy nhiên, nhược điểm của việc sử dụng kích thước này chính là các hình ảnh graphic hay video sẽ phải được tính toán kỹ lưỡng. Bởi có thể khi file thiết kế ổn định nhưng khi hiển thị trên trang web sẽ bị sai lệch.

Ưu điểm

• Thân thiện đối với người dùng, tăng điểm UX UI của website
• Không có thanh cuộn ngang cũng như khoảng trắng như trường hợp của fixed layout.

Nhược điểm

• Hạn chế hơn trong việc sử dụng các graphic trên website
• Kích thước ảnh đăng website và video phải được tính toán kỹ. Nếu không việc căn chỉnh cũng như sắp xếp gặp khá nhiều khó khăn.
• Nếu thiết kế trên Photoshop thì giao diện rất tốt, nhưng lên máy khác thì dễ bị sai lệch.
• Máy nào có độ phân giải lớn cũng sẽ gặp khoảng trắng giữa các chữ. Mất đi sự thân thiện cho người dùng.

Công cụ thay đổi kích thước trang web

Phần lớn khi phải thay đổi kích thước một yếu tố website, người ta thường thay đổi hình ảnh. Các tệp đồ hoạ chiếm một dung lượng và vị trí khá lớn nên việc thay đổi các tệp này sẽ tối ưu hơn là thay đổi cả bố cục website. Các công cụ sau sẽ hỗ trợ bạn xử lý các tệp này.

Các công cụ ngoại tuyến quen thuộc bạn có thể sử dụng như Adobe Photoshop hay Paint. Với Adobe Photoshop, bạn sẽ cần một ít kiến thức về photoshop cũng như thiết kế. Đối với Paint sẽ dễ cho các thao tác đơn giản hơn nhiều. Sử dụng những công cụ này để giảm thiểu dung lượng đồ hoạ hay kích thước hình ảnh.

Ngoài ra hiện nay một số công cụ trực tuyến với đầy đủ tính năng được sinh ra. Những công cụ trực tuyến này hỗ trợ mọi nhu cầu của người dùng. Một số công cụ phổ biến mà bạn có thể tham khảo như: Canva, Pixlr, Photo Grid. Những công cụ này không đòi hỏi bạn phải có kiến thức chuyên sâu để sử dụng. Chỉ cần có đủ tư duy về hình ảnh thì việc sử dụng các công cụ này sẽ trở nên thuận lợi.

4 tiêu chính tối ưu hóa layout website

• Khả năng hiển thị ban đầu của trang web. Một website được tối ưu về bố cục layout nghĩa là nó phải bao gồm các thông tin quan trọng ngay khi vừa được hiển thị trên thiết bị của người dùng mà không cần phải cuộn trang xuống.
• Tính dễ đọc của trang web. Bạn không thể kéo giãn màn hình của mình, do đó, website phải tự động thay đổi sao cho phù hợp với kích thước các cột trong giới hạn màn hình của bạn.
• Tính thẩm mỹ của trang web. Các yếu tố gây ấn tượng với người xem cần được đảm bảo, chẳng hạn như hình ảnh có chú thích, các phần tử (element) của website được đặt ở vị trí phù hợp, các thông tin được sắp xếp một cách thẳng hàng và chính xác…
• Khả năng dễ sử dụng và thao tác. Bạn cần đảm bảo mọi chức năng được cho phép hiển thị trên màn hình cũng phải được truy cập một cách dễ dàng.

Kinh nghiệm thiết kế website chuẩn UX/UI

Một số kinh nghiệm giúp bạn tối ưu được trang web chuẩn UX/UI như sau. Đầu tiên là giao diện đẹp mắt, gọn gàng và đúng chủ đề. Một số doanh nghiệp khi thiết kế website quên mất yếu tố đúng chủ đề. Chủ đề của website buộc phải gắn liền với thương hiệu mới tạo hiệu quả cho hoạt động doanh nghiệp.

• Bố cục của trang web hợp lý và rõ ràng.
• Website hiển thị mượt mà trên mọi thiết bị và trình duyệt, nền tảng. Để hiểu rõ thêm điều này, bạn nên tham khảo thêm bài viết về thiết kế website responsive.
• Cấu trúc, nội dung website đáp ứng tiêu chuẩn SEO. Mọi hình thức bên cạnh bài viết như thẻ hình ảnh, ATL, cần đáp ứng cả yếu tố SEO.
• Có chế độ tư vấn, chăm sóc khách hàng, khuyến mãi, cập nhật thông tin mới,…

Lời kết

Trên đây là những kiến thức cơ bản về kích thước website mà Ngọc Thắng muốn chia sẻ với bạn đọc. Việc thiết kế website sao cho vừa thân thiện với người dùng vừa đáp ứng được các tiêu chí của Google không phải điều dễ dàng gì. Nếu bạn đang gặp khó khăn trong vấn đề này, hãy liên hệ ngay với chúng tôi nhé!

Hiện nay Ngọc Thắng đang cung cấp dịch vụ Thiết Kế Website trọn gói đã được rất nhiều khách hàng tin tưởng và lựa chọn. Sản phẩm Ngọc Thắng đưa ra mang đậm phong cách mỹ thuật, ý tưởng, hệ thống kĩ thuật riêng theo từng khách hàng. Một website tốt phải là một website đẹp, chuyên nghiệp, đáp ứng tốt nhất nhu cầu cung cấp thông tin, sản phẩm, dịch vụ và tầm nhìn của công ty đến với khách hàng.

Nếu còn bất kỳ thắc mắc gì về các thông tin mà chúng tôi chia sẻ bên trên hay bạn đang tìm kiếm một dịch vụ webiste uy tín thì đừng ngần ngại hãy liên hệ ngay với chúng tôi để được tư vấn thêm nhé!

Với nhiều năm kinh nghiệm cũng như được khách hàng đánh giá cao, Ngọc Thắng tự tin là đơn vị cung cấp các dịch vụ website hàng đầu hiện nay.

Đại chỉ: Số 07 Ngách 2, Ngõ 121 Trần Phú, P. Văn Quán, Hà Đông, Hà Nội, Việt Nam

Tổng đài: 1900 89 21

Hotline: 098 148 1368

MST: 0107994795

Email: lienhe@ngocthang.vn

Website: https://ngocthang.net/

Trần Đức Thắng

Tôi là Trần Đức Thắng, hiện đang là CEO & Co-Founder của Công Ty Ngọc Thắng. Tôi phát triển với nền tảng thiết kế website, SEO và Inbound Marketing. Hiện nay Ngọc Thắng cung cấp dịch vụ thiết kế website, SEO, quảng cáo Google Ads… Với kinh nghiệm triển khai nhiều dự án những năm qua, đội ngũ của Ngọc Thắng không ngừng nỗ lực mang đến những dịch vụ tốt với chi phí thấp nhất cho quý khách hàng.!