{"id":3374,"date":"2015-05-04T06:20:04","date_gmt":"2015-05-04T04:20:04","guid":{"rendered":"https:\/\/wolkenhart.com\/webdesignblog\/?p=3374"},"modified":"2015-05-04T06:25:59","modified_gmt":"2015-05-04T04:25:59","slug":"responsive-framework","status":"publish","type":"post","link":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework","title":{"rendered":"Responsive Framework Top 6"},"content":{"rendered":"<p>Die Bedeutung der mobilen Endger\u00e4te, wie etwa die Tablets oder Smartphones, hat in unserem Alltagsleben in den letzten Jahren immer mehr zugenommen. Gleichzeitig geh\u00f6ren Monitore mit 22 \u201c oder 27\u201c Zoll Durchmesser auf unseren Schreibtischen l\u00e4ngst zum normalen Bild. Daher ist es kein Wunder, dass auch die Entwicklung von Webseiten durch diesen technologischen Fortschritt beeinflusst wird. So zeigen sich z. B. seit 2012 im Bereich des Web Designs dieser Trend im <a title=\"Responsive Webdesign\" href=\"http:\/\/wolkenhart.com\/responsive-webdesign\">Responsive Webdesign<\/a>.<\/p>\n<p>Durch diese spezielle Umsetzung ist es der Webseite m\u00f6glich, sich perfekt auf die Gr\u00f6\u00dfe des vorhandenen Endger\u00e4tes anzupassen. Auf diese Weise muss nicht erst extra f\u00fcr jedes mobile Endger\u00e4t eine eigene Webseite erstellt werden. Nat\u00fcrlich ist der Aufwand bei der Gestaltung und der Konzeption so um einiges gr\u00f6\u00dfer, jedoch kann diese Zeit bei der technischen Umsetzung wieder eingespart werden. Dabei basieren die responsiven Webdesigns auf eine moderne Kombination von jQuery, <a title=\"Was ist HTML5?\" href=\"https:\/\/wolkenhart.com\/webdesignblog\/was-ist-html5\">HTML5<\/a> und CSS3.<\/p>\n<h2>Framework \u2013 was ist das?<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-3378\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Responsive-Framework.jpg\" alt=\"Responsive Framework\" width=\"800\" height=\"404\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Responsive-Framework.jpg 800w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Responsive-Framework-300x152.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Responsive-Framework-575x290.jpg 575w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Ein standardisierter Satz von Praktiken, Konzepten und Kriterien, welche beim Umgang mit Problemen zur Anwendung kommen, werden als <strong>Framework<\/strong> bezeichnet. Dabei sollen diese Frameworks helfen, beim n\u00e4chsten Mal mit \u00e4hnlichen Problemen deutlich schneller umzugehen. Beim Webdesign findest du ein responsives Framework, wobei es sich hierbei um einen Baukasten handelt, welcher dynamische und vorgefertigte Gestaltungselemente besitzt.<\/p>\n<p><strong>Typische Komponente beim Framework:<\/strong><\/p>\n<ul>\n<li>Gridsystem auf CSS Basis mit mehreren Spalten<\/li>\n<li>Definierte Typography f\u00fcr s\u00e4mtliche HTML-Elemente<\/li>\n<li>Fallback-L\u00f6sungen und Browser-Kompatibilit\u00e4t f\u00fcr Internet Explorer sowie \u00e4lteren Browsern<\/li>\n<li>Standard CSS-Klassen, welche sich durch weiterf\u00fchrende Klassen erg\u00e4nzen lassen<\/li>\n<li>javaScript-Bibliotheken sowie jQuery f\u00fcr die Elementen-Animation<\/li>\n<\/ul>\n<p>Somit stellt das Framework ein Fundament zur Entwicklung und zur Konzeption von Webseiten dar. Auf diese Weise musst du nicht immer von vorne beginnen, wenn du ein neues Projekt entwickeln m\u00f6chtest. Daher \u00fcberwiegen beim Einsatz des Framework eindeutig die Vorteile gegen\u00fcber einem vollst\u00e4ndigen Neuanfang.<\/p>\n<p><strong>Vorteile beim Framework- Einsatz:<\/strong><\/p>\n<ul>\n<li>Verf\u00fcgbarkeit regelm\u00e4\u00dfiger Updates<\/li>\n<li>Hilfe und Erfahrungsaustausch \u00fcber Communities und Foren<\/li>\n<li>Umsetzung von Best practices<\/li>\n<li>Zusammenarbeit mit anderen Entwicklern werden dank Standard-Konzepte erleichtert<\/li>\n<li>Wiederverwertbarkeit f\u00fcr weitere Webseiten<\/li>\n<li>Mock-up Prozesse sind schneller<\/li>\n<li>Kombination oder Verzicht mit CMS (Joomla, WordPress, Drupal \u2026) sind m\u00f6glich<\/li>\n<\/ul>\n<p><strong>Nachteile beim Framework- Einsatz:<\/strong><\/p>\n<ul>\n<li>Flachere Lernkurve, denn nicht alles musst du von Anfang an lernen<\/li>\n<li>Oftmals kommt es zur Vermischung von Code und Inhalt<\/li>\n<\/ul>\n<h3>Die Top responsive Frameworks<\/h3>\n<p>Als vor vielen Jahren das erste CSS-Gridsystem eingesetzt wurde, geh\u00f6rte das 960 Grid System zu den ersten Systemen, die in diesem Bereich zur Anwendung kamen. Jedoch war dieses CSS-Gridsystem noch sehr weit entfernt von den M\u00f6glichkeiten der heutigen Frameworks, wobei es heute etwa 60 unterschiedliche Gridsysteme und Frameworks gibt. Aus dieser Masse an M\u00f6glichkeiten wurden nun anhand verschiedener Faktoren die 10 besten Frameworks herausgefiltert. Dabei waren neben der Aktivit\u00e4t der Community, auch der Bereich Tutorials, die pers\u00f6nliche Erfahrung sowie weitere Indikatoren ausschlaggebend f\u00fcr das Ergebnis.<\/p>\n<p>Gleichzeitig werden hier nur Frameworks vorgestellt, welche zur Erstellung von Front-End-User-Interface eingesetzt werden k\u00f6nnen und aus einer Zusammensetzung von HTML-Dateien, CSS und Javascript bestehen. Somit werden hier nur komplette Frameworks und keine reinen CSS-Grid-Systeme angezeigt.<\/p>\n<h4>Twitter Bootstrap<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-3384\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Twitter-Bootstrap-300x173.jpg\" alt=\"Twitter Bootstrap\" width=\"300\" height=\"173\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Twitter-Bootstrap-300x173.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Twitter-Bootstrap.jpg 400w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>Seit August 2011 befindet sich das Framework Bootstrap auf Github, wobei es von den Twitter-Leuten entwickelt wurde. Dieses System gr\u00fcndet auf einem 12-spaltigem CSS, welches eine Breite ab 750px besitzt. Als Kern f\u00fcr Bootstrap werden HTML, LESS-CSS und jQuery Komponenten eingesetzt. Das Framework Bootstrap enth\u00e4lt viele Oberfl\u00e4chenelemente, Labels, Navigationselemente und Hinweisnachrichten. W\u00e4hrend weitere UI-Elemente wie z. B. Tooltips, Carousels oder Dialogfenster, durch ein integriertes jQuery animiert werden.<\/p>\n<p>Des Weiteren stehen f\u00fcr Bootstrap einige sehr gute Tutorials zur Verf\u00fcgung, umso den Einstieg zu erleichtern. Gleichzeitig kannst du hier WordPress Themes, openCart Themen oder Admin Templates auf Bootstrapbasis erstellen. Kannst du nicht selbst designen, stehen zus\u00e4tzlich sch\u00f6ne und bereits fertige Template oder Skins zur Verf\u00fcgung.<\/p>\n<p><a href=\"http:\/\/getbootstrap.com\/\" title=\"Twitter Bootstrap\" target=\"_blank\">Zum Framework&#8230;<\/a><\/p>\n<h4>Foundation 4<\/h4>\n<p><a href=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Foundation-4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-3385\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Foundation-4-300x173.jpg\" alt=\"Foundation 4\" width=\"300\" height=\"173\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Foundation-4-300x173.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Foundation-4.jpg 400w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Neben Bootstrap geh\u00f6rt Foundation zu den Frameworks, die am weitesten entwickelt wurden. Dabei ist Foundation ebenso ein Open-Source Projekt, welches durch die digitale Agentur ZURB entwickelt und updated wird. Zur Anwendung kommt hier ein 940px breites CSS-Grid, sowie SASS-CSS Dateien und das Zepto-Javascript (besitzt \u00c4hnlichkeiten mit jQuery).<\/p>\n<p>Zus\u00e4tzlich sind f\u00fcr Foundation verschiedene Add-ons wie beispielsweise Icon Fonts, fertige Templates, responsive Tablets oder Social Icons verf\u00fcgbar. Dabei ist dieses Framework ausf\u00fchrlich dokumentiert und so ziemlich einsteigerfreundlich.<\/p>\n<p><a href=\"http:\/\/foundation.zurb.com\/\" title=\"Foundation 4\" target=\"_blank\">Zum Framework&#8230;<\/a><\/p>\n<h4>YAML 4<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-3386\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/YAML-4-300x173.jpg\" alt=\"YAML 4\" width=\"300\" height=\"173\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/YAML-4-300x173.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/YAML-4.jpg 400w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>F\u00fcr einen Preis ab 59.50 Euro steht dir dieses kostenpflichtige CSS-Framework f\u00fcr ein Projekt zur Verf\u00fcgung. Entwickelt wurde dieses Programm vom deutschen Webentwickler Dirk Jesse, wobei YAML auf den Grundlagen HTML, CSS-Grid und jQuery basiert. W\u00e4hrend in diesem Framework verschiedene Web-Elemente, wie Buttons, Navigationen, Formulare und Icons mit integriert wurden.<\/p>\n<p>Das Framework YAML 4 besitzt den Vorteil, dass hier in etwa 30 Content Management Systeme, wie z. B. Typo3, Drupal, WordPress oder Joomia einfach integriert werden kann. Ebenso sind spezielle Development Tools vorhanden, die sich besonders f\u00fcr die Frontend-Entwicklung eigenen.<\/p>\n<p><a href=\"http:\/\/www.yaml.de\/\" title=\"YAML 4\" target=\"_blank\">Zum Framework&#8230;<\/a><\/p>\n<h4>Gumby 2<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-3387\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Gumby-2-300x173.jpg\" alt=\"Gumby 2\" width=\"300\" height=\"173\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Gumby-2-300x173.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Gumby-2.jpg 400w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>Dieses Framework ist auf Github erst seit Ende Februar 2013 verf\u00fcgbar. Trotzdem ist Gumby 2 bereits sehr weit entwickelt, sodass als Basis die Faktoren HTML, SASS-CSS, Modernizr und jQuery-Dateien zum Einsatz kommen. Gleichzeitig findest du hier viele UI-Elemente, die bereits im Flat Design gestaltet wurden. W\u00e4hrend dank jQuery sich Gumby \u00fcber zahlreiche zus\u00e4tzliche Events und Effekte freuen kann. Daher solltest du dir dieses Newcomer-Framework durchaus merken.<br \/>\n<br \/>\n<a href=\"http:\/\/gumbyframework.com\/\" title=\"Gumby 2\" target=\"_blank\">Zum Framework&#8230;<\/a><\/p>\n<h4>Kube<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-3388\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Kube-300x173.jpg\" alt=\"Kube\" width=\"300\" height=\"173\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Kube-300x173.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Kube.jpg 400w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>Dieses Open-Source Framework ist ziemlich minimalistisch, wobei bei Kuba HTML, LESS-CSS und Javascript Dateien als Basis zur Anwendung kommen. Vordefinierte Web-Elemente sind in gro\u00dfer Anzahl vorhanden, w\u00e4hrend diese vollst\u00e4ndig in wei\u00df oder schwarz gestaltet wurden. Gleichzeitig bieten die Entwickler von Imperavi durch Redactor einen ziemlich genialen WYSIWYG-Editor an.<\/p>\n<p><a href=\"http:\/\/imperavi.com\/kube\/\" title=\"Kube\" target=\"_blank\">Zum Framework&#8230;<\/a><\/p>\n<h4>GroundworkCSS<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-3389\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/GroundworkCSS-300x173.jpg\" alt=\"GroundworkCSS\" width=\"300\" height=\"173\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/GroundworkCSS-300x173.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/GroundworkCSS.jpg 400w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>Erst Ende Januar 2013 wurde Base von Github als Open Source entwickelt und ver\u00f6ffentlicht, wobei hier ein 960px breiter CSS-Grid zur Anwendung kommt. Gleichzeitig umfasst dieses Framework HTML, LESS-CSS, PSD-Templates und jQuery Dateien. Jedoch sind im Gegensatz zu anderen Programmsystemen nur wenige vordefinierte UI-Elemente verf\u00fcgbar.<\/p>\n<p>\n<a href=\"https:\/\/github.com\/groundworkcss\/groundwork\" title=\"GroundworkCSS\" target=\"_blank\">Zum Framework&#8230;<\/a><\/p>\n<h5>Suche nach dem richtigen Framework<\/h5>\n<p>Nun musst du nur noch dein passendes Framework finden. Dabei solltest du wissen, dass sich die verschiedenen Frameworks in den Bereichen Grundumfang und Funktionalit\u00e4t ziemlich \u00e4hnlich sind. Du bist trotzdem noch unsicher? Kein Problem, denn diese Checkliste soll dir bei der Suche nach dem passenden Framework helfen.<\/p>\n<h6>1. Deine Vorlieben<\/h6>\n<p>Such dir ein Framework, welches sich ganz pers\u00f6nlich anspricht. Nimmt daher kein Modell, welches dir auf den 1. und 2. Blick nicht gef\u00e4llt. Gleichzeitig nutzen einige Frameworks <strong>LESS-CSS<\/strong> und andere <strong>SASS-CSS<\/strong>. W\u00e4hle daher ein Framework, bei dem du dich wohlf\u00fchlst und daher auch viel schneller Fortschritte machst.<\/p>\n<h6>2. Pflege und Aktualit\u00e4t<\/h6>\n<p>Die Entwicklung der Technologie bleibt nicht stehen, daher lass von Frameworks, die bereits seit 3 Monaten nicht mehr gepflegt wurden lieber die Finger. Dank Github ist dies sehr gut zu erkennen, schlie\u00dflich wird das Datum jeder Datei\u00e4nderung sichtbar angezeigt.<\/p>\n<h6>3. Wiederverwertbarkeit<\/h6>\n<p>Das Beste am Framework ist die Wiederverwertbarkeit f\u00fcr zuk\u00fcnftige Projekte. Daher sollte sich deine Frameworkwahl auch f\u00fcr weitere Projekte eignen.<\/p>\n<h6>4. Anpassungsf\u00e4higkeit<\/h6>\n<p>Du musst an der Gestaltung viele \u00c4nderungen vornehmen? Dann nutze gleich einen Framework, der m\u00f6glichst flexibel ist. Besonders gut eignen sich hierbei Groundwork, Bootstrap oder Gumby. Legst du stattdessen eher Wert auf fertige Templates sind Yaml, Bootstrap oder Foundation eine sehr gro\u00dfe Hilfe.<\/p>\n<h6>5. Support und Community<\/h6>\n<p>Ein besseres Aush\u00e4ngeschild als eine aktive und gro\u00dfe Community gibt es f\u00fcr Frameworks nicht. Schlie\u00dflich stellt eine lebendige Community nicht nur kostenlose Tutorials, sondern ebenso Hilfe und Templates bereit. Gleichzeitig dient dieser Bereich als wichtiger Indikator f\u00fcr die \u00dcberlebenschance des Framework, wobei gerade Foundation und Bootstrap hier sehr gut abschneiden.<\/p>\n<h6>6. Integration<\/h6>\n<p>Heute lassen sich bereits viele Frameworks mit CMS-Systemen, wie z. B. Joomia und WordPress kombinieren. Wie beispielsweise Bootstrap und YAML, die bereits erfolgreich mit verschiedenen CMS kombiniert wurden.<\/p>\n<p>Doch egal, f\u00fcr welches <strong>Responsive Framework<\/strong> du dich entscheidest, es ist ratsam, vorab ein kleineres Dummy-Projekt umzusetzen. Schlie\u00dflich erh\u00e4ltst du so wichtige Erkenntnisse \u00fcber die Arbeitsweise vom Framework und kannst feststellen, ob sich dieses System f\u00fcr dein eigentliches Projekt eignet.<\/p>\n<p>Besonders zu empfehlen sind z. B. GrundworkCSS, Bootstrap und Gumby. Schlie\u00dflich l\u00e4sst sich z. B. Bootstrap gut mit WordPress kombinieren und verf\u00fcgt \u00fcber zahlreiche Templates. W\u00e4hrend sich Gumby und GrundworkCSS mit ihrem modernen Flat Design gerade f\u00fcr kleinere Projekte gut eignen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Bedeutung der mobilen Endger\u00e4te, wie etwa die Tablets oder Smartphones, hat in unserem Alltagsleben in den letzten Jahren immer mehr zugenommen. Gleichzeitig geh\u00f6ren Monitore mit 22 \u201c oder 27\u201c Zoll Durchmesser auf unseren Schreibtischen l\u00e4ngst zum normalen Bild. Daher ist es kein Wunder, dass auch die Entwicklung von Webseiten durch diesen technologischen Fortschritt beeinflusst wird. So zeigen sich z. B. seit 2012 im Bereich des Web Designs dieser Trend im Responsive Webdesign. Durch diese spezielle Umsetzung ist es der Webseite m\u00f6glich, sich perfekt auf die Gr\u00f6\u00dfe des vorhandenen Endger\u00e4tes anzupassen. Auf diese Weise muss nicht erst extra f\u00fcr jedes mobile Endger\u00e4t eine eigene Webseite erstellt werden. Nat\u00fcrlich ist der Aufwand bei der Gestaltung und der Konzeption so um einiges gr\u00f6\u00dfer, jedoch kann diese Zeit bei der technischen Umsetzung wieder eingespart werden. Dabei basieren die responsiven Webdesigns auf eine moderne Kombination von jQuery, HTML5 und CSS3. Framework \u2013 was ist das? Ein standardisierter Satz von Praktiken, Konzepten und Kriterien, welche beim Umgang mit Problemen zur Anwendung kommen, werden als Framework bezeichnet. Dabei sollen diese Frameworks helfen, beim n\u00e4chsten Mal mit \u00e4hnlichen Problemen deutlich schneller umzugehen. Beim Webdesign findest du ein responsives Framework, wobei es sich hierbei um einen Baukasten handelt, welcher dynamische und vorgefertigte Gestaltungselemente besitzt. Typische Komponente beim Framework: Gridsystem auf CSS Basis mit mehreren Spalten Definierte Typography f\u00fcr s\u00e4mtliche HTML-Elemente Fallback-L\u00f6sungen und Browser-Kompatibilit\u00e4t f\u00fcr Internet Explorer sowie \u00e4lteren Browsern Standard CSS-Klassen, welche sich durch weiterf\u00fchrende Klassen erg\u00e4nzen lassen javaScript-Bibliotheken sowie jQuery f\u00fcr die Elementen-Animation Somit stellt das Framework [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3379,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[252],"class_list":["post-3374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsive-webdesign","tag-responsive-framework"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Responsive Framework Top 6<\/title>\n<meta name=\"description\" content=\"Responsive Framework beim Webdesign. Hierbei handelt es sich um einen Baukasten, welcher dynamische und vorgefertigte Gestaltungselemente besitzt.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Framework Top 6\" \/>\n<meta property=\"og:description\" content=\"Responsive Framework beim Webdesign. Hierbei handelt es sich um einen Baukasten, welcher dynamische und vorgefertigte Gestaltungselemente besitzt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wolkenhart\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-04T04:20:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-04T04:25:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Framework.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"334\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mika Gustavson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wolkenhart\" \/>\n<meta name=\"twitter:site\" content=\"@wolkenhart\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#article\",\"isPartOf\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework\"},\"author\":{\"name\":\"Mika Gustavson\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac\"},\"headline\":\"Responsive Framework Top 6\",\"datePublished\":\"2015-05-04T04:20:04+00:00\",\"dateModified\":\"2015-05-04T04:25:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework\"},\"wordCount\":1383,\"commentCount\":2,\"image\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Framework.jpg\",\"keywords\":[\"Responsive Framework\"],\"articleSection\":[\"Responsive Webdesign\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework\",\"name\":\"Responsive Framework Top 6\",\"isPartOf\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Framework.jpg\",\"datePublished\":\"2015-05-04T04:20:04+00:00\",\"dateModified\":\"2015-05-04T04:25:59+00:00\",\"author\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac\"},\"description\":\"Responsive Framework beim Webdesign. Hierbei handelt es sich um einen Baukasten, welcher dynamische und vorgefertigte Gestaltungselemente besitzt.\",\"breadcrumb\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#primaryimage\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Framework.jpg\",\"contentUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Framework.jpg\",\"width\":500,\"height\":334},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start\",\"item\":\"https:\/\/wolkenhart.com\/webdesignblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Framework Top 6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#website\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wolkenhart.com\/webdesignblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac\",\"name\":\"Mika Gustavson\",\"description\":\"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/author\/webtalk\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Framework Top 6","description":"Responsive Framework beim Webdesign. Hierbei handelt es sich um einen Baukasten, welcher dynamische und vorgefertigte Gestaltungselemente besitzt.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework","og_locale":"de_DE","og_type":"article","og_title":"Responsive Framework Top 6","og_description":"Responsive Framework beim Webdesign. Hierbei handelt es sich um einen Baukasten, welcher dynamische und vorgefertigte Gestaltungselemente besitzt.","og_url":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework","article_publisher":"https:\/\/www.facebook.com\/wolkenhart","article_published_time":"2015-05-04T04:20:04+00:00","article_modified_time":"2015-05-04T04:25:59+00:00","og_image":[{"width":500,"height":334,"url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Framework.jpg","type":"image\/jpeg"}],"author":"Mika Gustavson","twitter_card":"summary_large_image","twitter_creator":"@wolkenhart","twitter_site":"@wolkenhart","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#article","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework"},"author":{"name":"Mika Gustavson","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac"},"headline":"Responsive Framework Top 6","datePublished":"2015-05-04T04:20:04+00:00","dateModified":"2015-05-04T04:25:59+00:00","mainEntityOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework"},"wordCount":1383,"commentCount":2,"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Framework.jpg","keywords":["Responsive Framework"],"articleSection":["Responsive Webdesign"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework","url":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework","name":"Responsive Framework Top 6","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#primaryimage"},"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Framework.jpg","datePublished":"2015-05-04T04:20:04+00:00","dateModified":"2015-05-04T04:25:59+00:00","author":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac"},"description":"Responsive Framework beim Webdesign. Hierbei handelt es sich um einen Baukasten, welcher dynamische und vorgefertigte Gestaltungselemente besitzt.","breadcrumb":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#primaryimage","url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Framework.jpg","contentUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2015\/05\/Framework.jpg","width":500,"height":334},{"@type":"BreadcrumbList","@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-framework#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/wolkenhart.com\/webdesignblog\/"},{"@type":"ListItem","position":2,"name":"Responsive Framework Top 6"}]},{"@type":"WebSite","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website","url":"https:\/\/wolkenhart.com\/webdesignblog\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wolkenhart.com\/webdesignblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac","name":"Mika Gustavson","description":"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.","url":"https:\/\/wolkenhart.com\/webdesignblog\/author\/webtalk"}]}},"_links":{"self":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/comments?post=3374"}],"version-history":[{"count":0,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3374\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media\/3379"}],"wp:attachment":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media?parent=3374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/categories?post=3374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/tags?post=3374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}