Responsive là gì? Thiết kế web responsive ở BẮC VIỆT

Responsive là gì?

Responsive Web Design (RWD): là thuật ngữ ám chỉ cách thiết kế trang web hiển thị tương thích với mọi kích thước thiết bị. Mục tiêu chính là cải thiện trải nghiệm của người dùng.

Nói dễ hiểu hơn, một website chuẩn responsive nghĩa là nó sẽ hiển thị tốt trên mọi loại thiết bị, trình duyệt, mọi kích cỡ màn hình, cửa sổ. Tùy vào kiểu màn hình mà các trang web được điều hướng theo chiều ngang, chiều dọc (ví dụ chiều dọc sẽ xuất hiện ở các thiết bị mobile), sắp xếp menu, layout.

Tuy nhiên, nếu chỉ đáp ứng yếu tố trên, nghĩa là mới dừng ở mặt hiển thị. Responsive web còn biểu thị ở hành vi người dùng, tức nghĩa người dùng có thể nhìn rõ nội dung mà không cần phóng to, cuộn ngang màn hình. Website có khoảng trống để người dùng dễ dàng click button mà không bị nhầm lẫn.

Những lợi ích Thiết kế website Responsive mang lại

Web Responsive giúp bạn có thể tạo một bản website mà tương thích với mọi loại thiết bị. Đồng nghĩa bạn tiết kiệm được cả chi phí, thời gian, công sức, không cần xây dựng, duy trì nhiều phiên bản khác nhau dành riêng cho điện thoại/laptop.

Cải thiện điểm SEO, tối ưu SEO OnPage, đặc biệt hữu ích cho thiết kế website chuẩn SEO nhờ mọi luồng đều dẫn đến một URL duy nhất
Tăng tỷ lệ chuyển đổi đáng kể (Higher Conversion Rates)
Website sẽ load nhanh hơn và được nhiều trình duyệt hỗ trợ
Giảm tỷ lệ thoát trang (Bounce Rates), tăng tỷ lệ người dùng ở lại site, tác động tốt đến các chỉ số Google Analytics
Dễ dàng bảo trì trang web bởi vì nó không liên quan gì đến phía server, chỉ việc thay đổi html và css để thay đổi giao diện hoặc bố cục thích hợp với các thiết bị khác nhau.

Hiểu rõ về kích thước màn hình thiết bị khi dùng Responsive

Responsive là gì và được thể hiện trên các kích thước màn hình thiết bị, hãy tham khảo kích thước của các thiết bị dưới đây nhé!
- 320px - Màn hình điện thoại di động, hiển thị chiều dọc
- 480px - Màn hình điện thoại di động, hiển thị chiều dọc
- 600px - Màn hình máy tính bảng, hiển thị chiều dọc
- 800px - Màn hình máy tính bảng, hiển thị chiều ngang
- 786px - Màn hình máy tính bảng, hiển thị chiều dọc
- 1024px - Máy tính bảng to, hiển thị chiều ngang
- Từ 1025px trở lên - Dành cho desktop
Độ phân giải thường hay gặp nhất là 320px, 480px, 900px, 1200px, 1680px,...

Các nguyên tắc cơ bản để thiết kế website chuẩn Responsive

Sau đây là những nguyên tắc cơ bản khi thiết kế website Responsive mà người dùng nào cũng nên biết.

Khai báo thẻ meta viewport

Meta Viewport là một thẻ để thiết lập cho trình duyệt hiển thị tối ưu với kích thước màn hình. Thẻ được đặt vào cặp trong HTML như sau:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

width=device-width: thiết lập chiều rộng của trang web theo chiều rộng của thiết bị

initial-scale=1.0: thiết lập mức độ zoom ban đầu khi trang web được load bởi trình duyệt

Thẻ meta viewport giúp bạn thiết lập trình duyệt hiển thị dựa trên chiều rộng, chiều cao cố định, có thể cho người dùng phóng to hoặc không.

Fluid Grid – Bố cục linh hoạt

Fluid Grid là một hệ thống bố cục được vẽ dựa trên độ phân giải màn hình của người dùng, trái ngược hoàn toàn với những layout có chiều ngang cố định. 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).

Media Queries

Thực tế Fluid Grid chỉ làm tròn nhiệm vụ của mình. Khi các trình ngày càng hẹp hơn, thử thách mới bắt đầu xuất hiện, đó là lý do vì sao chúng ta cần Media Queries.

Media Queries là một kỹ thuật CSS, Ta sử dụng cú pháp @media để bao gồm một khối các thuộc tính CSS chỉ khi một điều kiện nhất định là đúng.

Cách thức sử dụng Media Queries:

- Sử dụng trực tiếp cú pháp @media ở trong file style sẵn có.

- Tạo 1 file chứa Media Queries riêng và @import nó vào CSS.

- Gắn riêng mỗi file style trên các khung hình khác nhau vào qua HTML.

Nguyên tắc của Mobile First trong Responsive

Mobile-first là tiêu chuẩn ưu tiên mặc định cho các khung hình nhỏ như thiết bị di động sau đó mới cho các tablet và desktop.

/Smart phone nhỏ/

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

}

/Iphone(480 x 640)/

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

}

/Tablet nhỏ(480 x 640)/

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

}

/Ipad dọc(768 x 1024)/

@media screen and (min-width: 768px){

}

/Ipad ngang(1024 x 768)/

@media screen and (min-width: 1024px){

}

Flexible Media

Một số hình ảnh trên website có thể không tương thích với các thiết bị, vì thế cũng phải cần có khả năng thay đổi sao cho phù hợp.

Một cách thông dụng là set width là 100% cùng với height: auto. Khi đó ảnh hay video sẽ thay đổi chiều rộng và cao sao cho phù hợp với độ dãn của màn hình.

img {

width: 100%;

height: auto;

}

Thứ hai là nếu muốn ảnh hoặc video thay đổi theo viewport nhưng không quá khác kích thước gốc, ta có thể sử dụng thuộc tính max-width:

img {

max-width: 100%;

height: auto;

}

Một số công cụ kiểm tra Responsive Web Design

Ngày nay, nhiều người sử dụng điện thọai hoặc máy tính bảng để truy cập vào website, do đó test responsive web design rất quan trọng vì trải nghiệm của người dùng trên các thiết bị di động và trên desktop rất khác nhau. Có hai phương pháp phổ biến để kiểm tra website responsive:

Công cụ kiểm tra trực tuyến

- Mobile-Friendly của Google

- Responsinator

- Responsive Design Test by TrulyBlogger

- Material Design

- Screenfly

- Responsive.

Công cụ phát triển trình duyệt web

Một cách khác là sử dụng công cụ phát triển trình duyệt web như: Google Chrome, Opera hay Mozilla Firefox.

Ví dụ cách thực hiện trên trình duyệt Google Chrome:

- Mở website cần kiểm tra

- Nhấp chuột phải, chọn Kiểm Tra Hoặc Inspect.

- Trên cửa sổ Dev Tools mở lên, chọn Toggle device toolbar.

- Sử dụng trình giả lập xuất hiện trên màn hình, bạn có thể kiểm tra responsive trên thiết bị, kích thước.

Mong rằng bài viết này sẽ giúp các bạn hiểu Responsive là gì và những lợi ích của nó trong triển khai giao diện website. Nếu có bất kì thắc mắc nào bạn có thể liên hệ với BẮC VIỆT đơn vị chuyên thiết kế website đa ngành hàng và cung cấp các giải pháp về website – hosting – Email... để giải đáp các thắc mắc nhé !

BẮC VIỆT chuyên thiết kế web Responsive áp dụng công nghệ hiện đại, nội dung trình bày theo chuẩn Html5, đảm bảo nhẹ nhàng, hiệu ứng đẹp mắt và đặc biệt là tương thích với nhiều thiết bị khác nhau: Máy tính Desktop; Laptop; Máy tính bảng; Điện thoại di động,...