2. Thông tin liên lạc
Trần Trương Long Hải
Trần
Trương
Long
Hải
0984.000.640
haitran.pm@gmail.com
3. Nội dung chính
1. Thế nào là thiết kế web tương thích – Responsive
Web Design?
2. Một vài ví dụ
3. Cách hoạt động
4. 5 lý do bạn nên dùng RWD trong dự án sắp tới của mình
5. Lợi ích
6. Chuẩn bị gì trước khi bắt đầu?
7. Tiếp cận RWD
8. Bài tập đầu tiên
9. Frameworks & Tools
Trần Trương Long Hải
4. Responsive Web Design
Trần Trương Long Hải
Là cách thiết kế website để hiển thị
phù hợp trên tất cả các thiết bị, mọi
độ phân giải màn hình mà không
cần xử lý mã nguồn quá nhiều.
5. Nội dung chính
1. Thế nào là thiết kế web tương thích – Responsive Web Design?
2. Một vài ví dụ
3. Cách hoạt động
4. 5 lý do bạn nên dùng RWD trong dự án sắp tới của mình
5. Lợi ích
6. Chuẩn bị gì trước khi bắt đầu?
7. Tiếp cận RWD
8. Bài tập đầu tiên
9. Frameworks & Tools
Trần Trương Long Hải
6. Một vài ví dụ
Trần Trương Long Hải
h/p://www.nokia.com/vn-‐vi/
7. Một vài ví dụ
Trần Trương Long Hải
h/p://webdesign.tutsplus.com/
8. Một vài ví dụ
Trần Trương Long Hải
h/p://news.zing.vn/
9. Nội dung chính
1. Thế nào là thiết kế web tương thích – Responsive Web Design?
2. Một vài ví dụ
3. Cách hoạt động
4. 5 lý do bạn nên dùng RWD trong dự án sắp tới của mình
5. Lợi ích
6. Chuẩn bị gì trước khi bắt đầu?
7. Tiếp cận RWD
8. Bài tập đầu tiên
9. Frameworks & Tools
Trần Trương Long Hải
10. RWD hoạt động như thế nào?
Trần Trương Long Hải
1.
Website
sẽ
xác
định
kích
thước
màn
hình
thiết
bị
của
người
dùng.
2.
Điều
chỉnh
nội
dung
trên
website
giãn
ra
hoặc
co
vào.
3.
Hình
ảnh
trên
website
cũng
thay
đổi
kích
thước
để
phù
hợp
với
màn
hình.
11. Nội dung chính
1. Thế nào là thiết kế web tương thích – Responsive Web Design?
2. Một vài ví dụ
3. Cách hoạt động
4. 5 lý do bạn nên dùng RWD trong dự án sắp tới của mình
5. Lợi ích
6. Chuẩn bị gì trước khi bắt đầu?
7. Tiếp cận RWD
8. Bài tập đầu tiên
9. Frameworks & Tools
Trần Trương Long Hải
12. Tại sao tôi phải dùng RWD?
Trần Trương Long Hải
người
]êu
dùng
chuyển
sang
website
của
đối
thủ
cạnh
tranh
–
nơi
mà
họ
dễ
dàng
truy
cập
nội
dung
bằng
thiết
bị
di
động.
40%
13. Tại sao tôi phải dùng RWD?
Trần Trương Long Hải
website
không
dùng
RWD
không
hiển
thị
chính
xác
thiết
kế
trên
thiết
bị
di
động
93%
14. Tại sao tôi phải dùng RWD?
Trần Trương Long Hải
Responsive
websites
chỉ
có
1
URL
duy
nhất
và
1
mã
HTML
trên
tất
cả
các
thiết
bị.
Điều
này
khiến
cho
Google
crawl
dữ
liệu,
index
và
organise
content
một
cách
dễ
dàng
-‐>
Tốt
khi
làm
SEO
Khuyến
cáo
sử
dụng
bởi
Google
15. Tại sao tôi phải dùng RWD?
Trần Trương Long Hải
thiết
bị
di
động
trên
toàn
thế
giới
và
con
số
này
ngày
càng
tăng.
6 tỷ
16. Tại sao tôi phải dùng RWD?
Trần Trương Long Hải
Người
dùng
smartphones
sử
dụng
thiết
bị
di
động
của
mình
để
ym
kiếm
thông
]n
mua
sắm,
ăn
uống,
giải
trí…
95%
17. Nội dung chính
1. Thế nào là thiết kế web tương thích – Responsive Web Design?
2. Một vài ví dụ
3. Cách hoạt động
4. 5 lý do bạn nên dùng RWD trong dự án sắp tới của mình
5. Lợi ích
6. Chuẩn bị gì trước khi bắt đầu?
7. Tiếp cận RWD
8. Bài tập đầu tiên
9. Frameworks & Tools
Trần Trương Long Hải
18. Những lợi ích của RWD
Trần Trương Long Hải
Cải
thiện
SEO
Nhiều
trình
duyệt
hỗ
trợ
Tiết
kiệm
chi
phí
Hiệu
suất
hoạt
động
cao
hơn
Tiết
kiệm
thời
gian
19. Nội dung chính
1. Thế nào là thiết kế web tương thích – Responsive Web Design?
2. Một vài ví dụ
3. Cách hoạt động
4. 5 lý do bạn nên dùng RWD trong dự án sắp tới của mình
5. Lợi ích
6. Chuẩn bị gì trước khi bắt đầu?
7. Tiếp cận RWD
8. Bài tập đầu tiên
9. Frameworks & Tools
Trần Trương Long Hải
20. Chuẩn bị trước khi bắt đầu
Trần Trương Long Hải
Trở
ngại
cần
xem
xét
• Phức
tạp
hơn
trong
quá
trình
xây
dựng,
nhưng
chi
phí
duy
trì
thấp.
• Vẫn
còn
một
số
nền
tảng
cũ
chưa
hỗ
trợ,
nhưng
sẽ
sớm
được
nâng
cấp.
• Responsive
Design
phải
được
lập
kế
hoạch
ngay
từ
đầu.
• Responsive
Design
không
có
nghĩa
là
design
sẽ
giống
nhau
trên
tất
cả
các
nền
tảng.
21. Chuẩn bị trước khi bắt đầu
Trần Trương Long Hải
Mức
độ
phức
tạp
nội
dung
website
22. Chuẩn bị trước khi bắt đầu
Trần Trương Long Hải
Các
loại
nội
dung
• Text
• Images
• Video
• Page
templates
• Sharing/social
• Forms
• Tables
23. Chuẩn bị trước khi bắt đầu
Trần Trương Long Hải
Mobile
first
• Sự
bùng
nổ
của
thiết
bị
di
động.
• Các
thiết
bị
di
động
đòi
hỏi
bạn
phải
ưu
]ên
tập
trung
phát
triển
những
•nh
năng
thật
sự
cần
thiết
cho
website
của
mình.
• Thiết
bị
di
động
mở
rộng
khả
năng
tương
tác
với
người
dùng.
24. Chuẩn bị trước khi bắt đầu
Trần Trương Long Hải
Hãy hiểu người dùng muốn gì?
25. Nội dung chính
1. Thế nào là thiết kế web tương thích – Responsive Web Design?
2. Một vài ví dụ
3. Cách hoạt động
4. 5 lý do bạn nên dùng RWD trong dự án sắp tới của mình
5. Lợi ích
6. Chuẩn bị gì trước khi bắt đầu?
7. Tiếp cận RWD
8. Bài tập đầu tiên
9. Frameworks & Tools
Trần Trương Long Hải
26. Tiếp cận RWD
Trần Trương Long Hải
• Fluid,
propor[on-‐based
grids
%
widths,
not
fixed
pixels
• Flexible
images
width/height
not
fixed
• CSS3
Media
Queries
@media
rule
27. Tiếp cận RWD
Trần Trương Long Hải
Fluid
Grids
Scales
to
the
width
of
the
browser
/
device
28. Tiếp cận RWD
Trần Trương Long Hải
Flexible
images
Scales
to
the
width
of
the
browser
/
device
29. Tiếp cận RWD
Trần Trương Long Hải
Media
Queries
Specific
styles
for
certain
sizes
and
ranges
• Gọi
CSS
từ
file
bên
ngoài
• Cấu
trúc
CSS
30. Tiếp cận RWD
Trần Trương Long Hải
Media
Queries
Gọi
CSS
từ
file
bên
ngoài
31. Tiếp cận RWD
Trần Trương Long Hải
Media
Queries
Cấu
trúc
Media
Queries
32. Nội dung chính
1. Thế nào là thiết kế web tương thích – Responsive Web Design?
2. Một vài ví dụ
3. Cách hoạt động
4. 5 lý do bạn nên dùng RWD trong dự án sắp tới của mình
5. Lợi ích
6. Chuẩn bị gì trước khi bắt đầu?
7. Tiếp cận RWD
8. Bài tập đầu tiên
9. Frameworks & Tools
Trần Trương Long Hải
33. Nội dung chính
1. Thế nào là thiết kế web tương thích – Responsive Web Design?
2. Một vài ví dụ
3. Cách hoạt động
4. 5 lý do bạn nên dùng RWD trong dự án sắp tới của mình
5. Lợi ích
6. Chuẩn bị gì trước khi bắt đầu?
7. Tiếp cận RWD
8. Bài tập đầu tiên
9. Frameworks & Tools
Trần Trương Long Hải