20 Fantastic Pseudo-Flash-verkkosivustoja
Pimeä-Flash-sivusto on sellainen, joka näyttää, tuntuu ja toimii Flash-verkkosivustona, mutta on itse asiassa rakennettu hyvästä vanhoista HTML- ja CSS-versioista.
Yleensä on myös JavaScript-viiva, joka tuo asioita elämään ja ympäröi käyttöliittymän.
Tulos on usein sen lisäksi, mitä olemme odottaneet HTML- ja CSS-muodossa, minkä vuoksi voimme olettaa, että sivusto on Flash-pohjainen. Napsauta hiiren kakkospainikkeella, ja olet iloisesti yllättynyt.
Olen erittäin kiinnostunut pseudo-Flash-sivustoista, ja puhun aiheesta usein. Flash on selvästi menettänyt osan sen eduista (vaikka se ei missään nimessä ole poissa), ja painopiste on siirtynyt verkon ydinteknologioihin (HTML, CSS, JavaScript).
Tähän on kaksi syytä. Ensimmäinen on tekninen. Helpompi ja parannettu SEO, CMS-työkalut, kuten WordPress ja laaja laitekanta ovat kannustaneet ihmisiä työntämään standardoituja työkaluja max.
Toiseksi, paljon enemmän ihmisiä osaa kehittää näitä peruskielisiä, ja suuri yhteisö on valmis luopumaan Flash-eduista näissä tuttuissa työkaluissa.
Niin monia syitä työntää kirjekuori ja siirtää pois Flash, olemme keskellä massiivinen siirtyminen web-kehitystä. HTML-sivustot käynnistyivät staattisina kokonaisuuksina. Kun AJAX syntyi, todistamme, miten dynaaminen dokumentti voisi muuttaa odotuksiamme. Heitä animaatioita, siirtymiä ja vuorovaikutusta ja sinulla on radikaalisti erilainen väline.
Jotkut onnelliset onnettomuudet
Tämä muutos tuo mukanaan muutaman onnettomuuden, jonka monet ihmiset (myös minä) ovat tervetulleita. Ensimmäinen näistä on taustamusiikki. Koska se toimii oletuksena vakio-sivustolla, kehittäjälle on vaikeampaa vetää pois. Minun ei enää tarvitse etsiä tauko- tai mykistyspainiketta sulkemaan verkkosivusto.
Toiseksi verkkosivustot eivät todennäköisesti pääse kaappaamaan selaimesi nyt. Jotkut Flash-pohjaiset verkkosivustot toimivat edelleen, kokoamalla näkymäikkunasi ja lataamalla koko näytön rajapinnat. Kuitenkin pseudo-Flash-sivustot ovat edelleen tyytyväisiä.
Sanat varovaisuudesta
Kuten mikä tahansa suuntaus, meidän on lähestyttävä tätä varovaisuutta. Ensinnäkin tarvitsemme itseohjautuvuutta. Aivan koska voimme tehdä radikaaleja asioita sivun vierittämisessä, animaatiot ja siirtymät eivät tarkoita, että meidän pitäisi.
Sinun paras panos on miettiä tarkkaan yleisöä, tuotetta ja, mikä tärkeintä, käyttökokemusta. Näiden mielessä voit strategisesti soveltaa näitä lähestymistapoja parantaa sivustosi.
Esimerkkejä tästä tyylistä
1. Emilie Crssrd
Vaikka monia asioita Emilie Crssrd Sivuston tekeminen näyttää Flashilta, keskitytään yhteen. Latausindikaattori näyttää tavalliselta Flash-verkkosivustolta (vaikka näemme sen paljon myös AJAX-toiminnoilla). Mekanismi pitää kuvat ja tyystin sisällön pudotessaan ennen kuin ne ovat täysin latautuneet ja varmistavat, että käyttäjät näkevät sisällön oikein. Lataaja täällä, yhdistettynä sivusi siirtymiin, tekee sujuvasta käyttöliittymästä.
2. Stefan Kanchev
Monta asiaa Stefan Kanchev Sivustolla on myös Flash-pohjaisia lähestymistapoja, ja kuvakkeiden hienovarainen haalistuminen ja häivytys, kun hiiret niiden päälle, tekevät kauniista vuorovaikutuksesta. Visuaalinen vihje auttaa käyttäjiä keskittymään yhteen elementtiin kerrallaan ja lisää hieman sizzleä tämän minimalistisen sivun elämään. Mielenkiintoinen esimerkki hyödyntämällä jotain yksinkertaista ja vaikuttavaa.
3. Brandin tasavalta
Arvostaa Brand Republic Sivustolla on vuorovaikutuksessa sen kanssa. Logon ympärillä oleva säiliö on loistava vuorovaikutus sen kanssa. Tämä CSS-pohjainen elementti käyttää hiiren asentoa dynaamisesti muuttamaan vakiorajoja, luoden 3-D-vaikutuksen ja varmistaen, että logo erottuu voimakkaasta taustasta. Tällainen asia parantaa verkkosivuston käyttöliittymää ja yleistä tuntemusta joutumatta matkalla. Se on juuri sitä mitä haluat: lisäominaisuudet eivät saisi häiritä käytettävyyttä.
4. Cooper
tynnyrintekijä noudattaa suosittua lähestymistapaa yhden sivun verkkosivustoihin. Kun valitset kohteita navigointiin, asiaankuuluva sisältö rullataan näkymään. Sileiden siirtymien ansiosta verkkosivusto tuntuu hyvin Flashilta, mutta se toteutetaan tavallisilla verkkosivuilla. Niin kauniisti kuin verkkosivut toimivat, kaikki asia räjähtää mobiililaitteisiin. Näitä teknologioita hyödyntämällä meidän on arvioitava niiden vaikutus ei-standardisiin laitteisiin ja erityiseen yleisöömme.
5. Flipboard
Flipboard Aivan yksinkertainen verkkosivusto on melko vakio sisältökääntö. Mikä tekee tästä sivustosta tuntuvan hyvin Flash-like on, miten se skaalautuu. Sivu dynaamisesti sopeutuu selaimeesi (rajoituksilla), vakioefekti Flash-maailmassa.
6. Kova 2010
Crafty 2010 tarjoaa sivulla sivulle erittäin paljon kuin Cooperin verkkosivuilla. Tässä tapauksessa näkymä rajoittuu käyttäjän valitsemaan sisältöön. Kumpikaan ei ole "oikea" ratkaisu; ne vain osoittavat lähestymistavan rajoittamattomat mahdollisuudet. Arvostan, kuinka houkutteleva tämä sivusto on: animaatiot ovat viileitä, mutta ne eivät koskaan pääse sisältöön. Mukava tasapaino tyylin ja käytettävyyden välillä.
7. 20 asioita, jotka oppinut selaimista ja webistä
Interaktiivinen sivun kääntäminen on suosittu vaikutus Flash-sivustoihin, niin paljon, että kaikki tuotteet on luotu juuri tämän toiminnallisuuden hyödyntämiseksi. Omalta osaltaan, 20 asioita, jotka oppinut selaimista ja webistä näyttää mahdollisuudet, jotka osoittavat vaikutuksia, jotka olivat mahdollisia vain Flash-ohjelmalla. Tämä sivusto on yksi vakava työ ja loistava esimerkki standardipohjaisesta verkkosivustosta.
8. NL Engenharia
NL Engenharia on arkkitehtitoimiston tyypillinen verkkosivusto. Se ei ole välttämättä huono asia; se vain sopii niille hyvin. Näyttää siltä, että se on kirjaimellisesti siirretty Flashista HTML-muotoon: diaesitys, koko näytön kuvat, dynaaminen kokoaminen, kaikki Flashin tunnusmerkit. Se toimii kuitenkin. Tulos on kaunis ja edustaa yrityksen hyvin.
9. Ryan C. Jones
Ryan C. Jones on kaunis valokuvausvalikoima. Kiinnostuksen kohteena olevat kohteet (valokuvat) antavat valtavan merkityksen. Se on loistava esimerkki siitä, että teknologiaa ei päästetä tielle. Riippumatta siitä, millaisia työkaluja sen rakentaminen on, tulos on yksinkertainen ja tehokas tapa esitellä tämän henkilön työtä.
10. Studio Gang -arkkitehdit
Ensi silmäyksellä luova käyttöliittymä ja animaatio Studio Gang Architects näytä hirveästi Flash-tyyppinen. Mutta kun käyttöliittymä on ainutlaatuinen ja ikimuistoinen, en voi olla ihme, jos se sopii. Silti se osoittaa, mitä voidaan tehdä hyvällä vanhanaikainen HTML.
11. DIST-mainos
DIST-mainos on käyttänyt HTML: tä tavalla, joka ei ole mikään hämmästyttävä. Animaatioillaan, latausindikaattoreillaan ja nestekäyttöliittymilläan tällä verkkosivustolla yhdistyvät parhaiden Flash-asettelujen luovuus hyvin helppokäyttöisillä HTML-pohjaisilla ratkaisuilla. Huolimatta epätavallisesta lähestymistavasta on helppo käyttää ja kommunikoida luovan toimiston ainutlaatuisuutta.
12. Japaniin lähetetyt viestit
Viestejä Japaniin ei välttämättä ole tarkoitus näyttää Flashilta. Animaation ja erityisten koskettamien ansiosta käyttöliittymä on sileä ja kuollut helppokäyttöinen. Ja vuorovaikutteiset elementit ovat näkyviä, mutta eivät pääse lainkaan. Se on erinomainen esimerkki siitä, miten tällainen esteettinen voi parantaa tavallista verkkosivustoa.
13. Atlason
Kehittäjänä voit tuskin katsoa Atlason Sivustolla ilman tunnetta kunnioitusta. En voi kuvitella sitä työtä, joka meni siihen. Erityisen rakastan sitä, että malli täyttää näytön ja käyttää hyväksi käytettävissä olevaa kiinteistöä. Rakastan myös sitä, miten se noudattaa niin vähän yleissopimuksia, ja silti on vielä niin yksinkertaista käyttää.
14. Bit byte Bit
Bit byte Bit dynaamisesti yhdistää sisällön useista lähteistä, kuten omistajan blogista, Twitter-syötteestä ja Forrst-tilistä. Tällaiset elävöittävät syötteet ovat melko yleisiä, mutta tämä verkkosivusto osoittaa, että sen ei tarvitse olla staattinen.
15. LOMAKE
FORM ottaa samanlaisen lähestymistavan Bit Byte Bit -ohjelmaan, mutta se on enemmän kuvanlähtöistä, mikä on järkevää luonteensa vuoksi. Rakastan sitä heti, et vain näe viraston työtä, mutta voit aloittaa suodattamalla sisällön, joka on sinulle tärkeä. Salkku on aivan kotisivulla, mutta on täysin toimiva, vaikka sivusto on edelleen helppokäyttöinen.
16. EEHarbor
Vaikka monet tässä esitetyt verkkosivustot käyttävät sivun siirtymiä, voit muuttaa sisältöä päivittämättä sivua EEHarbor onko se varsin merkittävä. Nopeus verkkosivuilla on suuri syy menestykseen. Et koskaan tunne, että fanit animaatiot päätyvät sisältöön. Ne vain edistävät yrityksen korkealaatuista kuvaa.
17. Wells Riley
Yksi suurimmista HTML-rajoituksista on sen vastustuskyky mihinkään muuhun kuin suoraan pystysuoraan ja horisontaaliseen linjaan. Tällä tavoin on olemassa keinoja, mutta ne tarjoavat joitain selaimen välisiä ongelmia. Wells Riley yhdistää täysin erillisen liitännän pieneen kulmaan. Tulos on vaikea vetää pois, mutta se on sen arvoista.
18. Manchester Design Symposium
Manchester Design Symposium on erittäin puhdas ja yksinkertainen käyttöliittymä. Yhden sivun verkkosivusto kääntyy pystysuoraan, kiinteällä otsakkeella. Vaikka vaikutus ei ole erityisen epätavallinen, jotain siitä näyttää vain Flash-kaltaiselta. Yksinkertainen lähestymistapa ja hullujen animaatioiden ja siirtymien puuttuminen tekevät mielenkiintoisesta kontrastista monien äärimmäisten verkkosivustojen kanssa.
19. Sophie Hardach
Sophie Hardach Sivustolla on mielenkiintoisia animaatioita. Eri elementit liikkuvat tai suurentuvat, kun liikutat niiden päälle. Ja aallot pitkin alhaalta lisäävät elämää muuhun staattiseen sivulle. Toinen epätyypillinen muotoilu, joka toimii hyvin sujuvien JavaScript-animaatioiden kanssa.
20. Renato Zero
Renato Zero Yhden sivun verkkosivuilla muuttuu sisällön lataus kauniiksi tapahtumaksi. Sen sijaan, että sisältö olisi valmiiksi ladattu ja valmis menemään, jokainen osa ladataan nerokkaalla animaatiolla vierittämällä alaspäin. Animaatiot ovat nopeita; et koskaan tunne kuin odotat niitä. Vaikutus näyttää varmasti Flashilta.
Oletteko hukassa hämmästyttäviä HTML-sivustoja, jotka näyttävät Flashilta?