Kategorien
Vier Webseiten mit „WOW-Effekt“
Wir konzentrieren uns hier im Blog ja nicht nur auf PHP, es gibt auch eine Kategorie, die sich um Webentwicklung kümmert. Diese möchte ich heute mal wieder ein wenig füllen. In letzter Zeit habe ich viel im Netz gesurft um mich mal wieder ein wenig was Layouts angeht inspirieren zu lassen.
Vielleicht will ich ja zum 500sten Artikel ein neues Layout machen. Ist aber noch nicht sicher. Ein paar Ideen spuken auf jeden Fall schon in meinem Kopf herum. Ich würde sogar sagen, ein paar echt gute. Aber es sind ja noch fast 100 Beiträge bis dahin. Ich habe also jede Menge Zeit euch neugierig zu machen.
Wie gesagt, ich habe die letzten Tage und natürlich auch das Wochenende über ein wenig das Web durchstöbert und bin auf vier Webseiten gestoßen, die mich mit ihren Effekten begeistert haben. Begeistert vor allem, weil ich nicht auf Anhieb wusste, wie der Effekt zustande kommt. Diese Seiten möchte ich heute kurz vorstellen.
- Fat-Man Collective – Fangen wir mal mit der „unspektakulärsten“ Seite an. Sehr schöner Effekt beim Scrollen der Seite. Der dicke Mann rennt mit. Bleibt auch stehen, wenn man aufhört. Wenn ich auf ein Menüpunkt klicke, dann springt das System erst weiter, bis der dicke Mann gesprungen ist. Natürlich muss ich nicht dazu sagen, dass die Effekte ohne Flash realisiert wurden.
- Zaum & Brown – Auf den ersten Blick eine sehr einfache Webseite. Sehr schön gestaltet, aber ohne viel Schnick-Schnack. Interessant wird es erst, wenn man die Größe der Seite verändert. Einfach mal machen. Es lohnt sich. Wunderbarer Effekt, den ich nicht so einfach nachmachen könnte. Sehr gelungen. Schön unaufdringlich, aber trotzdem Wow.
- Think Geek – Diesen Effekt habe ich schon vor einer Weile entdeckt, aber er passt so wunderbar in die Reihe. Scrollt mal an das Ende der Seite und achtet auf den Hintergrund. Der Effekt ist so einfach, wie genial.
- Symfony – Nicht großes oder weltbewegendes. Ich finde nur die Art eine E-Mail Adresse zu verschlüsseln sehr interessant. Hier wurde sie über CSS einfach „codiert“. Natürlich fragt ihr euch jetzt warum codiert? Das steht doch ganz eindeutig fabien.potencier@ … Einfach mal die Adresse in die Zwischenablage kopieren und wieder rausholen. Ihr werdet überrascht sein. (Danke für den Link übrigens bei Christian!)
So das waren schon die vier Seiten. Ihr habt gemerkt, ich stehe auf Effekte, die man erst beim zweiten mal schauen erkennt. Ist zwar schade, das solche Schmankerl nicht von jedem wahrgenommen werden, umso mehr freue ich mich immer so etwas zu entdecken.
Wenn ihr auch Webseiten kennt, die eure Kinnlade ein wenig nach unten fallen lassen haben, dann her damit. Die Liste kann noch ein paar Einträge vertragen. Was das Symfony und das Think Geek Beispiel angeht, da würde ich gerne in der nächsten Zeit noch mal ein wenig erklären, wie es funktioniert. Beim Zaum & Brown und dem dicken Mann müsste ich mich erst ein wenig einarbeiten, vielleicht aber will da ja jemand von euch übernehmen.
Ach ja, was die Twitter Leser angeht: Sorry, dass ihr die Links schon kennt, aber der Fairness halber muss ich sie auch mal hier posten.
Zaum & Brown…sehr cooler Effekt!
Zu Symfony „EMail-Trick“: Funktioniert scheinbar unter FF3.5 nicht.
@KingCrunch
Der Symfony-Trick klappt wunderbar. Auch unter Firefox 3.5.3.
„Ein paar Ideen spucken auf jeden Fall …“ – Ich hoffe aber, die Ideen „spuken“ nur herum, sonst wird’s ziemlich feucht im Kopf 😀
@Symfony: die E-Mail steht einfach nur Rückwärts drin und wird per CSS quasi umgedreht 😉 Den Trick kenne ich schon gut 3-4 Jahre.
Das mit der eMail: bis zu welchem Browser / welcher Version ist das abwärtskompatibel… wohl nicht allzu sehr *an den IE denk* 😉
Die Fat-Man Collective Seite lädt bei mir grad nicht, vermutlich ein wenig überlastet.
Aber die Zaum & Brown Seite ist wirklich nett gemacht. Hab den JS-Code mal überflogen und es sieht nicht all zu schwierig aus sowas selbst zu machen.
@Flyingmana: Lust einen kurzen Artikel drüber zu schreiben und es zu erklären?
Bzgl. einer E-Mail-Codierung ist die folgende Seite absolut empfehlenswert: http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared/
Es werden 9 verschiedene Techniken zum Verschleiern der E-Mail-Adresse vorgestellt und verglichen. Besonders lobenswert ist der Praxistest: hier wurde zu jeder verschleierten E-Mail-Adresse (unterschiedliche Verschleierungstechnik) der eingehende Spam über die vergangenen 1,5 Jahre gemessen.
Hier auch noch ein recht Interessanter Effekt:
http://www.chive-project.com/Screenshots
Nach unten scrollen und den unteren Bildschirmrand beobachten.
Gibt auch jeden Fall nette Spielerein da draußen.
@Sven: Genau so eine Aktion wollte ich auch mal starten 🙂 War aber wieder 1,5 Jahre zu spät. Danke für den Link.
Wenn es um Hintergrundeffekte geht finde ich das hier einfach genial:
http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css
Finde den Symphony E-Mail-Trick nicht sehr gut: Wenn ich der Person eine E-Mail schicken möchte, kopiere ich mir die E-Mail-Adresse – in diesem Fall hätte ich aber die E-Mail-Adresse in falscher Reihenfolge im Zwischenspeicher, also muss ich den umständlichen Weg gehen und sie abtippen.
Man beachte was passiert, wenn man die Fensterbreite änder 😉
http://silverbackapp.com/
Bei der Silverback-Seite? Nichts passiert da ^^
Überhaupt ist das ganze Thema samt Diskussion mehr „Design über Funktionalität“. Der versprochene „Wow-Effekt“ hält sich bei mir in Grenzen. Is ja nett anzuschauen, aber was hat es zu bieten?
@KingCrunch: Es gibt Leute, denen Design/Layout wichtig ist. Da zähle ich mich auch dazu. Mir macht es einfach Spaß solche Kleinigkeiten zu entdecken. Dass das nicht jedermann Sache ist, weiß ich, habe ich auch kein Problem mit. Jedem das seine 🙂
@KingCrunch: Welchen Browser benutzt du denn?!
Hi, ich baue auch gerade ein weiteres Blog auf und habe dabei ein wenig mit Eyecandy und AJAX gearbeitet. Bei Interesse einfach mal reinschauen: http://thegeek.de
Gruß,
Marc
@KingCrunch: Um das Ganze nochmal aufzuklären, es passiert wohl etwas. Resize die Seite einfach mal leicht indem du wirklich mit der Maus die Breite änderst und achte auf die Blätter oben, sieht echt lustig aus.
Ich glaube KingCrunch hat den Effekt schon gesehen, aber er empfindet ihn nicht als erwähnenswert. Zumindest war das meine Interpretation. Vielleicht täusche ich mich auch.
„Natürlich muss ich nicht dazu sagen, dass die Effekte ohne Flash realisiert wurden.“
Bei mir sind sie MIT Flash realisiert…
Interessant finde ich auch die Email-Adresse mit CSS (direction=rtl). Das ist cool, hab ich so noch nicht gesehen.
Mh, meine neue Startseite, habe heute das erste mal die Seite gefunden, bei den 4 Webseiten gabs bei mir aber nur bei der Halloween Sache ein WoW 🙂
Find jedoch sehr gut wie alle in den Kommentaren mitmachen, die Seite lebt!