how to web responsive
DESCRIPTION
TRANSCRIPT
WEB RESPONSIVE & SEO(Website tùy biến và SEO)
Tổng quan
- Web responsive là website có thể tự điều chỉnh kích thước tùy thuộc vào thiết bị hiển thị. - Có 2 cách làm
Cách 1
Viết code nhận diện thiết bị.
Có tốt cho SEO?
Website hiển thị trên PC + Mobile
Cách 2Sử dụng kỹ thuật CSS để tùy biến giao diện co giãn theo kích thước của cửa sổ trình duyệt.
CSS3 Media Queries
CSS3 Media Queries- Hiển thị linh hoạt hơn trên các loại thiết bị, không cần sử dụng mã javascript.
Kĩ thuật thiết kế này được gọi là Responsive Web Design - một chức năng giúp xác định và khoanh vùng chính xác thiết bị của người dùng, từ đó đưa ra stylesheet thích hợp, hiện nay được ứng dụng rất phổ biến trên thế giới.
Các bước thực hiện
Tag meta viewport là điều tất yếu trong responsive layouts. Nó thiết lập màn hình theo tỷ lệ 1×1, điều này sẽ loại bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay, thêm vào trong thẻ <head>.
HTML code:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Bước 1: Tạo Meta Tag
Trình duyệt IE8
Trình duyệt IE8 trở xuống không hỗ trợ media query. Bạn có thể sử dụng media-queries.js hoặc respond.js để hỗ trợ.HTML code:<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
Bước 2: Tạo viewpoint cho Table
Viewpoint < 960 -> Table@media only screen and (max-width: 960px){
styling goes here}
Bước 2: Tạo viewpoint cho Mobile
Viewpoint < 524 -> Mobile@media only screen and (max-width: 524px){
styling goes here}
Bước 3: Lưu vào file
Lưu tất cả đoạn CSS sau vào file mediaqueries.css
@media only screen and (max-width: 960px){
styling goes here
}
@media only screen and (max-width: 524px){
styling goes here
}
Thêm vào trong thẻ <head>:
HTML code: <link rel="stylesheet" href="mediaqueries.css">
Website minh họa
http://anhthethao.comhttp
://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-responsive-
website/
WEB RESPONSIVE CÓ LỢI GÌ CHO SEO?
• Time on site ít -> Website có nội dung không phù hợp với từ khóa.
• Giao diện mobile khác với giao diện trên PC
-> Mất khách truy cập cũ
• Không có phiên bản web dành cho mobile
-> Mất 61% khách truy cập.
Tối đa lượt truy cập
Khi người dùng search bằng thiết bị di động:
Google đánh giá cao những website có tối ưu cho di động
-> Website có thể co giãn theo màn hình.
Xếp hạng cho các tìm kiếm di động
CSS3 Media Queries- Một liên kết đến website chính cũng là một liên kết đến
website di động. -> Backlink Website tùy biến = Backlink Website thông thường trên PC.
Ưu điểm: Link building
Khi website đã được tối ưu cho thiết bị di động, lượng truy cập tháng có thể tăng lên đáng kể.
Kết quả
• Tốn thời gian và công sức• Lâu hơn làm website mới• Lập kế hoạch chi tiết trước khi làm
Mất nhiều thời gian và công sức
- Website có quá nhiều thông tin. - Khó tối ưu cho di động-> Phiên bản dành riêng cho thiết bị di động.
Website quá lớn
CSS3 Media Queries-> Website đơn giản.
Phiên bản web dành riêng cho mobile-> Website phức tạp và tương tác nhiều với người sử dụng như Facebook.
Ứng dụng
1. Tối ưu hình ảnh (Table/Mobile)
2. Thiết kế cho tất cả các kích cỡ màn hình(Các kích thước khác nhau của PC/Table/Mobile)
3. Có thể hiển thị tất cả nội dung(Đẩy QC xuống phía dưới)
4. Tối ưu hóa cho cảm ứng (Cảm ứng với mọi kích thước màn hình)
5. Đơn giản về kỹ thuật (Không sử dụng flash)
6. Kiểm tra với các trình duyệt khác nhau
Đôi điều lưu ý khi xây dựng website cho di động
Trần Kim Phụng
0918 157 690
www.kimthang.vn
CẢM ƠN