Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Approach to Responsive Web Design - Part 1

764 views

Published on

Cái nhìn tổng quan về thiết kế tương tác và cách tiếp cận.

Published in: Design
  • Responsive design framework holds a vital ingredient in developing a web application effectively. With its effective portability with the screen resolution, end-user can enjoy the benefit by using the website on any kind of display devices without minding up the screen resolution. this effective presentation assist the users to explore more about the responsive design layout and its salient features.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Approach to Responsive Web Design - Part 1

  1. 1. Hải Trần Tháng 7/2014 RESPONSIVE WEB DESIGN
  2. 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. 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. 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. 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. 6. Một vài ví dụ Trần Trương Long Hải h/p://www.nokia.com/vn-­‐vi/  
  7. 7. Một vài ví dụ Trần Trương Long Hải h/p://webdesign.tutsplus.com/  
  8. 8. Một vài ví dụ Trần Trương Long Hải h/p://news.zing.vn/  
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. Tiếp cận RWD Trần Trương Long Hải Fluid  Grids   Scales  to  the  width  of  the  browser  /  device  
  28. 28. Tiếp cận RWD Trần Trương Long Hải Flexible  images   Scales  to  the  width  of  the  browser  /  device  
  29. 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. 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. 31. Tiếp cận RWD Trần Trương Long Hải Media  Queries   Cấu  trúc  Media  Queries  
  32. 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. 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
  34. 34. Frameworks & Tools Trần Trương Long Hải Golden  Grid  System   h”p://goldengridsystem.com/  
  35. 35. Frameworks & Tools Trần Trương Long Hải RESPONSIVE  GRID  SYSTEM   h”p://responsive.gs/  
  36. 36. Frameworks & Tools Trần Trương Long Hải Gumby  Framework   h”p://gumbyframework.com/  
  37. 37. Frameworks & Tools Trần Trương Long Hải Founda[on   h”p://founda]on.zurb.com/  
  38. 38. Frameworks & Tools Trần Trương Long Hải Bootstrap   h”p://getbootstrap.com/  
  39. 39. Frameworks & Tools Trần Trương Long Hải Pure   h”p://purecss.io/  
  40. 40. Questions & Answers Trần Trương Long Hải
  41. 41. Xin cảm ơn Trần Trương Long Hải

×