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

Feedback aus Entwicklersicht

  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. Zum Login

Stellenmarkt
  1. operational services GmbH & Co. KG, Berlin, Frankfurt am Main, Wolfsburg, Braunschweig, München
  2. Allianz Lebensversicherungs - AG, Stuttgart
  3. Walhalla u. Praetoria Verlag GmbH & Co. KG, Regensburg
  4. Parador GmbH & Co. KG, Coesfeld

Golem pur
  • Golem.de ohne Werbung nutzen

Anzeige
Top-Angebote
  1. 79€ (Bestpreis!)
  2. 79€ (Bestpreis!)
  3. (u. a. 65UM7100PLA für 689€, 49SM8500PLA für 549€ und 75SM8610PLA Nanocell für 1.739€)
  4. 89,90€ + Versand (Vergleichspreis 135,77€ + Versand)


Haben wir etwas übersehen?

E-Mail an news@golem.de


VW-Logistikplattform Rio: Mehr Fracht transportieren mit weniger Lkw
VW-Logistikplattform Rio
Mehr Fracht transportieren mit weniger Lkw

Im Online-Handel ist das Tracking einer Bestellung längst Realität. In der Speditionsbranche sieht es oft anders aus: Silo-Denken, viele Kleinunternehmen und Vorbehalte gegenüber der Digitalisierung bremsen den Fortschritt. Das möchte Rio mit seiner Cloud-Lösung und niedrigen Preisen ändern.
Ein Bericht von Dirk Kunde

  1. Vernetzte Mobilität Verkehrsunternehmen könnten Datenaustauschpflicht bekommen
  2. Studie Uber und Lyft verschlechtern den Stadtverkehr
  3. Diesel-Ersatz Baden-Württemberg beschafft Akku-Elektrotriebzüge Mireo

Quantencomputer: Intel entwickelt coolen Chip für heiße Quantenbits
Quantencomputer
Intel entwickelt coolen Chip für heiße Quantenbits

Gebaut für eine Kühlung mit flüssigem Helium ist Horse Ridge wohl der coolste Chip, den Intel zur Zeit in Entwicklung hat. Er soll einen Quantencomputer steuern, dessen Qubits mit ungewöhnlich hohen Temperaturen zurechtkommen.
Von Frank Wunderlich-Pfeiffer

  1. AWS re:Invent Amazon Web Services bietet Quanten-Cloud-Dienst an
  2. Quantencomputer 10.000 Jahre bei Google sind 2,5 Tage bei IBM
  3. Google Ein Quantencomputer zeigt, was derzeit geht und was nicht

Arbeitsklima: Schlangengrube Razer
Arbeitsklima
Schlangengrube Razer

Der Gaming-Zubehörspezialist Razer pflegt ein besonders cooles Image - aber Firmengründer und Chef Tan Min-Liang soll ein von Sexismus und Rassismus geprägtes Arbeitsklima geschaffen haben. Nach Informationen von Golem.de werden Frauen auch in Europa systematisch benachteiligt.
Ein Bericht von Peter Steinlechner

  1. Razer Blade Stealth 13 im Test Sieg auf ganzer Linie
  2. Naga Left-Handed Edition Razer will seine Linkshändermaus wieder anbieten
  3. Junglecat Razer-Controller macht das Smartphone zur Switch

  1. Datendiebstahl: Facebook warnt eigene Mitarbeiter erst nach zwei Wochen
    Datendiebstahl
    Facebook warnt eigene Mitarbeiter erst nach zwei Wochen

    Nach dem Diebstahl von Festplatten mit unverschlüsselten Gehaltsabrechnungen und persönlichen Daten hat sich Facebook laut einem Medienbericht offenbar sehr viel Zeit gelassen, die betroffenen Mitarbeiter zu informieren.

  2. Ultimate Rivals: Apple Arcade eröffnet Sportspielreihe mit Hockey
    Ultimate Rivals
    Apple Arcade eröffnet Sportspielreihe mit Hockey

    Eishockeylegende Wayne Gretzky gegen Fußball-Weltmeisterin Alex Morgan oder andere Sportstars: Das ist die Idee hinter einer neuen Sportspielserie auf Apple Arcade. Nach dem Hockey-Auftakt namens The Rink geht es im Frühjahr mit Basketball weiter.

  3. T-Mobile: John Legere warnt US-Richter vor Scheitern von Fusion
    T-Mobile
    John Legere warnt US-Richter vor Scheitern von Fusion

    Mehrere US-Bundesstaaten kämpfen gegen die Fusion von Sprint mit T-Mobile in den USA. Dessen Chef John Legere hat sich jetzt bei der Gerichtsverhandlung zu dem Thema geäußert - aber die Aktionäre verlieren offenbar die Geduld.


  1. 14:08

  2. 13:22

  3. 12:39

  4. 12:09

  5. 18:10

  6. 16:56

  7. 15:32

  8. 14:52