nicht angemeldet
Responsive: Ich kriege es einfach nicht hin!
marctrix
Gunnar BittersmannMoin zusammen,
ich habe hier ein cooles Snipped gefunden, welches ich gerne responsive hätte: https://tympanus.net/Tutorials/SwatchBook/
Ich möchte eine leere Seite mit dem Swatch Book in der Mitte, was eben auf jedem Device gut aussieht und skaliert. - Ich schaffe es einfach nicht 😟
Auf folgender Seite ist sogar detailliert beschrieben, wie es aufgebaut ist: https://tympanus.net/codrops/2012/07/02/swatch-book-with-css3-and-jquery/
Ich habe mich schon an diversen Dingen versucht (zoom, tranform/scale,...) mit css, mit javascript usw. aber es sieht auf mobile Devices immer unschön aus.
Gibt es eine Möglichkeit dieses "Ding" mobile ready zu "zaubern"?
Vielen Dank und Grüße jp
-
Hej juppix,
ich habe hier ein cooles Snipped gefunden, welches ich gerne responsive hätte: https://tympanus.net/Tutorials/SwatchBook/
Gar nicht cool, sieht ziemlich veraltet aus: alle Maßangaben in px — das ist auch das Problem.
Ich möchte eine leere Seite mit dem Swatch Book in der Mitte, was eben auf jedem Device gut aussieht und skaliert. - Ich schaffe es einfach nicht 😟
Versuche es mal mit vw statt px
Auf folgender Seite ist sogar detailliert beschrieben, wie es aufgebaut ist: https://tympanus.net/codrops/2012/07/02/swatch-book-with-css3-and-jquery/
Gibt es eine Möglichkeit dieses "Ding" mobile ready zu "zaubern"?
Zaubern (also einmal kurz an einer Schraube drehen und schon klappt es) wird nicht gehen.
Was soll denn überhaupt auf den Karten sein? Wird sich darauf etwas befinden, was gelesen werden soll? - Das kannst du dann auf Smartphones vermutlich vergessen, Wird viel zu klein…
Marc
-
@@juppix
ich habe hier ein cooles Snipped gefunden, welches ich gerne responsive hätte: https://tympanus.net/Tutorials/SwatchBook/
Per Tastatur unbedienbar. Uncool.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hej Gunnar,
@@juppix
ich habe hier ein cooles Snipped gefunden, welches ich gerne responsive hätte: https://tympanus.net/Tutorials/SwatchBook/
Per Tastatur unbedienbar. Uncool.
Häh, das muss bedient werden?!?
Soll das ein Menü sein oder was?
Ich dachte, das sei nur eine Animation! — Wäre ich im Leben nicht drauf gekommen.
Insofern unbrauchbar. Mal abgesehen davon, dass Menschen mit Legasthenie oder Konzentrationsstörungen, Blinde und natürlich alle Tastaturnutzer daran scheitern werden.
Ach so -ä kein Mensch trifft die winzigen Spalten mit einem Finger auf einem Smartphone.
Na ja, früher hat man noch nicht darauf geachtet, solche Spielereien für alle zugänglich zu machen. Heute ein absolutes NoGo!
@juppix Betrachte das als es ist: eine nette Spielerei und nicht fertige Durchführbarkeitsstudie. Da muss man noch richtig viel Arbeit rein stecken, bevor es für den produktiven Einsatz in echten Webseiten nutzbar wird. So verscheucht es nur einen recht großen Anteil von Besuchern (wahrscheinlich die meisten, da dieses Ding auf dem Smartphone echt eine Zumutung wäre - hast du mal ausgerechnet, wie viele Millimeter breit so ein anklickbarer Streifen noch sein darf, damit es auf einen 320px breiten Schirm passt? Dank dem Hochformat müsstest du sogar mit vmin statt vw arbeiten, damit es auch im Landschaftsmodus noch auf den Screen passt. - Da kann NIEMAND mehr etwas treffen oder auch nur lesen…
Damit sperrst du die Mehrheit der Nutzer aus!
Ich korrigiere also meine Aussage von oben: das lässt sich nicht für eine produktive Seite verwenden. Es sei denn, die Darstellung auf kleinen Bildschirmen wäre komplett anders. - Aber dann müsste man das von Anfang an berücksichtigen. Das umschreiben würde wohl mehr Zeit benötigen, als das Ding von Grund auf neu zu machen.
Auch das wäre richtig viel Arbeit. Mit Zauberei hat so was nichts zu tun, sondern mit Fleiß.
Marc
-
Schade. Ich suche ein animiertes responsives "cooles" menü (Baumstruktur). Hat jemand einen Tipp? Habe bereits das ganze Web durchforstet. So eine Art Planetensystem bzw. Mindmap-Menü (zum "entlanghangeln").
-
Hej juppix,
Schade. Ich suche ein animiertes responsives "cooles" menü (Baumstruktur). Hat jemand einen Tipp? Habe bereits das ganze Web durchforstet. So eine Art Planetensystem bzw. Mindmap-Menü (zum "entlanghangeln").
Ich glaube, du suchst einfach irgendetwas "nicht alltägliches" (ob man das cool findet, liegt ja immer an dem, der es benutzen muss).
Leider ist es kaum möglich, etwas komplett anders als alle anderen zu machen, was Deine Besucher dennoch verstehen. Die Benutzerführung ähnelt sich auf den meisten Seiten so sehr, weil hier niemand durch "coole Effekte" und eine ungewohnte Bedienung seine Besucher vergraulen will.
Die Hauptnavigation ist Dein wichtigstes Instrument, um Nutzer zu den Aktionen zu leiten und somit wichtig bei allem, was man üblicherweise so möchte: hohe conversion rate, leichte Bedienbarkeit, gute Verständlichkeit, Auffinden und ablenkungsfreies Lesen der eigentlichen Inhalte usw
Mein Tipp: Halte Dich hier an Konventionen! Spiele mit kleinen Veränderungen. Verwende nur Animationen, die das Verständnis unterstützen. Die sehen genauso hübsch aus, wie jede andere Animation!
Einfach "irgendwas cooles" zu suchen, wird dich nicht zu einem vernünftigen Ergebnis bringen, fürchte ich.
Aber hübsche Menüs, die mehr oder weniger gut zu bedienen sind, gibt es schon. Zum Beispiel flex-nav (leider funktioniert der Link zur Demo derzeit nicht) — an das Layout Deiner Seite wirst du das natürlich anpassen müssen!
Richtig "cool" ist es natürlich, so etwas selber nach seinen Wünschen umzusetzen. Hier gibt es ein paar Seiten, wo du Infos findest, wie so was gehen könnte:
- https://css-tricks.com/flexbox-nav-bar-fixed-variable-take-rest-elements/
- https://medium.com/flexbox-and-grids/the-most-popular-navigation-bars-created-with-flexbox-6c0f59f55686
- https://css-tricks.com/flexbox-bar-navigation/
@Gunnar Bittersmann hat auch was für eine Menü-Ebene erstellt, was vollständig zugänglich ist. Da ist IMHO noch nichts animiert, weiß jetzt auch nicht auf Anhieb, wo das Sinn macht. Aber das überlasse ich gerne Deiner Kreativität. Wenn du Ideen hast, bei deren Umsetzung du Hilfe brauchst, gerne.
Marc
-
Dieses Menü hier zum Beispiel ist responsive: https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
-
Hej juppix,
Dieses Menü hier zum Beispiel ist responsive: https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
Schon vor vielen Jahren habe ich einen langen Artikel gelesen über intelligente Navigationsmechanismen. Nichts hat sich davon durchgesetzt. Auch der Kreis nicht. Die Idee ist über zehn Jahre alt und wurde früher tatsächlich auf der Homepage von netcologne eingesetzt. Die Verwendung auf vielbesuchten Seiten ist der erste Schritt zu einer nennenswerten Verbreitung. Aber die Kreise haben sich nicht durchgesetzt, sind im Gegenteil vollständig verschwunden. Oder kennst du eine Seite, die so etwas verwendet? 😉
Das hat Gründe, glaub es mir. Solche Seiten werden mit großen Etats weiterentwickelt. A/B-Tests sind da ein regelmäßiges Mittel zur Überprüfung von Änderungen. Ohne die Tests zu kennen: wenn netcologne die nicht mehr verwendet und auch sonst keine große Webseite, dann bedeutet das schlicht und einfach, dass diese Menüs Besucher kosten und/oder sich negativ auf die conversion Rate auswirken.
Mein Rat: nimm eines der langweiligen Menüs, mit denen deine Besucher klar kommen und „peppe“ diese ggfs auf!
Marc
-
-
-
-