Introduction to responsive_web_design_16122013

304 views

Published on

Describe about RWD concepts and also show website case study.

Published in: Software, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
304
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to responsive_web_design_16122013

  1. 1. Introduction to Responsive Web Design Ekkasit Srisukha 16-Dec-2013 @Dhurakij Pundit University
  2. 2. 2Introduction to Responsive Web Design
  3. 3. Applications  Native (IOS / Android) PROS ◦ User Experience ◦ Hardware Support CONS ◦ Multi-Platform ◦ Take more time to build ◦ More learning curve 3Introduction to Responsive Web Design
  4. 4. Responsive Website 4Introduction to Responsive Web Design
  5. 5. What’s Responsive Web Design  Responsive design means,Website automatically fits in the user’s device 5Introduction to Responsive Web Design
  6. 6. Responsive Website http://mattkersley.com/responsive/?http://www.dealfish.co.th 6Introduction to Responsive Web Design
  7. 7. Non Responsive Website http://mattkersley.com/responsive/?http://www.sanook.com 7Introduction to Responsive Web Design
  8. 8. Advantage  Improve User Experience ◦ Saves user’s time while browsing the site. ◦ Users are able to read information as per their needs and preferences. ◦ Look & Feel 8Introduction to Responsive Web Design
  9. 9. Advantage Cont.  Web Designer ◦ Simplifies the designing process ◦ Save time and efforts ◦ Minimizes maintenance and development cost 9Introduction to Responsive Web Design
  10. 10. Major Components  MetaTags ◦ A responsive designer needs to add these meta tags to make a website mobile optimized.  CSS3 Media Query ◦ Allow you to target CSS rules based on - for instance - screen size, device-orientation or display-density.  Grids ◦ A set of number of “columns” and “gutters” (margin) ◦ Default is 12 columns / screen ◦ Help more quick create page layout 10Introduction to Responsive Web Design
  11. 11. Big Question? Introduction to Responsive Web Design 11
  12. 12. Good Luck! 12Introduction to Responsive Web Design
  13. 13. Popular Frameworks Twitter Bootstrap (Very Popular!) 13Introduction to Responsive Web Design
  14. 14. Popular Frameworks Foundation 14Introduction to Responsive Web Design
  15. 15. Popular Frameworks PureCSS 15Introduction to Responsive Web Design
  16. 16. Some Responsive Sites: Wongnai www.wongnai.com 16Introduction to Responsive Web Design
  17. 17. Some Responsive Sites: Samyarn samyarn.com 17Introduction to Responsive Web Design
  18. 18. Some Responsive Sites: Time www.time.com 18Introduction to Responsive Web Design
  19. 19. Some Responsive Sites: Food Sense http://foodsense.is 19Introduction to Responsive Web Design
  20. 20. Conclusion  Design has to do with the format and the adaptability of the page  Smart website, Improve user satisfaction  Suitable for the contents website  Disadvantages ◦ Performance Issue ◦ Low-Level Hardware – GPS, Keypad, Camera ◦ Work well for uncomplicated website 20Introduction to Responsive Web Design
  21. 21. Any Question Please ThankYou 21Introduction to Responsive Web Design

×