Thiết kế Responsive Template giúp cho blog hoạt động tốt trên điện thoại di động đã trở thành một xu hướng trong phát triển web ngày nay. Công nghệ điện thoại di động hiện nay phát triển vô cùng do vậy lượng người dùng sử dụng điện thoại di động lướt web không ngừng tăng nhanh. hiện nay mọi người thích đọc email, lướt web trên điện thoại so với sử dụng máy tính để bàn của họ. Đơn giản vì tính tiện lợi, dễ dàng kết nối wifi không dây và các mạng GPRS là một lý do khuyến khích sử dụng các thiết bị di động như điện thoại thông minh (Apple và Android), máy tính bảng, netbook và điện thoại di động có độ phân giải thấp như NOKIA.

Nhiều webmaster hiện nay quan tâm đến việc thiết kế các mẫu Blogger linh hoạt so với các bố cục có chiều rộng cố định truyền thống. Namkna đã nhận dược một số yêu cầu như vậy. Do đó bài viết này namkna sẽ hướng dẫn tối ưu hóa Responsive Blogger Templates cho cộng đồng Blogger của Google. Bạn sẽ học cách để thiết kế giúp cho bố cục Blog của bạn tự điều chỉnh tự động để phù hợp vớ các màn hình có kích thước khác nhau. (bài viết có sử dụng một số tư liệu hình ảnh của MTB)

Responsivetemplate là gì?


Là thiết kế bố cục một trang web đáp ứng sự linh hoạt, điều chỉnh chiều rộng và phong cách của mình theo kích thước màn hình của các thiết bị có kích thước màn hình khá nhau. Nó sẽ trông khác nhau trên khi xem màn hình máy tính để bàn so với khi xem trên một điện thoại thông minh hoặc Tablet (có hai kích cỡ: chân dung và phong cảnh)

Đối với người dùng Blogger:

Nếu bạn đã kích hoạt Responsive di động cho blog blogger thì khi bạn xem blog của bạn trên một điện thoại thông minh, bạn sẽ thấy một giao diện hoàn toàn khác so với khi xem trên một máy tính để bàn hay latop của bạn. Theo mặc định, tất cả các blog blogger đã được tối ưu hóa khi xem bằng điện thoại di động nhưng giao diện mobile còn quá đơn giản và không đại diện cho blog của bạn vì vậy chúng ta sẽ học cách tạo và bố trí mang phong cách riêng cho các blogger mình.

 Xem thử blog của bạn trên ác trình duyệt khác nhau!
Bạn có thể sem trước blog ủa bạn sẽ thay đổi thế nào khi áp dụng thủ thuật mà namkna sẽ giới thiệu sau đây bằng cách sử dụng công cụ sau: 




☼ Bước 1: Thêm thẻ meta hỗ trợ Responsive template.

1- Đăng nhập vào blog
2- Chọn mẫu (template)
3- Chọn chỉnh sửa HTML.
4- Dán mã dưới đây vào sau thẻ <head> :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Trong đó:
  • width=device-width sẽ giúp phát hiệ và nhận biết kích cỡ màn hình khác nhau.
5- Lưu mẫu lại và tiến hành bước tiếp theo.

☼ Bước 1: Dùng CSS 3 để truy vấn các cài đặt của bạn cho các giao diện khác nhau.

Các thẻ Media dán trước thẻ ]]></b:skin> sẽ truy vấn theo thuộc tính CSS3 đã định trước để phát hiện kích thước màn hình và áp dụng các cài đặt cho kiểu màn hình đó.
Các bạn có thể xem hai ví dụ về việc truy vấn media cho điện thoại thông minh và các thiết bị Tablet.
@media screen and (max-width : 480px) {
/* nếu kích thước màn hình từ 480px trở xuống sẽ truy vấn các thuộc tính trong thẻ media này */
/* Dành cho điện thaoij thông minh */
}

@media screen and (max-width : 768px) {
/* nếu kích thước màn hình từ 768px trở xuống sẽ truy vấn các thuộc tính trong thẻ media này */
/* Dành cho Tablets */
}

Dưới đây là một số lời khuyên thú vị mà các bạn nên ghi nhớ khi áp dụng viết này:
Mẹo để nhớ:
  1. Sử dụng em thay vì các điểm ảnh (px) để xác định font-sizes, padding, margin .v.v....
  2. Sử dụng tỷ lệ phần trăm (%) thay vì giá trị số để xác định chiều rộng của cột
  3. Tạo media riêng cho 3 kiểu màn hình chính là: 480/768/1024
  4. Hãy nhớ sử dụng hộp kích thước (box-sizing), chiều rộng tối đa (max-width) và chiều rộng tối thiểu (min-width).

Ví dụ mình muốn thay đổi độ rộng của phần main, và để phần sidebar xuống dưới phần main khi xem ở điện thoại có kích thước màn hình dưới 480 thì sẽ dán code sau trước thẻ ]]></b:skin>.
@media screen and (max-width : 480px) {
#main-wrapper{width:100%px}
#sidebar-wrapper{float:none}
}