Describe about RWD concepts and also show website case study.

1. Introduction to Responsive Web
Design
Ekkasit Srisukha
16-Dec-2013
@Dhurakij Pundit University

2. 2Introduction to Responsive Web Design

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. Responsive Website
4Introduction to Responsive Web Design

5. What’s Responsive Web Design
 Responsive design means,Website
automatically fits in the user’s device
5Introduction to Responsive Web Design

6. Responsive Website
http://mattkersley.com/responsive/?http://www.dealfish.co.th
6Introduction to Responsive Web Design

7. Non Responsive Website
http://mattkersley.com/responsive/?http://www.sanook.com
7Introduction to Responsive Web Design

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. Advantage Cont.
 Web Designer
◦ Simplifies the designing process
◦ Save time and efforts
◦ Minimizes maintenance and development cost
9Introduction to Responsive Web Design

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. Big Question?
Introduction to Responsive Web Design 11

12. Good Luck!
12Introduction to Responsive Web Design

13. Popular Frameworks
Twitter Bootstrap (Very Popular!)
13Introduction to Responsive Web Design

14. Popular Frameworks
Foundation
14Introduction to Responsive Web Design

15. Popular Frameworks
PureCSS
15Introduction to Responsive Web Design

16. Some Responsive Sites:
Wongnai
www.wongnai.com
16Introduction to Responsive Web Design

17. Some Responsive Sites:
Samyarn
samyarn.com
17Introduction to Responsive Web Design

18. Some Responsive Sites:
Time
www.time.com
18Introduction to Responsive Web Design

19. Some Responsive Sites:
Food Sense
http://foodsense.is
19Introduction to Responsive Web Design

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. Any Question Please
ThankYou
21Introduction to Responsive Web Design