Responsive Web Design

Responsive Web Design and TYPO3. From https://thebestconsumerreports.com/

Transcript

1. Responsive Design and TYPO3 Part1 Sophy (sophy@web-essentials.asia) @psophy http://www.typo3cambodia.org
3. 3 Introduction
4. 4 Adaptive (Multiple Fixed Width Layouts) or Responsive (Multiple Fluid Grid Layouts)
5. 5 Mixed Approach Fixed width for large and medium. Fluid width for small.
6. 6 Mixed Approach Fixed width for large and medium. Fluid width for small.
7. 7 Who is using it?
8. 8 www.barackobama.com http://www.barackobama.com/
9. 9 www.smashingmagazine.com http://www.smashingmagazine.com/
10. 10 www.bostonglobe.com http://www.bostonglobe.com
11. 11 Other sites • http://css-tricks.com/HER • http://webdesignerwall.com/ • For more http://mediaqueri.es/
12. 12 Responsive Web Design • Key Elements of Responsive Web Design • Flexible Layout • Flexible Images • Media Queries
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)
14. 14 Flexible Images • Adjusting images according to the different screen widths or devices is another important aspect of responsive web design • Fluid image 1. http://unstoppablerobotninja.com/entry/fluid-images/ 2. http://www.alistapart.com/articles/fluid-images/ img, embed, video object{ max-width: 100%; }
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
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) { ... }
17. 17 Frameworks (save time) or Roll Your Own (more control)
18. 18 Framework for Responsive Web Design
19. 19 Bootstrap, from Twitter • Simple, fluid HTML/CSS/JS framework from Twitter • http://twitter.github.com/bootstrap/
20. 20 Foundation • The most advanced responsive front-end framework in the world. • http://foundation.zurb.com/
21. 21 1140 CSS GRID • The 1140 grid fits perfectly into a 1280 monitor... • http://cssgrid.net/
22. 22 Other frameworks • http://stuffandnonsense.co.uk/projects/320andup/ • http://framelessgrid.com/ • http://lessframework.com/ • http://www.amazium.co.uk/
23. 23 Example
24. 24 Example Hint • Meta viewport • 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]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
25. 25 Next KTUG Meeting(Integrate TYPO3)
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)
27. 27 Q&A