SEO, Themes, Wordpress

Responsive Web Design Cẩm Nang Thiết kế Web

Với số lượng người dùng các thiết bị mobile, tablet với các kiểu khung hình khác nhau, câu hỏi đặt ra là làm thế nào để tăng khả năng trải nghiệm tốt nhất cho website của bạn. Responsive Web Design sẽ là câu trả lời cho điều này. Trong những năm gần đây đã xuất hiện kỹ thuật thiết kế web Responsive, nhưng vẫn có một số độc giả chưa thực sự nắm được cách một giao diện website có thể hiển thị giao diện Responsive là như thế nào, nên trong bài này Sieutocviet sẽ giải thích và hướng dẫn các bạn áp dụng Responsive vào website của mình.

Kiến thức để thiết kế ra giao diện Responsive Web Design

Trong bài viết này chúng tôi chú trọng vào giao diện hiển thị Responsive chứ không đi sâu vào kiến thức cơ bản, do vậy để có thể hiểu một cách chọn vẹn tốt nhất bạn cần nên chuẩn bị kiến thức  căn bản HTML, CSS (HTML5, CSS3).

Responsive Web Design là gì có thực sự cần cho thiết kế web?

Responsive Web Design (Thiết kế website tương thích di động) là cách thức bạn xây dựng một website đáp ứng trên mỗi thiết bị và kích thước khung hình khác nhau, không cần biết là khung lớn, nhỏ hay máy tính (desktop). Với cách thức này, trải nghiệm của người dùng trên mỗi thiết bị sẽ tăng rõ rệt. Chẳng hạn, trên khung hình của điện thoại, mọi thứ vẫn hiển thị rõ ràng, đầy đủ và tinh tế hơn.

Bản thân khái niệm Responsive Web Design được Ethan Marcotte đưa ra trong cuốn sách “Responsive Web Design”. Bạn nên đọc để có cái nhìn toàn diện và sâu sắc hơn.

Cách thức hoạt động của Responsive là chúng ta sẽ viết  code CSS để cho trình duyệt hiểu và thực thi nó trên các kích thước trình duyệt nhất định. Responsive sử dụng kỹ thuật thiết kế được xử lý từ client-side chứ không thông qua truy vấn đến máy chủ để xử lý (server – side) nên nó có một nhược điểm là làm trình duyệt của bạn phải tốn  thời gian chờ đợi để xử lý CSS.

một website đẹp có thể hiển thị tốt trên tất cả khung hình thiết bị di động lẫn desktop.

Cách phân biệt Responsive Web Design và Thiết kế web thích ứng với Mobile như thế nào?

Responsive có thể hoạt động và cập nhật liên tục bố cục, chẳng hạn như khi chiều dài lẫn chiều rộng cửa sổ thay đổi, trong khi Adaptive sẽ chỉ thay đổi trên các nhóm yếu tố định nghĩa sẵn, ví dụ khung 480px, khung 1024px.

Hoàn hảo nhất là khi bạn tận dụng cả hai vào làm một, giúp website hoạt động mượt mà trơn tru.

Thêm vào đó, trên các điện thoại di động, nếu bạn làm riêng giao diện mobile và giao diện máy tính, việc sửa chữa, bảo trì là rất phức tạp, mặc dù giao diện trên mobile có thể nhẹ, nhưng lại cần bạn mỗi lần nâng cấp, cập nhật phải làm trên cả hai giao diện.

Hiện tại, kĩ thuật phổ biến nhất là sử dụng Responsive Web Design. Nó mang lại đủ cả ba yếu tố: responsive, adaptive và mobile.

Kiến thức để thiết kế ra giao diện Responsive web Design

Trong bài viết này Sieutocviet chú trọng vào giao diện hiển thị Responsive chứ không đi sâu vào kiến thức cơ bản, do vậy để có thể hiểu một cách chọn vẹn tốt nhất bạn cần nên chuẩn bị kiến thức  căn bản HTML, CSS (HTML5, CSS3).

Áp dụng, xây dựng thiết kế Responsive Web Design

Để hoàn thiện kĩ năng xây dựng Responsive Web Design, bạn cần nắm ba phần quan trọng:

  1. Bố cục linh hoạt
  2. Media Queries
  3. Media linh hoạt

Bước 1. Khai báo trường meta viewport trên web thiết kế Responsive Design

Trước tiên bạn cần đặt thẻ này vào trong cặp <head> trên trong mã HTML của website của bạn.
<meta name=”viewport”content=”width=device-width,initial-scale=1.0″>

Thẻ meta viewport nghĩa là một thẻ thiết lập hiển thị cho trình duyệt tương ứng với kích thước màn hình. Chẳng hạn như ví dụ trên, bạn có thể định dạng trình duyệt hiển thị cố định và tương thích trên tất cả các thiết bị dựa vào chiều rộng của thiết bị (device-width) và không cho phép người dùng phóng to, thu nhỏ, theo chiều ngang của màn hình  (thiết lập initial-scale với giá trị cố định là 1.0).

Ngoài ra thẻ meta viewport này còn có các giá trị như:

  • width: thiết lập chiều rộng của viewport.
  • device-width: Chiều rộng cố định của thiết bị.
  • height: thiết lập chiều cao của viewport.
  • device-height: Chiều cao cố định của thiết bị.
  • initial-scale: Thiết lập mức phóng to lúc ban đầu, giá trị là 1 nghĩa là không phóng to, và khi giá trị được thiết lập thì người dùng không thể phóng to vì nó đã được cố định.
  • minimum-scale: Mức phóng to tối thiểu của thiết bị với trình duyệt.
  • maximum-scale: Mức phóng to tối đa của thiết bị với trình duyệt.
  • user-scalable: Cho phép người dùng phóng to, giá trị là yes hoặc no.

 

 

 

Bước 2: Bố cục linh hoạt thiết kế, viết CSS Responsive Web Design

Các lưới linh hoạt này được xây dựng trên các đơn vị tính, hầu hết nên sử dụng phần trăm (%), chẳng hạn cột có độ rộng là 25%, và đơn vị em (để tạo ra khoảng cách giữa các cột). Các đơn vị này thường được sử dụng để khai báo các thuộc tính của lưới (grid) như chiều rộng, lề hai bên, và lề bên trong. cách viết này yêu cầu bạn nên sử dụng các con số linh hoạt, TRÁNH sử dụng các đơn vị truyền thống như pixel hay inch. Bởi vì sự thay đổi của khung màn hình liên tục dẫn tới sự thích nghi của bố cục web cần thay đổi theo tỷ lệ.

.wrapper {
display: flex;
flex-wrap: wrap; /* To make it responsive when needed */
}
.sidebar {
width: 25%;
}
.content {
width: 75%; }

Để tạo ra khoảng cách giữa các đối tượng, bạn nên sử dụng padding.

.sidebar {
  width: 25%;
  padding: 0 1em;
}
.content {
  width: 75%;
  padding: 0 1em;
}

Nhiều người có thể tính dựa trên đơn vị đo là em, rem, DPI, phần trăm(%),…nhưng nếu bạn là người mới thì cứ dùng pixel (px) cho dễ nhé.

Để viết CSS tương ứng cho chiều rộng của trình duyệt sử dụng cú pháp @media trong CSS3 (@media query)  giúp ta có thể phân các đoạn CSS theo kích thước màn hình.

body {
   background: #fff;
   color: #ccc;
}

– Các CSS này cho Ipad ngang(1024 x 768)

@media screen and (max-width: 1024px){
    #wrapper{ width: 100%;}
}
– Các CSS này cho Tablet nhỏ(480 x 640)

@media screen and (max-width: 480px){
    
}

– Các CSS này cho Iphone(480 x 640)

@media screen and (max-width: 320px){
    
}

– Các CSS này Smartphone nhỏ

@media screen and (max-width: 240px){
    
}

Để bù lại khoảng cách này, đối tượng cha của cả hai đối tượng con nên sử dụng margin âm:

.wrapper {
display: flex;
flex-wrap: wrap;
margin: 0 -1em;
}

Để bù lại khoảng cách này, đối tượng cha của cả hai đối tượng con nên sử dụng margin âm:

.wrapper {
display: flex;
flex-wrap: wrap;
margin: 0 -1em;
}

Để tạo các bố cục với độ rộng khác nhau, chẳng hạn như giới hạn tối đa của bố cục, ta thường sử dụng .container bên trong:

.container {
  width: 100%;
  max-width: 70em;
  margin: 0 auto; /* Center alignment */
  padding: 0 1em;
}

Kiểm tra Responsive trong thiết kế web design

Khi làm việc, bạn có thể kiểm tra Responsive bằng cách co giãn kích thước trình duyệt thủ công nhưng nó không được “thông minh” cho lắm. Mà mình sẽ khuyến khích các bạn sử dụng các công cụ hỗ trợ để kiểm tra, một trong những công cụ kiểm tra Responsive mà mình thích nhất đó là Resizer, rất dễ sử dụng và gọn nhẹ. Hãy xem cách sử dụng bằng ảnh dưới:

Danh sách các kích thước màn hình thiết bị

Khi viết CSS cho giao diện Responsive, việc quan trọng nhất là bạn phải nắm được kích thước màn hình của các loại điện thoại thông dụng để có thể viết CSS được như ý và chắc chắn nó hoạt động tốt trên nhiều thiết bị, nhất là các thiết bị thông dụng.

Bạn có thể tham khảo các size chiều rộng của các thiết bị tại đây, nhưng đa phần một dự án bạn chỉ cần tạo các breakpoint CSS như sau:

  • max-width: 320px (điện thoại di động, hiển thị chiều dọc)
  • max-width: 480px (điện thoại di động, hiển thị chiều ngang)
  • max-width: 600px (máy tính bảng, hiển thị chiều dọc)
  • max-width: 800px (máy tính bảng, hiển thị chiều ngang)
  • max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)
  • max-width: 1024px (máy tính bảng loại to, hiển thị chiều ngang)
  • min-width: 1025px (từ size này trở lên là danh cho desktop thông thường).