Mit einem Klick zum Ziel...

Tags: Updatepage4FunktionenContent | Kommentare: 12 | Views: 7891

Mittwoch 23.August 2017

button-2563859-1920

 

Unser neuer Button Content

 

Eine Webseite lebt davon, dass Inhalte miteinander verlinkt sind. Mit der Linkliste haben wir ja schon vor längerer Zeit einen Content veröffentlicht, welcher es ermöglicht, auf einfache Weise Links zu anderen Seiten und Inhalten zur Verfügung zu stellen. Viele User nutzen die Linkliste in einer Sidebar und zeigen ihren Besuchern damit auf einen Blick, was es Neues zu entdecken gibt.

 

Letzte Woche haben wir ein Update für den Bild-Content veröffentlicht und bei einem Bild kann man jetzt auch sehr leicht jede Art von Verlinkung hinterlegen, da wir dort das Standardelement für die Verlinkung eingebaut haben. Außerdem haben wir den Bild-Content für mobile Ansicht weiter optimiert und für zusätzliche Erweiterungen vorbereitet. Zum Beispiel kann man jetzt für die Bildunterschrift auch Google-Fonts nutzenen.

 

Mit dem heutigen Update stellen wir einen neuen Content vor: einen sogenannten Button oder auch Schaltknopf. So ein Button hat zwei Aufgaben. Er soll Besucher zu einer Aktion verleiten. Dazu kann man den Button beschriften. Wenn man auf den Button den Text aufbringt: "Bitte klicken für weitere Informationen ...", dann ist das solch eine Aufforderung. Besucher lieben klare Aussagen. Und sie möchten nicht enttäuscht werden. Was auf dem Button steht, sollte auch "in Erfüllung gehen". Damit so ein Aufruf tatsächlich zu einer Aktion führt (call to action), muss der Button natürlich verlinkt werden. Der Button informiert also durch seine Beschriftung, löst dadurch eine Aktion aus und leitet User weiter. Damit das Ganze dann tatsächlich gut zu deiner Seite passt, kann man den kompletten Button bewusst sehr schlicht gehalten, damit du dich zunächst auf das Wesentliche konzentrieren kannst. Du wirst sehen, das ist schon eine ganze Menge. Später werden wir weitere "Versionen" für Buttons vorstellen. Lass dich überraschen.

 

Jeder Button ist ein Unikat. Das bedeutet, du kannst beliebig viele unterschiedliche Buttons erstellen. Sinnvoll ist es aber, einen Button zu kreieren, der zu der Gestaltung deiner Seite passt. Wenn du mehrere dieser Schaltknöpfe auf deiner Seite verwenden möchtest, kopierst du diese einfach, hast so nur einmal die Arbeit der Gestaltung und machst es dem User einfacher, den Knopf als solchen überall zu erkennen.

 

Wie schon der neue Slider hat auch der neue Button einen Vollscreen Dialog und ist in schlichtem Weiß gehalten. Alle neuen Contents werden zukünftig so gestaltet. Nach und nach werden wir die vorhandenen Contents auf diesen neuen Dialog umbauen. Das wird jedoch einen längeren Zeitraum in Anspruch nehmen, weil wir nicht einfach nur die Optik anpassen, sondern natürlich alles optimieren und, wenn vorhanden, Wünsche unserer User berücksichtigen und einbauen.

 

Wie schon beim Slider kannst du den Text eines Buttons direkt auf der Seite editieren, ohne dazu den Dialog aufrufen zu müssen. Wir arbeiten daran, den Dialog für die Auswahl der Verlinkung zu optimieren. Wenn das fertig ist, dann werden wir auch die Möglichkeit anbieten können, den Link eines Buttons direkt auf der Seite anzupassen. Dann muss man den Dialog nur noch benutzen, um den Button zu gestalten, und kann sehr schnell eine beliebige Anzahl von Buttons beschriften und verlinken.

 

Der Dialog und die Optionen

 

So sieht der neue Button-Content aus.

 

button-v-2-dt

 

Ganz oben liefern wir dir  eine schöne große Vorschau (1). Diese Vorschau passt sich immer sofort an. Wenn du mit der Maus über die Vorschau fährst, wird außerdem der Hover-Effekt angezeigt. Du kannst für den Hover-Effekt die Schriftfarbe, die Rahmenfarbe und die Hintergrundfarbe anpassen (9).

 

Unter der Vorschau befindet sich ein Feld, um den Button zu beschriften. (2) Wenn möglich, solltest du die Beschriftung so kurzfassen, dass nur eine Zeile benötigt wird. Du kannst aber natürlich auch mehrzeilige Buttons anlegen, indem du einen Zeilenumbruch einfügst. Der Abstand zwischen den Zeilen wird automatisch eingestellt und hängt von der Schriftgröße sowie der Schriftart ab.

 

Unter dem Feld für die Beschriftung ist das Element zur Verlinkung eingebaut (3). Wie gewohnt öffnet sich der entsprechende Dialog, wenn du auf das Ankersymbol klickst.

 

Ein Button kann in einer Spalte links, mittig oder rechts (4) positioniert werden. Ist der Button so breit wie die Spalte, in der er angelegt wird, hat die Positionierung natürlich keine sichtbare Auswirkung.

 

Für die Gestaltung (5) stehen dir verschiedene Optionen zur Verfügung. Die Größe des Buttons korreliert mit der Schriftgröße. Dadurch wird garantiert, dass du immer einen perfekten Button bekommst. Der Button ist für die mobile Ansicht optimiert und passt sich entsprechend an. So ist sichergestellt, dass ein Button auch auf deinem Smartphone optimal dargestellt wird und nicht zu groß oder zu klein ist.

 

Den Button selbst gestaltest du mit den Elementen für den Inhalt. Du kannst eine der verfügbaren Schriften auswählen. (6) Hier noch einmal als Hinweis: Im Dialog sind Schriften, die keine Google-Fonts sind, mit (ST) markiert. Achtung: Schriften mit der Kennzeichnung (ST) müssen auf dem Computer des Besuchers vorhanden (installiert) sein, damit der Button für die Besucher deiner Seite so aussieht wie für dich. Verwendest du Google-Fonts, dann kannst du sicher sein, dass die von dir gewünschte und gewählte Gestaltung von allen Besuchern korrekt gesehen wird.

 

Die Schriftgröße kannst du mit einem Schieberegler einstellen oder mit dem Zahlenfeld daneben, und zwar von 10 px bis 99 px: Bewegst du den Schieberegler, siehst du sofort, wie der Button in Abhängigkeit der Schrift größer oder kleiner wird. Jede Schrift kann natürlich eine Farbe bekommen und diese Farbe eine Transparenz erhalten.

 

Um den Button kannst du einen Rahmen legen (7). Auch hier stehen dir alle bekannten Optionen zu Verfügung: verschiedene Rahmenstyles, eine Rahmenstärke, eine Farbe, der du eine Transparenz geben kannst, und über den Rahmen bekommt der Button auf Wunsch abgerundete Ecken. Die Rahmenstärke lässt sich von 0 bis 50 px einstellen und für die Rundung stehen dir Werte von 0 bis 500 px zur Verfügung. Durch den hohen Wert bei der Rundung kannst du theoretisch kreisrunde Buttons erzeugen. Das hängt aber immer von der Beschriftung und dem Innenabstand ab. Wie oben erwähnt, werden wir noch weitere „Button-Variationen" entwickeln, die solche Spezialfälle leichter abbilden können.

 

Natürlich kann jeder Button auch eine Hintergrundfarbe (8) bekommen. Wie du siehst, hat die Hintergrundfarbe einen Papierkorb. Damit lassen sich durchsichtige Buttons erzeugen. Bei einem durchsichtigen Button sollte aber immer ein Rahmen angeschaltet sein; sonst erkennt man den Button nicht als Schaltfläche, sondern sieht nur die Beschriftung.

 

Die Effekte, die angezeigt werden sollen, wenn der Besucher die Maus in den Button bewegt, stellst du zum Schluss ein (9). Alle Farben haben hier auch einen Papierkorb. Benutzt du den Papierkorb, löschst du die Farbe und es wird beim Hovern kein Effekt angezeigt.

 

Ich denke, da wir Standard-Elemente verwenden, solltest du schnell mit der Bedienung zurechtkommen. Nutze den Button gezielt. Auch hier gilt: schlicht ist besser. Zu groß sollte der Button nie ausfallen. Wenn du einen großen Bildschirm hast, dann ziehe deinen Browser lieber einmal etwas kleiner, damit du besser einschätzen kannst, wie deine Seite auf kleinen Bildschirmen aussieht.

 

Bis demnächst

Manfred F Schreyer

 

Neuer Kommentar



Kommentar veröffentlichen

Blogarchiv