{"id":34362,"date":"2025-04-24T10:20:01","date_gmt":"2025-04-24T08:20:01","guid":{"rendered":"https:\/\/www.studioenns.eu\/wordpress\/aktuell\/?p=34362"},"modified":"2025-04-24T10:20:01","modified_gmt":"2025-04-24T08:20:01","slug":"beitrag-8-von-15-optik-ist-wichtig-design-styling-und-responsivitaet-des-zentralmenues","status":"publish","type":"post","link":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/beitrag-8-von-15-optik-ist-wichtig-design-styling-und-responsivitaet-des-zentralmenues\/studioenns\/onair","title":{"rendered":"Beitrag 8 von 15: Optik ist wichtig \u2013 Design, Styling und Responsivit\u00e4t des Zentralmen\u00fcs"},"content":{"rendered":"<!-- RS_MODULE_CODE_2.5.0-C --><div id=\"readspeaker_button34362\" class=\"rs_skip rsbtn rs_preserve\"><a class=\"rsbtn_play\" title=\"Um den Text anzuh&ouml;ren, verwenden Sie bitte ReadSpeaker\" accesskey=\"L\" href=\"https:\/\/app-eu.readspeaker.com\/cgi-bin\/rsent?customerid=13430&amp;lang=de_de&amp;readid=rspeak_read_34362&amp;url=https%3A%2F%2Fwww.studioenns.eu%2Fwordpress%2Fvon2016bisjetzt%2Fwp-json%2Fwp%2Fv2%2Fposts%2F34362\"><span class=\"rsbtn_left rsimg rspart\"><span class=\"rsbtn_text\"><span>Vorlesen<\/span><\/span><\/span><span class=\"rsbtn_right rsimg rsplay rspart\"><\/span><\/a><\/div><div id=\"rspeak_read_34362\"><p>**Beitrag 8 von 15: Optik ist wichtig \u2013 Design, Styling und Responsivit\u00e4t des Zentralmen\u00fcs**<\/p>\n<p>&#8222;`html<\/p>\n<article>\n<h2>Beitrag 8: Optik ist wichtig \u2013 Design, Styling und Responsivit\u00e4t des Zentralmen\u00fcs<\/h2>\n<p>Ein Men\u00fc muss nicht nur funktional sein, sondern auch gut aussehen und sich nahtlos in das Gesamtbild der Webseite einf\u00fcgen. Da unser Zentralmen\u00fc auf potenziell unterschiedlichen WordPress-Seiten mit jeweils eigenem Design angezeigt wird, stellt das Styling eine besondere Herausforderung dar. Wie gestalten wir das Men\u00fc in der zentralen `home.html`-Datei? Wie stellen wir sicher, dass es auf verschiedenen Bildschirmgr\u00f6\u00dfen gut funktioniert (Responsivit\u00e4t)? Und wie gehen wir mit der festen H\u00f6he von 215 Pixeln um, die im iframe-Code definiert ist?<\/p>\n<h3>Das Styling findet im iframe statt<\/h3>\n<p>Ein wichtiger Punkt, den wir aus Beitrag 2 (Technik des iframes) mitnehmen: Der Inhalt eines iframes ist weitgehend von der umgebenden Seite isoliert. Das bedeutet:<\/p>\n<ul>\n<li><strong>CSS der Hauptseite wirkt nicht im iframe:<\/strong> Die Stylesheets der WordPress-Seite, auf der das Men\u00fc eingebunden ist, haben keinen direkten Einfluss auf das Aussehen der Links, Farben oder Schriften *innerhalb* des Zentralmen\u00fcs.<\/li>\n<li><strong>CSS des iframes wirkt nicht auf die Hauptseite:<\/strong> Umgekehrt beeinflusst das CSS, das wir in der `home.html` f\u00fcr das Men\u00fc definieren, nicht das restliche Design der WordPress-Seite.<\/li>\n<\/ul>\n<p>Diese Isolation ist einerseits gut, weil sie Konflikte vermeidet. Andererseits bedeutet sie, dass das gesamte Styling des Zentralmen\u00fcs innerhalb der `home.html`-Datei (bzw. den dazugeh\u00f6rigen CSS-Dateien) definiert werden muss.<\/p>\n<h3>Gestaltungsprinzipien f\u00fcr das Zentralmen\u00fc<\/h3>\n<p>Bei der Gestaltung des Zentralmen\u00fcs verfolgen wir mehrere Ziele:<\/p>\n<ol>\n<li><strong>Markenkonformit\u00e4t:<\/strong> Das Men\u00fc muss die visuelle Identit\u00e4t von Studio Enns widerspiegeln. Das betrifft:\n<ul>\n<li><strong>Logo:<\/strong> Korrekte Platzierung und Gr\u00f6\u00dfe.<\/li>\n<li><strong>Farben:<\/strong> Verwendung unserer Prim\u00e4r- und Sekund\u00e4rfarben f\u00fcr Hintergr\u00fcnde, Links, Hover-Effekte etc.<\/li>\n<li><strong>Typografie:<\/strong> Einsatz unserer Hausschriften f\u00fcr die Men\u00fcpunkte.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Klarheit und Lesbarkeit:<\/strong> Die Men\u00fcpunkte m\u00fcssen leicht zu erkennen und zu lesen sein. Das erfordert ausreichende Schriftgr\u00f6\u00dfen, Kontraste und Abst\u00e4nde.<\/li>\n<li><strong>Benutzerfreundlichkeit (Usability):<\/strong> Links m\u00fcssen klar als klickbar erkennbar sein (z.B. durch Unterstreichung, Farb\u00e4nderung bei Hover). Die Navigation sollte intuitiv sein.<\/li>\n<li><strong>Konsistenz:<\/strong> Das Men\u00fc soll auf allen Seiten gleich aussehen, um den Wiedererkennungseffekt zu maximieren.<\/li>\n<li><strong>Visuelle Integration (Herausforderung):<\/strong> Obwohl das Styling isoliert ist, sollte das Men\u00fc optisch nicht wie ein kompletter Fremdk\u00f6rper wirken. Wir versuchen oft, ein eher neutrales, aber markenkonformes Design zu w\u00e4hlen, das zu verschiedenen Kontexten passt. Manchmal werden auch dezente Schatten oder Trennlinien verwendet, um den \u00dcbergang zur Hauptseite weicher zu gestalten. Der `frameborder=&#8220;0&#8243;` im iframe-Code ist hier essenziell, um keinen harten technischen Rahmen zu erzeugen.<\/li>\n<\/ol>\n<h3>Die feste H\u00f6he: `height=&#8220;215&#8243;`<\/h3>\n<p>Der iframe-Code gibt eine feste H\u00f6he von 215 Pixeln vor: <code>height=\"215\"<\/code>. Das bedeutet, der Bereich, der f\u00fcr das Men\u00fc auf der Hauptseite reserviert wird, ist immer genau 215 Pixel hoch. Das CSS innerhalb der `home.html` muss darauf abgestimmt sein:<\/p>\n<ul>\n<li>Das Men\u00fcdesign muss so konzipiert sein, dass es diese H\u00f6he optimal ausnutzt, aber nicht \u00fcberschreitet (zumindest auf Desktop-Gr\u00f6\u00dfen).<\/li>\n<li>Die 215 Pixel m\u00fcssen ausreichend sein, um alle Men\u00fcelemente (Logo, Links, ggf. zweite Zeile f\u00fcr Impressum etc.) klar und ohne Quetschung darzustellen.<\/li>\n<li>Die Wahl dieser spezifischen H\u00f6he (215px) war vermutlich eine Design-Entscheidung, die auf der Grundlage des Men\u00fcinhalts und -layouts getroffen wurde. Es ist ein Kompromiss zwischen Sichtbarkeit und Platzbedarf.<\/li>\n<li>Das Attribut `scrolling=&#8220;yes&#8220;` ist eine Absicherung: Sollte der Inhalt *doch* einmal h\u00f6her sein (z.B. durch unerwarteten Textumbruch bei sehr langen Worten oder auf bestimmten Ger\u00e4ten), w\u00fcrden Scrollbalken erscheinen, anstatt dass der Inhalt abgeschnitten wird. Das ist aber ein Zustand, den man im Design vermeiden m\u00f6chte.<\/li>\n<\/ul>\n<h3>Responsivit\u00e4t innerhalb des iframes<\/h3>\n<p>Das Zentralmen\u00fc muss nicht nur auf gro\u00dfen Desktop-Bildschirmen gut aussehen, sondern auch auf Tablets und Smartphones. Da der iframe mit <code>width=\"100%\"<\/code> eingebunden wird, passt sich seine Breite automatisch an die Breite des Browserfensters bzw. des umgebenden Containers an. Die Herausforderung liegt darin, den *Inhalt* des iframes (die `home.html`) responsiv zu gestalten.<\/p>\n<p>Das erreichen wir durch Standardtechniken des responsiven Webdesigns, die *innerhalb* der `home.html` und ihres CSS angewendet werden:<\/p>\n<ul>\n<li><strong>Media Queries:<\/strong> Im CSS des Men\u00fcs verwenden wir Media Queries, um das Layout und Styling an verschiedene Bildschirmbreiten anzupassen. Zum Beispiel:\n<pre><code>\/* Standard-Styles f\u00fcr Desktop *\/\n.menu-item { display: inline-block; margin: 0 15px; }\n\n\/* Styles f\u00fcr kleinere Bildschirme (z.B. unter 768px) *\/\n@media (max-width: 768px) {\n    .menu-item { display: block; margin: 10px 0; text-align: center; }\n    \/* Evtl. Logo verkleinern, Abst\u00e4nde anpassen etc. *\/\n}<\/code><\/pre>\n<\/li>\n<li><strong>Flexbox oder CSS Grid:<\/strong> Diese modernen CSS-Layouttechniken eignen sich hervorragend, um flexible und responsive Men\u00fcstrukturen zu bauen, die sich an die verf\u00fcgbare Breite anpassen.<\/li>\n<li><strong>Burger-Men\u00fc:<\/strong> Auf sehr kleinen Bildschirmen (Smartphones) ist es oft sinnvoll, das horizontale Men\u00fc durch ein sogenanntes &#8222;Burger-Icon&#8220; (drei horizontale Striche) zu ersetzen. Ein Klick oder Tipp auf dieses Icon \u00f6ffnet dann das Men\u00fc, oft als vertikale Liste. Die Implementierung eines Burger-Men\u00fcs erfordert in der Regel auch etwas JavaScript innerhalb der `home.html`.<\/li>\n<\/ul>\n<p><strong>Wichtige \u00dcberlegung zur H\u00f6he bei Responsivit\u00e4t:<\/strong> W\u00e4hrend sich die Breite des iframes anpasst, bleibt die H\u00f6he mit 215 Pixeln fest. Das responsive Design innerhalb des iframes muss ber\u00fccksichtigen, dass es auf schmalen Bildschirmen eventuell mehr vertikalen Platz ben\u00f6tigt (z.B. wenn Men\u00fcpunkte untereinander angeordnet werden oder ein Burger-Men\u00fc aufklappt). Hier gibt es zwei Szenarien:<\/p>\n<ol>\n<li>Das responsive Design passt sich so an, dass es auch auf kleinen Schirmen innerhalb der 215px bleibt (z.B. durch kleinere Schrift, kompaktere Anordnung).<\/li>\n<li>Das Men\u00fc ben\u00f6tigt im aufgeklappten Zustand (z.B. Burger-Men\u00fc) mehr als 215px. In diesem Fall w\u00fcrde der `scrolling=&#8220;yes&#8220;`-Parameter greifen und ein interner Scrollbalken im Men\u00fc-iframe erscheinen. Das ist funktional, aber nicht immer ideal f\u00fcr die Usability. Eine Alternative w\u00e4re, die iframe-H\u00f6he dynamisch per JavaScript anzupassen, was aber die Kommunikation zwischen Hauptseite und iframe erfordert und komplexer ist. Oft ist ein Design, das innerhalb der H\u00f6he bleibt oder internes Scrollen akzeptiert, der pragmatischere Ansatz.<\/li>\n<\/ol>\n<h3>Fazit: Design als Balanceakt<\/h3>\n<p>Das Design und Styling unseres Zentralmen\u00fcs ist ein Balanceakt zwischen Markenkonformit\u00e4t, Benutzerfreundlichkeit, technischer Machbarkeit (Isolation im iframe, feste H\u00f6he) und der Notwendigkeit, auf allen Ger\u00e4ten gut auszusehen. Durch sorgf\u00e4ltige Planung des Layouts, den Einsatz von CSS und responsiven Techniken innerhalb der zentralen `home.html` streben wir ein Men\u00fc an, das sowohl funktional als auch \u00e4sthetisch \u00fcberzeugt und sich trotz seiner technischen Eigenst\u00e4ndigkeit harmonisch in unsere verschiedenen WordPress-Seiten einf\u00fcgt.<\/p>\n<p>Im n\u00e4chsten Beitrag widmen wir uns einem oft untersch\u00e4tzten Aspekt: den Performance-Auswirkungen des Zentralmen\u00fcs.<\/p>\n<hr>\n<p>#Webdesign,,,, #Styling,,,, #CSS,,,, #Responsivit\u00e4t,,,, #ResponsiveDesign,,,, #Zentralmen\u00fc,,,, #iframe,,,, #Usability,,,, #Markenidentit\u00e4t,,,, #WordPress,,,, #StudioEnns,,,, #Frontend,,,, #MobileFirst<\/p>\n<\/article>\n<\/div>","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p><!-- RS_MODULE_CODE_2.5.0-C --><\/p>\n<div id=\"readspeaker_button34362\" class=\"rs_skip rsbtn rs_preserve\"><a class=\"rsbtn_play\" title=\"Um den Text anzuh&ouml;ren, verwenden Sie bitte ReadSpeaker\" accesskey=\"L\" href=\"https:\/\/app-eu.readspeaker.com\/cgi-bin\/rsent?customerid=13430&amp;lang=de_de&amp;readclass=post-34362&amp;url=https%3A%2F%2Fwww.studioenns.eu%2Fwordpress%2Fvon2016bisjetzt%2Fwp-json%2Fwp%2Fv2%2Fposts%2F34362\"><span class=\"rsbtn_left rsimg rspart\"><span class=\"rsbtn_text\"><span>Vorlesen<\/span><\/span><\/span><span class=\"rsbtn_right rsimg rsplay rspart\"><\/span><\/a><\/div>\n<div id=\"rspeak_read_34362\">**Beitrag 8 von 15: Optik ist wichtig \u2013 Design, Styling und Responsivit\u00e4t des Zentralmen\u00fcs** &#8222;`html Beitrag 8: Optik ist wichtig \u2013 Design, Styling und Responsivit\u00e4t des Zentralmen\u00fcs Ein Men\u00fc muss nicht nur funktional sein, sondern <a class=\"mh-excerpt-more\" href=\"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/beitrag-8-von-15-optik-ist-wichtig-design-styling-und-responsivitaet-des-zentralmenues\/studioenns\/onair\" title=\"Beitrag 8 von 15: Optik ist wichtig \u2013 Design, Styling und Responsivit\u00e4t des Zentralmen\u00fcs\">[&#8230;]<\/a><\/div>\n<\/div>","protected":false},"author":1,"featured_media":32502,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2,"footnotes":""},"categories":[28],"tags":[737,752,3001,7713,767,774,7714,53,5952,3047,719,257,7697],"class_list":["post-34362","post","type-post","status-publish","format-standard","has-post-thumbnail","category-noch-nicht-im-archiv","tag-css","tag-frontend","tag-iframe","tag-markenidentitaet","tag-mobilefirst","tag-responsivedesign","tag-responsivitaet","tag-studioenns","tag-styling","tag-usability","tag-webdesign","tag-wordpress","tag-zentralmenue"],"_links":{"self":[{"href":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/wp-json\/wp\/v2\/posts\/34362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/wp-json\/wp\/v2\/comments?post=34362"}],"version-history":[{"count":0,"href":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/wp-json\/wp\/v2\/posts\/34362\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/wp-json\/wp\/v2\/media\/32502"}],"wp:attachment":[{"href":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/wp-json\/wp\/v2\/media?parent=34362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/wp-json\/wp\/v2\/categories?post=34362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.studioenns.eu\/wordpress\/von2016bisjetzt\/wp-json\/wp\/v2\/tags?post=34362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}