20 fantastiske pseudo-flash nettsteder
En pseudo-Flash-nettside er en som ser ut, føles og fungerer som en Flash-nettside, men er faktisk bygget på god gammeldags HTML og CSS.
Det er vanligvis også et dash med JavaScript for å få ting til liv og rulle ut grensesnittet.
Resultatet er ofte utover det vi har kommet til å forvente av HTML og CSS, og derfor kan vi anta at nettstedet er Flash-basert. Høyreklikk, og du vil bli hyggelig overrasket.
Jeg er sterkt interessert i pseudo-Flash-nettsteder, og jeg snakker ofte om emnet. Flash har tydeligvis mistet noe av sin kant (selv om det aldri går), og fokuset har skiftet til kjerne teknologier på nettet (HTML, CSS, JavaScript).
Det er to grunner til dette. Den første er teknisk. Lettere og forbedret SEO, CMS-verktøy som WordPress og bred enhetsstøtte har oppfordret folk til å presse standardiserte verktøy til maks.
For det andre vet mange flere hvordan man skal utvikle seg med disse grunnleggende språkene, og et stort fellesskap er villig til å gi avkall på fordelene med Flash for disse kjente verktøyene.
Med så mange grunner til å skyve konvolutten og bevege seg bort fra Flash, står vi midt i et stort skifte i webutvikling. HTML-nettsteder startet som statiske enheter. Med fremveksten av AJAX opplevde vi hvordan et dynamisk dokument kunne forandre våre forventninger. Kast i animasjoner, overganger og samhandling, og du har et radikalt annet medium.
Noen glade tap
Dette skiftet bringer med seg noen få dødsfall som mange mennesker (inkludert meg) ønsker velkommen. Først blant disse er bakgrunnsmusikk. Å ha det å spille som standard på en standard nettside blir vanskeligere for utvikleren å trekke seg av. Jeg trenger ikke lenger å jakte på pause eller dempe-knappen for å stenge en nettside opp.
For det andre er nettsteder mindre tilbøyelige til å kapre nettleseren din nå. Noen Flash-baserte nettsteder gjør det fortsatt, ved å endre størrelsen på visningsporten og laste inn fullskjerm-grensesnitt. Imidlertid forblir pseudo-Flash-nettsteder lykkelige i deres sted.
Ord med forsiktighet
Som med enhver trend må vi nærme seg denne med forsiktighet. Fremfor alt trenger vi selvkontroll. Bare fordi vi kan gjøre radikale ting med scrolling på sider, betyr ikke animasjoner og overganger at vi skal.
Din beste innsats er å nøye vurdere publikum, produkt og, kanskje viktigst, brukeropplevelse. Med disse i tankene kan du strategisk anvende disse tilnærmingene for å forbedre nettstedet ditt.
Eksempler på denne stilen
1. Emilie Crssrd
Mens mange ting på Emilie Crssrd Nettside gjør det til å se ut som Flash, jeg vil fokusere på en. Lastindikatoren her ser ut som noe vi vanligvis vil finne på en Flash-nettside (selv om vi ser det mye med AJAX-funksjonalitet også). Mekanismen holder bilder og ustilt innhold fra popping inn før de er fullt lastet, slik at brukerne ser innholdet riktig. Lasteren her, kombinert med overgangene på siden, gir et jevnt grensesnitt.
2. Stefan Kanchev
Mange ting på Stefan Kanchev Nettsiden ekko også Flash-baserte tilnærminger, og den subtile fade-in og fade-out av ikonene som du mus over dem gjør for en vakker samhandling. Den visuelle cue hjelper brukerne med å fokusere på ett element om gangen og legger til litt sizzle for å bringe denne minimalistiske siden til livs. Et fantastisk eksempel på å utnytte noe enkelt til stor effekt.
3. Brand Republic
Å sette pris på Brand Republic Nettside, en må samhandle med den. Beholderen rundt logoen har en strålende liten interaksjon med den. Dette CSS-baserte elementet bruker musens posisjon for å dynamisk endre standardgrenser, skape en 3-D-effekt og sikre at logoen skiller seg ut mot den intense bakgrunnen. Denne typen ting forbedrer grensesnittet og den generelle følelsen av nettstedet uten å komme i veien. Det er akkurat det du vil: ekstrasene må ikke forstyrre brukbarheten.
4. Cooper
Cooper følger en populær tilnærming til nettsider på en side. Når du velger elementer i navigasjonen, ruller det relevante innholdet inn i visningsporten. Med de jevne overgangene, føles nettstedet veldig som Flash, men det er oppnådd med vanlige web språk. Så godt som nettstedet fungerer, skjønner det hele på mobile enheter. Når vi bruker disse teknologiene, bør vi vurdere deres innvirkning på ikke-standardiserte enheter og vårt bestemte publikum.
5. Flipboard
Flipboard Sin helt enkle nettside har en ganske standard innholdsrotator. Det som gjør at dette nettstedet føles veldig Flash-lignende, er hvordan det skaleres. Siden tilpasser seg for å passe til nettleseren din (med noen begrensninger), en standard effekt i Flash-verdenen.
6. Crafty 2010
Crafty 2010 gir i-side rulling veldig mye som Cooper nettsted. I dette tilfellet er visningen begrenset til innholdet som brukeren velger. Det er heller ikke den "rette" løsningen; de demonstrerer bare de ubegrensede mulighetene for tilnærmingen. Jeg setter pris på hvor snill dette nettstedet er: animasjonene er kule, men de kommer aldri i veien for innholdet. En fin balanse mellom stil og brukervennlighet.
7. 20 ting jeg lærte om nettlesere og Internett
Interaktiv sideveising er en populær effekt på Flash-nettsteder, så mye at hele produktene er opprettet bare for å utnytte denne funksjonaliteten. For sin del, 20 ting jeg lærte om nettlesere og Internett viser hva som er mulig, og demonstrerer effekter som kun var mulig med Flash. Dette nettstedet er et seriøst stykke arbeid og et glimrende eksempel på en standardbasert nettside.
8. NL Engenharia
NL Engenharia er en typisk nettside for et arkitekturfirma. Det er ikke nødvendigvis en dårlig ting; det passer bare nisje godt. Det ser ut til at det bokstavelig talt ble transplantert fra Flash til HTML: uttrekksnavigering, fullskjermbilder, dynamisk størrelsesorden, alle kjennetegn ved Flash. Det fungerer, skjønt. Resultatet er vakkert og representerer firmaet godt.
9. Ryan C. Jones
Ryan C. Jones har en vakker fotoportefølje. Interessepunktet (fotografiene) er gitt overveldende fremtredende. Det er et glimrende eksempel på ikke å la teknologien komme i veien. Uansett hvilke verktøy som brukes til å bygge det, er resultatet en enkel og effektiv måte å vise frem på denne persons arbeid.
10. Studio Gang Arkitekter
Ved første øyekast, det kreative grensesnittet og animasjonen på Studio Gang Arkitekter se forferdelig Flash-like. Men mens grensesnittet er unikt og minneverdig, kan jeg ikke unngå å lure på om det passer. Likevel demonstrerer det hva som kan gjøres med god gammeldags HTML.
11. DIST Creative
DIST Creative har leverert HTML på en måte som ikke er helt utrolig. Med sine animasjoner, lasting av indikatorer og fluidgrensesnitt kombinerer dette nettstedet kreativiteten til de beste Flash-oppsettene med svært brukbare HTML-baserte løsninger. Til tross for den uvanlige tilnærmingen, er den lett å bruke og kommuniserer det kreative byråets unike egenskap.
12. Meldinger til Japan
Meldinger til Japan er ikke nødvendigvis ment å se "Flash". Men animasjonen og spesielle berøringer gjør grensesnittet jevnt og dødt enkelt å bruke. Og de interaktive elementene er fremtredende, men ikke i veien i det hele tatt. Det er et godt eksempel på hvordan denne typen estetikk kan forbedre en standard nettside.
13. Atlason
Som utvikler kan du knapt se på Atlason S nettsted uten følelse av ærefrykt. Jeg kan ikke forestille meg det arbeidet som gikk inn i å gjøre dette. Jeg elsker spesielt at designet fyller skjermen og gjør stor nytte av den tilgjengelige eiendommen. Jeg elsker også hvordan det følger så få konvensjoner, og likevel er det fortsatt så enkelt å bruke.
14. Bit Byte Bit
Bit bytebit dynamisk aggregerer innhold fra flere kilder, inkludert eierens blogg, Twitter-feed og Forrst-konto. Slike livsstrømmende strømmer er ganske vanlige, men dette nettstedet viser at det ikke trenger å føle seg statisk i det hele tatt.
15. FORM
FORM tar en lignende tilnærming til Bit Byte Bit, men mer bildeorientert, noe som gir mening gitt karakteren av sitt arbeid. Jeg elsker det, med en gang ser du ikke bare byråets arbeid, men kan begynne å filtrere innhold som er relevant for deg. Porteføljen er rett på hjemmesiden, men likevel fullt funksjonell, selv om nettsiden fortsatt er enkel å bruke.
16. EEHarbor
Mens mange av nettstedene som presenteres her, bruker overganger på siden til å endre innhold uten å forfriskne siden, måten EEHarbor gjør det ganske bemerkelsesverdig. Hastigheten til nettstedet er en stor grunn til suksess. Du føler aldri at de fancy animasjonene kommer i veien for innholdet. De bidrar kun til det høye bildet av selskapet.
17. Wells Riley
En av de største begrensningene i HTML er dens motstand mot alt annet enn rett vertikale og horisontale linjer. Det finnes måter rundt dette, men de presenterer noen problemer med nettleseren. Wells Riley kombinerer et helt tydelig grensesnitt med en liten vinkel. Resultatet er vanskelig å trekke av, men vel verdt det.
18. Manchester Design Symposium
Manchester Design Symposium har et super-rent og enkelt grensesnitt. Enkelsidens nettsted ruller vertikalt, med en fast topptekst. Selv om effekten ikke er spesielt uvanlig, synes noe om det bare Flash-like. Den enkle tilnærmingen og fraværet av galte animasjoner og overganger gir en interessant kontrast til mange av de ekstreme nettstedene som vises her.
19. Sophie Hardach
Sophie Hardach Nettside har noen interessante animasjoner. Ulike elementer beveger seg eller forstørres mens du svinger over dem. Og bølgene langs bunnen legger noe til en ellers statisk side. En annen atypisk design som fungerer bra med de jevne JavaScript-animasjonene.
20. Renato Zero
Renato Zero S nettside nettsted gjør innholdet lasting inn i en vakker hendelse. I stedet for at innholdet er forhåndsinstallert og klar til å gå, lastes hver seksjon med en fin animasjon mens du ruller ned. Animasjonene er raske; du føler aldri at du venter på dem. Effekten ser sikkert ut som Flash.
Har vi savnet noen fantastiske HTML-nettsteder som ser ut som Flash?