QUOTE.fm Read WIP Demo #2

Not to long ago I showed you the status of my work on QUOTE.fm Read. I also said I wanted to show you my progress along the way. So today I have a pretty nice update for you, I think. And yes, in the meantime I also did some other things.

So let’s get started with what’s new. The comments are finished and look mostly like the ones you already know from QUOTE.fm.
Furthermore I replaced the standard OS scrollbars in the social reading mode with JavaScript scrollbars. They look and behave almost exactly like the ones you might know from Mac OS X Lion. They looks nice and if you don’t need them they are simply out of your way.
Today I started working on the functioning of the customize buttons. You now can change the font size, line height and width of the text. Up next are the fonts and color themes.

Have a look, click a few buttons, resize the browser and so on and let me know what you think. However, I have to say that everything is work in progress and only tested in Safari and roughly Firefox.

Start QUOTE.fm Read Demo.

Veröffentlicht am Donnerstag, 03. Mai 2012

Kommentare

  1. Wenn ich mir das auf meinem 27″ Screen im Fullscreen Modus ansehe passt alles, aber auf kleineren Bildschirmen könnte die Leiste mit den Kommentaren zu groß wirken. Die ist meiner Meinung nach zu überdimensioniert und „erdrückt“ einen im ersten Moment.

    Ich hoffe du willst hierzu überhaupt konstruktive Kritik hören.

    1. Die Leiste mit den Kommentaren öffnet man, wenn man die Leiste mit den Kommentaren sehen will. Sobald diese offen ist, ist der Text sekundär. Wäre sie kleiner, wäre sie zu klein.

          1. Ich gab doch oben schon meine Begründung an? Mir ist die Leiste einfach zu groß. Wenn man den Text vorher liest und die Leiste dann einblendet ist es vielleicht okay, aber wenn ich lesen will und nebenbei die Kommentare verfolgen will, ist es mir persönlich zu groß.

  2. Finde die Kommentarleiste auch auf meinem 13″ Bildschirm sehr gut so.

    Wird es möglich sein in Kommentaren auf Textstellen zu verweisen? Diskussionen könnten so direkter am Text erfolgen.

    Würde es außerdem gut finden, dass die Textstelle die empfohlen worden ist immer farbig hinterlegt ist (also auch wenn ich die Kommentare dazu öffne) und nicht nur wenn ich in der Auswahlliste mit der Maus darüber gehe.

    Weiter so! <3

      1. Quasi wie ein Quote im Kommentar. Markieren im Text, reinziehen ins Kommentarfeld. Irgendwie sowas einfaches aber hübsches. So kann ich in einer Diskussion Textstellen zitieren, eventuell doch auch auf andere Artikel verweisen und auf QUOTE.fm Verbindungen zwischen Artikeln/Recommendations ermöglichen.

  3. Meiner Meinung nach sollte der „Header“ mitscrollen. Wenn mir nach der Hälfte des Textes auffällt, dass zum Beispiel der Zeilenabstand so total anstrengend ist, wäre es blöd erst wieder nach oben scrollen zu müssen, um den Abstand zu verändern, nur um dann wieder die Stelle suchen zu müssen, an der ich aufgehört habe zu lesen.

  4. Sieht gut aus, aber: Ich würde die Schriftgröße nach oben und unten und die Textbreite nach innen hin begrenzen. Also irgendwie auf sinnvolle Werte. Wobei ich innerlich davon ausgehe, dass das alles schon geplant und nur noch nicht implementiert ist.

  5. So, habe mir das gerade noch einmal genauer angesehen und vielleicht finde ich die Leiste nicht zu breit, sondern wurde ich einfach von dem raschen „herausspringen“ irritiert. Möglicherweise fehlt da einfach nur eine gewisse Animation, damit das schön smooth aussieht.

    Hendrik erwähnte gerade den Header der nicht mitscrollt: Bei mir scrollt der in Google Chrome mit.

    1. Der Header steht fest, sprich der Text scrollt hinter den Header, wenn man im social reading mode ist. Ansonsten scrollt er einfach weg. Das ist auch so gewollt.

    2. Hmm, das ja merkwürdig, ich hab mir die Seite grade nochmal im Safari angeguckt und den Cache in Chrome geleert, aber in beiden Browsern scrollt der Header bei mir nicht mit.

  6. Also ich finde ebenfalls nicht, dass das Ganze den Text „erdrückt“, da man es ja ausgeblendet hat (von Anfang an und v.a. beim Lesen). Ich finds gut, auch wenn ich line height eigentlich unnötig finde :)

  7. Zwei Anmerkungen: – Wenn ich über ein Kommentar fahre wird das Zitat hervorgehoben. Das ist toll. Bei einem längeren Text sehe ich das aber ggf, gar nicht, da die Scrollposition des Textes grad so steht, dass die Hervorhebung ausserhalb des Browserfensters liegt. Um zu sehen, auf welche Textstelle sich der Kommentar bezieht muss ich also „suchen“ indem ich im Text scrolle, wieder auf das Kommentar gehe damit die Hervorhebung erscheint usw. Mögliche Lösungsansätze: a) Beim Klicken auf den Kommentar scrollt der Text auf die richtige stelle anstelle auf den Autor zu gehen b) Wenn die Maus länger über einem Kommentar verweilt scrollt der Text automatisch c) ein dezenter Pfeil hoovert über dem Text und verdeutlicht „klick mich wenn du die entsprechende Textstelle sehen willst“. Ich würde b) bevorzugen weil am wenigsten Klickerei.

    • Kommentare sind in Friends / Others getrennt. Ich persönlich würde es bevorzugen, diese Trennung bei den Kommentaren so strikt zu handhaben. Ich finde es persönlich spannender, was verschiedene Leute zu ein und der selben Textstelle zu sagen haben und will dies gebündelt an einer stelle haben und nicht für eine Textstelle oben ein Kommentar eines Freundes lesen und wenn ich weiter unten in der Kommentarliste angekommen bin – zwischendurch schon drei andere Kommentare zu anderen Textstellen gelesen hab – feststellen dass andere Leute zu ein und der selben stelle auch eine spannende Meinung hatten. Durch Aufgabe der Trennung ließe sich auch die Sortierung der Kommentare verschlauen: Die Reihenfolge der Kommentare orientiert sich entlang des Auftretens der Zitierten stellen. Wenn die Kommentare mit dem Text mitlaufen würde sich sogar mein erster Kritikpunkt von selber auflösen.
    1. Edit: Erster Satz, zweiter Absatz: Da fehlt ein „nicht“: „…Trennung bei den Kommentaren NICHT so strikt zu handhaben…“

  8. Wenn ich die Seitenleiste öffne, scrollen sowohl der Text-, als auch der Kommentarteil (sprich JavaScript-Scrollbars) langsamer, als wenn ich nur den Text offen habe (sprich original Browser-Scrollbars). Auch anderes, browser-typisches Scrollverhalten wird ignoriert. Zum Beispiel, dass Opera ein bisschen weiter scrollt, wenn man mit den Finger schnell wischt und sie dann runter nimmt. Win7, Chrome+Opera, Verwendung vom Mauspad zum Scrollen

  9. Sieht alles sehr sauber aus.

    Suboptimale finde ich Ansicht der Highlights. Würde gerne auf „Friends“ klicken können (also den Balken ‚aktivieren‘) und dann durch den Text scrollen (und dabei eben die rausgepickten Quotes meiner Freunde sehen). Würde auch schon reichen, wenn ich einzelne Highlights aktivieren könnte. Grund: Momentan funktioniert das so, dass ich rechts über einen Freund hover, dann kommt links das Highlight. Doof wenn das nicht links auch grade in meinem Sichtfeld ist, ich nach links rüberscrolle und das Highlight wieder weg ist.

    Freu mich, das wird alles super.

  10. Richtig schick geworden. Mir ist allerdings auch aufgefallen, dass die empfohlene Textstelle manchmal nicht sichtbar ist, weil die entsprechende Stelle weiter unten im Text ist. Vielleicht könnte man da einen kleinen Pfeil am unteren Browser-Rand als Indikator anzeigen.

  11. Hey! Extrem cool! Hab schon länger nach dieser Scrollbar Möglichkeit gesucht! Cool, dass Du die benutzt.

    Hättest Du einen Link zu einem Artikel/Tutorial/etc. dazu?

    Danke schonmal!

  12. Hallo. Ich finde das aktivieren der Seitenleiste spitze, doch zum deaktivieren sollte ein einfacher Mausklick auf die in dem Fall sekundäre Leiste (dann links) genügen.

    Der erneute Weg zum „Kopf“ oben rechts ist meiner Meinung nach nervend, unnötig.

    (Vielleicht schrieb schon jemand ein Kommentar, der den selben Inhalt hatte, hatte keine Zeit all dies zu lesen.)