20 fantastici siti Web Pseudo-Flash
Un sito Web pseudo-Flash è uno che sembra, si sente e si comporta come un sito Web Flash, ma in realtà è basato su HTML e CSS di vecchio stile.
Di solito c'è anche un tocco di JavaScript per dare vita alle cose e completare l'interfaccia.
Il risultato è spesso al di là di ciò che ci si aspetta da HTML e CSS, motivo per cui possiamo presumere che il sito Web sia basato su Flash. Fai clic con il tasto destro del mouse e sarai piacevolmente sorpreso.
Sono molto interessato ai siti Web pseudo-Flash e frequento spesso l'argomento. Flash ha ovviamente perso parte del suo vantaggio (sebbene non sia affatto andato via), e l'attenzione si è spostata sulle principali tecnologie del web (HTML, CSS, JavaScript).
Ci sono due ragioni per questo. Il primo è tecnico. SEO più semplice e migliorato, strumenti CMS come WordPress e ampio supporto per i dispositivi hanno incoraggiato le persone a spingere al massimo gli strumenti standardizzati.
In secondo luogo, molte più persone sanno come sviluppare con questi linguaggi di base e una grande comunità è disposta a rinunciare ai vantaggi di Flash per questi strumenti familiari.
Con così tanti motivi per spingere la busta e allontanarci da Flash, siamo nel bel mezzo di un enorme cambiamento nello sviluppo del web. I siti Web HTML iniziarono come entità statiche. Con l'emergere di AJAX, abbiamo assistito a come un documento dinamico potrebbe alterare le nostre aspettative. Getta animazioni, transizioni e interazioni e hai un mezzo radicalmente diverso.
Alcune vittime felici
Questo spostamento porta con sé alcune vittime che molte persone (me compreso) accolgono. Il primo tra questi è la musica di sottofondo. Avere la riproduzione di default su un sito Web standard sta diventando più difficile per lo sviluppatore. Non ho più bisogno di cercare il pulsante di pausa o muto per chiudere un sito web.
In secondo luogo, i siti web hanno meno probabilità di dirottare il tuo browser ora. Alcuni siti Web basati su Flash continuano a ridimensionare la vista e caricare le interfacce a schermo intero. Tuttavia, i siti Web pseudo-Flash rimangono felicemente al loro posto.
Parole di cautela
Come in ogni tendenza, dobbiamo avvicinarci con cautela. Innanzitutto, abbiamo bisogno di autocontrollo. Solo perché possiamo fare cose radicali con lo scorrimento, le animazioni e le transizioni in-page non significa che dovremmo.
La soluzione migliore è considerare attentamente il pubblico, il prodotto e, cosa forse più importante, l'esperienza dell'utente. Con questi in mente, puoi applicare strategicamente questi approcci per migliorare il tuo sito web.
Esempi di questo stile
1. Emilie Crssrd
Mentre molte cose su Emilie Crssrd Il sito web fa sembrare Flash, mi concentrerò su uno. L'indicatore di caricamento qui appare come qualcosa che normalmente troveremmo su un sito web di Flash (anche se lo vediamo molto anche con la funzionalità AJAX). Il meccanismo evita che le immagini e i contenuti non elaborati saltino fuori prima che siano completamente caricati, assicurando che gli utenti vedano il contenuto correttamente. Il caricatore qui, combinato con le transizioni in-page, crea un'interfaccia fluida.
2. Stefan Kanchev
Molte cose su Stefan Kanchev Anche il sito Web fa eco agli approcci basati su Flash e la sottile dissolvenza e la dissolvenza in chiusura delle icone quando si passa il mouse su di loro creano una bellissima interazione. Il segnale visivo aiuta gli utenti a concentrarsi su un elemento alla volta e aggiunge un po 'di sfrigolio per dare vita a questa pagina minimalista. Un meraviglioso esempio di sfruttare qualcosa di semplice con grande effetto.
3. Brand Republic
Apprezzare Repubblica di marca Sito web, si deve interagire con esso. Il contenitore attorno al logo ha una piccola e brillante interazione con esso. Questo elemento basato su CSS utilizza la posizione del mouse per modificare dinamicamente i bordi standard, creando un effetto 3D e assicurando che il logo si stagli sullo sfondo intenso. Questo tipo di cose migliora l'interfaccia e la sensazione generale del sito web senza intralciare. Questo è esattamente quello che vuoi: gli extra non devono interferire con l'usabilità.
4. Cooper
Bottaio segue un approccio popolare ai siti web a pagina singola. Mentre selezioni gli elementi nella navigazione, il contenuto pertinente entra nella finestra. Con le transizioni fluide, il sito Web sembra molto Flash, ma è realizzato con linguaggi Web standard. Così come funziona il sito Web, però, l'intera cosa esplode su dispositivi mobili. Quando sfruttiamo queste tecnologie, dovremmo valutare il loro impatto sui dispositivi non standard e sul nostro particolare pubblico.
5. Flipboard
Flipboard Il sito web assolutamente semplice ha un rotatore di contenuti piuttosto interessante. Ciò che rende questo sito molto simile a Flash è la sua scalabilità. La pagina si adatta in modo dinamico al tuo browser (con alcune limitazioni), un effetto standard nel mondo Flash.
6. Crafty 2010
Crafty 2010 fornisce lo scrolling in-page molto simile al sito web di Cooper. In questo caso, la vista è limitata al contenuto selezionato dall'utente. Né è la soluzione "giusta"; semplicemente dimostrano le illimitate possibilità dell'approccio. Apprezzo quanto sia scattante questo sito: le animazioni sono fantastiche, ma non interferiscono mai con il contenuto. Un bel compromesso tra stile e usabilità.
7. 20 cose che ho imparato sui browser e sul Web
Il cambio di pagina interattivo è un effetto popolare sui siti Web di Flash, così tanto che sono stati creati interi prodotti solo per sfruttare questa funzionalità. Per la sua parte, 20 cose che ho imparato sui browser e sul Web mostra cosa è possibile, dimostrando gli effetti che erano possibili una volta solo con Flash. Questo sito Web è un lavoro serio e un brillante esempio di sito web basato su standard.
8. NL Engenharia
NL Engenharia è un tipico sito Web per uno studio di architettura. Non è necessariamente una brutta cosa; si adatta bene alla nicchia. Sembra che sia stato letteralmente trapiantato da Flash a HTML: navigazione slide-out, immagini a schermo intero, dimensionamento dinamico, tutti i tratti distintivi di Flash. Funziona, però. Il risultato è bello e rappresenta bene l'azienda.
9. Ryan C. Jones
Ryan C. Jones ha un bel portfolio fotografico. Il punto di interesse (le fotografie) è dato in modo schiacciante. È un brillante esempio di non lasciare che la tecnologia interferisca. Indipendentemente dagli strumenti utilizzati per costruirlo, il risultato è un modo semplice ed efficace per mostrare il lavoro di questa persona.
10. Studio Gang Architects
A prima vista, l'interfaccia creativa e l'animazione su Studio Gang Architects sembra terribilmente simile a Flash. Ma mentre l'interfaccia è unica e memorabile, non posso fare a meno di chiedermi se è appropriato. Tuttavia, dimostra cosa si può fare con il buon vecchio HTML.
11. DIST Creativo
DIST Creativo ha sfruttato l'HTML in un modo che è a dir poco sorprendente. Con le sue animazioni, gli indicatori di caricamento e l'interfaccia fluida, questo sito combina la creatività dei migliori layout di Flash con soluzioni basate su HTML molto utili. Nonostante l'approccio insolito, è facile da usare e comunica l'unicità dell'agenzia creativa.
12. Messaggi per il Giappone
Messaggi per il Giappone non è necessariamente pensato per sembrare "Flash". Ma l'animazione e i tocchi speciali rendono l'interfaccia liscia e semplice da usare. E gli elementi interattivi sono prominenti ma non si intromettono affatto. È un primo esempio di come questo tipo di estetica possa migliorare un sito web standard.
13. Atlason
Come sviluppatore, difficilmente puoi guardare Atlason Sito web senza senso di soggezione. Non riesco a immaginare il lavoro che è andato a fare questo. Mi piace particolarmente il fatto che il design riempia lo schermo e faccia un grande uso degli immobili disponibili. Mi piace anche come segue così poche convenzioni e tuttavia è ancora così semplice da usare.
14. Bit Bit Bit
Bit Bit Bit aggrega dinamicamente il contenuto da più fonti, tra cui il blog del proprietario, il feed Twitter e l'account Forrst. Tali feed lifestreaming sono abbastanza comuni, ma questo sito mostra che non ha bisogno di sentirsi affatto statici.
15. FORMA
MODULO ha un approccio simile a Bit Byte Bit, ma più orientato all'immagine, il che ha senso data la natura del suo lavoro. Mi piace il fatto che, subito, non si veda solo il lavoro dell'agenzia, ma si possa iniziare a filtrare il contenuto che è rilevante per te. Il portafoglio è sulla home page e tuttavia è perfettamente funzionante, anche se il sito web rimane facile da usare.
16. EEHarbor
Mentre molti dei siti web qui presentati utilizzano transizioni in-page per modificare il contenuto senza aggiornare la pagina EEHarbor è piuttosto notevole. La velocità del sito Web è una grande ragione per il suo successo. Non senti mai che le animazioni fantasiose ostacolino il contenuto. Contribuiscono solo all'immagine di alta qualità dell'azienda.
17. Wells Riley
Uno dei maggiori limiti dell'HTML è la sua resistenza a qualsiasi cosa diversa dalle linee verticali e orizzontali diritte. Ci sono modi per aggirare questo problema, ma presentano alcuni problemi relativi al browser. Wells Riley combina un'interfaccia totalmente distinta con una leggera angolazione. Il risultato è difficile da ottenere ma ne vale la pena.
18. Manchester Design Symposium
Manchester Design Symposium ha un'interfaccia super pulita e semplice. Il sito web a pagina singola scorre verticalmente, con un'intestazione fissa. Mentre l'effetto non è particolarmente insolito, qualcosa a riguardo sembra solo come un flash. L'approccio semplice e l'assenza di animazioni e transizioni pazze creano un contrasto interessante con molti dei siti web estremi presentati qui.
19. Sophie Hardach
Sophie Hardach Il sito web ha alcune animazioni interessanti. Vari elementi si muovono o si ingrandiscono mentre si passa sopra di loro. E le onde lungo il fondo aggiungono un po 'di vita ad una pagina altrimenti statica. Un altro design atipico che funziona bene con le animazioni JavaScript fluide.
20. Renato Zero
Renato Zero Il sito Web di una sola pagina trasforma il caricamento del contenuto in un bellissimo evento. Invece del contenuto precaricato e pronto per l'uso, ogni sezione viene caricata con un'animata animazione mentre scorri verso il basso. Le animazioni sono veloci; non ti senti mai come se li stessi aspettando L'effetto sembra sicuramente Flash.
Abbiamo perso qualche sito Web HTML che assomiglia a Flash?