Responsive Web Design On Student's day

941 views
844 views

Published on

Published in: Education, Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
941
On SlideShare
0
From Embeds
0
Number of Embeds
122
Actions
Shares
0
Downloads
10
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design On Student's day

  1. 1. Responsive Web Design by Sophy Prak
  2. 2. Sophy Prak Web Developer - Web Essentials Member of KTUG(typo3cambodia.org)Photo: http://goo.gl/Et5Py
  3. 3. Introduction● May 25th, 2010 Ethan Marcotte has wrote article “Responsive Web Design” (http://goo.gl/BLQMe)● Jun 18, 2010 SIMON COLLISON updated his blog with media queries(colly.com) 3
  4. 4. 4
  5. 5. Adaptive(Multiple Fixed Width Layouts) or Responsive(Multiple Fluid Grid Layouts) 5
  6. 6. Mixed ApproachFixed width for large and medium Fluid width for small 6
  7. 7. Why do we use Responsive Web Design? 7
  8. 8. Should we create sub-domain and design layout for each devices? 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. 12
  13. 13. Answer NO! 13
  14. 14. “Day by day, the number of devices, platforms,and browsers that need to work with your sitegrows. Responsive web design represents afundamental shift in how we’ll build websitesfor the decade to come.” - Jeffrey Veen 14
  15. 15. “Responsive design will become even better aswe get tools, like Flexible Box and the GridLayout spec” - Eric Meyer 15
  16. 16. One site for every screen - John Polacek 16
  17. 17. Who is using it? 17
  18. 18. london.msn.co.ukhttp://www.barackobama.com/ 18
  19. 19. www.barackobama.comhttp://www.barackobama.com/ 19
  20. 20. www.smashingmagazine.comhttp://www.smashingmagazine.com/ 20
  21. 21. www.bostonglobe.comhttp://www.bostonglobe.com 21
  22. 22. Other sites● http://css-tricks.com/● http://webdesignerwall.com/● For more http://mediaqueri.es/ 22
  23. 23. Responsive Web Design● Key Elements of Responsive Web Design ● Flexible Layout ● Flexible Images and Media ● Media Queries 23
  24. 24. Flexible LayoutFirst step considered for responsive design is flexible layout. As the browserwidth changes, fluid grids will resize and reposition the content asnecessary. 24
  25. 25. Flexible Images and Media● Adjusting images according to the different screen widths or devices is another important aspect of responsive web design img, embed, video, object{ max-width: 100%; }● Tutorial fluid image1. http://unstoppablerobotninja.com/entry/fluid-images/2. http://www.alistapart.com/articles/fluid-images/ 25
  26. 26. Media Queries● In CSS2 you was able to apply specific stylesheet for specify media type like screen or print.● In CSS3, W3C made it more efficient by adding media queries made it as part of the CSS3 specification 26
  27. 27. How we use media queries? 27
  28. 28. Media Queries Conditions/* Landscape phones and down */@media (max-width: 480px) { ... }/* Landscape phone to portrait tablet */@media (max-width: 767px) { ... }/* Portrait tablet to landscape and desktop */@media (min-width: 768px) and (max-width: 979px) { ... }/* Large desktop */@media (min-width: 1200px) { ... } Source of Twitter Bootstrap 28
  29. 29. /* Landscape phones and down */@media (max-width: 480px) { ... } 29
  30. 30. /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } 30
  31. 31. /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } 31
  32. 32. /* Large desktop */ @media (min-width: 1200px) { ... } 32
  33. 33. Frameworks (save time) orRoll Your Own (more control) 33
  34. 34. Framework forResponsive Web Design 34
  35. 35. Bootstrap, from Twitter● Simple, fluid HTML/CSS/JS framework from Twitter● http://twitter.github.com/bootstrap/ 35
  36. 36. Foundation● The most advanced responsive front-end framework in the world.● http://foundation.zurb.com/ 36
  37. 37. 1140 CSS GRID● The 1140 grid fits perfectly into a 1280 monitor...● http://cssgrid.net/ 37
  38. 38. Other frameworks● http://stuffandnonsense.co.uk/projects/320andup/● http://framelessgrid.com/● http://lessframework.com/● http://www.amazium.co.uk/ 38
  39. 39. Tips● Meta viewport <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />● Use css3-mediaqueries.js for IE8 or older <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3- mediaqueries.js"></script> <![endif]--> 39
  40. 40. References● Responsive Web Design (http://goo.gl/BLQMe)● Designing for a Responsive Web (http://goo.gl/iK6dO)● Fluid Image (http://goo.gl/RvQlO)● More responsive tutorials (http://goo.gl/G75ov)● What the hack is Responsive Web Design(http://goo.gl/kUod7) 40
  41. 41. Q&A Contact me:sophy@web-essentials.asia @sophy http://kooms.info 41

×