(... tiếp theo tập 1)
3. Bước 1: thiết lập và quy ước cho trình duyệt
Bạn bổ sung vào thẻ header một thẻ meta như sau:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Thẻ nay mang ý nghĩa rằng bạn định dạng các phiên bản trên website dựa trên kích thước chiều rộng màn hình với tỉ lệ là 1.0. Trình duyệt sẽ dựa vào kích thước màn hình hiển thị (hoặc kích thước cửa sổ) để tính toán những quy ước khác về sau này.
Tiếp theo, do mỗi thiết bị có nhiều kích thước màn hình khác nhau nên khi hiển thị trên đó chúng ta cũng có những lựa chọn khác nhau (ví dụ như bạn có thể hiển thị website trên tablet khác với trên điện thoại có màn hình lớn, hay điện thoại có màn hình lớn sẽ hiển thị khác với điện thoại có màn hình nhỏ hơn). Để thiết lập điều này, chúng ta cần quy định Cascading Style Sheet (CSS) cho mỗi phiên bản như vậy. Để không ảnh hưởng đến cái chung, chúng ta sẽ tạo ra một file CSS có nội dung là các tùy chỉnh cho các phiên bản khác nhau dựa vào kích thước màn hình. Tôi đăt tên cho file này là responsive.css và có nội dung ban đầu như sau:
/******** For mobile device ********/
/******************************/
/*---- Responsive base screen witdh ------- */
/* width - 30 */
/* Tablet Devices Resizing */
@media screen and (max-width: 1024px) and (min-width: 970px){
}
@media screen and (max-width: 970px){
}
@media screen and (max-width: 870px) and (min-width:750px){
}
@media screen and (max-width:750px) and (min-width:680px){
}
@media screen and (min-width:320px) and (max-width: 480px) {
}
@media screen and (max-width: 380px) {
}
/*---- end Responsive base screen witdh ------- */
Ở đây tôi có một vài kích thước màn hình phổ biến, bạn có thể sử dụng công cụ ResizeMyBrowser mà tôi đã giới thiệu ở trên để xác định thêm những thiết bị khác nếu bạn quan tâm đến chúng. Phần mã ở trên là những thay đổi cấu hình CSS chúng ta sẽ bổ sung tùy theo độ rộng của màn hình. Tiếp theo chúng ta sẽ gắn file này vào website để thực hiện tùy chỉnh:
<link rel="stylesheet" type="text/css" href="link_to_file/responsive.css" />
Bạn lưu ý là phần CSS này phải nằm dưới CSS chính của website, nếu không có thể nó sẽ bị CSS chính ghi đè,lúc đó nó sẽ không có tác dụng.
Tới bước này, bạn sẽ kiểm tra lại trên công cụ kiểm tra tính thân thiện với điện thoại xem đã có những lỗi nào được fix hay chưa. Đa phần các lỗi do font chữ nhỏ đã được fix vì chúng ta đã định dạng lại chúng theo tỉ lệ tương ứng với điện thoại ở thẻ header. Nếu giao diện của bạn vẫn còn quá nhỏ so với điện thoại, có thể là chúng ta đã định dạng cố định kích thước (pixel) không thích hợp. Tuy nhiên chúng ta vẫn phải kiểm tra xem nó tương thích với di động được bao nhiêu rồi.
Như đã nói ở trên, đa phần lỗi đã được fix, chỉ còn 1 vấn đề duy nhất là tràn lề (do kích thước chiều ngang trên điện thoại quá lớn). Cứ bình tĩnh, chúng ta sẽ khắc phục chúng. Tới đây, đa phần chúng ta chỉ mắc lỗi kích thước chiều rộng quá dài mà thôi. Một cách giúp các bạn kiểm tra lỗi và chỉnh sửa dễ dàng đó là chúng ta co cửa sổ của trình duyệt lại để xem kích thước thay đổi ảnh hưởng đến giao diện như thế nào. Khi bạn thu nhỏ màn hình thanh scroll bên dưới sẽ tự động xuất hiện. Chỉ cần bạn co đến kích thước màn hình nhỏ nhất mà bạn xác định mà không xuất hiện thanh scroll ngang là coi như chúng ta đã hoàn tất.
Hãy xem hình dưới đây cho trực quan:
4. Bước 2: Bỏ đi các thành phần không cần thiết
Trên phiên bản dành cho điện thoại không phải cái gì cũng cần thiết, chúng ta sẽ tiến hành bỏ đi những thành phần không cần thiết cho phiên bản điện thoại. Ví dụ như ở hình trên, bên phía trên tôi đã có menu (navigation) để người dùng có thể tham quan website của mình, như vậy trên điện thoại tôi sẽ giữ menu này và không cần block thông tin bên phía tay trái nữa (hoặc là tôi bỏ cả cột trái - vì tôi không cần đến nó) , tôi sẽ bỏ nó đi. Cách để xác định những gì cần bỏ đi khá đơn giản, trên Chrome các bạn chọn vào thành phần cần bỏ đi để xem ID/class của nó để loại khỏi cuộc chơi.
Tôi tìm thấy ID của nó là column-left. Nếu bạn muốn bỏ nó cho phiên bản điện thoại có kích thước bao nhiêu, bạn chỉ viết viết CSS cho nó ở phiên bản tương ứng. Ví dụ, tôi chỉ muốn bỏ nó cho các phiên bản có kích thước điện thoại nhỏ hơn 970px, tôi sẽ viết như sau:
/******** For mobile device ********/
/******************************/
/*---- Responsive base screen witdh ------- */
/* width - 30 */
/* Tablet Devices Resizing */
@media screen and (max-width: 1024px) and (min-width: 970px){
}
@media screen and (max-width: 970px){
#column-left {display: none;}
}
@media screen and (max-width: 870px) and (min-width:750px){
}
@media screen and (max-width:750px) and (min-width:680px){
}
@media screen and (min-width:320px) and (max-width: 480px) {
}
@media screen and (max-width: 380px) {
}
/*---- end Responsive base screen witdh ------- */
Tương tự như vậy, nếu là class thì các bạn biết là .class_name, còn nếu là ID thì các bạn viết là #ID_name và muốn bỏ ở phiên bản nào các bạn chỉ việc viết ở phiên bản đó như ở trên. Sau đó chúng ta co màn hình lại xem chúng đã biến mất hay chưa.
Những phần nào bạn quyết định bỏ đi chúng ta cũng làm tương tự.
Tôi quyết định bỏ đi một số nút bấm không cần thiết trên di động trên phần header của website nên tôi bỏ chúng đi như sau:
@media screen and (max-width: 970px){
#column-left, #cart, #welcome, .links{display: none;}
}
Nếu bạn nào không hiểu cách viết này hoặc cảm thấy nó rắc rồi bạn có thể viết từng ID/Class riêng như ở phần trên.
5. Bước 3: Tùy chỉnh lại giao diện website.
Sau khi bạn đã loại các thành phần thừa trên website, chúng ta sẽ sắp xếp lại những dữ liệu chưa hợp lý cũng như tùy chỉnh lại website sao cho hiển thị trên di động được đẹp hơn, tránh tình trạng đẩy dữ liệu dẫn đến phình to kích thước rồi lại tăng chiều rộng...
Trước tiên, ở bước trên tôi đã loại đi cột trái của mình, nội dung ở cột trái không còn chỉ còn mỗi cột phải nên tôi sẽ đẩy cột phải sử dụng 100% kích thước màn hình và bỏ đi những css có liên quan đến cột trái. Tôi thực hiện như sau:
@media screen and (max-width: 970px){
#column-left, #cart, #welcome, .links{display: none;}
#column-left + #column-right + #content-home, #column-left + #content-home{width: 100%; margin:0;}
}
Giờ cột trái của tôi đã biến mất và lấp đầy màn hình là phần nội dung chính của mình.
Bạn thấy ở ảnh chụp màn hình ở trên, phần thanh cuộn ngang vẫn còn. Đó là do các thành phần trong dữ liệu (ở đây là sản phẩm) được sắp xếp cạnh nhau đã đẩy chiều rộng của khối chính lên dẫn đến vẫn có thanh cuộn. Tôi sẽ tiếp tục chỉnh sửa nó để khi màn hình co lại dữ liệu sẽ tự động bị đẩy xuống dòng dưới như sau:
.box-product > div{float: left;}
Những thứ còn lại tùy theo yêu cầu của website bạn mà bạn tự chỉnh sửa nhé.
6. Bước 4: Menu
Do bản chất của menu trên giao diện cho điện thoại sẽ nhỏ hơn và có thể thay đổi cho phù hợp với kích thước của màn hình nên chúng ta có thể sẽ phải thiết kế lại menu. Giải pháp đơn giản cho chúng ta là sử dụng một menu có thể tùy biến cho điện thoại sẵn, chúng ta chỉ việc sử dụng lại nó và tùy chỉnh CSS sao cho giống với phiên bản gốc của chúng ta là được. Nếu bạn muốn tự tạo menu theo ý mình, bạn có thể đọc thêm (Hướng dẫn tạo menu responsive với CSS)
Để tiết kiệm thời gian tôi sử dụng slimMenu và tùy chỉnh lai giao diện mà thôi. Hướng dẫn đã có đầy đủ rồi. Bạn chịu khó đọc nhé. Chỉ cần làm theo hướng dẫn và thay CSS của nó bằng CSS cũ của bạn là được thôi.
7. Bước 5: Xem lại và hoàn tất
Sau khi chỉnh sửa những yếu tố trên giao diện cho phù hợp và xem xét trên nhiều kích thước di động khác nhau, thực hiện những tùy chỉnh trên những kích thước đó sao cho phù hợp với người dùng tôi kiểm tra lại bằng công cụ của Google. Kết quả rất đáng để tự hào:
Phần bài viết của tôi hướng dẫn cho các bạn thực hiện tối ưu hóa cho thân thiện với thiết bị di động đến đây là kết thúc. Tôi cũng lưu ý với các bạn rằng phương pháp mà tôi trình bày dưới đây là phương pháp chữa cháy. Để thực hiện một phiên bản responsive hoàn chỉnh bạn cần rất nhiều trải nghiệm của người dùng và tính mĩ thuật cho từng thiết kế trên điện thoại.
Trong khi chờ đợi điều đó đến, với một chút kiến thức về CSS, HTML bạn hoàn toàn có thể tự mình thực hiện việc này dễ dàng để giúp tăng trải nghiệm người dùng điện thoại và thêm một yếu tố có lợi đối với công cụ tìm kiếm.
Nguồn: vnwebmaster.com
Tác giả:
quanly
|
Đăng lúc: 08/04/15 23:23 |
Lần sửa cuối: 08/04/15 23:23 |
Số lượt xem: 5,642