Ngày 30 / Tiết 3 / Thời lượng không giới hạn. Mục lục khóa 100 ngày làm web [tháng thứ 2].
Chúng ta đã đi vào ngày cuối trong tuần tập trung điều chỉnh giao diện cho website. Với thiết lập cho đến lúc này là bạn cơ bản đã có giao diện ổn, phù hợp với website dạng tin tức, blog, thậm chí là bán hàng đơn giản (trang bán hàng chuyên nghiệp cần bổ sung thêm giỏ hàng và bạn sẽ được học trong tuần khác).
Đây là lúc bạn cần rà soát lại các thiết kế, vì trong quá trình học chúng ta đã tiến hành thử nghiệm tương đối nhiều màu sắc, font chữ, lề,… khác nhau. Hệ quả là website có thể đang dùng rất nhiều font (trang tiêu chuẩn thì không nên dùng quá 3 font chữ), kích cỡ chữ to hoặc nhỏ quá ở một số khu vực, lề có thể không cân đối, vân vân.
Bạn cần quan sát website trên tổng thể, đừng nhìn vào chỉ một khu vực cụ thể, vì thiết kế có thể ổn trong khu vực đó (ví dụ cỡ chữ trong sidebar) nhưng nếu nhìn trong tổng thể khi kết hợp với các phần khác (ví dụ với cỡ chữ của nội dung chính) lại không hợp.
Màu sắc cũng tương tự, website có khả năng đang dùng đủ thứ màu sắc lộn xộn, từ màu tên website, tagline, màu link, màu hover, màu button, màu đường viền, màu tiêu đề chính, tiêu đề phụ, màu favicon… Lời khuyên chung là bạn không nên dùng quá nhiều màu, và nên sử dụng màu đồng bộ (ví dụ màu cho favicon nên ăn nhập với màu tên website, vân vân).
Bạn cũng cần kiểm tra giao diện trên các màn hình khác nhau, chủ yếu là máy bàn và di động. Một điểm cần lưu ý ở đây là, các thiết kế nhiều cột trên máy bàn thì luôn vẫn chỉ một cột trên di động mà thôi (vì chiều rộng của di động quá nhỏ để chia cột). Do vậy khi nói về thiết kế, các giao diện có được sự thể hiện về mặt hình thức trên màn hình lớn nhiều hơn đáng kể màn hình nhỏ.
Điều đó có ý nghĩa gì?
Nó dẫn tới 2 vấn đề bạn cần quan tâm:
- Những gì bạn thiết kế trên máy bàn sẽ xuất hiện rất khác trên di động. Trong giao diện chỉnh sửa của theme, ở phần đáy thường có lựa chọn để bạn xem trước thiết kế trên các màn hình nhỏ hơn (máy tính bảng & di động).
- Ngày nay hầu hết các website đều được truy cập qua di động nhiều hơn máy bàn (không ít website có trên 70% lưu lượng truy cập là từ di động), do vậy bạn cần đặc biệt chú ý đến thiết kế trên di động trông thế nào.
—
Phần rà soát này có thể tốn thời gian, vì bạn sẽ phải làm lại tương đối nhiều, nhưng dù sao chúng ta đã có hướng dẫn đầy đủ rồi nên hãy cố gắng nhé!
Riêng giao diện chúng ta đã bỏ ra gần 10 buổi để chỉnh sửa, khá mất công, nhưng cái hay của giao diện là bạn thường ổn định với nó. Dù giao diện bạn đang dùng có thể vẫn cần chỉnh sửa thêm, nhưng rồi bạn sẽ thấy khi đã ưng ý, việc trung thành với nó nhiều năm không phải là chuyện hiếm.
Phía dưới là link giao diện demo website sau khi tôi thực hiện chỉnh sửa thêm.
Kết quả sau 30 ngày: website-demo.b-cdn.net/30ngay/
Tôi nói vậy để bạn có động lực chỉnh sửa ổn thỏa giao diện website, nó ổn thì chúng ta mới an tâm tập trung vào các vấn đề quan trọng khác được. Cụ thể tuần tới bạn sẽ được học về làm nội dung và SEO, những bài quan trọng nhất khi nói về khía cạnh phát triển, ‘nuôi lớn’ website…
—
Hãy cùng nhau chúc mừng, vì bạn vừa vượt qua được ‘cửa ải’ mới.