Hallo!
Meine Meinung dazu: diese Buttons ganz weglassen! 🙂
Und zwar nicht aus Faulheit, sondern weil ich persönlich aus Usability-Gründen dem nachfolgend Zitierten zustimme:
„Links are for going and buttons are for doing“
Nutzer wissen, dass Links neue Inhalte und auch neue Fenster aufrufen während Schaltflächen einen Befehlscharakter haben, d.h. mit Schaltflächen werden Inhalte bearbeitet, Bestätigungen eingefordert oder sonstige Anweisungen an die aktuelle Anwendung vorgenommen.
Quelle:
http://www.barrierefreies-webdesign.de/knowhow/links-oder-buttons/
Genau über diesen Buttons befindet sich zudem die Hauptnavigation, die ebendiese Punkte als Links enthält, weshalb die Buttons auch aus diesem Grunde hier überflüssig sind. Allerdings solltest du meiner Meinung nach beim oberen Navigationsmenü erstens mit stärkeren Kontrasten arbeiten (das scheint mir am Fußende besser gelöst!) und den jeweils aktiven Navigationspunkt per CSS auch entsprechend optisch hervorheben. Impressum und Kontakt würde ich vermutlich oben rausnehmen (folgt ja unten noch einmal), dann ist das Menü nicht so überfüllt und sieht besser aus. Es sei denn, du willst was verkaufen, dann könntest du noch einen auffälligen CTA-Button (Call to Action) einfügen.
Thread-Starter
mick27
(@mick27)
Hallo Flower33
Vielen Dank für die Antwort. Bin leider Anfänger und hab mich an CSS noch nicht heran getraut.
Werde das Problem vermutlich nur damit umgehen, dass ich 2 Zeilen je Button benutze.
Das Theme „Hoffman“ von Anders Norén bietet leider sehr wenige Einstellungsmöglichkeiten, weil sehr minimalistisch. Deshalb möchte ich die Buttons beibehalten.
Das mit CSS muss auch noch warten.
Gruß Mick
Hallo @flower33,
in dem Fall sind es keine Buttons, sondern Links :), keine HTML-Auszeichung mit <button> oder <input> 😉
@mick27
Der HTML-Code ist ziemlich strange:
<strong>
<a class="maxbutton-1 maxbutton maxbutton-home" href="http://energiewende-daheim.de/" data-slimstat-clicked="false" data-slimstat-type="2" data-slimstat-tracking="false" data-slimstat-async="false" data-slimstat-callback="false">
<span class="mb-text">Energiewende daheim</span>
</a>
<a class="maxbutton-3 maxbutton maxbutton-veranstaltungen" href="http://energiewende-daheim.de/veranstaltungen/" data-slimstat-clicked="false" data-slimstat-type="2" data-slimstat-tracking="false" data-slimstat-async="false" data-slimstat-callback="false">
<a class="maxbutton-2 maxbutton maxbutton-videos" href="http://energiewende-daheim.de/videos/" data-slimstat-clicked="false" data-slimstat-type="2" data-slimstat-tracking="false" data-slimstat-async="false" data-slimstat-callback="false">
<span class="col col_shortcode">
<br>
</strong>
</p>
Wieso die Abweichung in Form von <span class="col col_shortcode">?
Das <strong> und </strong> würde ich ersetzen mit <div class="maxbuttonwrap"> und </div>
Sollte das „strong“ dazu dienen, die Schrift fett zu markieren, könntest du nach der von mir vorgeschlagenen Änderung folgendes in eine custom.css einfügen:
.maxbuttonwrap a span {
font-weight: bold;
}
Davon abgesehen: basierend auf dem jetzigen HTML-Code (würde auch nach HTML-Code-Änderung funktionieren) bekommst du die Links in eine Reihe mit folgender CSS-Ergänzung:
.post-content p a.maxbutton {
display: block;
float: left;
margin-right: 5px;
}
Ein einfacher Weg eigenes CSS einzupflegen ist die Installation eines Custom-CSS-Plugins.
Hi Angelika,
in dem Fall sind es keine Buttons, sondern Links 🙂
wo du Recht hast, hast du Recht! 🙂
Ich muss gestehen, dass mich die „Verhunzung“ (sorry, Mick, ist absolut nicht böse gemeint) des minimalistisch-eleganten Themes von Anders Norén durch diese im Original ja nicht enthaltenen und meiner Ansicht nach wirklich überflüssigen „Pseudo“-Buttons so gestört hat, dass ich mir erst gar nicht den Code zwecks Optik-Verbesserung angesehen, sondern gleich meine Usability-Brandrede gehalten habe. 🙂
Ansonsten: Auch wenn ich das Theme ansonsten sehr ansprechend finde, so bin ich persönlich kein Freund eines Hamburger-Menüs für breitere Viewports. Eine sofort sichtbare Hauptnavigation finde ich viel benutzerfreundlicher, weil das Auge darüber vom ersten Moment an die wesentliche Grundstruktur der Website erfassen kann.
Auch Mick scheint das Hamburger-Menü nicht ausreichend zu sein, warum sonst will er das Menü unmittelbar am Seitenanfang noch einmal einblenden, diesmal im „Button“-Look? Das ist mir halt unverständlich. Es gibt zig, wenn nicht hunderte Alternativen, bei denen das Hauptmenü sofort im Blick ist, da erschließt sich mir der Grund für die hier praktizierte „Verhunzung“ nicht.
Andererseits gehts mich aber auch nichts an, aber ich wollte meine kritische Sicht trotzdem mal zur Sprache bringen. 🙂
