How to web responsive
-
Upload
duy-nhan-nguyen -
Category
Education
-
view
562 -
download
8
description
Transcript of How to web responsive
![Page 1: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/1.jpg)
WEB RESPONSIVE & SEO(Website tùy biến và SEO)
![Page 2: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/2.jpg)
![Page 3: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/3.jpg)
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
![Page 4: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/4.jpg)
Cách 1
Viết code nhận diện thiết bị.
Có tốt cho SEO?
![Page 5: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/5.jpg)
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.
![Page 6: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/6.jpg)
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.
![Page 7: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/7.jpg)
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
![Page 8: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/8.jpg)
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]-->
![Page 9: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/9.jpg)
Bước 2: Tạo viewpoint cho Table
Viewpoint < 960 -> Table@media only screen and (max-width: 960px){
styling goes here}
![Page 10: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/10.jpg)
Bước 2: Tạo viewpoint cho Mobile
Viewpoint < 524 -> Mobile@media only screen and (max-width: 524px){
styling goes here}
![Page 11: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/11.jpg)
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">
![Page 12: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/12.jpg)
Website minh họa
http://anhthethao.comhttp
://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-responsive-
website/
![Page 13: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/13.jpg)
WEB RESPONSIVE CÓ LỢI GÌ CHO SEO?
![Page 14: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/14.jpg)
• 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
![Page 15: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/15.jpg)
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
![Page 16: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/16.jpg)
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
![Page 17: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/17.jpg)
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ả
![Page 18: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/18.jpg)
• 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
![Page 19: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/19.jpg)
- 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
![Page 20: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/20.jpg)
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
![Page 21: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/21.jpg)
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
![Page 22: How to web responsive](https://reader035.fdocument.pub/reader035/viewer/2022062615/54898556b47959e70c8b59d1/html5/thumbnails/22.jpg)
Trần Kim Phụng
0918 157 690
www.kimthang.vn
CẢM ƠN