20 Fantastiske Pseudo-Flash Websites
Et pseudo-Flash-websted er et, der ser ud, føles og fungerer som et Flash-websted, men er faktisk bygget på god gammeldags HTML og CSS.
Der er normalt også et strejf af JavaScript for at bringe tingene til live og runde ud grænsefladen.
Resultatet er ofte ud over, hvad vi har forventet af HTML og CSS, og derfor kan vi antage, at hjemmesiden er Flash-baseret. Højreklik, og du vil blive glædeligt overrasket.
Jeg er meget interesseret i pseudo-Flash websites, og jeg snakker ofte om emnet. Flash har selvfølgelig mistet sin kant (selvom det slet ikke er gået), og fokus har flyttet til webens kerne teknologier (HTML, CSS, JavaScript).
Der er to grunde til dette. Den første er teknisk. Nemere og forbedrede SEO, CMS værktøjer som WordPress og bred enhed support har opfordret folk til at skubbe de standardiserede værktøjer til det maksimale.
For det andet ved mange flere mennesker, hvordan man udvikler sig med disse grundlæggende sprog, og et stort samfund er villig til at afstå fra fordelene ved Flash for disse velkendte værktøjer.
Med så mange grunde til at skubbe konvolutten og flytte væk fra Flash er vi midt i et massivt skift i webudvikling. HTML-websites startede som statiske enheder. Med fremkomsten af AJAX oplevede vi, hvordan et dynamisk dokument kunne ændre vores forventninger. Kast i animationer, overgange og interaktion, og du har et radikalt anderledes medium.
Nogle glade tab
Dette skift medfører nogle få dødsfald, som mange mennesker (herunder mig) byder velkommen til. Først blandt disse er baggrundsmusik. At få det til at spille som standard på en standard hjemmeside bliver hårdere for at udvikleren trækker af. Jeg har ikke længere brug for at jage på pause eller mute-knappen for at lukke et websted op.
For det andet er websteder mindre tilbøjelige til at kapre din browser nu. Nogle Flash-baserede websteder gør det stadig ved at ændre størrelsen på din visningsport og indlæse fuldskærmsinterfaces. Pseudo-Flash-websites forbliver dog lykkelige i deres sted.
Ord med forsigtighed
Som med enhver tendens, må vi nærme sig denne med forsigtighed. Frem for alt behøver vi selvkontrol. Bare fordi vi kan gøre radikale ting med in-side scrolling, betyder animationer og overgange ikke, at vi skal.
Din bedste indsats er at omhyggeligt overveje publikum, produkt og måske vigtigst, brugeroplevelse. Med disse i tankerne kan du strategisk anvende disse metoder til at forbedre dit website.
Eksempler på denne stil
1. Emilie Crssrd
Mens mange ting på Emilie Crssrd S hjemmeside gør det ligne Flash, jeg vil fokusere på en. Indlæsningsindikatoren her ligner noget, vi typisk finder på en Flash-website (selv om vi ser det meget med AJAX-funktionalitet også). Mekanismen holder billeder og unstyled indhold fra popping i, før de er fuldt lastet, hvilket sikrer, at brugerne ser indholdet korrekt. Læsseren her kombineret med overgange på siden giver en jævn grænseflade.
2. Stefan Kanchev
Mange ting på Stefan Kanchev S hjemmeside også ekko Flash-baserede tilgange, og den subtile fade-in og fade-out af ikonerne som du mus over dem gør for en smuk interaktion. Den visuelle cue hjælper brugerne med at fokusere på et element ad gangen og tilføjer lidt sizzle for at bringe denne minimalistiske side til livs. Et vidunderligt eksempel på at udnytte noget simpelt til stor effekt.
3. Brand Republic
At værdsætte Brand Republic S hjemmeside skal man interagere med det. Beholderen omkring logoet har en strålende lille interaktion til det. Dette CSS-baserede element bruger musens position til dynamisk at ændre standardgrænserne, hvilket skaber en 3-D-effekt og sikrer, at logoet står ud for den intense baggrund. Denne slags ting forbedrer grænsefladen og den generelle følelse af hjemmesiden uden at komme i vejen. Det er præcis det, du ønsker: Ekstraerne bør ikke forstyrre brugervenligheden.
4. Cooper
Cooper følger en populær tilgang til enkeltsidens websteder. Når du vælger emner i navigationen, ruller det relevante indhold ind i visningsporten. Med de glatte overgange, føles hjemmesiden meget som Flash, men den opnås med standardwebsprog. Så godt som hjemmesiden fungerer, springer hele ting op på mobile enheder. Når vi udnytter disse teknologier, bør vi vurdere deres indflydelse på ikke-standardiserede enheder og vores specifikke målgruppe.
5. Flipboard
Flipboard S helt enkle hjemmeside har en smuk standard indhold rotator. Hvad der gør, at denne hjemmeside føles meget Flash-lignende, er, hvordan den skaleres. Siden tilpasses dynamisk til din browser (med nogle begrænsninger), en standard effekt i Flash-verdenen.
6. Crafty 2010
Crafty 2010 giver i-side scrolling meget ligesom Cooper's hjemmeside. I dette tilfælde er visningen begrænset til det indhold, som brugeren vælger. Hverken er den "rigtige" løsning; de demonstrerer simpelthen de ubegrænsede muligheder for tilgangen. Jeg sætter pris på, hvor snappy denne hjemmeside er: animationerne er seje, men de kommer aldrig i vejen for indholdet. En god balance mellem stil og brugervenlighed.
7. 20 ting jeg lærte om browsere og internettet
Interaktiv sidevending er en populær effekt på Flash-websites, så meget, at hele produkter er blevet oprettet for at udnytte denne funktionalitet. For sin del, 20 ting jeg lærte om browsere og internettet viser hvad der er muligt, viser effekter, der kun var mulige med Flash. Denne hjemmeside er et seriøst stykke arbejde og et glimrende eksempel på en standardbaseret hjemmeside.
8. NL Engenharia
NL Engenharia er en typisk hjemmeside for et arkitektfirma. Det er ikke nødvendigvis en dårlig ting; det passer bare nichen godt. Det ser ud til, at det bogstaveligt talt blev transplanteret fra Flash til HTML: slide-out navigation, fuldskærmbilleder, dynamisk dimensionering, alle kendetegn ved Flash. Det virker dog. Resultatet er smukt og repræsenterer firmaet godt.
9. Ryan C. Jones
Ryan C. Jones har en smuk fotografiportefølje. Interessepunktet (fotografierne) gives overvældende fremtrædende. Det er et glimrende eksempel på ikke at lade teknologien komme i vejen. Uanset hvilke værktøjer der bruges til at opbygge det, er resultatet en simpel og effektiv måde at fremvise denne persons arbejde på.
10. Studio Gang Arkitekter
Ved første øjekast, den kreative grænseflade og animation på Studio Gang Arkitekter se forfærdeligt Flash-lignende. Men mens grænsefladen er unik og mindeværdig, kan jeg ikke undgå at undre mig om det er passende. Alligevel demonstrerer det hvad der kan gøres med god gammeldags HTML.
11. DIST Creative
DIST Creative har leveraged HTML på en måde, der er intet mindre end fantastisk. Med sine animationer, indlæsningsindikatorer og fluidgrænseflade kombinerer denne hjemmeside kreativiteten af de bedste Flash-layouter med meget brugbare HTML-baserede løsninger. På trods af den usædvanlige tilgang er det nemt at bruge og kommunikerer det kreative bureaus unikke karakter.
12. Meddelelser til Japan
Beskeder til Japan er ikke nødvendigvis beregnet til at se "Flash". Men animationen og specielle detaljer gør grænsefladen glat og død, nem at bruge. Og de interaktive elementer er fremtrædende, men får ikke i vejen overhovedet. Det er et glimrende eksempel på, hvordan denne slags æstetik kan forbedre en standard hjemmeside.
13. Atlason
Som udvikler kan du næppe se på Atlason S hjemmeside uden følelse af ærefrygt. Jeg kan ikke forestille mig det arbejde, der gik ud på at gøre dette. Jeg elsker især at designet fylder skærmen og gør stor brug af den tilgængelige ejendom. Jeg elsker også hvordan det følger så få konventioner, og alligevel er det stadig så nemt at bruge.
14. Bit Byte Bit
Bit Byte Bit dynamisk aggregerer indhold fra flere kilder, herunder ejerens blog, Twitter feed og Forrst konto. Sådanne livsstrømmende feeds er ret almindelige, men denne hjemmeside viser, at den ikke behøver at føle sig statisk overhovedet.
15. FORM
FORM tager en lignende tilgang til Bit Byte Bit, men mere billedorienteret, hvilket giver mening givet karakteren af sit arbejde. Jeg elsker det med det samme, du ser ikke kun agenturets arbejde, men kan begynde at filtrere indhold, der er relevant for dig. Porteføljen er lige på hjemmesiden og er dog fuldt funktionsdygtig, selvom hjemmesiden fortsat er nem at bruge.
16. EEHarbor
Mens mange af de websites, der præsenteres her, bruger overgange på siden til at ændre indhold uden at opdatere siden, vejen EEHarbor er det helt bemærkelsesværdigt. Webstedets hastighed er en stor grund til dens succes. Du føler aldrig, at de fancy animationer kommer i vejen for indholdet. De bidrager kun til virksomhedens højkvalitetsbillede.
17. Wells Riley
En af de største begrænsninger af HTML er dens modstandsdygtighed over for noget andet end lige lodrette og vandrette linjer. Der er måder omkring dette, men de præsenterer nogle cross-browser problemer. Wells Riley kombinerer en helt tydelig grænseflade med en lille vinkel. Resultatet er svært at trække af, men det er det værd.
18. Manchester Design Symposium
Manchester Design Symposium har en super-ren og enkel grænseflade. Enkelsidens websted ruller lodret, med en fast overskrift. Selv om effekten ikke er særlig usædvanlig, synes noget om det bare at være Flash-lignende. Den enkle tilgang og fraværet af skøre animationer og overgange giver en interessant kontrast til mange af de ekstreme websites, der fremvises her.
19. Sophie Hardach
Sophie Hardach S hjemmeside har nogle interessante animationer. Forskellige elementer bevæger sig eller forstørres, mens du svæver over dem. Og bølgerne langs bunden tilføjer noget liv til en ellers statisk side. Et andet atypisk design, der fungerer godt med de jævne JavaScript-animationer.
20. Renato Zero
Renato Zero S ensidige hjemmeside gør indholdet i en smuk begivenhed. I stedet for at indholdet er forudindlæst og klar til at gå, er hver sektion fyldt med en nifty animation, mens du ruller ned. Animationerne er hurtige; du føler dig aldrig som du venter på dem. Effekten ser sikkert ud som Flash.
Har vi savnet nogle fantastiske HTML-websites, der ligner Flash?