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

Thiết kế thích ứ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


Nội dung bài viết tuân thủ các nguyên tắc của chúng tôi về đạo đức biên tập. Để báo lỗi, hãy nhấp vào đây.

3 bình luận, để lại của bạn

Để lại bình luận của bạn

địa chỉ email của bạn sẽ không được công bố.

*

*

  1. Chịu trách nhiệm về dữ liệu: Miguel Ángel Gatón
  2. Mục đích của dữ liệu: Kiểm soát SPAM, quản lý bình luận.
  3. Hợp pháp: Sự đồng ý của bạn
  4. Truyền thông dữ liệu: Dữ liệu sẽ không được thông báo cho các bên thứ ba trừ khi có nghĩa vụ pháp lý.
  5. Lưu trữ dữ liệu: Cơ sở dữ liệu do Occentus Networks (EU) lưu trữ
  6. Quyền: Bất cứ lúc nào bạn có thể giới hạn, khôi phục và xóa thông tin của mình.

  1.   Didac Rios dijo

    Có những điều mà tôi không đồng ý lắm.
    Trong điểm 5 ... vì 200px = 15,38% và những điểm sau đây ... không thể thực hiện so sánh tham chiếu này mà không có bất kỳ thước đo gốc nào, kích thước trên pixel không phải là thước đo tương đối như tỷ lệ phần trăm!

    Chỉ định hình ảnh với chiều rộng: sai 100%, tôi không nghĩ đó là một khuyến nghị. Hình ảnh xác định rõ hơn chúng với chiều rộng và chiều cao, do đó máy chủ mất ít thời gian hơn để xử lý thông tin (không phải tính toán kích thước của nó) và chúng tôi cải thiện tốc độ tải của trang (điều này rất quan trọng trong web thích ứng hoặc đáp ứng thiết kế).

    Tôi đã bao gồm, mặc dù đó là một công việc mũi ... hình ảnh cho màn hình võng mạc. Nếu chúng ta muốn thiết kế web đáp ứng, bắt buộc phải sử dụng hình ảnh cho hiển thị võng mạc, vì tỷ lệ cao trên thiết bị di động và máy tính bảng sử dụng các màn hình này. Vì vậy, không có ích gì khi bỏ công sức vào một thiết kế cho chúng ở mức nửa ga.

    Tốt cho phần còn lại

    1.    Didac Rios dijo

      Ở điểm 5, họ đặt bạn vào ngữ cảnh và cho bạn biết về tổng bố cục là 1300px với 3 cột, một trong số 200, 300 và 1000.

      Nếu bạn chuyển nó sang tỷ lệ phần trăm, trong trường hợp của họ, chúng giống như bạn nói, 15,38% ((200 * 100) / 1300) (số thập phân bên dưới, hệ thống quốc tế: P)

      Nhưng nếu chúng ta nói về bố cục 500px và chúng ta có 3 cột, một cột 200, cột khác 200 và cột khác 100px, thì tỷ lệ phần trăm không còn giống nhau, trong trường hợp này là 200px = 40% ((200 * 100) / 500)

      Chúng sẽ là: 200px = 40% và 100px = 10%

      Thôi nào, như tôi đã nói, chúng không phải là tham chiếu như bạn chỉ ra, chúng chỉ là tham chiếu trên bố cục 1300px.

      liên quan

      1.    Lua louro dijo

        Thật là thất bại, bạn hoàn toàn đúng trên thế giới! Cảm ơn một lần nữa;)