{"id":72,"date":"2020-04-06T14:52:19","date_gmt":"2020-04-06T12:52:19","guid":{"rendered":"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/"},"modified":"2021-10-21T12:04:25","modified_gmt":"2021-10-21T10:04:25","slug":"responsive-webdesign","status":"publish","type":"post","link":"https:\/\/helpcenter-classic.greyd.de\/en\/2020\/04\/06\/responsive-webdesign\/","title":{"rendered":"Responsive Webdesign"},"content":{"rendered":"<div class=\"vc_row vc_row-fluid row_xxl\"><div class=\"vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\">\n\t<div class=\"wpb_text_column wpb_content_element \" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>Im Gegensatz zu <a href=\"https:\/\/helpcenter-classic.greyd.de\/adaptive-design\/\">Adpative Webdesign<\/a>, passt sich das Responsive Webdesign (dt. \u201ereagierendes Design\u201c) der Gr\u00f6\u00dfe des Browserfensters einer <a href=\"#_Website_1\">Website<\/a> an. Grund daf\u00fcr ist ein flexibles Seitenraster, das im Webdesign beispielsweise von <a href=\"https:\/\/helpcenter-classic.greyd.de\/bootstrap\/\">Bootstrap<\/a> zur Verf\u00fcgung gestellt wird. Das Responsive Webdesign funktioniert dabei so, dass sich die in der Seite enthaltenen Elemente abh\u00e4ngig von der jeweiligen Bildschirmaufl\u00f6sung in ihrer Gr\u00f6\u00dfe ver\u00e4ndern. Die Bildschirmaufl\u00f6sung des jeweiligen Endger\u00e4tes wird in Form von <a href=\"https:\/\/helpcenter-classic.greyd.de\/media-queries\/\">Media Queries<\/a> abgefragt. Au\u00dferdem sind im <a href=\"https:\/\/helpcenter-classic.greyd.de\/css-cascading-stylesheets\/\">CSS-Code<\/a> <a href=\"https:\/\/helpcenter-classic.greyd.de\/breakpoint\/\">Breakpoints<\/a> festgelegt, welche bestimmen, ab wann sich das Seitenlayout ver\u00e4ndert. Der Vorteil von Responsive Webdesign liegt darin, dass jede Displaygr\u00f6\u00dfe ber\u00fccksichtigt wird und die Informationen so auf jedem Endger\u00e4t optimal dargestellt werden k\u00f6nnen. Mit der GREYD.SUITE ist das Erstellen eines solchen responsiven Layouts kinderleicht und erfordert nur wenige Klicks.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"greyd_block_editor_preview":[],"footnotes":""},"categories":[18,24],"tags":[],"class_list":["post-72","post","type-post","status-publish","format-standard","hentry","category-glossar","category-r"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responsive Webdesign - GREYD.Helpcenter - Glossar<\/title>\n<meta name=\"description\" content=\"Im Gegensatz zu Adpative Webdesign, passt sich das Responsive Webdesign der Gr\u00f6\u00dfe des Browserfensters einer Website an.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Webdesign - GREYD.Helpcenter - Glossar\" \/>\n<meta property=\"og:description\" content=\"Im Gegensatz zu Adpative Webdesign, passt sich das Responsive Webdesign der Gr\u00f6\u00dfe des Browserfensters einer Website an.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/\" \/>\n<meta property=\"og:site_name\" content=\"GREYD.Helpcenter\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-06T12:52:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-21T10:04:25+00:00\" \/>\n<meta name=\"author\" content=\"Mark Howells-Mead\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Howells-Mead\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/\"},\"author\":{\"name\":\"Mark Howells-Mead\",\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/#\/schema\/person\/dd4dd87e287b498185de6ea75290db3c\"},\"headline\":\"Responsive Webdesign\",\"datePublished\":\"2020-04-06T12:52:19+00:00\",\"dateModified\":\"2021-10-21T10:04:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/\"},\"wordCount\":158,\"publisher\":{\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/#organization\"},\"articleSection\":[\"Glossar\",\"R\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/\",\"url\":\"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/\",\"name\":\"Responsive Webdesign - GREYD.Helpcenter - Glossar\",\"isPartOf\":{\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/#website\"},\"datePublished\":\"2020-04-06T12:52:19+00:00\",\"dateModified\":\"2021-10-21T10:04:25+00:00\",\"description\":\"Im Gegensatz zu Adpative Webdesign, passt sich das Responsive Webdesign der Gr\u00f6\u00dfe des Browserfensters einer Website an.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/#website\",\"url\":\"https:\/\/helpcenter-classic.greyd.de\/\",\"name\":\"GREYD.Helpcenter\",\"description\":\"Tutorials, FAQ und mehr\",\"publisher\":{\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/helpcenter-classic.greyd.de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/#organization\",\"name\":\"GREYD.Helpcenter\",\"url\":\"https:\/\/helpcenter-classic.greyd.de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/helpcenter-classic.greyd.de\/wp-content\/uploads\/2021\/10\/L_Greyd_greyd.svg\",\"contentUrl\":\"https:\/\/helpcenter-classic.greyd.de\/wp-content\/uploads\/2021\/10\/L_Greyd_greyd.svg\",\"caption\":\"GREYD.Helpcenter\"},\"image\":{\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/#\/schema\/person\/dd4dd87e287b498185de6ea75290db3c\",\"name\":\"Mark Howells-Mead\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/helpcenter-classic.greyd.de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/904032e8d1c2fbbb3b5215abee5c27697e74c15ea1375fa512da957fcdc72cde?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/904032e8d1c2fbbb3b5215abee5c27697e74c15ea1375fa512da957fcdc72cde?s=96&d=mm&r=g\",\"caption\":\"Mark Howells-Mead\"},\"url\":\"https:\/\/helpcenter-classic.greyd.de\/en\/author\/markhowellsmead\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Webdesign - GREYD.Helpcenter - Glossar","description":"Im Gegensatz zu Adpative Webdesign, passt sich das Responsive Webdesign der Gr\u00f6\u00dfe des Browserfensters einer Website an.","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:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Webdesign - GREYD.Helpcenter - Glossar","og_description":"Im Gegensatz zu Adpative Webdesign, passt sich das Responsive Webdesign der Gr\u00f6\u00dfe des Browserfensters einer Website an.","og_url":"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/","og_site_name":"GREYD.Helpcenter","article_published_time":"2020-04-06T12:52:19+00:00","article_modified_time":"2021-10-21T10:04:25+00:00","author":"Mark Howells-Mead","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Howells-Mead","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/#article","isPartOf":{"@id":"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/"},"author":{"name":"Mark Howells-Mead","@id":"https:\/\/helpcenter-classic.greyd.de\/#\/schema\/person\/dd4dd87e287b498185de6ea75290db3c"},"headline":"Responsive Webdesign","datePublished":"2020-04-06T12:52:19+00:00","dateModified":"2021-10-21T10:04:25+00:00","mainEntityOfPage":{"@id":"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/"},"wordCount":158,"publisher":{"@id":"https:\/\/helpcenter-classic.greyd.de\/#organization"},"articleSection":["Glossar","R"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/","url":"https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/","name":"Responsive Webdesign - GREYD.Helpcenter - Glossar","isPartOf":{"@id":"https:\/\/helpcenter-classic.greyd.de\/#website"},"datePublished":"2020-04-06T12:52:19+00:00","dateModified":"2021-10-21T10:04:25+00:00","description":"Im Gegensatz zu Adpative Webdesign, passt sich das Responsive Webdesign der Gr\u00f6\u00dfe des Browserfensters einer Website an.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/helpcenter-classic.greyd.de\/2020\/04\/06\/responsive-webdesign\/"]}]},{"@type":"WebSite","@id":"https:\/\/helpcenter-classic.greyd.de\/#website","url":"https:\/\/helpcenter-classic.greyd.de\/","name":"GREYD.Helpcenter","description":"Tutorials, FAQ und mehr","publisher":{"@id":"https:\/\/helpcenter-classic.greyd.de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/helpcenter-classic.greyd.de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/helpcenter-classic.greyd.de\/#organization","name":"GREYD.Helpcenter","url":"https:\/\/helpcenter-classic.greyd.de\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/helpcenter-classic.greyd.de\/#\/schema\/logo\/image\/","url":"https:\/\/helpcenter-classic.greyd.de\/wp-content\/uploads\/2021\/10\/L_Greyd_greyd.svg","contentUrl":"https:\/\/helpcenter-classic.greyd.de\/wp-content\/uploads\/2021\/10\/L_Greyd_greyd.svg","caption":"GREYD.Helpcenter"},"image":{"@id":"https:\/\/helpcenter-classic.greyd.de\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/helpcenter-classic.greyd.de\/#\/schema\/person\/dd4dd87e287b498185de6ea75290db3c","name":"Mark Howells-Mead","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/helpcenter-classic.greyd.de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/904032e8d1c2fbbb3b5215abee5c27697e74c15ea1375fa512da957fcdc72cde?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/904032e8d1c2fbbb3b5215abee5c27697e74c15ea1375fa512da957fcdc72cde?s=96&d=mm&r=g","caption":"Mark Howells-Mead"},"url":"https:\/\/helpcenter-classic.greyd.de\/en\/author\/markhowellsmead\/"}]}},"_links":{"self":[{"href":"https:\/\/helpcenter-classic.greyd.de\/en\/wp-json\/wp\/v2\/posts\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpcenter-classic.greyd.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/helpcenter-classic.greyd.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/helpcenter-classic.greyd.de\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/helpcenter-classic.greyd.de\/en\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":0,"href":"https:\/\/helpcenter-classic.greyd.de\/en\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"wp:attachment":[{"href":"https:\/\/helpcenter-classic.greyd.de\/en\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/helpcenter-classic.greyd.de\/en\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/helpcenter-classic.greyd.de\/en\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}