Experimentielles Portfolio

[Sider]

Hallo.

Ich bastel gerade an einem etwas experimentellen Portfolio und würd gern wissen, was ihr davon haltet. Animationen übertrieben? Bedienbarkeit? Optischer Eindruck?

Das ganze ist noch längst nicht fertig. Wie man sieht, fehlt unter anderem noch die gesamte Gestaltung des Inhalts. Getestet hab ich bisher nur im Firefox und Safari. Ich bin mir ziemlich sicher, dass der Internet Explorer noch nicht ganz mitspielen wird. (Bin unschuldig. Sowohl HTML, als auch CSS sind valide. )

Wieder mal zu viele Worte
Hier klicken

Es handelt sich übrigens nicht um mein zukünftiges Portfolio. Wollte nur etwas mit jQuery rumspielen.

Grüße
Sider

[theHacker]

Hmm... naja, ich war erst ein wenig erschrocken, als plötzlich die Hälfte der Seite verschwunden is: Wenn die 4 Bilder laden, seh ich die nämlich erst alle untereinander und dann verschwinden 3 davon.

Und wenn ich auf "Home" bin, seh ich rechts schon die Hälfte von "About Me". Das sieht erst merkwürdig aus. Als wenn, komplett irgendwas kaputt wär da.

Punkte 3: bei den Unterseiten is alles da. Nur auf das Menü muss ich jedes Mal ne gefühlte Ewigkeit warten, weil da erst n FadeIn-Effekt is.

[Sider]

Welcher Browser und welche Auflösug war das?

Die 3 Punkte hab ich bei mir nicht festgestellt. Das Fading der Navigation sollte eigentlich genau passen. 1000ms für das Scrollen und danach sollte sofort der FadeIn einsetzen. Ist merkwürdig.

[theHacker]

Bei Firefox 3.6.9 und 1920x1200 is das mit dem sichtbaren About.
Firefox 4.0b5 und 1280x800 is das nicht.
Was hingegen bei beiden geht: mit Drücken der Right-Taste mich langsam da hinzuscrollen. Die Seite bewegt sich, das Menü bleibt fix.

Das mit den sichtbaren Bildern während des Ladevorgangs is auch bei beiden Systemen.

Das mit dem Fading war übertrieben. Es setzt schon sofort ein, wie du sagst, aber ich empfinde es als nervig, dass ich auf die Navigation warten muss.

[Sider]

Danke dir. Werd mal sehn, wie ich das hinbekomme. Das Scrollen per Pfeiltasten ist glaub ich Browsermechanik. Werd mal sehn, dass die Pfeiltasten die selben Ereignisse der Navigation auslösen.

[theHacker]

Kannst du nicht die nicht-aktiven "Unterseiten" ausblenden (display: none setzen) und erst unmittelbar vor dem Slide-Effekt sichtbar machen?

[Sider]

Zitat von theHacker

Kannst du nicht die nicht-aktiven "Unterseiten" ausblenden (display: none setzen) und erst unmittelbar vor dem Slide-Effekt sichtbar machen?

Das ist ne prima Idee. Frage wäre dann, ob beim Slide die nicht "anvisierten" Boxen eingeblendet werden sollten, um den "Überfliegen"-Effekt zu behalten. Werds nachher mal ausprobieren.

Andere Möglichkeit wäre, den nötigen Abstand der Boxen über die Breite des Browserfensters zu berechnen.

[theHacker]

Zitat von Sider

Andere Möglichkeit wäre, den nötigen Abstand der Boxen über die Breite des Browserfensters zu berechnen.

Und wenn ich schnell die Größe ändere und das JavaScript kommt nicht mit und man sieht "dreckige Ränder"? Wär mir zu gefährlich. Setz lieber n utopischen Wert ein, den keine Bildschirmkombination der Welt schafft.

[Sider]

So hab ichs zur Zeit. Allerdings nur auf meine 1440er Auflösung ausgelegt. Werds mal auf FullHD erweitern

[fliege1]

auf jedenfall *g*

sieht so bei nem iMac 27" aus *g*
http://cl.ly/c11db3bee13bffa9ed01


btw. haben auch schonmal länger mit Techniken rumgespielt:

http://twinvent.de/123/#home

http://twinvent.de/asd/ !

naja... eigentlich nur spielerei

[theHacker]

Zitat von Sider

Werds mal auf FullHD erweitern

1080p reicht bei weitem ned. Muss nur einer zwei Bildschirme haben, dann hat er schon mal 2160 Pixel in der Breite. Mit "utopisch" meinte ich sowas wie 10000. Und dann bei der Animation halt so hindrehen, dass es gutaussieht.

[oKiM]

Hmmm, viel zu viel Javascript. Mit NoScript sieht die Seite mistig aus und funktioniert gar nicht, da wäre eine Defaultansicht mit Hinweis schöner.

Sonst optisch schick, wenn auch recht minimalistisch mit viel freier Fläche. Vielleicht hilft da ein leichtes Muster bzw. ein Navigationselement, das in die Breite geht und ein Contentbereich, der tiefer ist. Möglicherweise wirkt es auch besser, wenn es zentriert und etwas breiter ist.

Von den Effekten her wirkt es auf jeden Fall sehr verspielt und meiner Meinung nach auch übertrieben (das Einblenden dauert ewig).

[ice-breaker]

Zitat von Sider

Andere Möglichkeit wäre, den nötigen Abstand der Boxen über die Breite des Browserfensters zu berechnen.

Die Größe lässt sich auch mit FF auslesen, unter Dimension oder so.

Ist auf jedenfall schön gemacht, erinnert mich ein wenig hieran

[Sider]

Naja, ist nen JavaScript-Experiment. Ohne JS anschaun ist da ja irgendwie witzlos. Das ganze wird ja nicht online gehen (zumindest nicht zu dem Zweck), von daher lass ich die wenigen Benutzer ohne aktiviertes JS mal außen vor.

Optisch wird sich da noch einiges tun. Whitespace ist ja schön und gut, aber auch für meinen Geschmack zu viel momentan.

Habs mal zum Vergleich in vertikales Scrollen geändert. (Ohne jetzt auf die Abstände zu achten) Bei der Version könnte man die "Footerwelle" einfach bis nach oben ziehen, sodass das Problem mit den Abständen keins mehr wäre.

EDIT Habs mal so gemacht. Die "Welle" mit Schatten bekommt noch nen transparenten Hintergrund, damit beim Sliden nicht diese gerade Kante entsteht.

EDIT2 Done. IE Workaround für transparente PNG spar ich mir erstmal. Das Problem mit dem Anzeigen aller Bilder während des Ladens sollte auch geregelt sein.

[topfkanne]

Hmm, vllt. solltest du das ganze zentrieren und die Navi feststehend neben den Content setzen. Mich stört's wenn die bei jedem Klick neu auftaucht.

Bei mir siehts übrigens so aus (Firefox 3.6.9 bei 22" und 1600x1024):


(Wobei der untere Teil nicht sichtbar ist, aber von Fireshot eben so geknipst wird )

Zitat von fliege1

sieht so bei nem iMac 27" aus *g*
http://cl.ly/c11db3bee13bffa9ed01

Aha und welcher Browser? Safari?
Oder wolltest du uns jetzt sagen dass du nen iMac hast?