Erledigt: sidebuttons

[Ansophie]

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:
(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.

 

[Tronjer]

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]

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]

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?

 

[Ansophie]

Na dann schau ich mir das mal an.

Was machst du eigentlich:...?

Was meinst du?

 

[Runshak]

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

 

[Tronjer]

Was meinst du?

Beruflich.

 

[Ansophie]

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?

 

[Tronjer]

Wieso fragst du?

Wenn du professionell in dem Bereich tätig wärst, hätte ich dir geraten, grundsätzlich auf Frameworks zu setzen und weniger Zeit in Eigenkreationen zu versenken.

 

[Ansophie]

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.

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]

Material Design

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]

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.