1. Foren
  2. Kommentare
  3. Applikationen
  4. Alle Kommentare zum Artikel
  5. › Golem.de: Neue Bildergalerie

Feedback aus Entwicklersicht

Am 17. Juli erscheint Ghost of Tsushima; Assassin's Creed Valhalla und Watch Dogs Legions konnten wir auch gerade länger anspielen - Anlass genug, um über Actionspiele, neue Games und die Next-Gen-Konsolen zu sprechen! Unser Chef-Abenteurer Peter Steinlechner stellt sich einer neuen Challenge: euren Fragen.
Er wird sie am 16. Juli von 14 Uhr bis 16 Uhr beantworten.
  1. Thema

Neues Thema Ansicht wechseln


  1. Feedback aus Entwicklersicht

    Autor: Andreas_L 08.10.12 - 19:51

    Ich durfte in meiner Firma vor kurzem selbst so etwas Ähnliches basteln. Hauptziel war allerdings ein Lightbox-"Klon", der für Touch-Screen-Geräte optimiert ist. Daneben durfte ich noch andere kleine Galerien entwickeln. Deswegen hier ein paar Tips und Anregungen, wie ich die Dinge umgesetzt habe:

    * Auf der Artikeldetailseite - ich weiß nicht, ob ihr die auch so nennt ;) - hab ich über dem Bild einen Bereich hinzugefügt, der die gleiche Breite hat wie das Bild selbst und dabei vielleicht knappe 50 Pixel hoch ist. Dieser in 2 Teile geteilt (links und rechts) sorgt für die Navigation. Prinzipiell wie bei der Lightbox, nur dass das Bild selbst davon nicht überlagert wird. Somit kann man immer Pfeile darstellen, die aber das Bild nicht verdecken. Die Größe ist außerdem auch angenehm mit dem Finger zu treffen.
    Tipp für Golem hier: Man braucht die Pfeil-Schaltflächen nicht unbedingt in der Mitte zusammenlaufen lassen sondern kann stattdessen zwischen den Pfeilen das "Bild X von Y" platzieren.

    * Firmeninterne Anforderung wird immer öfter die Steuerung via Wisch-/Swipe-Gesten. Mit JS-Bibliotheken sind die auch sehr leicht umzusetzen. Mein Favorit darunter: TouchSwipe von "Skinkers Labs" (ist ein jQuery-Plugin, falls das von Bedeutung ist)
    Ich hab diese Technik sogar zusammen mit leicht angedeutetem CSS3 3D-transform verwendet, was unter Android 4.1 im Chrome recht gut und zügig läuft. iPad dann sowieso. Muss aber nicht jeder Seite gut stehen. Ein Bilderwechsel im Stile der jQuery UI "Drop"-Animation (Slide + Fade) finde ich allerdings sehr schön. Macht sich auf dieser Seite sicher auch chic - Vollbild sowie im Artikel.

    * Was mir leider negativ bei der neuen Version aufgefallen ist: Die Festlegung der Breite verträgt sich wohl nicht mehr mit Tablets, sofern das Bild breiter ist als der Bildschirm. Im Hochformat geht das Bild nämlich rechts über den Rand und lässt einen die Seite horizontal scrollen. Das Layout wirkt dadurch zerstört.
    Der Vollbildmodus sieht auch seltsam aus. Der Hintergrund wird schwarz, aber man sieht den Header der Seite oberhalb des Bildes. Getestet auf Android 4.1/Chrome. Da bitte nochmal genauer hinschauen, da die mobile Golem-Seite sonst eine der besten ist, die ich gesehen habe. Sie hat eine sehr gute Lesbarkeit, vor allem wegen der Serifenschrift (Bin seitdem erst ein Freund davon geworden, sofern man sie richtig verwendet.)

    Hoffe ich konnte euch damit helfen und bestenfalls auch zu neuen Ideen inspirieren. :)

    Viele Grüße
    Andy

  2. Re: Feedback aus Entwicklersicht

    Autor: am (golem.de) 08.10.12 - 21:50

    > - hab ich über dem Bild einen Bereich hinzugefügt, der die gleiche Breite
    > hat wie das Bild selbst und dabei vielleicht knappe 50 Pixel hoch ist.
    > Dieser in 2 Teile geteilt (links und rechts) sorgt für die Navigation.
    > Prinzipiell wie bei der Lightbox, nur dass das Bild selbst davon nicht
    Der Sinn des Vollbildmodus liegt für uns darin, das Bild im Vollbild darzustellen und eben nicht künstlich zu verkleinern, wenn es nicht erforderlich ist. Oder anders: "Jedes Pixel fürs Bild".
    Wenn du dir das Vollbild (2443x1686) der mittleren Galerie auf einem 27 Zöller randlos anguckst, dann haut dich das um.

    > * Firmeninterne Anforderung wird immer öfter die Steuerung via
    > Wisch-/Swipe-Gesten. Mit JS-Bibliotheken sind die auch sehr leicht
    > umzusetzen. Mein Favorit darunter: TouchSwipe von "Skinkers Labs" (ist ein
    Wir haben solche Ansätze in den letzten Jahren immer wieder in Zusammenhang mit anderen Projekten getestet - inbesondere bei der Konzeption der mobilen Ansichten von Golem.de. Unser Fazit: Gesten-Support für was auch immer wenn es alle Browser als native Events unterstützen.
    Alles was (teil-)emuliert wird, neigt dazu entweder mit der Browser-eigenen Navigation zu kollidieren, führt zu Darstellungens- oder Performanceproblemen. Sowas bekommst du über gefühlte 5000 OS/Browser/Geräte-Kombinationen nicht sauber implementiert, erst recht im Zusammenspiel mit womöglich weiteren interaktiven Komponenten in der Webseite.
    Animation werden wir nur verwenden, wenn sie unmittelbaren Zusammenhang mit der Navigation stehen und helfen, sie zu verstehen. "Hübsch" ist dabei für uns kein Kriterium.

    > Der Vollbildmodus sieht auch seltsam aus. Der Hintergrund wird schwarz,
    > aber man sieht den Header der Seite oberhalb des Bildes. Getestet auf
    > Android 4.1/Chrome. Da bitte nochmal genauer hinschauen, da die mobile
    Ich hab das im Text der Testseite noch einmal ergänzt: Die Galerie wird auf den Mobilseiten in der Form nicht verfügbar sein. Daher haben wir dahingehend auch nicht getestet.

    Grüße,
    Alexander Merz (golem.de)

  3. Re: Feedback aus Entwicklersicht

    Autor: Andreas_L 09.10.12 - 20:48

    am (golem.de) schrieb:
    --------------------------------------------------------------------------------
    > Der Sinn des Vollbildmodus liegt für uns darin, das Bild im Vollbild
    > darzustellen und eben nicht künstlich zu verkleinern, wenn es nicht
    > erforderlich ist. Oder anders: "Jedes Pixel fürs Bild".
    > Wenn du dir das Vollbild (2443x1686) der mittleren Galerie auf einem 27
    > Zöller randlos anguckst, dann haut dich das um.

    Tut mir leid, das war nicht auf die Vollbildansicht bezogen sondern auf die Ansicht im Artikel.

    > Wir haben solche Ansätze in den letzten Jahren immer wieder in Zusammenhang
    > mit anderen Projekten getestet - inbesondere bei der Konzeption der mobilen
    > Ansichten von Golem.de. Unser Fazit: Gesten-Support für was auch immer wenn
    > es alle Browser als native Events unterstützen.
    > Alles was (teil-)emuliert wird, neigt dazu entweder mit der Browser-eigenen
    > Navigation zu kollidieren, führt zu Darstellungens- oder
    > Performanceproblemen. Sowas bekommst du über gefühlte 5000
    > OS/Browser/Geräte-Kombinationen nicht sauber implementiert, erst recht im
    > Zusammenspiel mit womöglich weiteren interaktiven Komponenten in der
    > Webseite.

    Ist es bei der Gerätevielfalt nicht sowieso schwierig, etwas übergreifend zu implementieren? Egal ob es ein experimentelles Feature oder ein bewährter Standard ist?
    Außerdem emulieren solche Bibliotheken nichts sondern fassen wichtige Dinge zusammen, die niemals Bestandteil von JavaScript werden - z. B. Erkennung von Wischgesten, Pinch-Zoom, Blockieren des Scrollens der Seite, Timing-Events etc. JavaScript bietet nur rudimentären Zugriff auf Anzahl und Position der Finger, womit sich an sich nicht viel anfangen lässt. Selbst ein einfaches Tippen darf man sich aus ontouchstart und ontouchend selbst zusammenbasteln.

    > Animation werden wir nur verwenden, wenn sie unmittelbaren Zusammenhang mit
    > der Navigation stehen und helfen, sie zu verstehen. "Hübsch" ist dabei für
    > uns kein Kriterium.

    In Zusammenhang mit Wischgesten halte ich sie für sehr sinnvoll. Es wirkt anders sogar eher komisch auf mich (siehe auch eInk-Displays-Geräte mit Touchscreens).


    > Ich hab das im Text der Testseite noch einmal ergänzt: Die Galerie wird auf
    > den Mobilseiten in der Form nicht verfügbar sein. Daher haben wir
    > dahingehend auch nicht getestet.

    Hm, okay. Dann müsste er dort deaktiviert werden. Aber warum macht ihr keine So-Vollscreen-wie-möglich-Lösung? Ein <div> mit absoluter Position, relativ zur aktuellen Scrollposition und auf die volle verfügbare Fläche vergrößert? Ich fände es bei mobilen Geräten fast sogar noch wichtiger, dass wirklich jeder zur Verfügung stehende Platz ausgenutzt wird, das Bild aber gleichzeitig nicht abgeschnitten wird.

  4. Re: Feedback aus Entwicklersicht

    Autor: am (golem.de) 09.10.12 - 21:41

    > Außerdem emulieren solche Bibliotheken nichts sondern fassen wichtige Dinge
    > zusammen, die niemals Bestandteil von JavaScript werden - z. B. Erkennung
    > von Wischgesten, Pinch-Zoom, Blockieren des Scrollens der Seite,
    > Timing-Events etc. JavaScript bietet nur rudimentären Zugriff auf Anzahl
    > ...
    Und da setzt eben das Problem an, dass diese Bibliotheken auch tatsächlich aktuell bleiben und gepflegt werden müssen. Derzeit sehen wir noch keinen Gewinner, der seine Zuverlässigkeit unter Beweis gestellt hat.

    > > Animation werden wir nur verwenden, wenn sie unmittelbaren Zusammenhang
    > > der Navigation stehen und helfen, sie zu verstehen. "Hübsch" ist dabei
    > In Zusammenhang mit Wischgesten halte ich sie für sehr sinnvoll. Es wirkt
    Das meinte ich in Zusammenhang mit der Navigation.

    > Hm, okay. Dann müsste er dort deaktiviert werden. Aber warum macht ihr
    > keine So-Vollscreen-wie-möglich-Lösung? Ein mit absoluter Position,
    > relativ zur aktuellen Scrollposition und auf die volle verfügbare Fläche
    > vergrößert? Ich fände es bei mobilen Geräten fast sogar noch wichtiger,
    > dass wirklich jeder zur Verfügung stehende Platz ausgenutzt wird, das Bild
    > aber gleichzeitig nicht abgeschnitten wird.
    Das Problem ist nicht die technische Umsetzung an sich.
    1.) Auf Smartphones willst du nicht Megabyte große Bilder laden und auf 3,5" angucken, vorallem wenn das die Folge einer Fehlbedienung ist, wie es auf Touchgeräten eher passieren kann als auf dem Desktop.
    2.) Bei Tablets gibt es eine etwas schizophrene Situation derzeit. Ursprünglich sind wir davon ausgegangen, das es halt Smartphones mit größeren Display sind und eher als Zweitgeräte genutzt werden. Schneller als erwartet aber mutiert gerade die Highend-Sparte zum privaten Erstgerät aufgrund besserer Auflösungen und höherer Rechenleistung. Wie wir damit mittelfristig umgehen, ist Diskussionsstoff in der Redaktion.

    Grüße,
    Alexander Merz (golem.de)

  1. Thema

Neues Thema Ansicht wechseln


Um zu kommentieren, loggen Sie sich bitte ein oder registrieren Sie sich. Sie müssen ausserdem in Ihrem Account-Profil unter Forum einen Nutzernamen vergeben haben. Zum Login

Stellenmarkt
  1. Merz Pharma GmbH & Co. KGaA, Frankfurt am Main
  2. HABA Group B.V. & Co. KG, Bad Rodach bei Coburg
  3. BG BAU- Berufsgenossenschaft der Bauwirtschaft Hauptverwaltung, Berlin
  4. ix.mid Software Technologie GmbH, Köln

Golem pur
  • Golem.de ohne Werbung nutzen

Anzeige
Spiele-Angebote
  1. (u. a. Die Sims 4 für 14,80€, Die Sims 4 Nachhaltig Leben für 28,99€, Die Sims 4 Tiny Houses...
  2. (-5%) 9,49€
  3. 27,49€


Haben wir etwas übersehen?

E-Mail an news@golem.de


Coronakrise: Die Maske schreibt mit
Coronakrise
Die Maske schreibt mit

Ein Startup aus Japan hat einen intelligenten Mundschutz entwickelt, der die Worte des Trägers aufnehmen, übersetzen und verschicken kann. Ein Problem gibt es aber bei der Zielgruppe.
Ein Bericht von Felix Lill

  1. Coronakrise Unternehmen könnten längerfristig auf Homeoffice setzen
  2. Curevac Tesla baut mobile Moleküldrucker für Corona-Impfstoff
  3. Jens Spahn Bislang 300 Infektionsmeldungen über Corona-Warn-App

Survival-Sandbox-Spiele: Überlebenskämpfe im Sandkasten
Survival-Sandbox-Spiele
Überlebenskämpfe im Sandkasten

Survival-Sandbox-Spiele gibt für jeden Geschmack: Von brutalen Apokalypsen über exotische Dschungelwelten bis hin zur friedlichen Idylle.
Von Rainer Sigl

  1. Twitter & Reddit Viele Berichte über sexuelle Übergriffe in der Spielebranche
  2. Maneater im Test Bissiger Blödsinn
  3. Mount and Blade 2 angespielt Der König ist tot, lang lebe der Bannerlord

KI-Startup: Regierung bestätigt Treffen mit Augustus Intelligence
KI-Startup
Regierung bestätigt Treffen mit Augustus Intelligence

Der CDU-Politiker Amthor fungierte als Lobbyist für das KI-Startup Augustus Intelligence. Warum sich die Regierung mit der Firma traf, ist weiter unklar.
Ein Bericht von Friedhelm Greis

  1. Texterkennung OpenAIs API beantwortet "Warum ist Brot so fluffig?"
  2. Cornonavirus Instagram macht Datensatz für Maskenerkennung ungültig
  3. KI Software erfindet Wörter und passende Definitionen dazu