Responsive dĩ nhiên là việc giúp cho khách ghé thăm có 1 trải nghiệm tốt nhất dựa trên thiết bị của họ. Cho dù họ dùng mobile, máy để bàn – dùng chuột hay cảm ứng thì các chức năng trực quan vẫn thống nhất.
Và cũng không thể bỏ qua khuyến nghị của Google rằng, với việc sử dụng một URL duy nhất sẽ giúp googlebots dễ dàng hơn trong việc tìm kiếm.
Thống nhất là chìa khoá để khiến thiết kế của bạn thành công – chứ không hẳn là thiết kế giống nhau hoàn toàn. Dưới đây là những ví dụ hấp dẫn để chứng minh điều đó.
01. Đừng để vuột mất lợi thế của Khoảng Trắng
Vestre là một trang web có sự thống nhất về bố cục trong mọi thiết bị. Những phần hình ảnh, nơi để chữ vô cùng phù hợp. Chúng luôn được đặt trên một màu trắng hay một không gian âm (negative space) – dù màn hình ở kích thước nào.
02. Giữ vịtrí đặt logo thống nhất
Epicurrence có rất nhiều nhưng yếu tố khác nhau trên đó và chúng thay đổi khi màn hình thay đổi. Nhưng dù thế nào thì logo tròn màu đên luôn luôn nằm cùng vị trí phía tay phải của trang.
03. Cân nhắc giữa bố cục dọc (portrait) hay ngang (Orientation)
Một bố cục ngang luôn tốt nhất với máy tính để bàn, laptop, và những màn hình rộng; trong khi đó thì bố cục dọc hợp với máy tính bảng và điện thoại.
Như cách Kekselias thiết kế, thiết kế với bố cục đứng hay ngang dành cho mỗi thiết bị giúp những thông tin cần thiết được hiển thị trên thiết kế sạch và sáng.
4. Scroll hay không
Ý tưởng của Boone Selections là khuyến khích người dùng lăn chuột để khám phá phần còn lại của trang, cuối cùng mới thấy thông tin họ là nhà nhập khẩu rượu. Kiểu này hiệu quả rất tốt trên desktop, nhưng để giảm thiểu việc scroll trên di động, trang web để hiện luôn một vài từ nói về những gì công ty đang làm.
05. Lưu ý về kích cỡ ngón tay với hình và chữ.
Đối với thiết kế Responsive, nghĩ về người dùng sẽ tương tác với các liên kết trên màn hình – thông qua con chuột máy tính, còn đầu ngón tay đối với điện thoại và máy tính bảng. Cần chắc chắn rằng, các nút và liên kết đủ lớn và dễ bấm với ngón tay như trangRudy’s Paris.
06. Sử dụng những điều chỉnh nho nhỏ với bố cục
Trang web Uve có chút điều chỉnh về bố trí menu giúp việc tuỳ biến của nó trên các thiết bị rất hiệu quả. Menu ban đầu nằm bên trái và sau đó dịch chuyển lên trên khi sử dụng màn hình máy tính bẳng và điện thoại.
07. Lưy ý về số lượng chữ trên mỗi dòng
Điều chỉnh kích thước chữ tiêu đề và nội dung cho mỗi thiết bị nhằm đảm bảo sự dễ đọc cho người dùng. Hãy cố gắng có 60-75 chữ trên một dòng đối với màn hình máy tính và 30-40 chữ cho điện thoại như cách Forecaster.
08. Loại bỏ những yếu tố hình ảnh gây nhiễu cho màn hình nhỏ
Giảm thiểu những đối tượng hình ảnh khiến trang nhẹ hơn. Những chi tiết trên MRAssociates sẽ giảm đi rất nhiều trên màn hình điện thoại – và tăng thêm khi dùng máy tính.
09. Cắt các hình ảnh theo tỉ lệ.
Dans Mon Sac có hình ảnh giống nhau ở phần bên phải màn hình trên mọi thiết bị, tuy vậy chúng được cắt rất cẩn thận để phù hợp tương ứng với màn hình. Điều này nhằm đảm bảo tỉ lệ trực giác cân đối và thống nhất.
10. Tập trung vào phần nội dung quan trọng nhất.
Như trang Stephen Caver, có một chiến lược về việc giữ những gì ở lại và những gì sẽ ẩn đi khi bạn thiết kế trên các màn hình. Tập trung và điều quan trọng nhất và để nó ở phần dễ nhìn.
11. Tăng/giảm số lượng cột
The Design School by Canva tăng kích thước số lượng cột từ 4 với máy tính để bàn, 2 cột với máy tính bẳng và chỉ một cột với thiết bị di động. Bố cục này sáng sủa, chữ dễ đọc, các liên kết dễ nhấn.
12. Giữ nguyên số lượng cột
Trái ngược với yếu tố trên, ETQ-Amsterdam lại giữ nguyên 2 cột trên mọi thiết bị để có sự thống nhất và cái nhìn tối giản cho thương hiệu.
13. Quyết định chỗ nào nên có chuyển động, chỗ nào không
Five Foot Six có một chuyển động trên trang chủ đối với màn hình để bàn, nhưng nó là 1 hình tĩnh đối với máy tính bảng và điện thoại. Các chuyển động cần xảy ra một cách hoàn hảo trên mọi thiết bị, bởi việc thay đổi kích thước, tỉ lệ đứng, ngang, pixel… chuyển động vẫn là một thách thức với điện thoại.
14. Cân nhắc hình nền
Sử dụng cùng một nền đôi khi không hiệu quả trên mọi thiết bị.Edwin-Europe sử dụng 2 hình ảnh khác nhau – một cái dùng cho Destop và cái còn lại dùng cho điện thoại và máy tính bảng. Cắt một hình ảnh duy nhất từ máy tính để bàn, chuyển qua điện thoại và máy tính bảng đôi khi làm giảm hiệu quả của nó… giải pháp lúc này là chọn hình ảnh khác.
15. Cân nhắc giữa nhìn gần và nhìn xa
Trang 62Models sử dụng hình ảnh được cắt rất gần cho điện thoại và máy tính bẳng, nhưng với desktop thì nó lại dùng toàn bộ hình ảnh (full image) với nhiều khoảng trống xung quanh.
16. Kích thước của phông
Andre do Amaral được thiết kế sạch và nổi bật bằng việc sử dụng chỉ một loại chữ đen trên nền trắng. Vì chữ là nội dung chính nên nó cần tinh chỉnh về kích thước đối với mỗi thiết bị sử dụng.
17. Giảm số chữ
Weblounge tiến hành lược bỏ thông tin khi trang web được xuất hiện trên màn hình nhỏ đi. Nó được chuẩn bị những câu quan trọng nhất phù hợp với màn hình trình duyệt.
18. Đổi loại Menu
Menu của trang Oliver Bonas được hiển thị ngang trên desktop và dọc trên điện thoại và máy tính bảng. Bên cạnh đó menu cũng không liên tục xuất hiện như trên desktop.
19. Giữ thống nhất
Handgraft là một ví dụ tuyệt vời về trang web có sự thống nhất trên mọi thiết bị và tuỳ biến theo màn hình – số lượng cột giảm hoặc tăng; số lượng chữ trên dòng; và menu được co lại trên điện thoại.
20. Làm Heading sáng sủa và dễ đọc
Mọi tiêu đề trang blog đều dễ đọc trên Urban Influences bằng việc tăng/giảm số lượng cột cho mỗi thiết bị và sử dụng một phông không chân.
