Tối ưu CSS cho mobile như thế nào?

Chào các bạn,

Hôm nay mình xin giới thiệu với các bạn một kỹ thuật bắt google bots và select url file css mà các bạn đã tối ưu hóa theo chuẩn mobile friendly.

Ngoài cách mà mình hướng dẫn bên dưới, còn rất nhiều cách mà các bạn có thể làm, nếu có cách nào hay hơn thì hãy comment nhé, mình cảm ơn trước :)

seo-css-mobile

Tối ưu CSS Mobile

Nhiệm vụ của chúng ta sẽ có 2 phần:

  1. Bắt user agent
  2. Lấy file css từ server

Một tag CSS thông thường sẽ có định dạng như thế này:

<link rel="stylesheet" type="text/css" media="all" href="" />

Giờ cái ta quan tâm là chỗ href=”". Vậy giờ tui muốn khi google bots smartphone vào website thì xuất ra url file css cho mobile, còn không thì xuất file css bình thường.

Và đoạn PHP làm chuyện này sẽ như sau:

<?php
if(preg_match('/(symbian|smartphone|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
echo "**file a**";
}
else {
echo "**file b**";
}
?>

Tôi xin giải thích một vài tham số trong đoạn code trên như sau:
1)hàm preg_match: hàm này có công dụng là tìm chuỗi a trong chuỗi b, nếu có thì trả về true, nếu không trả về false
2)hàm strtolower: hàm này có chức năng convert ký tự hoa thành ký tự thường

P/s: Còn Echo, http_user_agent và if – else thì dễ rầu he. Vậy bao quát đoạn code trên có ý nghĩa gì? Nếu tìm trong
user_agent của trình duyệt là bots của smartphone thì xuất ra file a, ngc lại thì xuất file b

Chèn vào tag link như thế nào?

<link rel="stylesheet" type="text/css" media="all" href="<?php
if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', 
strtolower($_SERVER['HTTP_USER_AGENT']))) {
echo "**file a**";
}
else {
echo "**file b**";
}
?>" />

Ở bài viết này tôi không đi vào quá chi tiết của việc CSS cho Mobile vì nó thuộc bộ phận thiết kế web, nhưng tôi cũng nêu ra một số định dạng thông dụng và chuẩn nhất để các bạn có thể tối ưu CSS cho Mobile

  • Một vài định dạng cơ bản:
    html, body {
    	background: #fff;
    	padding: 3px;
    	color: #000;
    	margin: 0;
    }
  • Không có thuộc tính float như browser:

    * {
    	float: none;
    }
  • Có thể ẩn:
    #sidebar, #footer {
    	display: none;
    }
  • Kiểu chữ thường cho tất cả heading
    h1, h2, h3, h4, h5, h6 {
    	font-weight: normal;
    }
  • Kích thước hình phải giới hạn:
    #content img {
    	max-width: 250px;
    }
  • Tất cả nội dung phải canh giữa:
    .center {
    	width: 100% !important;
    	text-align: center;
    }
  • Định dạng link chuẩn CSS Mobile:
    a:link, a:visited {
    	text-decoration: underline;
    	color: #0000CC;
    }
    
    a:hover, a:active {
    	text-decoration: underline;
    	color: #660066;
    }
  • Những thuộc tính riêng của từng loại smartphone (iphone CSS)
    @media only screen and (max-device-width: 480px) {
    	html {
    		-webkit-text-size-adjust: none;
    	}
    }

 

About Trọng Khiêm

Chào các bạn, mình là Khiêm. Niềm đam mê của mình là SEO và Website Deverloper, rất vui khi được làm quen với tất cả các bạn. Nếu cần hỗ trợ, hãy mail cho mình: buitrongkhiem2010@gmail.com Mình sẽ tư vấn SEO tổng thể website, On Page, Off Page hoặc tư vấn chiến lược khôi phục Website sau khị dính thuật toán của Google. :)
This entry was posted in Thảo Luận SEO. Bookmark the permalink.

One Response to Tối ưu CSS cho mobile như thế nào?

  1. Pingback: Chiến lược SEO cho Mobile và Tablets

Gửi phản hồi

Bài viết này thuộc về Bùi Trọng Khiêm - ©hocseodelam 2013