Thiết kế thích ứng (thiết kế đáp ứng)

Người dùng truy cập Internet thông qua máy tính bảng và điện thoại di động ngày càng tăng. Như bạn đã biết, điều này có nghĩa là chỉ thiết kế một trang web tốt trông đẹp mắt trên máy tính của chúng ta là chưa đủ: nó còn phải được nhìn thấy trên từng thiết bị di động. Vấn đề? Kích thước và độ phân giải màn hình khác nhau. Đó là lý do tại sao rất khó để tạo ra một thiết kế thích ứng chính xác với mọi phương tiện truyền thông (nổi tiếng thiết kế đáp ứng, được dịch là thiết kế thích ứng).

Dưới đây là một số mẹo cần ghi nhớ khi thiết kế với những đặc điểm này. Chú ý!

Mẹo cho thiết kế thích ứng

1. Tạo một mẫu đơn giảnBởi đơn giản tôi không có nghĩa là nhạt nhẽo. Tôi đang nói về cấu trúc HTML của trang web của bạn: nó càng rõ ràng càng tốt. Hãy nhớ rằng màn hình máy tính có thể vừa với ba cột dọc; trên màn hình của điện thoại di động, bạn sẽ chỉ vừa một. Hãy suy nghĩ về nó và cách bạn sẽ định vị lại các yếu tố.
2. Loại bỏ mọi thứ không cần thiếtTránh các hiệu ứng jQuery, hoạt ảnh Flash và bất kỳ mã nào khác làm chậm quá trình tải trang của bạn. Bạn càng có ít nội dung loại này, web sẽ tải càng nhanh.
3. Xác định một phong cách css cho mỗi "kích thước"Tạo một tiny.css, small.css và big.css (ví dụ) chạy dựa trên thiết bị mà nó được xem. Ví dụ:
   

   @import url (tiny.css) (min-width: 300px);

   @import url (small.css) (min-width: 600px);

   @import url (big.css) (min-width: 900px);

4. Các độ phân giải được sử dụng nhiều nhất320px/480px/720px/768px/900px/1024px
5. Làm cho mẫu của bạn LINH HOẠTBất cứ khi nào bạn có thể, hãy làm việc với tỷ lệ phần trăm thay vì số tiền cố định. Dưới đây là một số tương đương tham khảo: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Kiểu chữ quan trọng hơn bao giờ hết Đôi khi màn hình thiết bị của bạn có thể nhỏ đến mức tất cả những gì bạn thấy là văn bản. Đó là lý do tại sao chúng tôi phải lựa chọn rất cẩn thận các phông chữ tốt nhất trên trang web của mình, để khi chúng được giảm kích thước, chúng không bị mất tính dễ đọc. Ngoài ra, chúng ta phải biết cách kết hợp những font chữ trung tính hơn với những font khác có cá tính tạo cho web nét đặc sắc cần thiết. Do đó, mẹo đầu tiên là bạn dành thời gian chọn phông chữ mà bạn sẽ sử dụng.
7. Hoa Kỳ hình ảnh chất lượng caoKhi không gian được giảm bớt, các hình ảnh sẽ đi kèm với nó. Chọn những thứ không bị giảm chất lượng khi giảm và hoạt động như nhau khi được chia tỷ lệ. Một hình ảnh chất lượng thấp sẽ làm cho trang web của bạn trông xấu.
8. Rằng hình ảnh của bạn luôn được nhìn thấy đầyNgăn ảnh của bạn bị cắt bằng cách thêm mã img (width: 100%;) vào css của bạn. Bằng cách này, bạn đang yêu cầu thiết bị tính toán lại chiều cao được cung cấp cho hình ảnh để chiều rộng của nó có thể được nhìn thấy một trăm phần trăm.
9. Tất cả thấp cùng một URLQuên tên miền phụ như www.mysite.com/mobile, vì cùng một tệp index.html trong thư mục gốc sẽ hoạt động cho tất cả các thiết bị (nếu bạn thực hiện đúng thiết kế thích ứng). Bạn đã biết lợi thế: càng ít tên miền phụ, tải trang càng nhanh.
10. Tận dụng sự hỗ trợ: Hãy giàu trí tưởng tượng Việc truy cập một trang web từ máy tính để bàn không giống với từ iPad hoặc điện thoại di động. Với cách đầu tiên, bạn sẽ điều hướng một cách bình tĩnh và bình tĩnh. Với thứ hai, bạn sẽ làm việc đó trong những giờ nhàn rỗi và đóng cửa sổ ngay khi bạn cảm thấy buồn chán. Hãy tận dụng những điều kiện này để giải trí cho người dùng và khiến họ vui vẻ trong vài phút mà họ sẽ cống hiến cho bạn. Có thể khi về đến nhà, anh ấy sẽ quyết định đến thăm bạn một cách thoải mái hơn.
11. Lấy cảm hứng Trong các ấn phẩm kỹ thuật số, bạn sẽ tự hỏi tại sao lại có lời khuyên này. Rất dễ: tạp chí kỹ thuật số (tốt) biết cách tận dụng sự hỗ trợ và thiết kế của họ rất thông minh. Lấy cảm hứng từ họ và tạo ra một trang web khó rời mắt.

Thêm thông tin - Tạp chí kỹ thuật số

Nguồn - splio, 960.gs, cột