Responsive web design

2,537 views

Published on

Responsive Web Design and TYPO3

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,537
On SlideShare
0
From Embeds
0
Number of Embeds
118
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive web design

  1. 1. Responsive Design and TYPO3 Part1 Sophy (sophy@web-essentials.asia) @psophy http://www.typo3cambodia.org
  2. 2. 2
  3. 3. Introduction 3
  4. 4. Adaptive(Multiple Fixed Width Layouts) or Responsive(Multiple Fluid Grid Layouts) 4
  5. 5. Mixed ApproachFixed width for large and medium. Fluid width for small. 5
  6. 6. Mixed ApproachFixed width for large and medium. Fluid width for small. 6
  7. 7. Who is using it? 7
  8. 8. www.barackobama.com http://www.barackobama.com/ 8
  9. 9. www.smashingmagazine.comhttp://www.smashingmagazine.com/ 9
  10. 10. www.bostonglobe.com http://www.bostonglobe.com 10
  11. 11. Other sites● http://css-tricks.com/HER● http://webdesignerwall.com/● For more http://mediaqueri.es/ 11
  12. 12. Responsive Web Design● Key Elements of Responsive Web Design ● Flexible Layout ● Flexible Images ● Media Queries 12
  13. 13. Flexible Layout First step considered for responsive design is flexible layout. As the browser width changes, fluid grids will resize and reposition the content as necessary.● http://cssgrid.net● Twitter bootstrap (Fluid Layout http://goo.gl/5l18o) 13
  14. 14. Flexible Images● 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%; }● Fluid image1. http://unstoppablerobotninja.com/entry/fluid-images/2. http://www.alistapart.com/articles/fluid-images/ 14
  15. 15. 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 15
  16. 16. How we use it? /* 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) { ... } 16
  17. 17. Frameworks (save time) orRoll Your Own (more control) 17
  18. 18. Framework forResponsive Web Design 18
  19. 19. Bootstrap, from Twitter● Simple, fluid HTML/CSS/JS framework from Twitter● http://twitter.github.com/bootstrap/ 19
  20. 20. Foundation● The most advanced responsive front-end framework in the world.● http://foundation.zurb.com/ 20
  21. 21. 1140 CSS GRID● The 1140 grid fits perfectly into a 1280 monitor...● http://cssgrid.net/ 21
  22. 22. Other frameworks● http://stuffandnonsense.co.uk/projects/320andup/● http://framelessgrid.com/● http://lessframework.com/● http://www.amazium.co.uk/ 22
  23. 23. Example 23
  24. 24. Example Hint● 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 Less ● http://lesscss.org ● For Unix (http://htmlrockstars.com/blog/installing-less-css-on-ubuntu/) ● For Windows(http://crunchapp.net/)● 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]--> 24
  25. 25. Next KTUG Meeting(Integrate TYPO3) 25
  26. 26. Resource:● 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) 26
  27. 27. Q&A 27

×