(Tiếp theo) Để tháo gỡ những bất cập về việc hiển thị thông tin trên các loại màn hình có kích thước và độ phân giải khác nhau thì thiết kế website responsive hiện là phương pháp mang lại hiệu quả tối ưu nhất.

5. Giá trị Max hoặc Min

Việc hiển thị nội dung full màn hình là ưu điểm trên desktop nhưng đôi khi lại là hạn chế đối với màn hình điện thoại, thậm chí là ngay cả với tivi thông minh thế hệ mới. C đặt giá tỷ lệ Max hoặc Min sẽ là phương pháp để khắc phục những hạn chế về việc thể hiện nội dung trên tất cả các loại màn hình.

Ví dụ: với màn hình lớn, rộng, thì chúng ta có thể để giá trị full màn hình 100% và giá trị Max-width là 1000px. Tức là với lựa chọn này thì nội dung sẽ tràn đầy màn hình nhưng không hiển thị tràn màn hình quá 1000px.


6. Lồng ghép thành phần

Các thành phần, yếu tố trên cùng một giao diện website cần phải có sự tương thích, phù hợp với nhau. Trong cùng một bố cục, có thể có nhiều yếu tố hoàn toàn phụ thuộc vào các thành phần khác, do đó việc kiểm soát sẽ không đơn giản chỉ là kiểm soát một thành phần đơn lẻ mà liên quan đến cả một hệ thống các yếu tố khác. Muốn hạn chế sự phụ thuộc giữa các yếu tố với nhau thì khi thiết kế website responsive, chúng ta nên gói gọn các thành phần vào một khối thống nhất và áp dụng nguyên tắc thiết kế clean, rõ ràng, đơn giản. Đối với những yếu tố có kích thước lớn hơn thì có thể sử dụng để chứa các thành phần nhỏ hơn (quan hệ lồng ghép), thực hiện rất đơn giản nếu được kết hợp với sự hỗ trợ của điểm ảnh như hình.

7. Thiết kế cho màn hình máy tính và thiết bị di động

Về phương diện kỹ thuật thì hoàn toàn không có sự khác biệt giữa việc thiết kế cho di động và màn hình máy tính. Nhưng việc thiết kế sẽ trở nên khó khăn hơn nếu bạn chọn điểm bắt đầu với điện thoại di động, thay vì vậy, hãy bắt đầu với desktop và sau đó tùy chỉnh trên di động.


8. Webfont và hệ thống phông chữ

Nếu sử dụng hệ thống font chữ có sẵn thì chúng ta sẽ tiết kiệm được thời gian hơn do không phải tìm kiếm. Ngược lại, nếu chọn webfont cho website thì đòi hỏi phải có thời gian tìm kiếm.

9.  Ảnh bitmap và ảnh vector

Về vấn đề này thì tùy vào mục đích sử dụng hình ảnh mà chúng ta sẽ có được sự lựa chọn phù hợp. Tuy nhiên điều mà bạn cần lưu ý chính là nếu chọn hình ảnh bitmap thì thường sẽ có các định dạng jpg, png, gif, còn đối với hình ảnh vecto thì đây là sự lựa chọn tốt nhất cho SVG. Mỗi loại hình ảnh sẽ có những ưu nhược điểm khác nhau nhưng dù sử dụng loại nào thì cũng cần phải tối ưu hóa về kích thước, dung lượng ảnh. Ảnh có chất lượng càng cao nhưng dung lượng càng nhỏ thì sẽ càng tốt cho tốc độ tải và khả năng hiển thị của website.