{"id":3491,"date":"2023-02-02T10:41:00","date_gmt":"2023-02-02T09:41:00","guid":{"rendered":"https:\/\/www.herold.at\/marketing\/?p=3491"},"modified":"2025-10-17T12:07:03","modified_gmt":"2025-10-17T10:07:03","slug":"responsive-web-design","status":"publish","type":"post","link":"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/","title":{"rendered":"Mobile Responsive Webdesign: Vorteile &#038; Nachteile zusammengefasst"},"content":{"rendered":"\n\n\n<p><strong>Vor Jahren war &#8222;Mobile Responsive Webdesign&#8220; neu. Heute kennen es die meisten Website-Betreibenden. Doch was steckt wirklich dahinter? Erfahre hier, warum es &#8222;State-of-the-Art&#8220; ist, worin dir Vor- und Nachteile bestehen und warum du unbedingt darauf setzten solltest.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_17 counter-hierarchy\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Inhaltsverzeichnis<\/p>\n<span class=\"ez-toc-title-toggle\"><a class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" style=\"display: none;\"><i class=\"ez-toc-glyphicon ez-toc-icon-toggle\"><\/i><\/a><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1\"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Responsive_Website_-_was_ist_responsives_Webdesign\" title=\"Responsive Website \u2013 was ist responsives Webdesign?\">Responsive Website \u2013 was ist responsives Webdesign?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Warum_ist_Responsive_Webdesign_so_gefragt\" title=\"Warum ist Responsive Webdesign so gefragt?\">Warum ist Responsive Webdesign so gefragt?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Warum_hat_sich_Responsive_Webdesign_durchgesetzt\" title=\"Warum hat sich Responsive Webdesign durchgesetzt?\">Warum hat sich Responsive Webdesign durchgesetzt?<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Welche_Webdesign_Ansaetze_gibt_es_fuer_Responsive_Websites\" title=\"Welche Webdesign Ans\u00e4tze gibt es f\u00fcr Responsive Websites?\">Welche Webdesign Ans\u00e4tze gibt es f\u00fcr Responsive Websites?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Wie_funktioniert_responsive_Design\" title=\"Wie funktioniert responsive Design?\">Wie funktioniert responsive Design?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Wie_erkenne_ich_ob_meine_Website_ein_Responsive_Design_hat\" title=\"Wie erkenne ich ob meine Website ein Responsive Design hat?\">Wie erkenne ich ob meine Website ein Responsive Design hat?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Wie_veraendert_sich_die_Optik_der_Website_beim_Responsive_Design\" title=\"Wie ver\u00e4ndert sich die Optik der Website beim Responsive Design?\">Wie ver\u00e4ndert sich die Optik der Website beim Responsive Design?<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Nachteile_Probleme_des_Responsive_Designs\" title=\"Nachteile &amp; Probleme des Responsive Designs\">Nachteile &amp; Probleme des Responsive Designs<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Problem_1_Responsive_Design_muss_gut_durchdacht_sein\" title=\"Problem #1: Responsive Design muss gut durchdacht sein\">Problem #1: Responsive Design muss gut durchdacht sein<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Problem_2_Schlechte_Kompatibilitaet_mit_manchen_Browsern\" title=\"Problem #2: Schlechte Kompatibilit\u00e4t mit manchen Browsern\">Problem #2: Schlechte Kompatibilit\u00e4t mit manchen Browsern<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Problem_3_Schlechtes_Responsive_Design_beeinflusst_die_Ladezeit\" title=\"Problem #3: Schlechtes Responsive Design beeinflusst die Ladezeit\">Problem #3: Schlechtes Responsive Design beeinflusst die Ladezeit<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Warum_responsive_Websites_trotzdem_State_of_the_Art_sind\" title=\"Warum responsive Websites trotzdem State of the Art sind\">Warum responsive Websites trotzdem State of the Art sind<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Suchmaschinenoptimiertes_Webdesign_Responsive_Design\" title=\"Suchmaschinenoptimiertes Webdesign: Responsive Design\">Suchmaschinenoptimiertes Webdesign: Responsive Design<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Responsive_Design_erstellen_-_wie_geht_das\" title=\"Responsive Design erstellen \u2013 wie geht das?\">Responsive Design erstellen \u2013 wie geht das?<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Responsive_Design_Wichtige_Grundlagen\" title=\"Responsive Design: Wichtige Grundlagen\">Responsive Design: Wichtige Grundlagen<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#1_Breakpoints\" title=\"1. Breakpoints\">1. Breakpoints<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#2_Dynamische_Schriftgroessen\" title=\"2. Dynamische Schriftgr\u00f6\u00dfen\">2. Dynamische Schriftgr\u00f6\u00dfen<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#3_Flexible_Bildgroessen_durch_srcset_und_sizes\" title=\"3. Flexible Bildgr\u00f6\u00dfen durch srcset und sizes\">3. Flexible Bildgr\u00f6\u00dfen durch srcset und sizes<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.herold.at\/ratgeber\/website-erstellen\/responsive-web-design\/#Responsive_Webdesign_von_Herold\" title=\"Responsive Webdesign von Herold\">Responsive Webdesign von Herold<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Responsive_Website_-_was_ist_responsives_Webdesign\"><\/span>Responsive Website \u2013 was ist responsives Webdesign?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>F\u00fcr alle die diesen Begriff noch nie geh\u00f6rt haben: <strong>Responsive Websites<\/strong> passen sich an das jeweilige Nutzerger\u00e4t an. Es ist also egal, ob jemand mit dem Smartphone, dem Tablet oder dem Laptop auf deiner Website landet, denn die Schriftgr\u00f6\u00dfen, Videos und sonstigen wichtigen Elemente auf einer responsive Website passen sich in ihrer Gr\u00f6\u00dfe und Positionierung automatisch an das jeweilige Endger\u00e4t an. <\/p>\n\n\n\n<p>Es gibt beim responsive Design auch tats\u00e4chlich nur eine Version, deren Code, abh\u00e4ngig von der Bildschirmgr\u00f6\u00dfe unterschiedlich gerendert wird.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Warum_ist_Responsive_Webdesign_so_gefragt\"><\/span>Warum ist Responsive Webdesign so gefragt?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Seit Einf\u00fchrung der Smartphones hat sich die <strong>Internetnutzung immer st\u00e4rker<\/strong> von Computern <strong>auf Mobilger\u00e4te<\/strong> wie Smartphones und Tablets <strong>verlagert<\/strong>. Handyfreundliche Schriftma\u00dfe und Elementgr\u00f6\u00dfen auf der Website r\u00fcckten pl\u00f6tzlich in den Fokus von Designer und Designerinnen. Um die Benutzerfreundlichkeit zu gew\u00e4hrleisten, stehen Webdesigner seither vor der gro\u00dfen Herausforderung, ein passendes und m\u00f6glichst <strong>dynamisches Design <\/strong>f\u00fcr<strong> beide Anwendungsf\u00e4lle<\/strong> und <strong>alle Nutzungsszenarien<\/strong> zu entwickeln.<\/p>\n\n\n\n<p>Da die Ansicht einer Website nicht nur zwischen der unfassbaren Vielzahl an unterschiedlichen Devices und <a href=\"https:\/\/de.wikipedia.org\/wiki\/Viewport\" target=\"_blank\" rel=\"noreferrer noopener\">Viewports<\/a> laufend wechselt, sondern ohnehin jedes mobile Endger\u00e4t zwischen Querformat und Hochformat switchen kann, musste ein reagierendes Design entwickelt werden. Dies war die Geburtsstunde des responsive Webdesigns, das sich seither zu einer enorm wichtigen Website-Technologie entwickelte.<\/p>\n\n\n<div id=\"block_cta_box-block_fb191a4b00d14d3aa0b2a64968510df7\" class=\"container\">\n    <div class=\"herold_blog_cta_box\">\n        <div class=\"cta_box_text\">\n            Ist meine Website mobiloptimiert?        <\/div>\n                <div class=\"cta_box_button_wrapper\">\n            <div class=\"cta_box_button\"><a href=\"https:\/\/www.herold.at\/marketing\/gratis-checks\/website-check\/?utm_source=herold_ratgeber&#038;utm_medium=cta1&#038;utm_campaign=herold_websitecheck&#038;utm_content=responsive-web-design\" target=\"_blank\">Kostenlos testen<\/a><\/div>\n        <\/div>\n            <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Warum_hat_sich_Responsive_Webdesign_durchgesetzt\"><\/span>Warum hat sich Responsive Webdesign durchgesetzt?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In den 90er Jahren wurde das Internet vorwiegend per Computer genutzt. S\u00e4mtliche Websites der sp\u00e4ten 90er wurden also an die Bed\u00fcrfnisse von Stand-PCs bzw. den Anzeigebereich von ihren Bildschirmen angepasst. Obwohl der amerikanische Hersteller IBM mit dem IBM Simon bereits <strong>1994 das erste Touchscreen Handy<\/strong> entwickelte, setzte sich die Smartphone-Technologie erst 2007, mit der Einf\u00fchrung des Apple iPhone durch. <\/p>\n\n\n\n<p>Damit verbunden stieg ab 2007 auch die Zahl der Internet-Nutzenden rasant an. Seit einigen Jahren sind <strong>mehr als die H\u00e4lfte<\/strong> der Internet-Nutzenden <strong>per mobilem Endger\u00e4t<\/strong> im Netz unterwegs ist, weshalb mobiltaugliche und m\u00f6glichst anpassungsf\u00e4hige Websites immer gefragter wurden.<\/p>\n\n\n\n<p>Sp\u00e4testens als Google im April 2015 &#8222;Mobile Friendliness&#8220; zu einem offiziellen <a href=\"https:\/\/www.herold.at\/ratgeber\/suchmaschinenoptimierung-seo\/google-ranking-faktoren\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Rankingfaktor<\/a> machte, wurden mobiloptimierte (zumeist responsive) Websites praktisch zur Norm. Google empfiehlt Responsive Webdesign sogar ausdr\u00fccklich, zur Optimierung der mobilen Version einer Website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Welche_Webdesign_Ansaetze_gibt_es_fuer_Responsive_Websites\"><\/span>Welche Webdesign Ans\u00e4tze gibt es f\u00fcr Responsive Websites?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Im Grunde gibt es drei leicht verschiedene Ans\u00e4tze um ein dynamisches Webdesign sowohl f\u00fcr gro\u00dfe Bildschirme und kleine Touchscreens zu entwickeln: <strong>Klassisches Webdesign<\/strong>, <strong>Mobile First Webdesign<\/strong> und <strong>Progressive Enhancement.<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Klassisches Webdesign<\/strong>: Beim klassischen Ansatz wird die Website f\u00fcr den gro\u00dfen Bildschirm konzipiert und anschlie\u00dfend werden responsive Erweiterungen durchgef\u00fchrt.<\/li>\n\n\n\n<li><strong>Mobile First:<\/strong> Bei diesem Ansatz wird die Funktionalit\u00e4t der Website f\u00fcr mobile Ger\u00e4te konzipiert und anschlie\u00dfend f\u00fcr gr\u00f6\u00dfere Bildschirme erweitert.<\/li>\n\n\n\n<li><strong>Progressive Enhancement<\/strong>: Bei dieser Webentwicklung steht die Barrierefreiheit, semantische Auszeichnung und Trennung von Information und Darstellung im Vordergrund. Ziel ist es, eine Website auch f\u00fcr \u00e4ltere Mobilger\u00e4te und \u00e4ltere Browser-Versionen bedienbar und nutzbar zu machen.<\/li>\n<\/ol>\n\n\n<div id=\"block_border_block_44bcb58af356b244e997a46d5023a43f\" class=\"container\"> \n\n<div class=\"block_highlight_wrapper flex_wrapper herold_gelb_border standard rem2\">\n\n<p><strong>Anmerkung:\u00a0<\/strong>Der Mobile First Ansatz setzt sich seit einigen Jahren immer mehr durch. Optisch erzielt das klassische Webdesign zwar genau die gleichen Resultate, beim Mobile First Ansatz ist aber das Stylesheet deutlich k\u00fcrzer, womit die Ladezeit erheblich reduziert werden kann.<\/p>\n<\/div>\n\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wie_funktioniert_responsive_Design\"><\/span>Wie funktioniert responsive Design?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Das Responsive Design stellt die technischen Voraussetzungen f\u00fcr ein&nbsp;<strong>anpassungsf\u00e4higes Website-Layout<\/strong>&nbsp;zur Verf\u00fcgung. Dabei ist v\u00f6llig unerheblich ob die Ansicht der Webseite via&nbsp;Desktop,&nbsp;iPad&nbsp;oder&nbsp;Samsung Galaxy Smartphone erfolgt.<\/p>\n\n\n\n<p>Damit das gelingt, wird eine responsive Website mit HTML5 und CSS3 programmiert. In diesen Auszeichnungssprachen stehen Media Queries zur Verf\u00fcgung, mit denen konkrete Informationen \u00fcber das Endger\u00e4t erfragt werden k\u00f6nnen. Dazu geh\u00f6ren Eigenschaften wie Displaygr\u00f6\u00dfe, Aufl\u00f6sung und Format. Aber auch Funktionalit\u00e4ten des Endger\u00e4ts, wie beispielsweise dessen Eingabem\u00f6glichkeiten, k\u00f6nnen auf diese Weise ermittelt werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wie_erkenne_ich_ob_meine_Website_ein_Responsive_Design_hat\"><\/span>Wie erkenne ich ob meine Website ein Responsive Design hat?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Wenn du schnell testen willst, ob deine Website \u00fcber ein Responsive Design verf\u00fcgt bzw. funktioniert, gen\u00fcgt es, die <strong>Gr\u00f6\u00dfe deines Browserfensters zu ver\u00e4ndern<\/strong>, sobald du auf deiner Website bist. Wenn sich die Anordnung der Elemente im Browserfenster ver\u00e4ndert, kannst du davon ausgehen, dass deine Website responsiv ist.<\/p>\n\n\n<div id=\"block_border_block_e2511375be5320a63f7dd46239e8d249\" class=\"container\"> \n\n<div class=\"block_highlight_wrapper flex_wrapper herold_gelb_border standard rem2\">\n\n<p><strong data-rich-text-format-boundary=\"true\">Anmerkung<\/strong>: Responsives Design bedeutet aber nicht nur, dass die Inhalte in Relation zum kleineren Sichtfenster dargestellt werden, sondern vor allem, dass sich die <strong>Anordnung der einzelnen Elemente<\/strong> (zum Beispiel Headerbild, Navigation usw.) sinnvoll an das jeweilige Endger\u00e4t anpassen.<\/p>\n<p><strong>Zusatztipp:<\/strong> Es gibt einen <a href=\"https:\/\/search.google.com\/test\/mobile-friendly\" target=\"_blank\" rel=\"noopener\">Google-Test<\/a>, mit dem du kostenlos \u00fcberpr\u00fcfen kannst, ob deine Website mobilfreundlich ist.<\/p>\n<\/div>\n\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wie_veraendert_sich_die_Optik_der_Website_beim_Responsive_Design\"><\/span>Wie ver\u00e4ndert sich die Optik der Website beim Responsive Design?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Im Wesentlichen <strong>verschieben sich<\/strong> beim Responsive Design <strong>einzelne Elemente<\/strong> je nach Gr\u00f6\u00dfe des Viewports. W\u00e4hrend die Inhalte und Funktionen auf der Webseite gleich bleiben, \u00e4ndert sich also deren Anordnung. Aus Sicht eines Webdesigners bedeutet das, dass der HTML-Code gleich bleibt, aber andere CSS-Eigenschaften zur Anwendung kommen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nachteile_Probleme_des_Responsive_Designs\"><\/span>Nachteile &amp; Probleme des Responsive Designs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Das Responsive Design hat selbstverst\u00e4ndlich nicht nur Vorteile \u2013 das w\u00e4re schlie\u00dflich auch zu sch\u00f6n um wahr zu sein. Auch wenn die <strong>Vorteile meist klar \u00fcberwiegen<\/strong>, wollen wir an dieser Stelle auf ein paar Schwierigkeiten und Probleme eingehen, die durch das responsive Design auftreten k\u00f6nnen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Problem_1_Responsive_Design_muss_gut_durchdacht_sein\"><\/span>Problem #1: Responsive Design muss gut durchdacht sein<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Wenn man die optimale Usability (= bestm\u00f6gliche Nutzererlebnis) f\u00fcr seine Kundschaft m\u00f6chte, sollte das <strong>responsive Design gut durchdacht<\/strong> sein. Irgendwelche Schnelll\u00f6sungen mit einem Automatismus oder gar nicht mit einem vorgefertigten &#8222;responsive Template&#8220; gehen nur in den seltensten F\u00e4llen gut.<\/p>\n\n\n\n<p>Da die Bed\u00fcrfnisse des Users je nach Endger\u00e4t sehr unterschiedlich ausfallen, sollte das responsive Design so gestaltet sein, dass sowohl Desktop- als auch Smartphone-Nutzende auf ihre Kosten kommen. Diesen Spagat zu schaffen ist die gro\u00dfe Kunst eines nutzerfreundlichen Responsive Designs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Problem_2_Schlechte_Kompatibilitaet_mit_manchen_Browsern\"><\/span>Problem #2: Schlechte Kompatibilit\u00e4t mit manchen Browsern<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Wer sich f\u00fcr eine responsive Website entscheidet, sollte sich bewusst machen, dass es nicht nur unterschiedliche Devices (also Ausgabeger\u00e4te) gibt, sondern auch unterschiedliche Browser (z. B. Mozilla Firefox, Google Chrome, Apple Safari, Opera sowie Microsoft Edge und Internet Explorer). Dabei kommt es h\u00e4ufig zu Kompatibilit\u00e4tsproblemen. Da es bei Browsern h\u00f6chst individuelle Vorlieben gibt, muss man <strong>bei der Entwicklung<\/strong> des Designs auch auf s\u00e4mtliche <strong>g\u00e4ngigen Browser R\u00fccksicht nehmen<\/strong> und die Layouts und Funktionen f\u00fcr all diese Browser <strong>gr\u00fcndlich testen<\/strong>.<\/p>\n\n\n\n<p>Das bedeutet f\u00fcr dich: Ein gewisses Restrisiko, dass deine Website <strong>nicht allen Usern korrekt angezeigt<\/strong> wird, besteht leider. Vor allem dann, wenn du keinen Entwicklungsaufwand bezahlen m\u00f6chtest und deshalb auf vorgefertigte Templates zur\u00fcckgreifst.<\/p>\n\n\n<div id=\"block_border_block_d3a36c40f83df4ad15a9026a4f7ba534\" class=\"container\"> \n\n<div class=\"block_highlight_wrapper flex_wrapper herold_gelb_border standard rem2\">\n\n<p><strong>Tipp:<\/strong> Auf <a href=\"https:\/\/caniuse.com\/?search=flex\" target=\"_blank\" rel=\"noopener\">dieser Website<\/a> kannst du nachschlagen, welche Funktionen von welchem Browser derzeit unterst\u00fctzt werden.<\/p>\n<\/div>\n\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Problem_3_Schlechtes_Responsive_Design_beeinflusst_die_Ladezeit\"><\/span>Problem #3: Schlechtes Responsive Design beeinflusst die Ladezeit<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Eine schnelle Website \u2013 also eine m\u00f6glichst kurze Ladezeit \u2013 ist nicht nur ein wichtiger <strong>Google Rankingfaktor<\/strong>, der dazu beitr\u00e4gt das <a href=\"https:\/\/www.herold.at\/ratgeber\/suchmaschinenoptimierung-seo\/google-ranking-verbessern\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Ranking zu verbessern<\/a>, sondern auch wichtig, wenn es darum geht potenzielle Kundschaft zu gewinnen. Denn schlie\u00dflich leben wir in einer Zeit, in der die meisten Inhalte m\u00f6glichst rasch und unkompliziert zug\u00e4nglich sind. Lange Ladezeiten wirken f\u00fcr User also unattraktiv und f\u00fchren im schlimmsten Fall dazu, dass ungeduldige Internetnutzende die Website gleich wieder verlassen.<\/p>\n\n\n\n<p><strong>Schlecht gemachtes responsive Design<\/strong> kann aber \u2013 vor allem in Kombination mit zu gro\u00dfen Bilddateien \u2013 genau zu diesen langen Ladezeiten f\u00fchren. Vor allem &#8222;Fertig-Themes&#8220; m\u00fcssen zahlreiche unterschiedliche Anforderungen abdecken um m\u00f6glichst flexibel verwendbar zu sein. Genau diese gr\u00f6\u00dfere Flexibilit\u00e4t sorgt aber f\u00fcr Unmengen an Code, die wiederum zu Lasten der Performance bzw. Ladezeit gehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Warum_responsive_Websites_trotzdem_State_of_the_Art_sind\"><\/span>Warum responsive Websites trotzdem State of the Art sind<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trotz der genannten Nachteile sind Responsive Websites seit einigen Jahren State of the Art, woran sich so schnell auch nichts \u00e4ndern wird. Denn die Vorteile \u00fcberwiegen ganz deutlich und die wenigen Nachteile k\u00f6nnen von einer guten Webdesign-Agentur ausgemerzt werden. Folgende Vorteile sind zu nennen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>preiswert: <\/strong>Das Responsive Design macht die Entwicklung einer zus\u00e4tzlichen mobilen Website unn\u00f6tig, wodurch Kosten gespart werden.<\/li>\n\n\n\n<li><strong>zeitsparend: <\/strong>Es muss immer nur eine einzige Website mit Content bef\u00fcllt werden.<\/li>\n\n\n\n<li><strong>eindeutige URL:<\/strong> Eine responsive Website hat nur eine einzige URL, w\u00e4hrend eigens angefertigte mobile Website-Versionen immer eine zus\u00e4tzliche URL erzeugen. Das bedeutet, dass es in diesem Falle zwei URLs f\u00fcr deine Website gibt. Das kann zu Verwirrung f\u00fchren \u2013 insbesondere dann, wenn die mobile-URL via Smartphone geteilt und am Desktop abgerufen wird. Au\u00dferdem zeigt Google immer nur eine der beiden URLs in den SERPs an. Welche das ist, ist dann meist eher Zufall.<\/li>\n\n\n\n<li><strong>benutzerfreundlich: <\/strong>Das Responsive Webdesign sorgt daf\u00fcr, dass die Website-Inhalte auf jedem Endger\u00e4t optimal dargestellt werden. Dies tr\u00e4gt zu einer positiven User Experience bei und erh\u00f6ht die Verweildauer auf der Webseite (ebenfalls ein wichtiger Google Ranking-Faktor). Au\u00dferdem ist das Responsive Design der erste Schritt zu einer barrierefreien Website.<\/li>\n\n\n\n<li><strong>von Google gef\u00f6rdert: <\/strong>Google empfiehlt die Verwendung von Responsive Webdesign ausdr\u00fccklich, seit Google die Privilegien f\u00fcr Accelerated Mobile Pages (AMP) eingestellt hat. Ein responsive Webdesign zu verwenden ist also auch Teil der Suchmaschinenoptimierung.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Suchmaschinenoptimiertes_Webdesign_Responsive_Design\"><\/span>Suchmaschinenoptimiertes Webdesign: Responsive Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Aus SEO-Sicht lohnt sich die Entwicklung einer Responsive Website, denn gut gemachtes Responsive Webdesign erh\u00f6ht im Normalfall die User Experience. Damit verbunden erh\u00f6ht sich die Verweildauer der Besucher und Besucherinnen, was sich wiederum positiv auf das Ranking der Seite auswirken kann \u2013 darauf deuten zumindest die k\u00fcrzlich ver\u00f6ffentlichten <a href=\"https:\/\/www.seo-suedwest.de\/8555-yandex-rankingfaktoren-geleaked-einige-ueberraschungen-dabei.html\" target=\"_blank\" rel=\"noreferrer noopener\">Yandex-Leaks<\/a> hin. Auch die Bounce Rate (= Absprungrate) kann durch eine anpassungsf\u00e4hige Darstellungsform gesenkt werden, da die Webuser besser mit der Website interagieren k\u00f6nnen. <\/p>\n\n\n\n<p><strong>Fazit<\/strong>: Responsive Webdesign = suchmaschinenoptimiertes Webdesign.<\/p>\n\n\n<div id=\"block_cta_box-block_2dbe27031f9e7012c23f33c6594842cd\" class=\"container\">\n    <div class=\"herold_blog_cta_box\">\n        <div class=\"cta_box_text\">\n            Du willst eine Website, um die du dich nicht k\u00fcmmern musst?        <\/div>\n                <div class=\"cta_box_button_wrapper\">\n            <div class=\"cta_box_button\"><a href=\"https:\/\/www.herold.at\/marketing\/kontakt\/?utm_source=herold_ratgeber&#038;utm_medium=cta2&#038;utm_campaign=b2b_contact&#038;utm_content=responsive-web-design\" target=\"_blank\">Kostenlose Beratung<\/a><\/div>\n        <\/div>\n            <\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Responsive_Design_erstellen_-_wie_geht_das\"><\/span>Responsive Design erstellen \u2013 wie geht das?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Zuallererst einmal:\u00a0nicht\u00a0als DIY-Projekt! Denn selbst, wenn du dich mit\u00a0flexiblen Bildern, Media Queries und CSS (=\u00a0Cascading Style Sheets) auskennst, reicht das noch nicht f\u00fcr eine responsive Webseite, die schnell genug l\u00e4dt. Hierf\u00fcr sind h\u00e4ufig auch<strong>\u00a0serverseitige Optimierungen<\/strong>\u00a0notwendig. Technisch gesehen erfolgt die Umsetzung mit sogenannten Media Queries (&#8222;Medienabfragen&#8220;) \u2013 einer Funktion der Stylesheet-Sprache CSS3. Diese Media-Queries werden im CSS-File platziert.<\/p>\n\n\n\n<p>Eine gro\u00dfe Herausforderung stellt zudem die&nbsp;<strong>Websitegr\u00f6\u00dfe<\/strong>&nbsp;dar, denn viele Webseiten haben heute eine Gr\u00f6\u00dfe von rund&nbsp;2 MB oder sogar mehr. Und je gr\u00f6\u00dfer eine Webseite ist, desto schwieriger ist es, sie responsive zu machen.&nbsp;Auch im Hinblick darauf, dass laufend&nbsp;<strong>neue mobile Devices<\/strong>&nbsp;erscheinen und entsprechende&nbsp;<strong>Layouts nachgearbeitet<\/strong>&nbsp;werden m\u00fcssen, solltest du Aufgabe erfahrenen Webdesignern \u00fcberlassen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Responsive_Design_Wichtige_Grundlagen\"><\/span>Responsive Design: Wichtige Grundlagen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Welche Kriterien<\/strong>&nbsp;muss ein responsives Design erf\u00fcllen, damit die Website<strong>&nbsp;auf allen Endger\u00e4ten<\/strong>&nbsp;optimal dargestellt wird und damit die&nbsp;<strong>Absprungraten sinken<\/strong>? Und welche Ver\u00e4nderungen braucht es, um die Webseite von&nbsp;statisch&nbsp;auf&nbsp;dynamisch&nbsp;zu bringen?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Breakpoints\"><\/span>1. Breakpoints<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Bei anpassungsf\u00e4higen Websites kommt den sogenannten <strong>Breakpoints<\/strong> eine bedeutende Rolle zu. Breakpoints sind jene Stellen einer Website, ab denen das Layout einen Umbruch erh\u00e4lt. Beispielsweise kann mittels CSS erreicht werden, dass ein vierspaltiges Layout ab einer bestimmten Breite (also sobald der Breakpoint \u00fcberschritten wird) zu einem Layout mit zwei Spalten ge\u00e4ndert wird.<\/p>\n\n\n\n<p>Wo man diese Breakpoints setzt, ist eine der wichtigen Fragen anpassungsf\u00e4higen Website. Folgende Methoden stehen zu Verf\u00fcgung:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adaptive Layout:<\/strong> Ein Adaptive Layout ist ein f\u00fcr verschiedene Displaygr\u00f6\u00dfen optimiertes Web-Layout. Diese L\u00f6sung ist nicht perfekt, aber durchaus verbreitet. Der Kern des Adaptive Layouts ist ein starres Gestaltungsraster in Kombination mit Media Queries.\n<ul class=\"wp-block-list\">\n<li>Nachteil: Es ist nicht f\u00fcr alle Displaygr\u00f6\u00dfen optimiert.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Responsive Layout:<\/strong> Das Responsive Layout arbeitet mit einem fl\u00fcssigen Gestaltungsraster (Grid) in Kombination mit Media Queries. Dabei wird nicht gezielt f\u00fcr einen bestimmten Viewport optimiert, sondern das Design so gew\u00e4hlt, dass sich die Website immer optimal an den Inhalt anpasst.\n<ul class=\"wp-block-list\">\n<li>Nachteil: Responsive Layout arbeitet mit deutlich mehr Breakpoints bzw. Media Queries und verlangsamt dadurch die Ladezeit ein bisschen. Au\u00dferdem ist die Umsetzung zeitintensiver.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Dynamische_Schriftgroessen\"><\/span>2. Dynamische Schriftgr\u00f6\u00dfen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Bei den Schriftgr\u00f6\u00dfen arbeitest du im Responsive Design oft mit&nbsp;<strong>Prozentwerten<\/strong>. Das ist auch vollkommen logisch, denn Headlines und Flie\u00dftexte sehen am Desktop vollkommen anders aus als am Tablet oder Smartphone und m\u00fcssen je nach Displaygr\u00f6\u00dfe unterschiedlich skaliert werden.<\/p>\n\n\n\n<p>Eine andere beliebte M\u00f6glichkeit um Schriftgr\u00f6\u00dfen dynamisch zu halten, ist die <a href=\"https:\/\/www.elmastudio.de\/css-tipp-rem-als-einheit-fur-schriftgrose-nutzen\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angabe der Schriftgr\u00f6\u00dfen in rem oder em<\/a>. Denn em und rem beziehen sich immer auf den n\u00e4chsth\u00f6heren Container.<\/p>\n\n\n\n<p>Grunds\u00e4tzlich gilt aber: Verpacke s\u00e4mtliche Infos so, dass sie auch auf kleinstem Raum gut zu lesen und gut zu verstehen sind. Ob deine Texte auch&nbsp;<strong>mobil gut&nbsp;lesbar<\/strong>&nbsp;sind, solltest du grunds\u00e4tzlich direkt auf dem jeweiligen Ger\u00e4t \u00fcberpr\u00fcfen.<\/p>\n\n\n<div id=\"block_border_block_52188e194cc91604c2be6accae0b1ada\" class=\"container\"> \n\n<div class=\"block_highlight_wrapper flex_wrapper herold_gelb_border standard rem2\">\n\n<p><strong>Tipp: <\/strong>Denk&#8216; auch bei der Content-Erstellung immer daran, dass die Inhalte sowohl auf Displays mit einer gro\u00dfen Bildschirmbreite als auch auf dem schmalen Smartphone gut aussehen sollten. Vermeide also lange Headlines, denn auch wenn die Schriftgr\u00f6\u00dfe durch das responsive Design kleiner wird, gehen lange \u00dcberschriften \u00fcber mehrere Zeilen.<\/p>\n<\/div>\n\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Flexible_Bildgroessen_durch_srcset_und_sizes\"><\/span>3. Flexible Bildgr\u00f6\u00dfen durch srcset und sizes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Bilder sind im responsiven Webdesign ein zweischneidiges Schwert. Der User erwartet n\u00e4mlich, dass sie sowohl<strong>\u00a0schnell laden<\/strong>\u00a0als auch\u00a0<strong>hochaufl\u00f6send<\/strong>\u00a0sind\u00a0\u2013 und das bei mobilem Internet, was eine weitere Herausforderung darstellt. <\/p>\n\n\n\n<p>Es gibt eine Reihe von\u00a0<strong>Plugins\u00a0<\/strong>(zum Beispiel\u00a0<strong>Adaptive Images<\/strong>), die Grafik und\/oder Bilder entsprechend der jeweiligen Bildschirmgr\u00f6\u00dfe laden. Eine andere M\u00f6glichkeit ist es, jedes Bild in verschiedenen Gr\u00f6\u00dfen direkt\u00a0<strong>am Server zu hinterlegen<\/strong> und die img-Tags mit den Attributen <a href=\"https:\/\/kulturbanause.de\/blog\/responsive-images-srcset-sizes-adaptive\/\" target=\"_blank\" rel=\"noreferrer noopener\">srcset<\/a> und sizes zu best\u00fccken. <\/p>\n\n\n\n<p>Denn sie sind der Schl\u00fcssel zu responsiven Bildern:\u00a0<strong>srcset<\/strong>\u00a0listet alternative Bildgr\u00f6\u00dfen als Set von Bildern, unter denen der Browser ein Bild aussuchen kann, w\u00e4hrend\u00a0<strong>sizes<\/strong> die Bedingungen setzt, zu denen der Browser das Bild aussucht, z. B. nach Gr\u00f6\u00dfe und Ausrichtung des Viewports.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Responsive_Webdesign_von_Herold\"><\/span>Responsive Webdesign von Herold<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dir schwirrt vor Grids, Pixelwerten und Media Queries bereits der Kopf? CSS3 l\u00e4sst sich doch nicht von heute auf morgen lernen? Keine Schande, denn Webdesign ist alles andere als einfach. Das ist auch der Grund daf\u00fcr, dass es Agenturen gibt, die sich darauf spezialisiert haben. Wenn du sichergehen m\u00f6chtest, dass deine Website\u00a0<strong>f\u00fcr s\u00e4mtliche mobile Endger\u00e4te optimiert ist<\/strong>, sollten du dich \u00fcber <strong>Herold Websites <\/strong>informieren.<\/p>\n\n\n\n<p>Herold ist derzeit der&nbsp;gr\u00f6\u00dfte Website-Anbieter im KMU-Segment und hat weit mehr als 25.000 \u00f6sterreichische Webseiten realisiert. Unsere Websites zeichnen sich vor allem durch folgende Punkte aus:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Responsivit\u00e4t<\/li>\n\n\n\n<li>SSL-Zertifikat<\/li>\n\n\n\n<li>schnelle Ladezeiten<\/li>\n<\/ul>\n\n\n\n<p>Ein weiterer <strong>Pluspunkt<\/strong>: Laufende Updates der Software selbst sowie der Firewall sorgen zus\u00e4tzlich f\u00fcr die <strong>Sicherheit<\/strong> deiner Daten. <\/p>\n\n\n<div id=\"block_cta_box-block_7bd94016ef03b77136f3bc1d29b44f22\" class=\"container\">\n    <div class=\"herold_blog_cta_box\">\n        <div class=\"cta_box_text\">\n            Du willst dir eine Responsive Website erstellen lassen?        <\/div>\n                <div class=\"cta_box_button_wrapper\">\n            <div class=\"cta_box_button\"><a href=\"https:\/\/www.herold.at\/marketing\/websites\/?utm_source=herold_ratgeber&#038;utm_medium=cta3&#038;utm_campaign=herold_website_lp&#038;utm_content=responsive-web-design\" target=\"_blank\">Alle Details<\/a><\/div>\n        <\/div>\n            <\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column blog_sidebar is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:15%\"><p>[shariff]<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:85%\">\n<div id=\"content-right_column_post-block_13a5f384fb81d86a25f8c254e4a3c182\" class=\"flex_wrapper right_column_post \">\n    <div class=\"autorbox-new\" itemscope itemtype=\"https:\/\/schema.org\/Person\">\n        \n        <div>\n            <p class=\"right_author_name\" itemprop=\"name\"><\/p>\n            <meta itemprop=\"jobTitle\" content=\"\">\n            <p class=\"right_author_role\"><\/p>\n\n                    <\/div>\n    <\/div>\n\n    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Vor Jahren war &#8222;Mobile Responsive Webdesign&#8220; neu. Heute kennen es die meisten Website-Betreibenden. Doch was steckt wirklich dahinter? Erfahre hier, warum es &#8222;State-of-the-Art&#8220; ist, worin dir Vor- und Nachteile bestehen und warum du unbedingt darauf setzten solltest. Responsive Website \u2013 was ist responsives Webdesign? Inhaltsverzeichnis Responsive Website \u2013 was ist responsives Webdesign?Warum ist Responsive Webdesign [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":94680,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"content_art":[],"class_list":["post-3491","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-erstellen"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/posts\/3491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/comments?post=3491"}],"version-history":[{"count":104,"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/posts\/3491\/revisions"}],"predecessor-version":[{"id":147257,"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/posts\/3491\/revisions\/147257"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/media\/94680"}],"wp:attachment":[{"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/media?parent=3491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/categories?post=3491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/tags?post=3491"},{"taxonomy":"content_art","embeddable":true,"href":"https:\/\/www.herold.at\/ratgeber\/wp-json\/wp\/v2\/content_art?post=3491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}