{"id":584,"date":"2014-03-20T11:28:09","date_gmt":"2014-03-20T10:28:09","guid":{"rendered":"http:\/\/paulchr.ablass.me\/blog\/?p=584"},"modified":"2014-03-20T12:11:03","modified_gmt":"2014-03-20T11:11:03","slug":"lesetipp-ein-zwischenstand-zu-responsive-images","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2014\/03\/20\/lesetipp-ein-zwischenstand-zu-responsive-images\/","title":{"rendered":"Lesetipp: Ein Zwischenstand zu responsive images"},"content":{"rendered":"<p><a href=\"http:\/\/alistapart.com\/blog\/post\/picture-element-qa\">A Q&#038;A on the Picture Element<\/a> ist ein guter Ausgangspunkt, um sich auf den aktuellen Stand der Entwicklung bei responsives images zu bringen. Zum einen wird ein kurzer Abriss des bisherigen Entwicklungsprozesses gegeben und zum anderen bietet der Artikel genug Links und Schlagworte f\u00fcr eine vertiefende Recherche. Die momentan&trade; angestrebte Implementierung f\u00fcr responsive images besteht wohl aus einer Verschmelzung von <code>srcset<\/code> und dem <code>&lt;picture&gt;<\/code>-Element:<\/p>\n<pre><code>&lt;picture&gt;\r\n    &lt;source media=\"(min-width: 40em)\" srcset=\"big.jpg 1x, big-hd.jpg 2x\"&gt;\r\n    &lt;source srcset=\"small.jpg 1x, small-hd.jpg 2x\"&gt;\r\n    &lt;img src=\"fallback.jpg\" alt=\"\"&gt;\r\n&lt;\/picture&gt;<\/code><\/pre>\n<p>Mehr dazu kann man auf der Website der <a href=\"http:\/\/responsiveimages.org\/\">Responsive Images Community Group<\/a> erfahren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Q&#038;A on the Picture Element ist ein guter Ausgangspunkt, um sich auf den aktuellen Stand der Entwicklung bei responsives images zu bringen. Zum einen wird ein kurzer Abriss des bisherigen Entwicklungsprozesses gegeben und zum anderen bietet der Artikel genug Links und Schlagworte f\u00fcr eine vertiefende Recherche. Die momentan&trade; angestrebte Implementierung f\u00fcr responsive images besteht [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[77],"tags":[36,162],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-9q","jetpack-related-posts":[{"id":132,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/24\/responsive-iframe-und-video-elemente\/","url_meta":{"origin":584,"position":0},"title":"Responsive iframe- und video-Elemente","author":"Paul-Christian Abla\u00df","date":"24. Februar 2013","format":false,"excerpt":"Beim Einbetten von Videos innerhalb von iframe- oder video-Elementen in responsiven Websites gibt es in der Regel Probleme bei einer Gr\u00f6\u00dfenver\u00e4nderung ihres Containerelements. Obwohl die Breite des iframe's mittels der Css-Eigenschaft max-width auf 100% gesetzt werden kann, ist davon nicht dessen H\u00f6he betroffen. Um dieses Problem zu beheben, gibt es\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":451,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/09\/28\/os-x-10-8-4-firefox-24-und-die-scrollbars-in-der-responsive-design-view\/","url_meta":{"origin":584,"position":1},"title":"OS X 10.8.4, Firefox 24 und die Scrollbars in der Responsive Design View","author":"Paul-Christian Abla\u00df","date":"28. September 2013","format":false,"excerpt":"Als ich am vergangenen Dienstag den frisch auf Version 24 aktualisierten Firefox benutze und mich daran machte, mein aktuelles Projekt in der Responsive Design View zu bearbeiten, wunderte ich mich etwas: Zuvor nebeneinander flie\u00dfende Elemente brachen mit einem Mal um. Beim Blick in das Layout-Fenster vom Firebug fiel mir auf,\u2026","rel":"","context":"In &quot;Browser&quot;","block_context":{"text":"Browser","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/browser\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":154,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/04\/18\/pixelmasse-der-fixen-bootstrap-rastereinheiten-in-den-verschiedenen-viewportgroessen\/","url_meta":{"origin":584,"position":2},"title":"Pixelma\u00dfe der fixen Bootstrap-Rastereinheiten in den verschiedenen Viewportgr\u00f6\u00dfen","author":"Paul-Christian Abla\u00df","date":"18. April 2013","format":false,"excerpt":"Die folgenden Werte beziehen sich auf das responsive default grid in Bootstrap (Version 2.3.1) Bis 767px Viewportbreite Linearisierte Darstellung Body: jeweils 20px Abstand zu beiden Seiten Seite ist fluid Ab 768 \u2013 979px Viewportbreite Seitenbreite: 724px Abstand zwischen Grid-Units: 20px Grid Gridunit Pixelbreite 1\/12 42px 2\/12 104px 3\/12 166px 4\/12\u2026","rel":"","context":"In &quot;Frameworks&quot;","block_context":{"text":"Frameworks","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/frameworks\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":749,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/12\/19\/mac-os-x-die-bash-vom-terminal-aus-neu-starten\/","url_meta":{"origin":584,"position":3},"title":"Mac OS X: Die Bash vom Terminal aus neu starten","author":"Paul-Christian Abla\u00df","date":"19. Dezember 2014","format":false,"excerpt":"Um ohne System-Neustart\/ Ab- und anschlie\u00dfender Anmeldung \u00c4nderungen an der Shell-Konfiguration vorzunehmen, kann das Shell-BuiltIn source genutzt werden. Was bewirkt source? source f\u00fchrt die als Argument angeh\u00e4ngte Datei in der selben Bash-Umgebung aus. In Verwendung mit den Konfigurationsdateien .bash_profile oder .bashrc erfolgt also ein Neu-Einlesen der Bash-Konfiguration im gleichen Prozess.\u2026","rel":"","context":"In &quot;Bash&quot;","block_context":{"text":"Bash","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/bash\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":286,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/05\/img-elemente-mit-inset-box-shadow-stylen-ein-workaround\/","url_meta":{"origin":584,"position":4},"title":"img-Elemente mit inset box-shadow stylen- ein Workaround","author":"Paul-Christian Abla\u00df","date":"5. Mai 2013","format":false,"excerpt":"[Editors Note: Es gibt eine Demo box-shadow inset f\u00fcr img-Elemente] In einem Design, dass ich vor kurzem umsetzen musste, gab es jede Menge Bilder die einen nach innen liegenden Schlagschatten aufwiesen. Einfache Sache, dachte ich mir: Dem img-Element einfach einen box-shadow mit der Eigenschaft inset zuweisen\u2013 et voil\u00e0, die Sache\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":110,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/20\/suchen-und-ersetzen-mit-regulaeren-ausdruecken-in-geany\/","url_meta":{"origin":584,"position":5},"title":"Suchen und Ersetzen mit regul\u00e4ren Ausdr\u00fccken in Geany","author":"Paul-Christian Abla\u00df","date":"20. Februar 2013","format":false,"excerpt":"Beim Editieren eines Html-Dokuments stie\u00df ich k\u00fcrzlich auf eine kleine Unannehmlichkeit: Innerhalb eines <a href=\"#\" class=\"chief\">[TEXT]<\/a>-Elements sollten vor dem schlie\u00dfenden Tag noch zus\u00e4tzliche Inhalte eingef\u00fcgt werden. Prinzipiell nicht weiter wild, aber dieses Konstrukt kam \u00fcber 30 Mal im Dokument vor und der Anker-Text \u00e4nderte sich pro Element. Mit einem einfachen\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/584"}],"collection":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/comments?post=584"}],"version-history":[{"count":5,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/584\/revisions"}],"predecessor-version":[{"id":590,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/584\/revisions\/590"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}