20 fantastische Pseudo-Flash-Websites
Eine Pseudo-Flash-Website ist eine, die wie eine Flash-Website aussieht, sich anfühlt und verhält, aber in Wirklichkeit auf althergebrachtem HTML und CSS basiert.
Es gibt meist auch eine Prise JavaScript, um Dinge zum Leben zu erwecken und die Oberfläche abzurunden.
Das Ergebnis liegt oft über dem, was wir von HTML und CSS erwarten, weshalb wir annehmen können, dass die Website Flash-basiert ist. Klicken Sie mit der rechten Maustaste und Sie werden angenehm überrascht sein.
Ich bin sehr an Pseudo-Flash-Websites interessiert und rede oft über das Thema. Flash hat offensichtlich an Bedeutung verloren (obwohl es keineswegs weg ist), und der Fokus hat sich auf die Kerntechnologien des Webs verlagert (HTML, CSS, JavaScript).
Dafür gibt es zwei Gründe. Das erste ist technisch. Einfacheres und verbessertes SEO, CMS-Tools wie WordPress und eine breite Geräteunterstützung haben die Leute dazu ermutigt, die standardisierten Tools auf das Maximum zu bringen.
Zweitens wissen viel mehr Menschen, wie man sich mit diesen grundlegenden Sprachen entwickelt, und eine große Community ist bereit, auf die Vorteile von Flash für diese vertrauten Tools zu verzichten.
Angesichts so vieler Gründe, die Grenzen zu überwinden und sich von Flash zu entfernen, befinden wir uns mitten in einer massiven Verschiebung der Webentwicklung. HTML-Websites begannen als statische Entitäten. Mit der Entstehung von AJAX haben wir erlebt, wie ein dynamisches Dokument unsere Erwartungen verändern kann. Wirf Animationen, Übergänge und Interaktion ein und du hast ein radikal anderes Medium.
Einige glückliche Opfer
Diese Verschiebung bringt einige Verluste mit sich, die viele Menschen (einschließlich mir) begrüßen. Das erste unter diesen ist Hintergrundmusik. Das Abspielen auf einer Standard-Website wird für den Entwickler immer schwieriger. Ich muss nicht länger nach der Pause- oder Stummschalttaste suchen, um eine Website zu schließen.
Zweitens sind Websites weniger wahrscheinlich, Ihren Browser jetzt zu entführen. Einige Flash-basierte Websites tun dies noch, indem Sie die Größe Ihres Ansichtsfensters ändern und Vollbildschnittstellen laden. Pseudo-Flash-Websites bleiben jedoch glücklich an ihrem Platz.
Worte der Vorsicht
Wie bei jedem Trend müssen wir diesen vorsichtig angehen. Vor allem brauchen wir Selbstkontrolle. Nur weil wir radikale Dinge mit In-Page-Scrolling, Animationen und Übergängen machen können, heißt das nicht, dass wir es tun sollten.
Am besten ist es, die Zielgruppe, das Produkt und vor allem die Nutzererfahrung zu berücksichtigen. In diesem Sinne können Sie diese Ansätze strategisch anwenden, um Ihre Website zu verbessern.
Beispiele für diesen Stil
1. Emilie Crssrd
Während viele Dinge auf Emilie Crssrd Die Website macht es wie Flash aussehen, werde ich auf einen konzentrieren. Der Ladeindikator sieht hier aus wie etwas, das wir normalerweise auf einer Flash-Website finden würden (obwohl wir es auch viel mit AJAX-Funktionalität sehen). Der Mechanismus verhindert, dass Bilder und unstrukturierte Inhalte angezeigt werden, bevor sie vollständig geladen sind. So wird sichergestellt, dass die Benutzer den Inhalt richtig sehen. Der Lader in Kombination mit den In-Page-Übergängen sorgt für eine reibungslose Benutzeroberfläche.
2. Stefan Kanchev
Viele Dinge auf Stefan Kanchev Die Website Echo-Flash-basierte Ansätze und die subtile Ein- und Ausblenden der Symbole, wie Sie die Maus über sie für eine schöne Interaktion. Der visuelle Hinweis hilft den Benutzern, sich auf ein Element zu konzentrieren, und fügt ein wenig Brutzeln hinzu, um diese minimalistische Seite zum Leben zu erwecken. Ein wunderbares Beispiel, um etwas Einfaches zu einem großen Effekt zu machen.
3. Marke Republik
Wertschätzen Marke Republik Auf der Website muss man damit interagieren. Der Container rund um das Logo hat eine brillante kleine Interaktion mit ihm. Dieses CSS-basierte Element verwendet die Position der Maus, um die Standardrahmen dynamisch zu ändern, um einen 3D-Effekt zu erzeugen und sicherzustellen, dass sich das Logo vom intensiven Hintergrund abhebt. So etwas verbessert die Oberfläche und das Gesamtbild der Website, ohne dass sie in die Quere kommen. Genau das wollen Sie: Die Extras sollen die Usability nicht stören.
4. Cooper
Cooper folgt einem populären Ansatz für einseitige Websites. Wenn Sie Elemente in der Navigation auswählen, wird der relevante Inhalt in das Ansichtsfenster gerollt. Mit den fließenden Übergängen fühlt sich die Webseite sehr wie Flash an, aber es wird mit Standard-Websprachen erreicht. So gut wie die Website funktioniert, explodiert das Ganze auf mobilen Geräten. Bei der Nutzung dieser Technologien sollten wir deren Auswirkungen auf Nicht-Standardgeräte und unsere spezielle Zielgruppe bewerten.
5. Flipboard
Flipboard 'S ganz einfache Website hat einen hübschen Standard Content-Rotator. Was diese Website sehr flashartig macht, ist ihre Skalierbarkeit. Die Seite passt sich dynamisch an Ihren Browser an (mit einigen Einschränkungen), ein Standardeffekt in der Flash-Welt.
6. Crafty 2010
Crafty 2010 bietet In-Page-Scrollen ähnlich wie Coopers Website. In diesem Fall ist die Ansicht auf den Inhalt beschränkt, den der Benutzer auswählt. Weder ist die "richtige" Lösung; Sie demonstrieren einfach die unbegrenzten Möglichkeiten des Ansatzes. Ich weiß zu schätzen, wie schnell diese Website ist: Die Animationen sind cool, aber sie stehen dem Inhalt nie im Weg. Ein schönes Gleichgewicht zwischen Stil und Benutzerfreundlichkeit.
7. 20 Dinge, die ich über Browser und das Web gelernt habe
Interaktives Umblättern ist ein beliebter Effekt auf Flash-Websites, so dass ganze Produkte erstellt wurden, nur um diese Funktionalität zu nutzen. Seinerseits 20 Dinge, die ich über Browser und das Web gelernt habe zeigt, was möglich ist und demonstriert Effekte, die früher nur mit Flash möglich waren. Diese Website ist eine ernsthafte Arbeit und ein brillantes Beispiel für eine standardbasierte Website.
8. NL Engenharia
NL Engenharia ist eine typische Website für ein Architekturbüro. Das ist nicht unbedingt eine schlechte Sache; es passt einfach in die Nische. Es sieht so aus, als wäre es buchstäblich von Flash in HTML umgepflanzt worden: Slide-Out-Navigation, Vollbild, dynamische Größenanpassung, alles Kennzeichen von Flash. Es funktioniert aber. Das Ergebnis ist schön und repräsentiert die Firma gut.
9. Ryan C. Jones
Ryan C. Jones hat ein schönes Fotoportfolio. Der Punkt des Interesses (die Fotografien) wird überwältigend hervorgehoben. Es ist ein brillantes Beispiel dafür, die Technologie nicht in die Quere kommen zu lassen. Unabhängig von den Tools, mit denen es erstellt wurde, ist das Ergebnis eine einfache und effektive Möglichkeit, die Arbeit dieser Person zu präsentieren.
10. Studio Gang Architekten
Auf den ersten Blick die kreative Oberfläche und Animation auf Studio Gang Architekten siehst furchtbar Flash-like aus. Aber während die Schnittstelle einzigartig und einprägsam ist, kann ich nicht anders, als mich zu fragen, ob es angemessen ist. Dennoch zeigt es, was mit gutem altmodischem HTML gemacht werden kann.
11. DIST Kreativ
DIST Kreativ hat HTML in einer Weise genutzt, die nichts weniger als erstaunlich ist. Mit ihren Animationen, Ladeanzeigen und flüssiger Oberfläche verbindet diese Website die Kreativität der besten Flash-Layouts mit sehr brauchbaren HTML-basierten Lösungen. Trotz des ungewöhnlichen Ansatzes ist es einfach zu bedienen und kommuniziert die Einzigartigkeit der Kreativagentur.
12. Nachrichten für Japan
Nachrichten für Japan ist nicht notwendigerweise dazu gedacht, "Flash" zu sein. Aber die Animation und die speziellen Berührungen machen die Oberfläche glatt und tot einfach zu bedienen. Und die interaktiven Elemente sind prominent, stehen aber nicht im Weg. Es ist ein Paradebeispiel dafür, wie diese Art von Ästhetik eine Standard-Website verbessern kann.
13. Atlas
Als Entwickler kann man kaum hinschauen Atlason Die Website ohne ein Gefühl der Ehrfurcht. Ich kann mir die Arbeit nicht vorstellen, die dafür gemacht wurde. Ich finde es besonders schön, dass das Design den Bildschirm ausfüllt und die verfügbaren Immobilien optimal nutzt. Ich liebe auch, wie es so wenig Konventionen folgt und dennoch so einfach zu bedienen ist.
14. Bit-Byte-Bit
Bit Byte Bit dynamisch aggregiert Inhalte aus mehreren Quellen, einschließlich der Blog des Eigentümers, Twitter-Feed und Forrst-Konto. Solche Lifestreaming-Feeds sind ziemlich häufig, aber diese Website zeigt, dass sie sich überhaupt nicht statisch fühlen muss.
15. FORM
BILDEN nimmt einen ähnlichen Ansatz zu Bit Byte Bit, aber mehr Bild-orientiert, was angesichts der Art seiner Arbeit sinnvoll ist. Ich liebe das sofort, Sie sehen nicht nur die Arbeit der Agentur, sondern können Inhalte filtern, die für Sie relevant sind. Das Portfolio ist direkt auf der Homepage und dennoch voll funktionsfähig, auch wenn die Website einfach zu bedienen ist.
16. EEHarbor
Viele der hier vorgestellten Websites verwenden In-Page-Übergänge, um Inhalte zu ändern, ohne die Seite zu aktualisieren EEHarbor ist es ziemlich bemerkenswert. Die Geschwindigkeit der Website ist ein wichtiger Grund für den Erfolg. Sie haben nie das Gefühl, dass die ausgefallenen Animationen den Inhalt stören. Sie tragen nur zum hochwertigen Image des Unternehmens bei.
17. Wells Riley
Eine der größten Einschränkungen von HTML ist sein Widerstand gegen alles andere als gerade vertikale und horizontale Linien. Es gibt verschiedene Möglichkeiten, aber sie stellen einige browserübergreifende Probleme dar. Wells Riley kombiniert eine völlig unterschiedliche Schnittstelle mit einem leichten Winkel. Das Ergebnis ist schwierig, aber es lohnt sich.
18. Manchester Design Symposium
Manchester Design Symposium hat eine super-saubere und einfache Schnittstelle. Die einseitige Website scrollt vertikal mit einem festen Header. Während der Effekt nicht besonders ungewöhnlich ist, scheint etwas davon nur Flash-like. Der einfache Ansatz und die Abwesenheit von verrückten Animationen und Übergängen bilden einen interessanten Kontrast zu vielen der extremen Websites, die hier gezeigt werden.
19. Sophie Hardach
Sophie Hardach Die Website hat einige interessante Animationen. Verschiedene Elemente bewegen oder vergrößern sich, wenn Sie den Mauszeiger darüber bewegen. Und die Wellen entlang der Unterseite fügen einer ansonsten statischen Seite Leben hinzu. Ein weiteres atypisches Design, das gut mit den glatten JavaScript-Animationen harmoniert.
20. Renato Null
Renato Null Die einseitige Website macht das Laden von Inhalten zu einem schönen Ereignis. Anstatt dass der Inhalt bereits geladen ist und fertig ist, wird jeder Abschnitt beim Scrollen mit einer raffinierten Animation geladen. Die Animationen sind schnell; du hast nie das Gefühl, auf dich zu warten. Der Effekt sieht sicher wie Flash aus.
Haben wir verblüffende HTML-Websites vermisst, die wie Flash aussehen?