Tư vấn thiết kế website

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

Thứ hai - 19/03/2018 05:55/ Uncategorized

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ổng số điểm của bài viết là: 5 trong 1 đánh giá

Xếp hạng: 5 - 1 phiếu bầu
Click để đánh giá bài viết

Ý KIẾN BẠN ĐỌC

TIN LIÊN QUAN

Định nghĩa tên miền và hosting là gì?

Định nghĩa tên miền và hosting là gì?

Tên miền và hosting là gì? Đây là câu hỏi mà chắc chắn những nhà thiết kế website thường gặp phải từ khách hàng. Do đó...

bởi Vidoco, T03 21, 2018 / Danh mục
Cách lấy HTML của 1 trang web nhanh chóng và đơn giản

Cách lấy HTML của 1 trang web nhanh chóng và đơn giản

Hôm nay, VIDOCO chúng tôi sẽ chia sẽ đến các bạn cách lấy html của 1 trang web. Việc này sẽ hổ trợ các bạn trong việc...

bởi Vidoco, T03 21, 2018 / Danh mục
Cách lấy css của 1 trang web với công cụ Snappy Snippet

Cách lấy css của 1 trang web với công cụ Snappy Snippet

Cách lấy css của 1 trang web thì có rất nhiều từ thủ công cho đến sử dụng những công cụ hổ trợ như Chrome Devtools hay...

bởi Vidoco, T03 21, 2018 / Danh mục
Thiết kế giao diện web bằng photoshop phần 1

Thiết kế giao diện web bằng photoshop phần 1

Thiết kế giao diện web bằng photoshop là cách thiết kế web chuyên nghiệp và cũng là công việc thiết yếu của nhà thiết kế...

bởi Vidoco, T03 19, 2018 / Danh mục
Thiết kế mẫu trang web cá nhân đẹp tại VIDOCO

Thiết kế mẫu trang web cá nhân đẹp tại VIDOCO

Tạo dựng và phát triển thương hiệu, hình ảnh cá nhân đang dần trở thành xu hướng của xã hội hiện nay và được nhiều người...

bởi Vidoco, T03 19, 2018 / Danh mục
Cách thiết kế web đẹp, chuyên nghiệp và ấn tượng nhất

Cách thiết kế web đẹp, chuyên nghiệp và ấn tượng nhất

Trong thời đại thị trường kinh doanh ngày càng khốc liệt thì nhiều doanh nghiệp đã bắt đầu tập trung vào các chiến lược...

bởi Vidoco, T03 18, 2018 / Danh mục