5. Website hiển thị trên PC + Mobile
Cách 2
Sử 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.
6. 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.
7. 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
8. 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]-->
9. Bƣớc 2: Tạo viewpoint cho Table
Viewpoint < 960 -> Table
@media only screen and (max-
width: 960px){
styling goes here
}
10. Bƣớc 2: Tạo viewpoint cho Mobile
Viewpoint < 524 -> Mobile
@media only screen and (max-width:
524px){
styling goes here
}
11. 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">
14. • 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
15. 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
16. 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
17. 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ả
18. • 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
19. - 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
20. 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
21. 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
