Responsive Design: Mehr als CSS
0 likes4,647 views
The document discusses techniques for optimizing responsive web design for mobile devices, including downloading and hiding/resizing unnecessary elements based on screen width, using lightweight JavaScript libraries conditionally, responsive images with srcset, and serving different content for mobile using server-side device detection. It provides examples and links to resources for implementing these techniques.
Responsive Design: Mehr als CSS
- 2. <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="all.css" rel="stylesheet" media="all"> <link href="mobile.css" rel="stylesheet" media="(max-width: 480px)"> <link href="desktop.css" rel="stylesheet" media="(min-width: 481px)">
- 4. 86% der responsive Websites sind in der mobilen Ansicht genau so schwer wie in der Desktop Ansicht http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
- 5. Runterladen & Verstecken <div id="main">...</div> <div id="sidebar">...</div> @media (max-width: 480px) { #sidebar {display: none;} }
- 6. Runterladen & Schrumpfen <div id="main"> <img src="foto-1024px.jpg"> </div> @media (max-width: 480px) { #main img { max-width: 100%; height: auto; } }
- 7. <script src="jquery.min.js"></script> <script src="masonry.pkgd.min.js"></script> <script> var $container = $('#container'); $container.masonry({ columnWidth: 200, itemSelector: '.item' }); </script> http://masonry.desandro.com/ Javascript
- 8. <script src="masonry.pkgd.min.js"></script> <script> var container = document.querySelector('#container'); var msnry = new Masonry( container, { columnWidth: 200, itemSelector: '.item' }); </script> http://masonry.desandro.com/
- 9. - 93 kB - 1 HTTP Request
- 10. <script> if (typeof document.querySelector === "undefined") { // jQuery } else { // Reines Javascript } </script>
- 11. <script> if ( window.matchMedia("(min-width: 36em)").matches ) { document.write("<script src='masonry.pkgd.min.js'><" + "/script>"); window.onload = function() { new Masonry( document.querySelector(".masonry"), {itemSelector:".item"}); }; } </script>
- 13. http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/ <img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…">
- 17. Video Media Queries <video controls> <source src="small.mp4" type="video/mp4" media="(max-width:480px)"> <source src="small.webm" type="video/webm" media="(max-width:480px)"> <source src="big.mp4" type="video/mp4"> <source src="big.webm" type="video/webm"> </video>
- 18. http://www.lukew.com/ff/entry.asp?1392 RESS: Responsive Design + Server Side Components
- 19. <div id="main">...</div> <div id="sidebar"> <?php if ( is_mobile() ): ?> Mobil <?php else: ?> Desktop <?php endif; ?> </div>