Introduction to responsive_web_design_16122013
Upcoming SlideShare
Loading in...5
×
 

Introduction to responsive_web_design_16122013

on

  • 89 views

Describe about RWD concepts and also show website case study.

Describe about RWD concepts and also show website case study.

Statistics

Views

Total Views
89
Views on SlideShare
87
Embed Views
2

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 2

http://www.slideee.com 2

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to responsive_web_design_16122013 Introduction to responsive_web_design_16122013 Presentation Transcript

  • Introduction to Responsive Web Design Ekkasit Srisukha 16-Dec-2013 @Dhurakij Pundit University
  • 2Introduction to Responsive Web Design
  • 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
  • Responsive Website 4Introduction to Responsive Web Design
  • What’s Responsive Web Design  Responsive design means,Website automatically fits in the user’s device 5Introduction to Responsive Web Design
  • Responsive Website http://mattkersley.com/responsive/?http://www.dealfish.co.th 6Introduction to Responsive Web Design
  • Non Responsive Website http://mattkersley.com/responsive/?http://www.sanook.com 7Introduction to Responsive Web Design
  • 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
  • Advantage Cont.  Web Designer ◦ Simplifies the designing process ◦ Save time and efforts ◦ Minimizes maintenance and development cost 9Introduction to Responsive Web Design
  • 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
  • Big Question? Introduction to Responsive Web Design 11
  • Good Luck! 12Introduction to Responsive Web Design
  • Popular Frameworks Twitter Bootstrap (Very Popular!) 13Introduction to Responsive Web Design
  • Popular Frameworks Foundation 14Introduction to Responsive Web Design
  • Popular Frameworks PureCSS 15Introduction to Responsive Web Design
  • Some Responsive Sites: Wongnai www.wongnai.com 16Introduction to Responsive Web Design
  • Some Responsive Sites: Samyarn samyarn.com 17Introduction to Responsive Web Design
  • Some Responsive Sites: Time www.time.com 18Introduction to Responsive Web Design
  • Some Responsive Sites: Food Sense http://foodsense.is 19Introduction to Responsive Web Design
  • 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
  • Any Question Please ThankYou 21Introduction to Responsive Web Design