<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href="all.css" rel="stylesheet"
media="all">
<l...
https://github.com/scottjehl/CSS-Download-Tests
86%
der responsive Websites
sind in der mobilen Ansicht
genau so schwer
wie in der Desktop Ansicht
http://www.guypo.com/mo...
Runterladen & Verstecken
<div id="main">...</div>
<div id="sidebar">...</div>
@media (max-width: 480px) {
#sidebar {displa...
Runterladen & Schrumpfen
<div id="main">
<img src="foto-1024px.jpg">
</div>
@media (max-width: 480px) {
#main img {
max-wi...
<script src="jquery.min.js"></script>
<script src="masonry.pkgd.min.js"></script>
<script>
var $container = $('#container'...
<script src="masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#container');
var msnry = new...
- 93 kB
- 1 HTTP Request
<script>
if (typeof document.querySelector === "undefined") {
// jQuery
} else {
// Reines Javascript
}
</script>
<script>
if (
window.matchMedia("(min-width: 36em)").matches
) {
document.write("<script
src='masonry.pkgd.min.js'><" + "/...
http://responsiveimages.org/
http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/
<img src="fallback.jpg"
s...
https://github.com/borismus/srcset-polyfill
http://adaptive-images.com/
http://www.resrc.it/
Video Media Queries
<video controls>
<source src="small.mp4" type="video/mp4"
media="(max-width:480px)">
<source src="smal...
http://www.lukew.com/ff/entry.asp?1392
RESS:
Responsive Design +
Server Side Components
<div id="main">...</div>
<div id="sidebar">
<?php if ( is_mobile() ): ?>
Mobil
<?php else: ?>
Desktop
<?php endif; ?>
</di...
http://detectmobilebrowsers.com/
http://wurfl.sourceforge.net/
https://deviceatlas.com/
Endgeräte-Erkennung
http://mobilewebbestpractices.com/
Walter Ebert
@wltrd
walterebert.de
slideshare.net/walterebert
drupal.org/user/699574
Responsive Design: Mehr als CSS
Upcoming SlideShare
Loading in...5
×

Responsive Design: Mehr als CSS

2,834

Published on

Drupal Meetup Frankfurt 12. September 2013

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,834
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Design: Mehr als CSS

  1. 1. <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)">
  2. 2. https://github.com/scottjehl/CSS-Download-Tests
  3. 3. 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/
  4. 4. Runterladen & Verstecken <div id="main">...</div> <div id="sidebar">...</div> @media (max-width: 480px) { #sidebar {display: none;} }
  5. 5. Runterladen & Schrumpfen <div id="main"> <img src="foto-1024px.jpg"> </div> @media (max-width: 480px) { #main img { max-width: 100%; height: auto; } }
  6. 6. <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
  7. 7. <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/
  8. 8. - 93 kB - 1 HTTP Request
  9. 9. <script> if (typeof document.querySelector === "undefined") { // jQuery } else { // Reines Javascript } </script>
  10. 10. <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>
  11. 11. http://responsiveimages.org/
  12. 12. 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="…">
  13. 13. https://github.com/borismus/srcset-polyfill
  14. 14. http://adaptive-images.com/
  15. 15. http://www.resrc.it/
  16. 16. 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>
  17. 17. http://www.lukew.com/ff/entry.asp?1392 RESS: Responsive Design + Server Side Components
  18. 18. <div id="main">...</div> <div id="sidebar"> <?php if ( is_mobile() ): ?> Mobil <?php else: ?> Desktop <?php endif; ?> </div>
  19. 19. http://detectmobilebrowsers.com/ http://wurfl.sourceforge.net/ https://deviceatlas.com/ Endgeräte-Erkennung
  20. 20. http://mobilewebbestpractices.com/
  21. 21. Walter Ebert @wltrd walterebert.de slideshare.net/walterebert drupal.org/user/699574
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×