Erledigt: sidebuttons

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ansophie

Mitglied
17 August 2019
100
2
18
Hi,

Zielkriterien der sidebuttons:
Zweck: Call-to-action.
Stil: elegant, schlicht und dezent, gut sichtbar aber nicht aufdringlich.
Bevorzugtes Maximal-Maß: 48x48 (px).

Wie findet ihr
  1. die Position - auch in Bezug auf scrollen am handy?
  2. ,dass die Optionen getrennt aufgehen, oder wäre zusammen besser?
  3. die Größe der Buttons im geschlossenen und offenen Zustand?
  4. wenn ausgefahren, stört der Text im Hintergrund?
  5. das "Verhalten" - funktioniert das Hovern bzw. Klicken? bleibt es lang genug, damit man den Kontaktoption anklicken kann?
  6. die "Bauweise" - andere Option wäre flex-Anordnung? Das alignment der Symbole/Kreise ist leider noch nicht exakt. wird das richtige Kuvert-Symbol (s.u.) angezeigt, oder wechselt das je nach Endgerät?
  7. wenn das richtige angezeigt wird, ist es ausreichend sichtbar? mir gefällt zwar die Schlichtheit, es ist aber weniger sichtbar als das Telefon-symbol.
  8. das extra Kuvert-symbol (css nachgebastelt und adaptiert) auf der linken Seite - ist das umständlich als Symbol?
  9. angenommen man ergänzt einen backToTop-Button, wäre das zuviel?
Habt ihr Verbesserungsvorschläge, Fehler entdeckt oder flackert irgendwas?

Welche Buttons dieser Art findet ihr gut?

Bitte um euer Input.

hier der link: https://codepen.io/AnSophie/pen/bGEgPjE

kuvert: kuvert.png
(Referenz: https://emojipedia.org/envelope/ - das apple symbol).

Edit: hab grad gesehen, dass in der Mobilversion, das Telefonsymbol rot ist. es soll eigentlich ein graues "analoges" sein.
 
Zuletzt bearbeitet:

Tronjer

Senior HTML'ler
8 Oktober 2010
5.232
482
83
Berlin
Das use strict kannst du dir sparen. Zumal ein Linter die Double Quotes bemängeln würde.

Was soll der kleine Briefumschlag? Dafür verwendet man FAB Buttons.
 

Ansophie

Mitglied
17 August 2019
100
2
18
Was der kleine Briefumschlag soll......ich weiß nicht, vielleicht den Postboten erschrecken.

floating action button, meinst du das? Diesen Namen lese ich zum ersten Mal. Damit hängen dann wohl auch das fontawesome und class-Namen mit fa-fa zusammen, oder?
die sidebuttons waren ja mein Versuch, sowas zu implementieren..dabei habe ich mir soviel mühe gegeben und zeit investiert. Komisch, dass zu nix bei der Recherche kam.

zum Suchbegriff FAB kommt sehr viel zu Android und Apps... Welche Anleitung würdest du mir empfehlen?

Icon als svg einbinden - soweit war ich auch schon, allerdings hab ich mein eigenes icon in Inkscape erstellt - Aber: was macht man, wenn jemand "Bilder anzeigen" aus hat? Background-color Fallback?
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.232
482
83
Berlin
Material Design, nicht zwingend Android. Schau dir mal die UI-Elemente dieser Seite auf dem Smartphone an. Navi, Buttons, Panel, etc.

Was machst du eigentlich: Grafikdesign, Webdesign, Webentwicklung?
 

Runshak

Mitglied
7 April 2020
48
2
8
31
Gib dem Briefumschlag noch nen Hintergrund. Wenn er so über dem Text schwebt, ist er schon nicht so schön anzusehen und wenn er im footer verschwindet ist der "Deckel" des Umschlags in der selben Farbe wie der footer. Die restliche Farbwahl ist geschmackssache. Mir würde mehr bunt besser als Ocker (oder was das für ein Gelb ist) gefallen. Vom sonstigen Aufbau der Seite kann ich sagen, dass sie schön strukturiert ist. und die Textblöcke nicht zu groß sind (in der mobilen Ansicht). Wenn du bei der fertigen Seite sowohl in der mobilen als auch in der Desktopansicht diese Textblockgröße beibehältst ist alles gut
 

Ansophie

Mitglied
17 August 2019
100
2
18
Wenn er so über dem Text schwebt, ist er schon nicht so schön anzusehen und wenn er im footer verschwindet ist der "Deckel" des Umschlags in der selben Farbe wie der footer. Die restliche Farbwahl ist geschmackssache.

Der Briefumschlag links sollte eine Alternative zum html entity symbol sein. Würde ich es verwenden, hätte es im Button den weißen Hintergrund - ich hätte es wohl besser gleich in einen extra Button packen sollen, es war aber eigentlich nur eine Entscheidung im letzten Moment, das Brieferl da zum Anschauen reinzustellen.

Was die Farben angeht, hast du Recht - es gibt bessere Farbkombis - das "Ockergelb", muss ich gestehen, ist hier nur eine "Platzhalter"-Farbe. Zum Glück lassen sich Farben sehr leicht ändern. ;)

Was machst du eigentlich: Grafikdesign, Webdesign, Webentwicklung?
Beruflich/nebenberuflich mache ich nichts von dem. Ich bin eigentlich selbstständige Gesundheitsdienstleisterin.
Die Website für mein Unternehmen ist mein einziges Projekt - aber für dieses Projekt mache ich alles (oder von allem ein bisschen was) von dem was du aufgezählt hast, so gut ich es halt kann.
Nur SEA, diesbezüglich hab ich bedauerlicherweise noch nichts aktiviert. Habe dazu bisher nur recherchiert.

Wieso fragst du?
 

Ansophie

Mitglied
17 August 2019
100
2
18
ich kann mir zwar nicht vorstellen, dass du oder jemand von euch angenommen hat, dass ich in diesem Bereich tätig wäre, aber danke das du trotzdem gefragt hast. :wink:

naja, nun kann ich nicht auf frameworks setzen um kostbare Zeit (und wahrscheinlich so manchen Ärger und Frust) zu sparen. Das Projekt ist schon zu weit fortgeschritten um auf Baukasten, bootstrap oder ähnliches umzusteigen.
"Plugins" wie bei WP gibts ja nicht wirklich, oder weiß ichs nur nicht?
 

Ansophie

Mitglied
17 August 2019
100
2
18

ich komm nicht drauf wie man diese schönen Dinge beginnen kann.
dieses getting started und andere Anleitungen (glitch/yt) sind so undurchsichtig und die tools zum downloaden gibts ja nicht mehr - dort sieht das ja ganz einfach aus. sketch files lassen sich ohne sketch nicht öffnen.
habe material-component-web-master runtergeladen, installing locally über terminal klappt aber bisher nicht.

Bitte sei so freundlich und sag mir wie man das startet.
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.232
482
83
Berlin
In Verbindung mit JavaScript Frameworks, wie z. B. Angular.

https://material.angular.io

Aber das würde natürlich einigen Lernaufwand voraussetzen. Deshalb meine vorhergehende Frage, ob du dich professionell mit dem Thema beschäftigst, bzw. dieses vorhast. In dem Fall wäre der Aufwand angemessen, aber für ein privates Projekt wahrscheinlich weniger.
 
Werbung: