Kích thước cover fanpage facebook

Từ 2016 Facebook đã thay đổi cách hiển thị Cover và Avatar của Fanpage, nhờ vậy designer không cần phải khổ sở “tránh” vị trí avatar và thiết kế để avatar trở thành 1 phần của thiết kế tổng thể.

Tuy nhiên mình nhận ra một điều là các cover hiện nay (tháng 3/2017) thiết kế đáp ứng cho desktop nhưng bỏ qua mobile. (Đầu tiên mình cũng như vậy cho đến khi khách hàng feedback – thế nên mình sẽ có một bài khác viết về việc mình học thiết kế từ ai nhiều nhất). Thường thì ở mobile sẽ bị cắt mất một phần nội dung ở hai bên cover.

Vậy mình sẽ làm gì ?

  • Cứ tiếp tục sử dụng cover hiện tại – như vậy mình đang “phớt lờ” 56.5% khách hàng chỉ sử dụng mobile (http://expandedramblings.com/index.php/facebook-mobile-app-statistics/). Là một Designer, mình không cho phép điều này xảy ra cho thiết kế của khách hàng.
  • Thay đổi lại thiết kế để gom tất cả vào giữa cover ? Oh, mình nghĩ rằng chuyện này sẽ khá mất thời gian.

Mình muốn 1 giải pháp rõ ràng để áp dụng cho các thiết kế sau này, và mình đã tìm ra nó tại http://louisem.com/52407/facebook-cover-photo-mobile-template (vô cùng cảm ơn Louise Myers với bài viết của cô). Mình sẽ mô tả lại như sau (tất nhiên là có mở rộng :P):

Đối với một cover facebook, có thể lựa chọn 1 trong 2 cách sắp xếp nội dung:

screen-shot-2017-03-04-at-10-37-01-pm

Cách 1: Mở rộng trên và dưới ở màn hình mobile. Lúc này desktop sẽ chỉ hiển thị cover của bạn ở phần 828 * 315px. Và mobile sẽ là 828 * 465px. Phù hợp cho bố cục hình 1 bên và nội dung 1 bên.

Screen Shot 2017-03-04 at 10.45.19 PM.png Cách 2: Mở rộng 2 bên ở màn hình desktop. Lúc này desktop sẽ hiển thị theo kích thước 1222 * 465px và mobile là 828 * 465px. Phù hợp cho bố cục nội dung ở giữa và hình 2 bên.

Đối với cả 2 cách trên, nội dung cần được đặt trong vùng được giới hạn bởi lưới màu xanh.

Việc chọn mở rộng theo cách 1 hay 2 tùy thuộc vào bố cục thiết kế. Như bạn thấy, với thiết kế của mình ở trên, chắc chắn mình sẽ chọn mở rộng theo cách 1, bởi vì khoảng trống bên trái của bản thứ 2 rất vô duyên.

Và cuối cùng, mình nghĩ là bạn nên save thành file .png để tránh bị facebook nén ảnh lại khiến ảnh bị giảm chất lượng.

Và giờ thì không phải lo khách hàng sẽ lỡ mất thông điệp trên Cover nữa nhé !

From Moonbeamst with love ❤

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s