Approach to Responsive Web Design - Part 1

1. Hải Trần Tháng 7/2014 RESPONSIVE WEB DESIGN

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.

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/

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.

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%

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

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 ﬁrst •  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ì?

26. Tiếp cận RWD Trần Trương Long Hải •  Fluid, propor[on-‐based grids % widths, not ﬁxed pixels •  Flexible images width/height not ﬁxed •  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 Speciﬁc styles for certain sizes and ranges •  Gọi CSS từ ﬁle 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ừ ﬁle 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

34. Frameworks & Tools Trần Trương Long Hải Golden Grid System h”p://goldengridsystem.com/

35. Frameworks & Tools Trần Trương Long Hải RESPONSIVE GRID SYSTEM h”p://responsive.gs/

36. Frameworks & Tools Trần Trương Long Hải Gumby Framework h”p://gumbyframework.com/

37. Frameworks & Tools Trần Trương Long Hải Founda[on h”p://founda]on.zurb.com/

38. Frameworks & Tools Trần Trương Long Hải Bootstrap h”p://getbootstrap.com/

39. Frameworks & Tools Trần Trương Long Hải Pure h”p://purecss.io/

40. Questions & Answers Trần Trương Long Hải

41. Xin cảm ơn Trần Trương Long Hải

Approach to Responsive Web Design - Part 1

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (20)

Similar to Approach to Responsive Web Design - Part 1

Similar to Approach to Responsive Web Design - Part 1 (20)

More from Hải Trần

More from Hải Trần (9)

Approach to Responsive Web Design - Part 1