[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"QCdKDuVwQGjYcQA2EdC7caGZe70efTI_cbcD8YUnmAc":75,"aHl1C0ytDMCDsogrM5GCeRYf3GYzMbA-gsww_MdgeZM":160,"_apollo:default":205},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":150,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":153,"author":154},"NodeWpPost","1072","Responsive Webdesign passt in kein Korsett",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1359118109,"UTC","+00:00","2013-01-25T12:48:29+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/responsive-webdesign-passt-in-kein-korsett",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Responsive Webdesign passt in kein Korsett | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/responsive-webdesign-passt-in-kein-korsett","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","263","content strategie","/tag/content-strategie",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"817","Mobile","/tag/mobile",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"1076","responsive webdesign","/tag/responsive-webdesign",{"__typename":151,"processed":152,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Seit unserem ersten \u003Ca href=\"/responsive-webdesign-die-basics/\" target=\"_blank\" rel=\"noopener noreferrer\">Artikel zu Responsive Webdesign\u003C/a> ist schon einige Zeit vergangen. Mittlerweile hat das Thema auch hier in Österreich eingeschlagen und wird für viele Webprojekte umgesetzt.\u003Cbr>\nTrotzdem denke ich, dass das Thema oft noch unterschätzt und die Möglichkeiten, die sich hier bieten, nicht gut genug ausgeschöpft werden.\u003C!--more-->\u003C/p>\n\u003Ch3>Best Practice?\u003C/h3>\n\u003Cp>Es existieren tausende von schönen Webseiten mit individuellem, tollem Design und gutem, an die Userbedürfnisse angepasstem Aufbau und Verhalten. Um zu diesen Ergebnissen zu gelangen wird viel konzipiert und analysiert – das dauert natürlich.\u003Cbr>\nDie Responsive Version sollte nun natürlich auch konzipiert werden. Hier habe ich manchmal das Gefühl als hätte sich eine Best Practise Herangehensweise entwickelt:\u003Cbr>\nNatürlich ein fluid Grid verwenden, damit die Content Blöcke schön skalieren, die Navigation wird zu einem Formular Select Drop Down, die Sidebar setzen wir unter den Hauptinhalt oder verstecken sie komplett, diesen und diesen Contenblock verstecken wir und zu guter letzt positionieren wir die Links im Footer der Seite untereinander. Ladezeit? – Ach wird schon passen. Dann schauen wir uns das Ganze noch schnell am iPhone, iPad und einem Android Smartphone an und schon sind wir fertig.\u003Cbr>\nDas ist natürlich etwas übertrieben dargestellt, um darauf hinzuweisen, dass genauso wie die Desktop Version auch die Responsive Version speziell, außergewöhnlich, individuell und durchdacht sein sollte.\u003Cbr>\nIch glaube so denken die meisten von euch – aber warum wird es dann nicht so umgesetzt?\u003Cbr>\nVermutlich reine Budget Sache. Denkt nur einmal daran, was alles gemacht und überlegt werden muss um das Ziel so zu erreichen – ein großer Mehraufwand für alle Beteiligten – von der Konzeption, über das Design bis hin zur Umsetzung.\u003C/p>\n\u003Ch3>Es ist Zeit für Experimente\u003C/h3>\n\u003Cp>Responsive Webdesign ist noch jung – hier kann und muss noch viel experimentiert werden. Genauso wie bei Webdesign gibt es hier nicht DAS Best Practise Beispiel. Wir befinden uns hier in keinem starren Gebiet – genauso wie sich die Bildschirmauflösungen verändern können auch wir uns hier weiterentwickeln und die Gegebenheiten nutzen. Beispielsweise haben wir auf einem Tablet weit mehr Platz und andere Möglichkeiten unsere Inhalte zu präsentieren, als auf einem Smartphone. Warum sollte die Tablet Version der Webseite also nur ein “Mittelding” zwischen Desktop und Smartphone Version sein?\u003Cbr>\nEs muss auch bedacht werden, dass der User verschiedene Absichten auf unserer Webseite verfolgen kann, je nachdem mit welchem Gerät er uns besucht. Einige Dinge sind für den Smartphone User unwichtig und können ausgeblendet werden – der Mensch, der mit dem Tablet auf dem Sofa herumlungert, möchte diese Informationen aber durchaus sehen – vielleicht sind ihm diese Informationen sogar wichtiger als dem User, der die Seite mit seinem Standrechner besucht. Dabei spielt es auch eine Rolle wie der User überhaupt auf unsere Webseite kommt.\u003C/p>\n\u003Ch3>Wir – Die Smartphone Zombies\u003C/h3>\n\u003Cp>Damit erzähle ich niemandem etwas Neues. Wir alle wissen, dass immer mehr Menschen mobil im Web unterwegs sind. Wir sehen sie jeden Tag in der U-Bahn auf die Displays ihres Smartphones starren. Wir wissen, dass sie zuhause mit ihrem Tablet in den seltsamsten Positionen auf dem Sofa liegen. “Wir” sind “sie” und wir wissen genau wie lästig es ist, wenn uns eigentlich wichtige Information vorenthalten werden und wir uns an unseren Laptop setzen müssten, um die Webseite komplett genießen zu können.\u003Cbr>\nDer “volle Geschmack” der Webseite sollte auf jedem Gerät verfügbar sein – angepasst an die Bedürfnisse des Benutzers. Wenn dies, aus welchen Gründen auch immer, nicht möglich ist, sollte überlegt werden, vielleicht gar keine Responsive Version zu machen. Der Grund für Responsive Webdesign ist es nicht, auf einen Trend aufzuspringen und da auch mitzumachen, sondern dem User einen wirklichen Mehrwert zu bieten. Dazu benötigt es natürlich einiges an Zeit, Aufwand und KnowHow. (Aber so wie man sich auch nicht einfach selbst mal eben den fast meterlangen Zopf abschneidet um kurze Haare zu haben, sondern zum Profi also zum Frisör geht, sollte auch bei Responsive Webdesign Wert auf gute Arbeit gelegt werden)\u003Cbr>\nDass wir es nicht allen recht machen können ist klar, aber wir müssen uns zumindest bemühen, dass der User die gesuchten Informationen gefunden hat, bevor er die U-Bahn verlässt.\u003C/p>\n\u003Ch3>zum Beispiel…\u003C/h3>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg?itok=2iFVb-Su\" data-rel=\"lightbox-gallery-mbWbFQWO\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv title=\"Microsoft Startseite Desktop\" alt=\"Microsoft Startseite Desktop\" data-entity-type=\"media\" data-entity-uuid=\"30e40527-6338-4869-a42b-0c8366cf72ab\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.webp?itok=d8COVsxL 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.webp?itok=lB9asWaa 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"362\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.webp?itok=wDUIpWBf 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.webp?itok=Rm0BA9XA 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"362\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.webp?itok=xvy9SPLg 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.webp?itok=P7UM7JCK 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"362\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.webp?itok=hvKPI9m- 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.webp?itok=6m9wErI6 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"322\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.webp?itok=I4KrlU3j 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.webp?itok=X-oE2pDp 2x\" type=\"image/webp\" width=\"540\" height=\"362\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"362\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_desktop1-1.jpg.jpg?itok=X-oE2pDp\" alt=\"Microsoft Startseite Desktop\" title=\"Microsoft Startseite Desktop\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg?itok=DDVlfBgg\" data-rel=\"lightbox-gallery-mbWbFQWO\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv title=\"Microsoft Startseite Mobil\" alt=\"Microsoft Startseite Mobil\" data-entity-type=\"media\" data-entity-uuid=\"36af2cb1-df36-4983-91b5-90221d3055a4\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.webp?itok=8zq8e5lk 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.webp?itok=qu9FS5RT 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"456\" height=\"559\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.webp?itok=Rjj2j2N9 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.webp?itok=V8SU9z4V 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"456\" height=\"559\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.webp?itok=CCLqBUe_ 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.webp?itok=aGqsCv_X 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"456\" height=\"559\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.webp?itok=TWp7tuw_ 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.webp?itok=nONL-usm 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"456\" height=\"559\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.webp?itok=-IiWZAP8 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.webp?itok=NqPHWSq_ 2x\" type=\"image/webp\" width=\"456\" height=\"559\">\n                  \u003Cimg loading=\"lazy\" width=\"456\" height=\"559\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/01/ms_start_mobile11-1.jpg.jpg?itok=NqPHWSq_\" alt=\"Microsoft Startseite Mobil\" title=\"Microsoft Startseite Mobil\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg?itok=HywpSvrY\" data-rel=\"lightbox-gallery-mbWbFQWO\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv title=\"Microsoft Surface Desktop\" alt=\"Microsoft Surface Desktop\" data-entity-type=\"media\" data-entity-uuid=\"ff9b0840-00c5-4088-b877-b90dd9580fd4\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.webp?itok=zLeDqGip 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.webp?itok=gYJ2vsB- 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"358\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.webp?itok=c_-Tpi6s 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.webp?itok=idNaXie0 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"358\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.webp?itok=uPT3f3mA 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.webp?itok=s85Q27f- 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"358\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.webp?itok=NGbY5nIt 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.webp?itok=_RUDvQAI 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"318\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.webp?itok=EzzRniee 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.webp?itok=gLDzNLcX 2x\" type=\"image/webp\" width=\"540\" height=\"358\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"358\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_desktop1-1.jpg.jpg?itok=gLDzNLcX\" alt=\"Microsoft Surface Desktop\" title=\"Microsoft Surface Desktop\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg?itok=rS5XoQll\" data-rel=\"lightbox-gallery-mbWbFQWO\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv title=\"Microsoft Surface Mobile\" alt=\"Microsoft Surface Mobile\" data-entity-type=\"media\" data-entity-uuid=\"4880c75f-ff8f-4591-97e1-fa3da02178ee\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.webp?itok=AkuPxKuF 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.webp?itok=Ga0omeNm 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"381\" height=\"360\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.webp?itok=fjtVeDss 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.webp?itok=n6grlHIk 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"381\" height=\"360\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.webp?itok=QthmdGWw 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.webp?itok=7Cc0z_FY 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"381\" height=\"360\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.webp?itok=ClxMl2ni 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.webp?itok=_sCISXu6 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"381\" height=\"360\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.webp?itok=RVprXIrJ 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.webp?itok=WL1_3QDf 2x\" type=\"image/webp\" width=\"381\" height=\"360\">\n                  \u003Cimg loading=\"lazy\" width=\"381\" height=\"360\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/01/ms_surface_mobile1-1.jpg.jpg?itok=WL1_3QDf\" alt=\"Microsoft Surface Mobile\" title=\"Microsoft Surface Mobile\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Eines meiner Lieblingsbeispiele für Responsive Webdesign ist die neue Startseite von \u003Ca href=\"http://www.microsoft.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft\u003C/a>.\u003Cbr>\nDie Responsive Navigation ist clever ausgearbeitet, für mobile Benutzer wird die Funktion “Find a Microsoft Store near you” ganz oben angezeigt:\u003Cbr>\n\u003Cbr>\n\u003Cbr>\nWeiters ist die Darstellung der “Compare” Tabelle auf der \u003Ca href=\"http://www.microsoft.com/Surface/en-US/surface-with-windows-rt/help-me-choose\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft Surface\u003C/a> Seite nett gelöst:\u003Cbr>\n\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/responsive-webdesign-passt-in-kein-korsett/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Responsive Webdesign passt in kein Korsett - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Seit unserem ersten Artikel zu Responsive Webdesign ist schon einige Zeit vergangen. Mittlerweile hat das Thema auch hier in Österreich eingeschlagen und wird für viele Webprojekte umgesetzt. Trotzdem denke ich, dass das Thema oft noch unterschätzt und die Möglichkeiten, die sich hier bieten, nicht gut genug ausgeschöpft werden.\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/responsive-webdesign-passt-in-kein-korsett/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2013-01-25T13:48:29+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2013/01/ms_start_desktop1-1.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/responsive-webdesign-passt-in-kein-korsett/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2013/01/ms_start_desktop1-1.jpg\",\"width\":540,\"height\":362,\"caption\":\"Microsoft Startseite Desktop\"},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/responsive-webdesign-passt-in-kein-korsett/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/responsive-webdesign-passt-in-kein-korsett/\",\"name\":\"Responsive Webdesign passt in kein Korsett - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/responsive-webdesign-passt-in-kein-korsett/#primaryimage\"},\"datePublished\":\"2013-01-25T13:48:29+00:00\",\"dateModified\":\"2013-01-25T13:48:29+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/6b4f41c44e934653474ab67647eaa4e6\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/responsive-webdesign-passt-in-kein-korsett/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/6b4f41c44e934653474ab67647eaa4e6\",\"name\":\"Sarah\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/f370faa99da7a5e86b0afa364854663c?s=96&d=mm&r=g\",\"caption\":\"Sarah\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":155,"id":156,"myRole":157,"name":158,"nickname":159},"User","21","-","s-mischinger","Sarah",{"latestKnowhow":161},[162,180,193],{"__typename":79,"id":163,"title":164,"path":165,"wpTeaserText":166,"wpPromotedTeaserImage":13,"wpHeaderImage":167},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":168,"id":169,"excludeFromScreenreader":13,"mediaImage":170,"name":178,"path":179,"status":20},"MediaImage","3364",{"__typename":171,"url":172,"width":173,"height":174,"alt":175,"title":13,"size":176,"mime":177},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":181,"title":182,"path":183,"wpTeaserText":184,"wpPromotedTeaserImage":13,"wpHeaderImage":185},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":168,"id":186,"excludeFromScreenreader":13,"mediaImage":187,"name":191,"path":192,"status":20},"3355",{"__typename":171,"url":188,"width":173,"height":174,"alt":189,"title":13,"size":190,"mime":177},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":194,"title":195,"path":196,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":197},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":168,"id":198,"excludeFromScreenreader":21,"mediaImage":199,"name":203,"path":204,"status":20},"3303",{"__typename":171,"url":200,"width":173,"height":174,"alt":201,"title":13,"size":202,"mime":177},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":206,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":207,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":211,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":214,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":217,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":220,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":223,"Menu:nuxt-main-menu":226,"ROOT_QUERY":240,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":256,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":259,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":262,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":265,"Menu:footer":268,"TermCategories:8":278,"TermTags:263":289,"TermTags:817":290,"TermTags:1076":291,"User:21":292,"NodeWpPost:1072":293,"MediaImage:3364":316,"NodeWpPost:1619":318,"MediaImage:3355":321,"NodeWpPost:1616":323,"MediaImage:3303":326,"NodeWpPost:1606":328},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",208,"internal",20,"expanded",21,"attributes",210],{"__ref":209},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",212,"internal",20,"expanded",21,"attributes",213],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",215,"internal",20,"expanded",21,"attributes",216],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",218,"internal",20,"expanded",21,"attributes",219],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",221,"internal",20,"expanded",21,"attributes",222],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",224,"internal",20,"expanded",21,"attributes",225],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",227],[228,230,232,234,236,238],{"__ref":229},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":231},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":233},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":235},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":237},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":239},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",241,"menu({\"name\":\"NUXT_MAIN_MENU\"})",242,"menu({\"name\":\"FOOTER\"})",244,"route({\"path\":\"/blog/responsive-webdesign-passt-in-kein-korsett\"})",246,"latestKnowhow({\"excludeId\":\"1072\",\"limit\":3})",249],"Query",{"__ref":243},"Menu:nuxt-main-menu",{"__ref":245},"Menu:footer",["null","__typename",77,"entity",247],{"__ref":248},"NodeWpPost:1072",[250,252,254],{"__ref":251},"NodeWpPost:1619",{"__ref":253},"NodeWpPost:1616",{"__ref":255},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",257,"internal",20,"expanded",21,"attributes",258],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",260,"internal",20,"expanded",21,"attributes",261],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",263,"internal",20,"expanded",21,"attributes",264],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",266,"internal",21,"expanded",21,"attributes",267],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",269],[270,272,274,276],{"__ref":271},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":273},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":275},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":277},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",279,"langcode",280,"changed",281,"metatag",282],["null","__typename",118,"processed",119,"format",120],{"__ref":209},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[283,285,287],["null","__typename",93,"tag",94,"attributes",284],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",286],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",288],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",155,"id",156,"myRole",157,"name",158,"nickname",159],["null","__typename",79,"id",80,"title",81,"changed",294,"created",295,"langcode",296,"path",90,"promote",21,"status",20,"sticky",21,"metatag",297,"category",304,"contentElements",13,"evergreen",13,"tags",306,"wpBody",313,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",153,"author",314],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":209},[298,300,302],["null","__typename",93,"tag",94,"attributes",299],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",301],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",303],["null","__typename",109,"property",110,"content",81],{"__ref":305},"TermCategories:8",[307,309,311],{"__ref":308},"TermTags:263",{"__ref":310},"TermTags:817",{"__ref":312},"TermTags:1076",["null","__typename",151,"processed",152,"format",120,"summary",13],{"__ref":315},"User:21",["null","__typename",168,"id",169,"excludeFromScreenreader",13,"mediaImage",317,"name",178,"path",179,"status",20],["null","__typename",171,"url",172,"width",173,"height",174,"alt",175,"title",13,"size",176,"mime",177],["null","__typename",79,"id",163,"title",164,"path",165,"wpTeaserText",166,"wpPromotedTeaserImage",13,"wpHeaderImage",319],{"__ref":320},"MediaImage:3364",["null","__typename",168,"id",186,"excludeFromScreenreader",13,"mediaImage",322,"name",191,"path",192,"status",20],["null","__typename",171,"url",188,"width",173,"height",174,"alt",189,"title",13,"size",190,"mime",177],["null","__typename",79,"id",181,"title",182,"path",183,"wpTeaserText",184,"wpPromotedTeaserImage",13,"wpHeaderImage",324],{"__ref":325},"MediaImage:3355",["null","__typename",168,"id",198,"excludeFromScreenreader",21,"mediaImage",327,"name",203,"path",204,"status",20],["null","__typename",171,"url",200,"width",173,"height",174,"alt",201,"title",13,"size",202,"mime",177],["null","__typename",79,"id",194,"title",195,"path",196,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",329],{"__ref":330},"MediaImage:3303"]