Thiết kế các mục tiêu nhấn có kích thước và khoảng cách đáp ứng

Mục tiêu nhấn là các khu vực của trang web mà người dùng trên thiết bị di động có thể tương tác. Các button, liên kết và các yếu tố hình thức đều có mục tiêu nhấn. Nhiều công cụ tìm kiếm xếp hạng các trang dựa trên mức độ thân thiện với thiết bị di động. Đảm bảo các mục tiêu nhấn đủ lớn và đủ xa nhau giúp trang của bạn thân thiện hơn với thiết bị di động và có thể truy cập được.

Để giải thích rõ hơn cho khái niệm mục tiêu nhấn là khi các bạn sử dụng một chiếc smartphone, ipad truy cập một trang web tại đây có 2 yếu tố mà các bạn hay nhấn vào nhiều nhất đó là văn bản liên kết (thẻ tag a) và các nút (button). Căn cứ vào kích thước của đầu ngón tay khi nhấn vào mục tiêu có kích thước rộng nhân cao khoảng 48px (ngón trỏ vẫn được sử dụng nhiều), do đó các văn bản liên kết hay nút phải có kích thước tối thiểu rộng 48px và cao 48px.

Trên lý thuyết là vậy, tuy nhiên các mục tiêu nhấn kích thước tối thiểu để không bị các công cụ ví dụ như Lighthouse cảnh báo có kích thước phải từ 32px trở lên. Áp dụng trong blogspot chỉ cần thiết kế lại các mục tiêu trên các thiết bị màn hình kích thước tối đa 800px trở xuống cho hấu hết các thiết bị cảm ứng. @media(max-width:860px){}

Một điều cần lưu ý nếu tại một vị trí chỉ có duy nhất một mục tiêu thì chỉ cần thiết kế kích thước cho mục tiêu nhưng nếu tại vị trí có từ hai mục tiêu trở lên cần tăng khoảng cách giữa các mục tiêu với nhau. Do đó cần phân biệt giữa kích thước của mục tiêu và khoảng cách giữa các mục tiêu.

Lưu ý nữa cần phân biệt văn bản và biểu tượng chứa trong element a hay button vì nếu là văn bản chỉ cần thiết kết cho chiều cao vì chiều rộng của văn bản vẫn thường lớn hơn 48px còn nếu là biểu tượng thay thế phải thiết kế cả chiều rộng lẫn chiều cao.

Các thuộc tính css làm tăng kích thước cho mục tiêu: height, min-height, width, min-width, line-height, letter-spacing. Thuộc tính tạo khoảng cách giữa các mục tiêu: padding, margin. Một ví dụ mà chúng ta nên học tập từ cách thiết kế kích thước và khoảng cách giữa các button của Google như sau:

Bình thường chúng ta hay đặt 2 button cạnh nhau như thế này

<button>biểu tượng</button>

<button>biểu tượng</button>

Nhưng hầu hết các trang web hiện nay họ đều đặt button trong ít nhất một thẻ div nữa thành thế này

<div><button>biểu tượng</button></div>

<div><button>biểu tượng</button></div>

Khi viết css họ tạo padding cho thẻ div à kích thước width, height 40px cho button

div{display:inline-block;padding:8px;}

button{display:inline-block;width:40px;height:40px}

Đảm bảo kích thước vừa đáp ứng 48px cho mỗi mục tiêu. Trường hợp nếu không sử dụng thẻ div mà chỉ có các button cạnh nhau cần thêm thuộc tính margin tạo khoảng cách cho mỗi mục tiêu

button{display:inline-block;width:40px;height:40px;margin:8px}

Trường hợp nếu là văn bản mà văn bản đó chỉ có một line không bị xuống dòng thì đặt thuộc tính line-height để tăng kích thước chiều cao nhưng nếu là văn bản nhiều dòng thì sử dụng thuộc tính min-height và một điều luôn nhớ khoảng cách giữa các văn bản liên kết gần nhau phải cách nhau ít nhất 8px.