20 Fantastiska Pseudo-Flash-webbplatser
En pseudo-Flash-webbplats är en som ser ut, känns och fungerar som en Flash-hemsida men bygger faktiskt på bra gammaldags HTML och CSS.
Det finns vanligtvis också ett streck med JavaScript för att få saker till liv och runda ut gränssnittet.
Resultatet är ofta bortom vad vi har kommit att förvänta oss av HTML och CSS, vilket är anledningen till att vi kan anta att webbplatsen är Flash-baserad. Högerklicka, och du kommer bli glatt överraskad.
Jag är mycket intresserad av pseudo-Flash-webbplatser, och jag pratar ofta om ämnet. Flash har uppenbarligen förlorat en del av sin kant (men det går inte att gå) och fokus har flyttat till webens kärnteknik (HTML, CSS, JavaScript).
Det finns två skäl till detta. Den första är teknisk. Enklare och förbättrad SEO, CMS-verktyg som WordPress och brett stöd för enheter har uppmuntrat människor att driva de standardiserade verktygen till max.
För det andra vet många fler hur man ska utvecklas med dessa grundläggande språk och ett stort samhälle är villigt att avstå från fördelarna med Flash för dessa kända verktyg.
Med så många anledningar att trycka på kuvertet och flytta ifrån Flash, står vi mitt i ett stort skifte i webbutveckling. HTML-webbplatser startade som statiska enheter. Med framväxten av AJAX såg vi hur ett dynamiskt dokument kunde förändra våra förväntningar. Kasta i animationer, övergångar och interaktion och du har ett radikalt annorlunda medium.
Några glada missförhållanden
Detta förskjutning medför några få olyckor som många människor (inklusive mig) välkomnar. Först bland dessa är bakgrundsmusik. Att spela det som standard på en vanlig webbplats blir allt svårare för utvecklaren att dra av sig. Jag behöver inte längre jaga på paus eller mute-knappen för att stänga en webbplats upp.
För det andra är webbplatser mindre benägna att kapa din webbläsare nu. Vissa Flash-baserade webbplatser gör det fortfarande genom att ändra storlek på ditt visningsport och ladda gränssnitt på helskärm. Pseudo-Flash-webbplatser är dock fortfarande lyckliga på plats.
Varningstexter
Som med någon trend måste vi närma oss denna. Framförallt behöver vi självkontroll. Bara för att vi kan göra radikala saker med in-scrollning, animeringar och övergångar betyder inte att vi borde.
Din bästa satsning är att noggrant överväga publiken, produkten och kanske viktigast av användarupplevelsen. Med dessa i åtanke kan du strategiskt tillämpa dessa metoder för att förbättra din webbplats.
Exempel på denna stil
1. Emilie Crssrd
Medan många saker på Emilie Crssrd S hemsida gör att det ser ut som Flash, jag fokuserar på en. Laddningsindikatorn här ser ut som något vi normalt skulle hitta på en Flash-webbplats (även om vi ser det mycket med AJAX-funktionalitet också). Mekanismen hindrar bilder och ostylat innehåll från att dyka in innan de är fullt laddade och se till att användarna ser innehållet ordentligt. Lastaren här, i kombination med övergångarna på sidan, ger ett smidigt gränssnitt.
2. Stefan Kanchev
Många saker på Stefan Kanchev S hemsida echo också Flash-baserade tillvägagångssätt, och den subtila fade-in och fade-out av ikonerna som du mus över dem gör för en vacker interaktion. Den visuella cue hjälper användare att fokusera på ett element i taget och lägger lite sizzle för att få denna minimalistiska sida till liv. Ett underbart exempel på att utnyttja något enkelt till stor effekt.
3. Varumärke Republiken
Att uppskatta Brand republiken S hemsida, en måste interagera med den. Behållaren runt logotypen har en lysande liten interaktion med den. Detta CSS-baserade element använder musens position för att dynamiskt ändra standardgränserna, skapa en 3-D-effekt och se till att logotypen står ut mot den intensiva bakgrunden. Denna typ av sak förbättrar gränssnittet och den allmänna känslan av webbplatsen utan att komma i vägen. Det är precis vad du vill: extrafunktionerna bör inte störa användbarheten.
4. Cooper
Tunnbindare följer en populär strategi för ensidiga webbplatser. När du väljer objekt i navigeringen rullar det relevanta innehållet i visningsporten. Med de smidiga övergångarna känns webbplatsen mycket som Flash, men den är fulländad med vanliga webbspråk. Så snyggt som webbplatsen fungerar det hela på mobila enheter. När vi använder dessa tekniker bör vi utvärdera deras inverkan på icke-standardiserade enheter och vår specifika publik.
5. Flipboard
blädderblock Sin helt enkla webbplats har en ganska standard innehållsrotator. Vad som gör att den här webbplatsen känns väldigt Flash-liknande är hur den skala. Sidan anpassas dynamiskt för att passa din webbläsare (med vissa begränsningar), en standard effekt i Flash-världen.
6. Crafty 2010
Crafty 2010 ger in-page-rullning väldigt mycket som Cooper hemsida. I det här fallet är utsikten begränsad till det innehåll som användaren väljer. Inte heller är den "rätt" lösningen; de visar helt enkelt de obegränsade möjligheterna till tillvägagångssättet. Jag uppskattar hur snäll den här webbplatsen är: animationerna är coola, men de kommer aldrig i vägen för innehållet. En fin balans mellan stil och användbarhet.
7. 20 saker jag lärde mig om webbläsare och webben
Interaktiv sidvändning är en populär effekt på Flash-webbplatser, så mycket att hela produkter har skapats för att utnyttja denna funktionalitet. För sin del, 20 saker jag lärde mig om webbläsare och webben visar vad som är möjligt, visar effekter som enbart var möjliga endast med Flash. Denna webbplats är ett seriöst arbete och ett briljant exempel på en standardbaserad webbplats.
8. NL Engenharia
NL Engenharia är en typisk webbplats för ett arkitektfirma. Det är inte nödvändigtvis en dålig sak; det passar bara nischen väl. Det verkar som om det bokstavligen transplanterades från Flash till HTML: utskjutningsnavigering, helskärmsbilder, dynamisk dimensionering, alla kännetecken för Flash. Det fungerar dock. Resultatet är vackert och representerar företaget bra.
9. Ryan C. Jones
Ryan C. Jones har en vacker fotoportfölj. Intressepunkten (fotografierna) ges överväldigande framträdande. Det är ett utmärkt exempel på att inte låta tekniken komma i vägen. Oavsett vilka verktyg som används för att bygga det, är resultatet ett enkelt och effektivt sätt att visa upp den här persons arbete.
10. Studio Gang Arkitekter
Vid första anblicken, det kreativa gränssnittet och animationen på Studio Gang Arkitekter se väldigt Flash-like. Men medan gränssnittet är unikt och minnesvärt, kan jag inte låta bli att undra om det är lämpligt. Ändå visar det vad som kan göras med bra gammaldags HTML.
11. DIST Creative
DIST Creative har hävdat HTML på ett sätt som inte är helt fantastiskt. Med sina animeringar, laddningsindikatorer och fluidgränssnitt kombinerar den här webbplatsen kreativiteten hos de bästa Flash-layouterna med mycket användbara HTML-baserade lösningar. Trots det ovanliga tillvägagångssättet är det lätt att använda och kommunicerar den kreativa byråens unikhet.
12. Meddelanden för Japan
Meddelanden för Japan är inte nödvändigtvis menat att se "Flash". Men animeringen och speciella detaljer gör gränssnittet smidigt och dött enkelt att använda. Och de interaktiva elementen är framträdande men får inte i vägen alls. Det är ett utmärkt exempel på hur denna typ av estetik kan förbättra en vanlig webbplats.
13. Atlason
Som utvecklare kan du knappast titta på Atlason S hemsida utan känsla av vördnad. Jag kan inte föreställa mig det arbete som gick till att göra detta. Jag älskar särskilt att designen fyller skärmen och gör stor nytta av den tillgängliga fastigheten. Jag älskar också hur det följer så få konventioner och ändå är det fortfarande så enkelt att använda.
14. Bitbitbit
Bitbitbit dynamiskt aggregerar innehåll från flera källor, inklusive ägarens blogg, Twitter-flöde och Forrst-konto. Sådana livströmmande flöden är ganska vanliga, men den här webbplatsen visar att den inte behöver känna sig statisk alls.
15. FORM
FORM tar en liknande inställning till Bit Byte Bit, men mer bildorienterad, vilket är meningsfullt med tanke på karaktären av sitt arbete. Jag älskar det, med en gång ser du inte bara byråets arbete, men kan börja filtrera innehåll som är relevant för dig. Portföljen är rätt på hemsidan och ändå fullt fungerande, även om webbplatsen är lätt att använda.
16. EEHarbor
Medan många av de webbplatser som presenteras här använder övergångar på sidan för att ändra innehåll utan att uppdatera sidan, vägen EEHarbor är det ganska anmärkningsvärt. Webbplatsens hastighet är en stor orsak till framgången. Du känner aldrig att de fantasifulla animationerna kommer i vägen för innehållet. De bidrar bara till den högkvalitativa bilden av företaget.
17. Wells Riley
En av de största begränsningarna i HTML är dess motstånd mot något annat än raka vertikala och horisontella linjer. Det finns sätt runt detta, men de presenterar några problem med webbläsaren. Wells Riley kombinerar ett helt distinkt gränssnitt med en liten vinkel. Resultatet är svårt att dra av men väl värt det.
18. Manchester Design Symposium
Manchester Design Symposium har ett supertvätt och enkelt gränssnitt. Enkeltsides webbplats rullar vertikalt, med en fast rubrik. Medan effekten inte är särskilt ovanlig, verkar något om det bara som Flash-like. Den enkla inställningen och frånvaron av galna animationer och övergångar ger en intressant kontrast till många av de extrema webbplatser som visas här.
19. Sophie Hardach
Sophie Hardach S hemsida har några intressanta animationer. Olika element rör sig eller förstor när du svävar över dem. Och vågorna längst ner lägger lite liv på en annars statisk sida. En annan atypisk design som fungerar bra med de smidiga JavaScript-animationerna.
20. Renato Zero
Renato Zero S webbplats på en sida gör att innehåll laddas i en vacker händelse. I stället för att innehållet är förinstallerat och redo att gå, laddas varje sektion med en snygg animation när du rullar ner. Animationerna är snabba; du känner aldrig som att du väntar på dem. Effekten ser verkligen ut som Flash.
Har vi missat några fantastiska HTML-webbplatser som ser ut som Flash?