Hướng dẫn thiết kế web responsive

Ngọc Hà
Thứ hai - 19/03/2018 05:55
1549

Thế giới công nghệ luôn thay đổi theo thời gian, cái mới đang dần thay thế cho cái cũ, có những cập nhập mới để phù hợp với xu thế và nhu cầu cả người sử dụng. Bởi vậy, việc hướng dẫn thiết kế web responsive sau đây hi vọng mang nhiều lợi ích cho các bạn mới vào nghề.

Giao diện website cũng vậy nó là một bức tranh nghệ thuật tạo nên những cung bậc cảm xúc cho người dùng, người thiết kế được xem là một hoạ sỹ và họ cần vẽ lên những nét thâm thuý cũng như sáng tạo ra thứ độc đáo nhất. Những năm gần đây đã xuất hiện công cụ thiết kế web responsive. Hôm nay, chúng tôi sẽ hướng dẫn thiết kế web responsive và gửi đến cho các bạn.

Hướng dẫn thiết kế web responsive

Trước khi chúng ta bước vào việc hướng dẫn thiết kế web responsive thì các bạn cần phải có một số kiến thức cơ bản về lập trình như HTML, CSS để có thể hiểu một cách trọn vẹn và tốt nhất.

Thế nào là responsive?

giao dien trang web responsive — Hình 1 : Giao diện trang web được thiết kế từ responsive

Responsive là một thuật ngữ hay là một tính từ chỉ website có thể hiển thị và tương thích với mọi trình duyệt phổ biến hiện nay. Để chúng tôi ví dụ cho các bạn dễ hiểu, thông thường một trang website có độ hiển thị chuẩn ở trên một màn hình máy tính ở Việt Nam là 960px, nhưng khi hiện thị trên điện thoại thì kích thước sẽ thay đổi thành 320px - 420px đối với những điện thoại có màn hình nhỏ, còn đối với những chiếc điện thoại lớn khác thì sẽ hiện thị khác nhau.

Theo kiểu thiết kế website truyền thống thì người thiết kế website thường lấy đơn vị px(Pixel) để làm đơn vị tính chiều ngang của một trang web. Ngược lại, áp dụng responsive thì sẽ lấy % để định dạng chiều rộng của một website, mục đích của việc này là tối ưu và thận tiện cho việc xử lý hơn.

Cách thức hoạt động của responsive cũng khá là đơn giản, chúng ta sẽ viết code CSS cho trình duyệt hiểu và thực thi nó trên các loại trình duyệt có kích thước nhất định. Ví dụ bạn code và thiết lập một đoạn CSS để áp dụng cho các trình duyệt có kích thước chiều rộng tối đa ở Iphone 4 là 640px. Responsive sử dụng kỹ thuật thiết kế để xử lý từ client-side chứ không phải thông qua truy vấn đến máy chủ để xử lý(còn được gọi là sever-side). Do đó Responsive có một nhược điểm là làm trình duyệt của bạn tốn thời gian để chờ đợi việc xử ký CSS.

Hướng dẫn áp dụng Responsive lên giao diện website

huong dan thiet ke web responsive — Website có hiển thị Responsive

Để cho trang website của bạn có thể hiển thị được Responsive thì chúng ta có hai bước

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

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

Bạn cần đặt thẻ này trong cặp <head> trong mã HTML của website bạn.

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

Ngoài thẻ meta viewport này còn có các giá trị khác dưới đây :

Width : Định dạng chiều rộng của viewport

Device-width: Chiều rộng cố định của các thiết bị khác nhau.

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 : Định dạng mức phóng to của trình duyệt lúc ban đầu, nếu đặt giá trị là 1 có nghĩa là không phóng to, khi giá trị được thiết lập, định dạng 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.

Muser-scalable : Cho phép người dùng có thể phóng to, có hai giá trị là yes và no.

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

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

Các CSS dùng cho toàn bộ website và desktop

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){   }

Chỉ cần bạn có một số kiến thức về lập trình thì bạn có thể dễ dàng thiết kế web responsive. Ngoài đơn vị px thì đơn vị đo chiều dài trong website tốt nhất hiện nay là %. Hay còn được gọi là đơn vị có tính tương đối. Một lưu ý nữa là các bạn nên sử dụng max – width thay vì dùng width để tránh cố định chiều rộng của website. Bạn có thể sử dụng thuộc tính display : none cho các thành phần mà bạn muốn ẩn đi trên từng thiết bị. Ngược lại, sử dụng thuộc tính display : block ở các thiết bị cần được hiển thị ra.

Trên đây là những hướng dẫn nhỏ để các bạn có thể hiểu hơn về thiết kế web responsive. Nếu bạn có những thắc mắc khác thì hãy liên hệ với vidoco nhé. Chúc các bạn thành công.

Tác giả: Ngọc Hà

Bạn có thể đăng lại bài viết trên ở website hoặc các phương tiện truyền thông khác. Nhưng vui lòng ghi rõ nguồn https://vidoco.vn để ủng hộ chúng tôi. Nếu có nhu cầu tư vấn thiết kế website xin liên hệ 028 73 027 720. Xin cảm ơn.

Chấm điểm