{"id":406,"date":"2017-08-17T11:12:50","date_gmt":"2017-08-17T09:12:50","guid":{"rendered":"https:\/\/a-vista-studios.de\/blog\/?p=406"},"modified":"2021-05-26T13:32:30","modified_gmt":"2021-05-26T11:32:30","slug":"responsive-webseiten-mit-typo3-erstellen","status":"publish","type":"post","link":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/","title":{"rendered":"Responsive Webseiten mit TYPO3 erstellen: wie geht das?"},"content":{"rendered":"<h3>Responsive Webseiten mit TYPO3 erstellen: wie geht das? Webseiten sollten auch auf Mobilger\u00e4ten optimal angezeigt werden. Ist das mit TYPO3 m\u00f6glich?<\/h3>\n<p>Um die Antwort gleich vorwegzunehmen: selbstverst\u00e4ndlich lassen sich Responsive Webseiten mit TYPO3 realisieren.<\/p>\n<p><strong>Dabei ist folgendes zu ber\u00fccksichtigen:<br \/>\n<\/strong>Ob eine Website responsive ist oder nicht, hat rein gar nichts mit TYPO3 zu tun. Sondern ausschlie\u00dflich damit, ob das erstellte Template sowie das zugeh\u00f6rige CSS so entwickelt wurde, dass darin auch ein f\u00fcr Mobilger\u00e4te optimiertes Design enthalten ist.<\/p>\n<p style=\"padding-left: 30px;\"><strong>\u00bb Tipp: Dieser Artikel besch\u00e4ftigt sich ausf\u00fchrlich mit der <a href=\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/typo3-template-erstellen\/\">Erstellung von TYPO3 Templates<\/a> und stellt eine detaillierte Anleitung bereit.<\/strong><\/p>\n<h2>Eine Responsive Website mit TYPO3 realisieren<\/h2>\n<p>Um eine responsive Layoutvorlage zu erstellen, werden entsprechende Kenntnisse in HTML und CSS vorausgesetzt. Dabei gilt es, die Website nicht nur f\u00fcr Desktop-Computer zu gestalten, sondern auch die speziellen Anforderungen von Mobilger\u00e4ten zu ber\u00fccksichtigen:<\/p>\n<ol>\n<li>Mobile Endger\u00e4te wie Tablets oder Smartphones verf\u00fcgen \u00fcber einen kleineren Anzeigebereich und k\u00f6nnen auch hochkant (\u201ePotrait-Modus\u201c) gehalten werden, wodurch sich die zur Verf\u00fcgung stehende Breite weiter reduziert. Entsprechend muss sich die Gr\u00f6\u00dfe der Seiteninhaltselemente \u2013 wie Spaltenbreite oder Bildgr\u00f6\u00dfe \u2013 dynamisch an den zur Verf\u00fcgung stehenden Platz anpassen.<\/li>\n<li>Aufgrund der reduzierten Platzverh\u00e4ltnisse empfiehlt sich, insbesondere bei der Darstellung auf Smartphones, ein speziell angepasstes Men\u00fc. H\u00e4ufig findet das so genannte \u201eHamburger-Men\u00fc\u201c Anwendung. Der Name resultiert daraus, dass die \u00fcblicher Weise verwendeten drei Querstriche mit etwas Fantasie aussehen wie ein \u201eHamburger\u201c.<\/li>\n<li>Auf Tablets und Smartphones wird durch Antippen der Navigationselemente und Links navigiert statt mit der Maus. Entsprechend gibt es auch kein \u201eMouseOver\u201c.<br \/>\nHier erfahrt ihr, wie sich <a href=\"https:\/\/a-vista-studios.de\/blog\/typo3\/touchpad-menu-mit-typo3-realisieren\/\">Touchpad-freundlichen Navigationsmen\u00fcs<\/a> in TYPO3 umsetzen lassen.<\/li>\n<\/ol>\n<p><strong>F\u00fcr die Realisation von Responsiven Websites haben sich zwei unterschiedliche Ans\u00e4tze etabliert: <\/strong><\/p>\n<ul>\n<li>Entweder es wird nur ein Design f\u00fcr die Website entwickelt und so optimiert, dass sich die Anzeige f\u00fcr das jeweilige Benutzerendger\u00e4t anpasst.<\/li>\n<li>Oder es wird zweigleisig gefahren und die Desktop-Version der Website auf der Hauptdomain zur Verf\u00fcgung gestellt und die mobile Webseitenversion auf einer Subdomain \u2013 oft mit vorangestelltem \u201em\u201c in folgender Form: <em>https:\/\/m.domainname.de<\/em>.<\/li>\n<\/ul>\n<p>Welche Methode zu bevorzugen ist, h\u00e4ngt von der Intention ab. Google empfiehlt, die Website unter der Haupt-Domain bereitzustellen und so zu entwickeln, dass sich das Layout f\u00fcr die unterschiedlichen Benutzerendger\u00e4te anpasst.<\/p>\n<p>Insbesondere wenn die Inhalte der mobilen Webseitenversion von denen der Desktop-Version abweichen, kann es aber durchaus sinnvoll sein, mit einer Subdomain zu arbeiten, \u00fcber eine <strong><em>Mobile Detection<\/em><\/strong> das Benutzerendger\u00e4t zu identifizieren und automatisch auf die passende URL weiterzuleiten. Weitere Informationen zu diesem Thema stellen wir hier bereit:<br \/>\n<a href=\"https:\/\/a-vista-studios.de\/responsive-homepages-leverkusen\/\" target=\"_blank\" rel=\"noopener\"><strong>Responsive Homepages<\/strong><\/a>.<\/p>\n<p><strong>Responsive Webseiten mit TYPO3:<br \/>\n<\/strong><strong>Folgende Bereiche gilt es bei der Realisation eines reponsiven TYPO3 Templates zu ber\u00fccksichtigen:<\/strong><\/p>\n<h2>1. Viewport der responsiven Website<\/h2>\n<p>Damit sich das Weblayout in Bezug auf die Inhaltselemente und Schriftgr\u00f6\u00dfe einheitlich an die Darstellung f\u00fcr mobile Ger\u00e4te anpasst, ist der <em><strong>Viewport<\/strong> <\/em>zu definieren. Unter einem Viewport wird der f\u00fcr die Darstellung zur Verf\u00fcgung stehende Bereich verstanden. Beispielsweise die Gr\u00f6\u00dfe des in einem Browserfenster zur Verf\u00fcgung stehenden Platzes.<\/p>\n<p>Eine gebr\u00e4uchliche und weit verbreitete Angabe ist:<\/p>\n<pre class=\"font-size:15 line-height:18 lang:default decode:true\">&lt;meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0\" \/&gt;   \r\n&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h2>2. Automatische Anpassung der Bildgr\u00f6\u00dfe<\/h2>\n<p>In TYPO3 werden Bilder per Standard in einer fixen Gr\u00f6\u00dfe integriert. Damit die Bildgr\u00f6\u00dfe sich bei responsiven Webseiten mit TYPO3 dynamisch an den zur Verf\u00fcgung stehenden Platz anpasst \u2013 also insbesondere reduziert, wenn das Browserfenster schmaler wird \u2013 sind entsprechende Anpassungen \u00fcber das CSS erforderlich:<\/p>\n<pre class=\"font-size:15 line-height:18 lang:default decode:true\">.csc-textpic-image img,\r\nimg {\r\n    max-width: 100%;\r\n    height: auto;\r\n    width: auto;\r\n  }<\/pre>\n<p>&nbsp;<\/p>\n<p>Au\u00dferdem muss bis TYPO3 Version 6.x f\u00fcr die von TYPO3 verwendeten Classes <em>csc-textpic-imagewrap <\/em>die Eigenschaft <em>float: none;<\/em> festgelegt werden.<\/p>\n<p>Ab TYPO3 Version 7.x wird f\u00fcr die Class <em>ce-column<\/em> die Eigenschaft <em>float: none;<\/em> integriert.<\/p>\n<h2>3. Anpassung der Spaltenelemente<\/h2>\n<p>H\u00e4ufig werden auf Webseiten mehrspaltige Inhalte gezeigt. So kommen beispielsweise <a href=\"https:\/\/a-vista-studios.de\/typo3-agentur-leverkusen\/\" target=\"_blank\" rel=\"noopener\"><strong>zwei-, drei- oder gar vierspaltige Inhaltsbereich zum Einsatz<\/strong><\/a> wie auf vorgenannter Seite zu sehen ist. Wird dort die Website am Desktop-PC zun\u00e4chst gro\u00df angezeigt, dann aber immer schmaler gezogen, so passt sich auch das Layout an.<\/p>\n<p>Reduziert sich die Anzeigebreite, so werden die Spalten zun\u00e4chst schmaler und schlie\u00dflich untereinander angezeigt. Dies wird \u00fcber zwei Techniken erreicht:<\/p>\n<ol>\n<li>Um die Breite des Browserfensters zu ermitteln und in Abh\u00e4ngigkeit vom zur Verf\u00fcgung stehenden Platz \u00c4nderungen am Layout vornehmen zu k\u00f6nnen, werden <em>Media Queries <\/em>eingesetzt.<em><br \/>\n<\/em><\/li>\n<li>Sobald \u00fcber die <em>Media Query<\/em> ermittelt wird, dass die zu Verf\u00fcgung stehende Breite zu gering ist, wird die Breite der DIV-Container \u00fcber CSS auf 100% erweitert. Dadurch werden die Spalten nicht mehr nebeneinander sondern untereinander angezeigt.<\/li>\n<\/ol>\n<h2>4. Responsives Webdesign \u00fcber Media Queries<\/h2>\n<p>Alle halbwegs modernen Webbrowser \u201everstehen\u201c und unterst\u00fctzen <em>Media Queries<\/em>.<\/p>\n<ul>\n<li><strong>Firefox<\/strong> bereits seit Version 3.5, die Mitte 2009 herausgegeben wurde.<\/li>\n<li>Der <strong>Internet Explorer<\/strong> bietet die Unterst\u00fctzung von Media Queries erst ab Version 9 an, welche zuerst im M\u00e4rz 2010 ver\u00f6ffentlich wurde.<\/li>\n<li>Der Apple-Browser <strong>Safari<\/strong> dessen Rendering Engine Webkit auch in Googles <strong>Chrome<\/strong> zum Einsatz kommt, unterst\u00fctzt Media Queries bereits seit Version 3, die im Juni 2007 ver\u00f6ffentlicht wurde.<\/li>\n<li>Der Browser <strong>Opera<\/strong> bietet Media Query-Unterst\u00fctzung bereits seit Version 8 aus dem Jahre 2005 an.<\/li>\n<\/ul>\n<p>Zusammenfassend l\u00e4sst sich sagen, dass selbst das Schlusslicht Internet Explorer seit Fr\u00fchjahr 2010 Media Queries unterst\u00fctzt und deren Einsatz somit problemlos m\u00f6glich ist.<\/p>\n<p><strong>Was aber genau sind <em>\u201eMedia Queries\u201c<\/em>?<br \/>\n<\/strong>Mit Media Queries lassen sich mittels CSS diverse Eigenschaften des Browsers bzw. Endger\u00e4ts abfragen.<\/p>\n<p>Einige Beispiele:<\/p>\n<ul>\n<li>Eigenschaft <strong><em>width<\/em><\/strong><br \/>\nDamit l\u00e4sst sich in Abh\u00e4ngigkeit von der Breite des Viewports angepasstes CSS ausgeben.<br \/>\nBeispiel:<br \/>\n<em>@media screen and (max-width: 780px) {\u2026}<\/em><br \/>\nD.h: <em>\u201ewenn die Breite des Vieports maximal 780 Pixel betr\u00e4gt, dann wende das nachstehende CSS an.\u201c<\/em><\/li>\n<li>Eigenschaft <strong><em>height<\/em><\/strong><br \/>\n\u00dcber diese Eigenschaft l\u00e4sst sich in Abh\u00e4ngigkeit von der Viewport-H\u00f6he das CSS anpassen.<br \/>\nBeispiel:<br \/>\n<em>@media screen and (max-height: 500px) {\u2026}<\/em><\/li>\n<li>Eigenschaft <strong><em>orientation<\/em><\/strong><br \/>\nTablets und Smartphones k\u00f6nnen im Hochformat (= Portrait) oder Querformat (= Landscape) gehalten werden. Daf\u00fcr l\u00e4sst sich separat das Layout anpassen.<br \/>\nBeispiel:<br \/>\n<em>@media all and (orientation:landscape) {\u2026}<\/em><\/li>\n<\/ul>\n<p><strong>Das Layout einer Webseite soll (schematisch) auf dem Desktop-Rechner, Tablet sowie Smartphone folgenderma\u00dfen angepasst werden:<\/strong><\/p>\n<p><img title=\"Responsive Webseiten mit TYPO3 erstellen\" src=\"\/blog\/wp-content\/uploads\/redaktion\/anleitungen\/img_responsive_typo3_webseiten_layoutanpassung.png\" alt=\"Responsive Webseiten mit TYPO3 erstellen\" \/><\/p>\n<p><strong>Das zugeh\u00f6rige HTML halten wir ganz einfach:<\/strong><\/p>\n<pre class=\"font-size:15 line-height:18 lang:default decode:true\">&lt;header&gt;  \r\n  &lt;div id=\"main-menu\"&gt;NAVIGATION&lt;\/div&gt;\r\n&lt;\/header \r\n\r\n&lt;main&gt;  \r\n  &lt;div class=\"col1\"&gt;SPALTE 1&lt;\/div&gt;  \r\n  &lt;div class=\"col2\"&gt;SPALTE 2&lt;\/div&gt;\r\n&lt;\/main&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>F\u00fcr die Desktop-Version der Website definieren wir nachstehendes CSS:<\/strong><\/p>\n<pre class=\"font-size:15 line-height:18 lang:default decode:true\">#main-menu {\r\n  height: 120px;\r\n  width: 100%;\r\n  margin: 0 0 2em 0;\r\n  background: #98a9af; \r\n}\r\n\r\n.col1 {\r\n  float: left;\r\n  width: 46%;\r\n  height: 500px;\r\n  margin: 0 2% 0 2%;\r\n  background: #073b6c; \r\n}\r\n\r\n.col2 {\r\n  float: left;\r\n  width: 46%;\r\n  height: 500px;\r\n  margin: 0 2% 0 0;\r\n  background: #276fb4; \r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Das CSS sorgt daf\u00fcr, dass analog zur vorstehenden Abbildung im Kopfbereich der Website eine Navigation mit entsprechender Hintergrundfarbe und darunter zwei gleich breite Boxen inklusive Randabst\u00e4nde auf der linken und rechten Seite erzeugt werden. Durch die Verwendung von Prozentangaben wird erreicht, dass die Navigation bzw. die Boxen sich abh\u00e4ngig von der Browserfensterbreite an den zur Verf\u00fcgung stehenden Platz anpassen.<\/p>\n<p>Dadurch passt sich das Layout beim Tablet (oder iPad) automatisch an und wird auch in Portraitausrichtung korrekt angezeigt. Bei komplexeren Weblayouts kann aber selbstverst\u00e4ndlich auch eine separate Anpassung f\u00fcr Tablets\/iPads vorgenommen werden.<\/p>\n<p>Auf dem Smartphone reduziert sich \u2013 insbesondere im Portrait-Modus, d.h. wenn das Smartphone hochkant gehalten wird \u2013 der zur Verf\u00fcgung stehende Platz drastisch. Daher sollen SPALTE 1 und SPALTE 2 nun nicht mehr neben- sondern untereinander angezeigt werden. Hier kommen die <em>Media Queries<\/em> ins Spiel:<\/p>\n<pre class=\"font-size:15 line-height:18 lang:default decode:true\">@media screen and (max-width: 480px) { \r\n\r\n  .col1 {\r\n    width: 100%;\r\n    height: 250px;\r\n    margin: 0 10px 10px 10px;\r\n  }\r\n\r\n  .col2 {\r\n    width: 100%;\r\n    height: 250px;\r\n    margin: 10px 10px 0 10px;\r\n  }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Vorstehendes CSS \u00fcberpr\u00fcft, ob die Browserfensterbreite bzw. der Viewport 480 Pixel oder kleiner ist. Ist dies der Fall, so werden die Werte von <em>.col1<\/em> und <em>.col2<\/em> \u00fcberschrieben. Die Spalten werden auf 100% Breite gesetzt dadurch verdr\u00e4ngt SPALTE 1 die SPALTE 2 und zwingt SPALTE 2 dazu, unterhalb von SPALTE 1 zu erscheinen.<\/p>\n<p>Weiterhin wird den beiden Spalten eine H\u00f6he von 250 Pixel gegeben sowie ein rechter und linker Randabstand von 10 Pixel und ein Abstand zwischen den beiden Boxen.<\/p>\n<h2>5. Mobiles Men\u00fc f\u00fcr responsive Websites<\/h2>\n<p>\u00dcber CSS und Media Queries l\u00e4sst sich auch ein responsives (Hamburger-) Men\u00fc realisieren. Dazu kann folgenderma\u00dfen vorgegangen werden:<\/p>\n<ul>\n<li>Der Hamburger wird in den Quellcode der Website integriert, aber \u00fcber CSS unsichtbar gesetzt (<em>display: none;<\/em>).<\/li>\n<li>Unterschreitet die Browserfensterbreite bzw. der Viewport eine bestimmte Breite, so wird der Hamburger mittels <em>display: block;<\/em> sichtbar gesetzt und im Gegenzug das regul\u00e4re (Desktop\/Tablet-) Men\u00fc verborgen.<\/li>\n<li>Damit die Submen\u00fcpunkte in der Desktop-Ansicht bzw. beim mobilen Men\u00fc unterschiedlich angezeigt werden, wird \u2013 ebenfalls \u00fcber <em>Media Queries<\/em> \u2013 eine entsprechende Anpassung des CSS vorgenommen, wenn die Browserfensterbreite bzw. der Viewport eine festgelegte Mindestbreite unterschreitet.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><em>Stichworte: Responsive Webseiten mit TYPO3<\/em><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom kksr-disabled\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;406&quot;,&quot;readonly&quot;:&quot;1&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;4&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 - (4 votes)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;Responsive Webseiten mit TYPO3 erstellen: wie geht das?&quot;,&quot;width&quot;:&quot;172.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 172.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            5\/5 - (4 votes)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Webseiten mit TYPO3 erstellen: wie geht das? Webseiten sollten auch auf Mobilger\u00e4ten optimal angezeigt werden. Ist das mit TYPO3 m\u00f6glich? Um die&hellip;<\/p>\n","protected":false},"author":2,"featured_media":1455,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,16],"tags":[],"class_list":["post-406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typo3","category-typo3-anleitungen"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Responsive Webseiten mit TYPO3 erstellen: wie geht das?<\/title>\n<meta name=\"description\" content=\"Responsive Webseiten mit TYPO3 erstellen: wie geht das? Webseiten sollten auch auf Mobilger\u00e4ten optimal angezeigt werden. Ist das mit TYPO3 m\u00f6glich?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Webseiten mit TYPO3 erstellen: wie geht das?\" \/>\n<meta property=\"og:description\" content=\"Responsive Webseiten mit TYPO3 erstellen: wie geht das? Webseiten sollten auch auf Mobilger\u00e4ten optimal angezeigt werden. Ist das mit TYPO3 m\u00f6glich?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/\" \/>\n<meta property=\"og:site_name\" content=\"Webdesign Tipps \/ Webdesign Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-17T09:12:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-26T11:32:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/08\/img_responsive_typo3_webseiten_erstellen1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"avs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"avs\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/\"},\"author\":{\"name\":\"avs\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f\"},\"headline\":\"Responsive Webseiten mit TYPO3 erstellen: wie geht das?\",\"datePublished\":\"2017-08-17T09:12:50+00:00\",\"dateModified\":\"2021-05-26T11:32:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/\"},\"wordCount\":1348,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/08\/img_responsive_typo3_webseiten_erstellen1.jpg\",\"articleSection\":[\"TYPO3\",\"TYPO3 Anleitungen\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/\",\"name\":\"Responsive Webseiten mit TYPO3 erstellen: wie geht das?\",\"isPartOf\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/08\/img_responsive_typo3_webseiten_erstellen1.jpg\",\"datePublished\":\"2017-08-17T09:12:50+00:00\",\"dateModified\":\"2021-05-26T11:32:30+00:00\",\"description\":\"Responsive Webseiten mit TYPO3 erstellen: wie geht das? Webseiten sollten auch auf Mobilger\u00e4ten optimal angezeigt werden. Ist das mit TYPO3 m\u00f6glich?\",\"breadcrumb\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#primaryimage\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/08\/img_responsive_typo3_webseiten_erstellen1.jpg\",\"contentUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/08\/img_responsive_typo3_webseiten_erstellen1.jpg\",\"width\":1440,\"height\":530,\"caption\":\"Responsive TYPO3 Webseiten erstellen\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/a-vista-studios.de\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Webseiten mit TYPO3 erstellen: wie geht das?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#website\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/\",\"name\":\"Webdesign Tipps \/ Webdesign Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/a-vista-studios.de\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#organization\",\"name\":\"A Vista Studios\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png\",\"contentUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png\",\"width\":520,\"height\":236,\"caption\":\"A Vista Studios\"},\"image\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f\",\"name\":\"avs\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g\",\"caption\":\"avs\"},\"url\":\"https:\/\/a-vista-studios.de\/blog\/author\/avs\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Webseiten mit TYPO3 erstellen: wie geht das?","description":"Responsive Webseiten mit TYPO3 erstellen: wie geht das? Webseiten sollten auch auf Mobilger\u00e4ten optimal angezeigt werden. Ist das mit TYPO3 m\u00f6glich?","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:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/","og_locale":"de_DE","og_type":"article","og_title":"Responsive Webseiten mit TYPO3 erstellen: wie geht das?","og_description":"Responsive Webseiten mit TYPO3 erstellen: wie geht das? Webseiten sollten auch auf Mobilger\u00e4ten optimal angezeigt werden. Ist das mit TYPO3 m\u00f6glich?","og_url":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/","og_site_name":"Webdesign Tipps \/ Webdesign Blog","article_published_time":"2017-08-17T09:12:50+00:00","article_modified_time":"2021-05-26T11:32:30+00:00","og_image":[{"width":1440,"height":530,"url":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/08\/img_responsive_typo3_webseiten_erstellen1.jpg","type":"image\/jpeg"}],"author":"avs","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"avs","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#article","isPartOf":{"@id":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/"},"author":{"name":"avs","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f"},"headline":"Responsive Webseiten mit TYPO3 erstellen: wie geht das?","datePublished":"2017-08-17T09:12:50+00:00","dateModified":"2021-05-26T11:32:30+00:00","mainEntityOfPage":{"@id":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/"},"wordCount":1348,"commentCount":1,"publisher":{"@id":"https:\/\/a-vista-studios.de\/blog\/#organization"},"image":{"@id":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#primaryimage"},"thumbnailUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/08\/img_responsive_typo3_webseiten_erstellen1.jpg","articleSection":["TYPO3","TYPO3 Anleitungen"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/","url":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/","name":"Responsive Webseiten mit TYPO3 erstellen: wie geht das?","isPartOf":{"@id":"https:\/\/a-vista-studios.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#primaryimage"},"image":{"@id":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#primaryimage"},"thumbnailUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/08\/img_responsive_typo3_webseiten_erstellen1.jpg","datePublished":"2017-08-17T09:12:50+00:00","dateModified":"2021-05-26T11:32:30+00:00","description":"Responsive Webseiten mit TYPO3 erstellen: wie geht das? Webseiten sollten auch auf Mobilger\u00e4ten optimal angezeigt werden. Ist das mit TYPO3 m\u00f6glich?","breadcrumb":{"@id":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#primaryimage","url":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/08\/img_responsive_typo3_webseiten_erstellen1.jpg","contentUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/08\/img_responsive_typo3_webseiten_erstellen1.jpg","width":1440,"height":530,"caption":"Responsive TYPO3 Webseiten erstellen"},{"@type":"BreadcrumbList","@id":"https:\/\/a-vista-studios.de\/blog\/typo3-anleitungen\/responsive-webseiten-mit-typo3-erstellen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/a-vista-studios.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Responsive Webseiten mit TYPO3 erstellen: wie geht das?"}]},{"@type":"WebSite","@id":"https:\/\/a-vista-studios.de\/blog\/#website","url":"https:\/\/a-vista-studios.de\/blog\/","name":"Webdesign Tipps \/ Webdesign Blog","description":"","publisher":{"@id":"https:\/\/a-vista-studios.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/a-vista-studios.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/a-vista-studios.de\/blog\/#organization","name":"A Vista Studios","url":"https:\/\/a-vista-studios.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png","contentUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png","width":520,"height":236,"caption":"A Vista Studios"},"image":{"@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f","name":"avs","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g","caption":"avs"},"url":"https:\/\/a-vista-studios.de\/blog\/author\/avs\/"}]}},"_links":{"self":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts\/406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/comments?post=406"}],"version-history":[{"count":6,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts\/406\/revisions"}],"predecessor-version":[{"id":1456,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts\/406\/revisions\/1456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/media\/1455"}],"wp:attachment":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/media?parent=406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/categories?post=406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/tags?post=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}