Tìm hiểu về giao diện Responsive trong thiết kế website

Responsive web Design là một thuật ngữ hay tính từ chỉ một website. Có thể hiển thị và tương thích với mọi trình duyệt (co dãn theo kích thước trình duyệt). Responsive là gì

Ví dụ thông thường một website có độ hiển thị chuẩn trên màn hình máy tính ở Việt Nam là 1366px (PC). Nhưng chắc chắn nó sẽ hiển thị trên màn hình điện thoại (mobile) theo chiều rộng là 320px – 420px.

Lịch sử hình thành Responsive Design

Năm 2001 trang Audi.com đã thay đổi kích thước các trình duyệt. So với các web ban đầu được thiết kế có tính đáp ứng (adapt). Khi đó trang đó chỉ đáp ứng tốt cho trình duyệt Internet Explorer.

Năm 2008, xuất hiện các thuật ngữ mới để mô tả cách bố cục trang web. Có thể kể đến như “flexible”, “liquid”, “fluid”, and “elastic”. Đầu 2009, CSS3 Media Query được khai sinh. Đây là tính năng làm tiền đề cho kỹ thuật RWD sau này. giao diện Responsive là gì

Năm 2012 khi Ethan Marcotte cho ra đời thuật ngữ RWD. RWD đã đứng vị trí thứ hai trong danh sách Top Web Design Trends for 2012 bởi tạp chí net magazine.

Đến năm 2013, Mashable gọi đây là năm của RWD. Hầu hết các website đều chuyển sang RWD vì nó mang hiệu quả kinh tế hơn thay vì phát triển ứng dụng mobile.

Ngày nay, thuật ngữ RWD được phổ biến rộng rãi. Có một điều gần như tuyệt đối khi một trang web mới xuất hiện, nó đều được thiết kế theo hướng này.

Responsive Design là gì?

Responsive Web Design (RWD) là thuật ngữ website hiển thị tương thích với mọi kích thước thiết bị. Tức là bố cục trang web sẽ tự đáp ứng theo hành vi người dùng và môi trường hiển thị. Môi trường này chính là kích thước của trình duyệt, kích thước hoặc hướng xoay thiết bị. Thiết bị ở đây đa phần là các thiết bị di động như smartphone hoặc tablet.

Trước đây, để hiển thị tốt trên cả Personal Computer (PC) và mobile. Người thiết kế sẽ thiết kế hai giao diện khác nhau. Một giao diện dành cho PC và một cho mobile. Khi truy cập, trang web sẽ tự xác định thiết bị truy cập mà chuyển đến giao diện tương ứng.

Ví dụ khi truy cập Facebook trên mobile, các bạn sẽ được chuyển đến subdomain m.facebook.com. Và giao diện này chính là giao diện dành cho di động. Một số website khác cũng đang áp dụng cách này, điển hình như Twitter hay Youtube.

Responsive Web Design rất quan trọng trong thiết kế web?

Responsive là gì?

Web Responsive là công nghệ thiết kế website của CSS3. Nó có khả năng làm cho website hiển thị tốt trên mọi thiết bị, mọi độ phân giải màn hình. Trường hợp website đẹp trên desktop nhưng trên điện thoại có cấu trúc lộn xộn, hình ảnh, bài viết không cân đối thì website đó không phải là Web Responsive.

Ví dụ. Bạn mở website https://vnexpress.net/ sau đó bạn thu nhỏ trình duyệt hay thay đổi độ phân giải. Bạn thấy website có cấu trúc cân đối, hình ảnh và text hợp lý.

Đáp ứng nhu cầu thực tế

Với sự bùng nổ của sự phát triển các thiết bị di động, smartphone. Theo số liệu của We Are Social về người dùng Internet vào 01/2017. Có hơn 50% sử dụng các thiết bị di động để truy cập Internet. Riêng tại Việt Nam, số lượng này vào khoảng hơn 30% và con số này đang tăng mỗi năm.

Sử dụng công nghệ tuy mới mà “cũ”

Đối với Web Developer, thì đây là một thách thức nhưng không phải là không làm được. Tuy gọi là công nghệ mới nhưng RWD cơ bản chỉ áp dụng công nghệ CSS3, cụ thể là Media Query.

Khi website được thiết kế bằng HTML5 & CSS3 thì việc này là hoàn toàn nằm trong tầm tay. Đặc biệt, RWD là một trong những khóa học đang được học nhiều nhất hiện nay. Vì thế hãy yên tâm là các bạn sẽ dễ dàng làm chủ được kỹ thuật này một cách có hệ thống.

Được Google Search khuyến khích, lợi ích cho SEO

Năm 2015, Google Search ưu tiên hiển thị các website có giao diện RWD. Thay đổi này với mong muốn các trang web hướng tới người dùng. Với mong muốn các kết quả tìm sẽ có nội dung văn bản dễ đọc hơn.

Hiệu quả về kinh tế

Trước đây, các nhà phát triển phải xây dựng ít nhất hai giao diện cho trang web. Một dành cho PC, một dành cho di động. Hoặc thậm chí một số nhà phát triển còn phải xây dựng ứng dụng mobile.

Điều này gây tốn kém về mặt chi phí. Chưa kể trên các ứng dụng hoặc giao diện riêng, việc hiển thị dữ liệu chưa chắc đã giống nhau. Vì thế nhà phát triển có thể gặp khó khăn trong việc quản lý.

Đối với RWD với nguyên lý đa giao diện, tương thích tốt trên nhiều thiết bị. Mặc dù chúng ta không thể lường trước được kích thước của thiết bị. Nhưng với RWD, chuyện này là hoàn toàn khả thi. Từ đó tiết kiệm công sức và chi phí cho nhà phát triển.

Các thành phần xây dựng Responsive thông dụng

Hầu hết chúng ta tạo Responsive cho mọi vị trí trên website. Tuy nhiên mình sẽ liệt kê một số thành phần thông dụng về cách hoạt động của Responsive.

Responsive Column

Mỗi giao diện thông thường chúng ta có các vị trí sidebar left, sidebar right và content. Như vậy với ba vị trí này thì chúng ta tạm chia làm ba column.

Nếu ở giao diện lớn thì chúng ta sẽ hiển thị nó ở dạng 3 column nhưng ở giao diện nhỏ thì chúng ta chỉ hiển thị nó ở dạng 1 column thôi.

Responsive image

Với hình ảnh thì nếu bạn thiết lập chiều rộng và chiều cao cho ảnh. Khi giao diện nhỏ sẽ bị vỡ ngay vì kích thước của hình ảnh lớn hơn kích thước của thiết bị. Lúc này ta phải thay đổi lại kích thước làm sao hiển thị đúng với chiều rộng của thiết bị.

Responsive font size

Với font size thì chúng ta hay thay đổi kích thước font chữ. Với giao diện lớn thì chúng ta hiển thị kích thước to. Nhưng qua giao diện nhỏ thì đôi lúc chúng ta sẽ cho kích thước nhỏ lại. Để cho giao diện nhìn thân thiện và không tạo ra những vùng trống.

Responsive menu

Ở giao diện lớn (PC) thì menu chúng ta hiển thị dài và chiều ngang. Nhưng qua giao diện nhỏ (mobile) thì chúng ta ẩn đi chỉ hiển thị một nút nhỏ. Người dùng click vào nút đó thì hiển thị menu ra theo chiều dọc.

Mời bạn xem thêm: thiết kế website wordpress bán hàng chuyên nghiệp

Áp dụng Responsive lên giao diện website?

Để website của bạn hiển thị được Responsive bạn thực hiện hai bước sau:

Bước 1. Khai báo trường meta viewport trên website

Trước tiên bạn cần đặt thẻ này vào trong cặp trên trong mã HTML của website của bạn.

Thẻ “meta” thuộc tính “viewport” 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. 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). Sẽ 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ị và ý nghĩa như

• Width: Định dạng chiều rộng của viewport.
• Device-width: Chiều rộng cố định của thiết bị khác nhau.
• Height: Để thiết lập chiều cao của viewport.
• Device-height: Đó là chiều cao cố định của thiết bị.
• Initial-scale: Mức thu phóng của website và chiều rộng của chế độ xem. initial-scale thường được đặt bằng 1 (có thể tăng giá trị lên nhưng không được khuyến nghị).
• Minimum-scale:Là mức phóng to tối thiểu đặt cho thiết bị với trình duyệt.
• Maximum-scale: Mức phóng to tối đa cho một thiết bị với trình duyệt.
• Muser-scalable: Cho phép người dùng có thể phóng to, giá trị thường là yes hoặc no.

Bước 2. Viết CSS cho chiều rộng cho các thiết bị

Ngay tại bước này, chúng ta sẽ triển viết CSS tương ứng cho từng mức chiều rộng hoặc chiều cao của thiết bị, thường thì chúng ta chỉ viết dựa theo chiều rộng và được tính trên đơn vị là pixel(px). 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é.

Mời bạn xem thêm: Kích thước banner phù hợp

Để 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. Kích thước chúng ta đang cần phân chia chính là độ rộng màn hình như sau:

• Các CSS này dùng cho toàn bộ website và desktop
  body {
  background: #ddd;
  color: #nao;
  }
• 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ỏ(767 x 640)

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

• Các CSS này cho Iphone(575 x 640)

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

• Các CSS này cho Iphone6 (380 x 640)

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

Tóm lại Responsive là gì

Thực ra Responsive Web Design căng nhất là phần thiết kế menu. Nhưng khi thiết kế bạn sẽ gặp phải những tình huống không biết làm thế nào. Đến đây bạn có thể hiểu responsive là gì rồi và khả năng của nó. Nếu các bạn có thắc mắc gì xin liên hệ với chúng tôi.

Trên đây là những cách chia sẻ nhỏ để các bạn có thể hiểu rõ về thiết kế website áp dụng kỹ thuật Responsive Web Design.

Xin cảm ơn các Anh/Chị đã tham khảo bài viết Responsive của Webaoe. Nếu có chỗ nào còn thiếu sót, xin các Anh/Chị góp ý về responsive ở phía dưới để hoàn thiện bài viết hơn. Xin cảm ơn!