20 Fantastische pseudo-flash-websites
Een pseudo-Flash-website is er een die eruitziet, aanvoelt en handelt als een Flash-website, maar die in feite is gebouwd op goede ouderwetse HTML en CSS.
Er is meestal ook een JavaScript-streepje om dingen tot leven te brengen en de interface rond te maken.
Het resultaat gaat vaak verder dan wat we van HTML en CSS gewend zijn. Daarom gaan we ervan uit dat de website op Flash is gebaseerd. Klik met de rechtermuisknop en u zult aangenaam verrast zijn.
Ik ben zeer geïnteresseerd in pseudo-Flash-websites en ik praat regelmatig over het onderwerp. Flash is duidelijk een deel van zijn voordeel kwijtgeraakt (hoewel het zeker niet is verdwenen) en de focus is verlegd naar de kerntechnologieën van het web (HTML, CSS, JavaScript).
Daar zijn twee redenen voor. De eerste is technisch. Gemakkelijkere en verbeterde SEO, CMS-tools zoals WordPress en brede apparaatondersteuning hebben mensen ertoe aangezet om de gestandaardiseerde tools maximaal te gebruiken.
Ten tweede weten veel meer mensen hoe ze zich kunnen ontwikkelen met deze basistalen, en een grote community is bereid om de voordelen van Flash voor deze vertrouwde tools te ontlopen.
Met zoveel redenen om de enveloppe te pushen en van Flash af te komen, zitten we middenin een enorme verschuiving in webontwikkeling. HTML-websites zijn begonnen als statische entiteiten. Met de opkomst van AJAX, zagen we hoe een dynamisch document onze verwachtingen zou kunnen veranderen. Gooi animaties, overgangen en interactie in en je hebt een radicaal ander medium.
Sommige gelukkige slachtoffers
Deze verschuiving brengt een aantal slachtoffers met zich mee die veel mensen (waaronder ikzelf) verwelkomen. De eerste hiervan is achtergrondmuziek. Standaard wordt het spelen op een standaardwebsite moeilijker voor de ontwikkelaar. Ik hoef niet langer naar de pauze- of mute-knop te zoeken om een website te sluiten.
Ten tweede hebben websites minder kans om uw browser nu te kapen. Sommige Flash-gebaseerde websites doen dit nog steeds, door het formaat van je viewport aan te passen en full-screen interfaces te laden. Pseudo-Flash-websites blijven echter gelukkig op hun plaats.
Woorden van waarschuwing
Zoals bij elke trend, moeten we deze voorzichtig benaderen. In de eerste plaats hebben we zelfcontrole nodig. Alleen omdat we radicale dingen kunnen doen met scrollen op de pagina, animaties en overgangen, betekent dat niet dat we het moeten doen.
U kunt het beste doen om de gebruikerservaring, het product en, misschien wel het belangrijkst, te overwegen. Met dit in gedachten kunt u deze benaderingen strategisch toepassen om uw website te verbeteren.
Voorbeelden van deze stijl
1. Emilie Crssrd
Terwijl veel dingen aan Emilie Crssrd 'S website laat het eruit zien als Flash, daar zal ik me op focussen. De laadindicator lijkt hier iets dat we normaal gesproken op een Flash-website zouden vinden (hoewel we dit ook vaak zien met de AJAX-functionaliteit). Het mechanisme zorgt ervoor dat afbeeldingen en unstyled-inhoud niet worden weergegeven voordat ze volledig zijn geladen, zodat gebruikers de inhoud op de juiste manier kunnen zien. De loader hier, in combinatie met de in-page overgangen, zorgen voor een soepele interface.
2. Stefan Kanchev
Veel dingen aan Stefan Kanchev De website weerspiegelt ook Flash-gebaseerde benaderingen, en de subtiele fade-in en fade-out van de pictogrammen terwijl je eroverheen beweegt, zorgen voor een mooie interactie. De visuele keu helpt gebruikers zich op één element tegelijk te concentreren en voegt een beetje sissend toe om deze minimalistische pagina tot leven te brengen. Een prachtig voorbeeld van het gebruik van iets eenvoudigs tot een geweldig effect.
3. Merkrepubliek
Appreciëren Brand Republic Website, moet je ermee communiceren. De container rond het logo heeft een briljante kleine interactie met het. Dit op CSS gebaseerde element gebruikt de positie van de muis om de standaardranden dynamisch te wijzigen, een 3D-effect te creëren en ervoor te zorgen dat het logo opvalt tegen de intense achtergrond. Dit soort dingen verbetert de interface en het algemene gevoel van de website zonder in de weg te lopen. Dat is precies wat u wilt: de extra's mogen de bruikbaarheid niet beïnvloeden.
4. Cooper
Kuiper volgt een populaire benadering van websites met één pagina. Terwijl u items in de navigatie selecteert, rolt de relevante inhoud in de viewport. Met de vloeiende overgangen voelt de website heel erg aan als Flash, maar het wordt bereikt met standaard webtalen. Net als de website functioneert het hele ding op mobiele apparaten. Wanneer we deze technologieën gebruiken, moeten we hun impact op niet-standaard apparaten en onze specifieke doelgroep beoordelen.
5. Flipboard
Flipboard De uiterst eenvoudige website heeft een vrij standaard inhoudsrotator. Wat deze website heel Flash-achtig doet aanvoelen, is hoe het schaalt. De pagina past zich dynamisch aan aan uw browser (met enkele beperkingen), een standaardeffect in de Flash-wereld.
6. Crafty 2010
Crafty 2010 biedt in-page scrollen heel veel zoals Cooper's website. In dit geval is de weergave beperkt tot de inhoud die de gebruiker selecteert. Evenmin is de "juiste" oplossing; ze tonen eenvoudig de onbegrensde mogelijkheden van de aanpak. Ik waardeer hoe pittig deze website is: de animaties zijn cool, maar ze staan nooit in de weg van de inhoud. Een mooie balans tussen stijl en bruikbaarheid.
7. 20 dingen die ik heb geleerd over browsers en internet
Interactief pagina-draaien is een populair effect op Flash-websites, zo veel zelfs dat hele producten zijn gemaakt om deze functionaliteit te gebruiken. Voor zijn deel, 20 dingen die ik heb geleerd over browsers en internet laat zien wat mogelijk is, en laat effecten zien die ooit alleen met Flash mogelijk waren. Deze website is een serieus stuk werk en een schitterend voorbeeld van een op standaarden gebaseerde website.
8. NL Engenharia
NL Engenharia is een typische website voor een architectenbureau. Dat is niet noodzakelijk een slechte zaak; het past gewoon goed bij de nis. Het lijkt erop dat het letterlijk is getransplanteerd van Flash naar HTML: slide-out navigatie, afbeeldingen op volledig scherm, dynamische dimensionering, alle kenmerken van Flash. Het werkt echter. Het resultaat is mooi en vertegenwoordigt het bedrijf goed.
9. Ryan C. Jones
Ryan C. Jones heeft een prachtig portfolio voor fotografie. Het aandachtspunt (de foto's) krijgt overweldigende bekendheid. Het is een schitterend voorbeeld van het niet in de weg laten zitten van de technologie. Ongeacht de hulpmiddelen die zijn gebruikt om het te bouwen, is het resultaat een eenvoudige en effectieve manier om het werk van deze persoon te laten zien.
10. Studio Gang Architects
Op het eerste gezicht zijn de creatieve interface en animatie ingeschakeld Studio Gang Architects zien er ontzettend Flash-achtig uit. Maar hoewel de interface uniek en gedenkwaardig is, kan ik het niet laten om me af te vragen of het passend is. Toch laat het zien wat je kunt doen met ouderwetse HTML.
11. DIST Creative
DIST Creative heeft HTML op een manier gebruikt die niets minder dan verbluffend is. Met zijn animaties, laadindicatoren en vloeiende interface combineert deze website de creativiteit van de beste Flash-lay-outs met zeer bruikbare op HTML gebaseerde oplossingen. Ondanks de ongebruikelijke aanpak is het gemakkelijk te gebruiken en communiceert het het unieke karakter van het creatieve bureau.
12. Berichten voor Japan
Berichten voor Japan is niet noodzakelijk bedoeld om "Flash" te bekijken. Maar de animatie en speciale aanrakingen maken de interface soepel en doodeenvoudig in gebruik. En de interactieve elementen zijn prominent, maar staan helemaal niet in de weg. Het is een goed voorbeeld van hoe dit soort esthetiek een standaardwebsite kan verbeteren.
13. Atlason
Als ontwikkelaar kun je nauwelijks naar kijken Atlason Website zonder een gevoel van ontzag. Ik kan me niet voorstellen welk werk er is gegaan om dit te maken. Ik ben er vooral dol op dat het ontwerp het scherm vult en veel gebruik maakt van het beschikbare onroerend goed. Ik hou ook van hoe het zo weinig conventies volgt en toch zo eenvoudig te gebruiken is.
14. Bitbyte bit
Bit Byte Bit voegt inhoud dynamisch uit meerdere bronnen samen, waaronder het blog van de eigenaar, Twitter-feed en Forrst-account. Dergelijke lifestreaming feeds komen redelijk vaak voor, maar deze website laat zien dat het helemaal niet statisch hoeft te voelen.
15. VORM
HET FORMULIER is vergelijkbaar met Bit Byte Bit, maar meer beeldgericht, wat logisch is gezien de aard van zijn werk. Ik hou daar meteen van, je ziet niet alleen het werk van het bureau, maar kunt ook beginnen met het filteren van inhoud die voor jou relevant is. Het portfolio staat direct op de startpagina en is toch volledig functioneel, zelfs als de website eenvoudig te gebruiken blijft.
16. EEHarbor
Hoewel veel van de hier gepresenteerde websites in-page overgangen gebruiken om inhoud te wijzigen zonder de pagina te verversen, is dit de manier EEHarbor is het vrij opmerkelijk. De snelheid van de website is een grote reden voor het succes. Je hebt nooit het gevoel dat de mooie animaties de inhoud in de weg zitten. Ze dragen alleen maar bij aan het hoge kwaliteitsimago van het bedrijf.
17. Wells Riley
Een van de grootste beperkingen van HTML is de weerstand voor iets anders dan rechte verticale en horizontale lijnen. Er zijn manieren om dit te omzeilen, maar ze vertonen een aantal problemen met verschillende browsers. Wells Riley combineert een totaal verschillende interface met een kleine hoek. Het resultaat is moeilijk om te trekken maar de moeite waard.
18. Manchester Design Symposium
Manchester Design Symposium heeft een super schone en eenvoudige interface. De website met één pagina schuift verticaal, met een vaste koptekst. Hoewel het effect niet bijzonder ongewoon is, lijkt iets ervan gewoon Flash-achtig. De eenvoudige aanpak en afwezigheid van gekke animaties en overgangen zorgen voor een interessant contrast met veel van de extreme websites die hier worden getoond.
19. Sophie Hardach
Sophie Hardach De website heeft een aantal interessante animaties. Verschillende elementen verplaatsen of vergroten terwijl u eroverheen beweegt. En de golven langs de onderkant zorgen voor een beetje leven op een anders statische pagina. Een ander atypisch ontwerp dat goed werkt met de soepele JavaScript-animaties.
20. Renato Zero
Renato Zero 'S website met één pagina maakt van het laden van inhoud een prachtig evenement. In plaats van dat de inhoud vooraf is geladen en klaar is om te gaan, wordt elke sectie geladen met een handige animatie terwijl u naar beneden scrolt. De animaties zijn snel; je hebt nooit het gevoel dat je op ze wacht. Het effect lijkt zeker op Flash.
Hebben we geweldige HTML-websites gemist die op Flash lijken?