Facebook
Twitter
Google+
Kommentare
22
Willkommen bei "the web hates me". Mittlerweile hat unser Team ein tolles neues Monitoringtool für Agenturen gelauncht. Unter dem Namen koality.io haben wir einen Service geschaffen, der er Agenturen ermöglicht mit sehr geringen Kosten alle Ihre Webseiten zu überwachen.

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.

Über den Autor

Nils Langner

Nils Langner ist der Gründer von "the web hates me" und auch der Hauptautor. Im wahren Leben leitet er das Qualitätsmanagementteam im Gruner+Jahr-Digitalbereich und ist somit für Seiten wie stern.de, eltern.de und gala.de aus Qualitätssicht verantwortlich. Nils schreibt seit den Anfängen von phphatesme, welches er ebenfalls gegründet hat, nicht nur für diverse Blogs, sondern auch für Fachmagazine, wie das PHP Magazin, die t3n, die c't oder die iX. Nebenbei ist er noch ein gern gesehener Sprecher auf Konferenzen. Herr Langner schreibt die Texte über sich gerne in der dritten Form.
Kommentare

22 Comments

  1. „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.

    Reply
  2. 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.

    Reply
  3. 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.

    Reply
  4. 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?

    Reply
  5. @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 🙂

    Reply
  6. @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.

    Reply
  7. „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.

    Reply
  8. 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!

    Reply

Leave a Comment.

Link erfolgreich vorgeschlagen.

Vielen Dank, dass du einen Link vorgeschlagen hast. Wir werden ihn sobald wie möglich prüfen. Schließen