Hướng dẫn chỉnh sửa website thân thiện với điện thoại di động

Có lẽ việc thực hiện phiên bản dành cho điện thoại di động đang trở thành cơn "sốt xình xịch" mấy ngày nay đối với nhiều bạn khi Google thông báo thuật toán mới có liên quan đến sự thân thiện trên thiết bị di động (Thuật toán Google’s Mobile-Friendly sẽ có tác động mạnh hơn Panda, Penguin) và thậm chí có ảnh hưởng rất nhiều.

Là một người làm SEO, độ ảnh hưởng của thuật toán đối với kết quả trên SERP là mối quan tâm hàng đầu của nhiều bạn, đặc biệt là khi bạn nhận được một cảnh báo như thế này trong thời gian gần đây:

​

Nếu doanh nghiệp bạn có trong tay một lập trình viên, mọi chuyện sẽ trở nên đơn giản. Nếu trong tay bạn không có một lập trình viên, bạn lại không thể thuê bên ngoài chỉnh sửa website của mình vì nhiều yếu tố chủ quan và khách quan, bạn chỉ có thể "vượt lên chính mình" mà thôi. Bài viết này của tôi không có tham vọng biến bạn thành một chuyên gia tùy chỉnh website trên di động(thường được gọi là responsive - trong bài này đôi lúc tôi sẽ dùng từ này thay thế do nó là từ chuyên ngành), bài viết này cung cấp cho bạn những kiến thức và phương pháp đơn giản mang tính "chữa cháy" để website của bạn có thể thân thiện hơn với thiết bị di động. Còn việc làm như thế nào cho đẹp, cho tiện dụng cho người dùng bài viết này không nhắm đến.

1. Bạn phải bắt đầu từ đâu ?

Điểm để bạn bắt đầu là chuẩn bị đầy đủ "đồ chơi" cho một buổi nghiên cứu và tùy chỉnh website của mình. Bạn cần có một vài công cụ sau đây:

1. Editor: có thể là phần mềm Adobe Dreamweaver, một công cụ mới được biết đến gần đây mà tôi cũng rất thích là Sublime Text - cái này vừa nhẹ lại vừa có bản miễn phí rất phù hợp. Ngoài ra bạn có thể sử dụng Notepad nếu khả năng của bạn cho phép.
2. Các tài khoản truy cập: để có thể chỉnh sửa được source code bạn cần có tài khoản FTP, tài khoản admin (nếu admin có thể chỉnh sửa được các thẻ meta).
3. Các công cụ kiểm tra: Google đã cung cấp cho bạn công cụ kiểm tra tính tương thích với mobile
   Mã:

   https://www.google.com/webmasters/tools/mobile-friendly/

   , ngoài ra bạn có những công cụ khác để kiểm tra (11 công cụ hữu ích cho bạn làm Responsive Web Design)
   Mã:

   http://vnwebmaster.com/html-vs-browser/11684-11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design.html

   . Trong bài viết này tôi sẽ dựa vào công cụ của Google là chủ yếu, những công cụ khác để bạn tham khảo nếu cần.
4. Website của bạn: để trực quan, tôi sẽ thực hiện những bước đơn giản trên một website mà lâu rồi tôi không sử dụng đến và đang mắc lỗi tối ưu với thiết bị di động. Bạn có thể vừa đọc vừa thực hiện trên website của mình.

2. Bắt đầu như thế nào ?

Trước tiên, bạn cần xác định xem website của mình đang gặp những vẫn đề gì và cần khắc phục những gì để thân thiện với công cụ tìm kiếm. Tôi sử dụng công cụ kiểm tra của Google mà tôi đã nói ở trên và nhập URL của mình vào để xem kết quả kiểm tra:

​

Như bạn thấy, website tôi gặp rất nhiều vấn đề:

• Chữ quá nhỏ để đọc.
• Chưa đặt cửa sổ xem thiết bị di động.
• Các liên kết quá gần nhau.
• Nội dung rộng hơn màn hình.

Bạn phải bình tĩnh và đừng nhìn vào những lỗi này, có khi sau khi thực hiện những điều cơ bản những lỗi này sẽ tự động biến mất. Điều quan trọng ở đây là chúng ta xác định những lỗi nào đang tồn tại và lỗi lớn nhất là:nội dung rộng hơn màn hình nên người dùng không thể xem được website một cách tự nhiên trên di động.

Do đó, chúng ta bắt tay vào việc xây dựng phiên bản tùy biến cho di động ([Cơ bản]Hướng dẫn chỉnh sửa website thân thiện với điện thoại di động).

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:

Mã:

<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:

Mã:

/******** 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ã:

http://resizemybrowser.com/

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:

Mã:

<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:

Mã:

/******** 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:

Mã:

@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:

Mã:

@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:

Mã:

.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

Mã:

http://vnwebmaster.com/html-vs-browser/16413-huong-dan-tao-menu-responsive-voi-css.html

)

Để 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 : của bác Nguyễn Duy Nhân - vnwebmaster.com

Mã:

http://vnwebmaster.com/html-vs-browser/19145-co-ban-huong-dan-chinh-sua-website-than-thien-voi-dien-thoai-di-dong.html

 

quá bài bản và chi tiết, tuy nhiên cách này chỉ áp dụng với những ai am hiểu về code còn phần lớn dùng worpress thì dùng wptouch là đủ

 

web em đang làm thì cũng chưa có giao diện thân thiện với mobile , mã nguồn cũng không có theme responsive
muốn chỉ sửa giao diện thì phải sửa code mà em lại không biết gì về mảng này cả
em dang tìm coder để thiết kế lại giao diện mà chưa tìm được ạ

 

Bài viết của bác chi tiết quá. E không hiểu lắm về code nhưng cũng thấy đơn giản vs sẽ thử áp dụng cho 1 vài site vệ tinh bằng cách bác hướng dẫn xem sao, thành công thì hay quá.

 

Đây chỉ là bài hướng dẫn cơ bản cho các bạn không rành mấy về code, bài này chỉ cho các bạn cách set cho giao diện điện thoại và tắt bớt chức năng không cần thiết để web chạy trên thiết bị di động phù hợp hơn thôi .

 

làm như vậy là được hở bạn, mình cứ tưởng là phải code rất nhiều cơ chứ

 

Web mình cũng bị thông báo lỗi không thân thiện với di động, mấy ngày này đang lò mò làm để khắc phục lỗi này

 

Mình đang làm 2 Website cũng đang bị google nhắc nhở về tính thân thiện với Mobile, mà khổ nỗi không có thông tin host

 

Đúng chỗ ngứa, thanks bác chủ nhé, đọc một số bài khác mà em chẳng hieủe gì, vì ko phải dân code, nay ok luôn, voka cụ

 

Mình test và thấy kết quả là thân thiện với điện thoại. Vậy có cần chỉnh sữa gì thêm không