responsive design: mehr als css
DESCRIPTION
Drupal Meetup Frankfurt 12. September 2013TRANSCRIPT
![Page 1: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/1.jpg)
![Page 2: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/2.jpg)
<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)">
![Page 4: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/4.jpg)
86%der responsive Websites
sind in der mobilen Ansichtgenau so schwer
wie in der Desktop Ansicht
http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
![Page 5: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/5.jpg)
Runterladen & Verstecken
<div id="main">...</div>
<div id="sidebar">...</div>
@media (max-width: 480px) {
#sidebar {display: none;}
}
![Page 6: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/6.jpg)
Runterladen & Schrumpfen<div id="main">
<img src="foto-1024px.jpg">
</div>
@media (max-width: 480px) {
#main img {
max-width: 100%; height: auto;
}
}
![Page 7: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/7.jpg)
<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
![Page 8: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/8.jpg)
<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/
![Page 9: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/9.jpg)
- 93 kB
- 1 HTTP Request
![Page 10: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/10.jpg)
<script>
if (typeof document.querySelector === "undefined") {
// jQuery
} else {
// Reines Javascript
}
</script>
![Page 11: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/11.jpg)
<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>
![Page 13: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/13.jpg)
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="…">
![Page 17: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/17.jpg)
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>
![Page 18: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/18.jpg)
http://www.lukew.com/ff/entry.asp?1392
RESS:Responsive Design +
Server Side Components
![Page 19: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/19.jpg)
<div id="main">...</div>
<div id="sidebar">
<?php if ( is_mobile() ): ?>
Mobil
<?php else: ?>
Desktop
<?php endif; ?>
</div>
![Page 20: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/20.jpg)
http://detectmobilebrowsers.com/http://wurfl.sourceforge.net/https://deviceatlas.com/
Endgeräte-Erkennung
![Page 22: Responsive Design: Mehr als CSS](https://reader033.vdocuments.site/reader033/viewer/2022052822/554bd9c5b4c905ac708b524f/html5/thumbnails/22.jpg)
Walter Ebert
@wltrdwalterebert.de
slideshare.net/walterebertdrupal.org/user/699574