20 Fantastic Pseudo-Flash ιστοσελίδες
Μια ιστοσελίδα ψευδο-Flash είναι αυτή που μοιάζει, αισθάνεται και ενεργεί σαν μια ιστοσελίδα Flash, αλλά στην πραγματικότητα είναι χτισμένη σε καλή ντεμοντέ HTML και CSS.
Υπάρχει συνήθως επίσης μια παύλα JavaScript για να φέρει τα πράγματα στη ζωή και να ολοκληρώσει τη διεπαφή.
Το αποτέλεσμα είναι συχνά πέρα από αυτό που έχουμε περιμένουν από το HTML και το CSS, γι 'αυτό μπορεί να υποθέσουμε ότι ο ιστότοπος βασίζεται στο Flash. Κάντε δεξί κλικ, όμως, και θα εκπλαγείτε ευχάριστα.
Είμαι έντονα ενδιαφέρεται για ιστοσελίδες ψευδο-Flash, και μιλάω συχνά για το θέμα. Το Flash έχει προφανώς χάσει μερικά από τα άκρα του (αν και δεν έχει εξαφανιστεί) και η εστίαση έχει μετατοπιστεί στις βασικές τεχνολογίες του ιστού (HTML, CSS, JavaScript).
Υπάρχουν δύο λόγοι για αυτό. Το πρώτο είναι τεχνικό. Ευκολότερη και βελτιωμένη SEO, CMS εργαλεία όπως το WordPress και η ευρεία υποστήριξη συσκευών έχουν ενθαρρύνει τους ανθρώπους να ωθήσουν τα τυποποιημένα εργαλεία στο μέγιστο.
Δεύτερον, πολύ περισσότεροι άνθρωποι ξέρουν πώς να αναπτύξουν με αυτές τις βασικές γλώσσες και μια μεγάλη κοινότητα είναι πρόθυμη να παραιτηθεί από τα οφέλη του Flash για αυτά τα γνωστά εργαλεία.
Με τόσους πολλούς λόγους να σπρώξουμε το φάκελο και να απομακρυνθούμε από το Flash, βρισκόμαστε στη μέση μιας τεράστιας μετατόπισης στην ανάπτυξη ιστού. Οι ιστότοποι HTML ξεκίνησαν ως στατικές οντότητες. Με την εμφάνιση του AJAX, είδαμε πως ένα δυναμικό έγγραφο θα μπορούσε να αλλάξει τις προσδοκίες μας. Ρίξτε σε κινούμενα σχέδια, μεταβάσεις και αλληλεπίδραση και έχετε ένα ριζικά διαφορετικό μέσο.
Μερικές ευτυχείς απώλειες
Αυτή η μετατόπιση φέρνει μαζί με αυτήν μερικές απώλειες που πολλοί άνθρωποι (συμπεριλαμβανομένων και εμού) καλωσορίζουν. Πρώτα από αυτά είναι η μουσική υπόκρουση. Έχοντας την αναπαραγωγή από προεπιλογή σε μια τυποποιημένη ιστοσελίδα καθίσταται όλο και πιο δύσκολο για τον προγραμματιστή να αποχωρήσει. Δεν χρειάζεται πλέον να κυνήσω το κουμπί παύσης ή σίγασης για να κλείσω έναν ιστότοπο.
Δεύτερον, οι ιστότοποι είναι λιγότερο πιθανό να καταλάβουν το πρόγραμμα περιήγησής σας τώρα. Ορισμένες ιστοσελίδες που βασίζονται σε Flash εξακολουθούν να λειτουργούν, αλλάζοντας το μέγεθος του παραθύρου προβολής και φορτώνοντας διεπαφές πλήρους οθόνης. Ωστόσο, οι ιστοσελίδες ψευδο-Flash παραμένουν ευτυχώς στη θέση τους.
Λόγια προσοχής
Όπως και με κάθε τάση, πρέπει να το προσεγγίσουμε με προσοχή. Πρωτίστως, χρειαζόμαστε αυτοέλεγχο. Ακριβώς επειδή μπορούμε να κάνουμε ριζοσπαστικά πράγματα με κύλιση σε σελίδες, κινούμενα σχέδια και μεταβάσεις δεν σημαίνει ότι πρέπει.
Το καλύτερο στοίχημά σας είναι να εξετάσετε προσεκτικά το κοινό, το προϊόν και, ίσως το σημαντικότερο, την εμπειρία του χρήστη. Έχοντας αυτά υπόψη, μπορείτε να εφαρμόσετε στρατηγικά αυτές τις προσεγγίσεις για να βελτιώσετε τον ιστότοπό σας.
Παραδείγματα αυτού του στυλ
1. Emilie Crssrd
Ενώ πολλά πράγματα είναι Emilie Crssrd Της ιστοσελίδας να μοιάζει με Flash, θα επικεντρωθώ σε ένα. Ο δείκτης φόρτωσης εδώ μοιάζει με κάτι που συνήθως θα βρείτε σε μια ιστοσελίδα Flash (αν και το βλέπουμε πολύ με τη λειτουργικότητα AJAX, πάρα πολύ). Ο μηχανισμός διατηρεί την εμφάνιση εικόνων και ασταθούς περιεχομένου προτού φορτωθούν πλήρως, διασφαλίζοντας ότι οι χρήστες βλέπουν σωστά το περιεχόμενο. Ο φορτωτής εδώ, σε συνδυασμό με τις μεταβάσεις στη σελίδα, δημιουργούν μια ομαλή διεπαφή.
2. Στέφαν Καντσέφ
Πολλά πράγματα Stefan Kanchev Της ιστοσελίδας επίσης αντανακλούν τις προσεγγίσεις που βασίζονται σε φλας και η λεπτή ξεθωριασμένη και ξεθωριασμένη λειτουργία των εικονιδίων καθώς το ποντίκι πάνω τους δημιουργεί μια όμορφη αλληλεπίδραση. Το οπτικό σύνθημα βοηθά τους χρήστες να επικεντρωθούν σε ένα στοιχείο κάθε φορά και προσθέτει ένα κομμάτι sizzle για να φέρει αυτή τη μινιμαλιστική σελίδα στη ζωή. Ένα θαυμάσιο παράδειγμα μόχλευσης για κάτι απλό και εξαιρετικό.
3. Μάρκα Δημοκρατία
Να εκτιμήσουν Brand Republic Πρέπει να αλληλεπιδράσετε με αυτόν. Το δοχείο γύρω από το λογότυπο έχει μια λαμπρή μικρή αλληλεπίδραση με αυτό. Αυτό το στοιχείο που βασίζεται στο CSS χρησιμοποιεί τη θέση του ποντικιού για να αλλάξει δυναμικά τα τυποποιημένα σύνορα, δημιουργώντας ένα εφέ 3-D και διασφαλίζοντας ότι το λογότυπο ξεχωρίζει από το έντονο φόντο. Αυτού του είδους τα πράγματα βελτιώνουν τη διασύνδεση και τη γενική αίσθηση της ιστοσελίδας χωρίς να παρεμποδίζουν. Αυτό ακριβώς θέλετε: τα πρόσθετα δεν πρέπει να παρεμποδίζουν τη χρηστικότητα.
4. Cooper
Βαρελοποιός ακολουθεί μια δημοφιλής προσέγγιση για ιστοσελίδες μιας σελίδας. Καθώς επιλέγετε στοιχεία στη πλοήγηση, το σχετικό περιεχόμενο μετακινείται στο παράθυρο προβολής. Με τις ομαλές μεταβάσεις, ο ιστότοπος αισθάνεται πολύ σαν Flash, αλλά επιτυγχάνεται με τις τυπικές γλώσσες του ιστού. Όσο ωραία είναι και η λειτουργία του ιστότοπου, το όλο θέμα ανατινάζεται σε κινητές συσκευές. Όταν αξιοποιούμε αυτές τις τεχνολογίες, θα πρέπει να αξιολογήσουμε τον αντίκτυπό τους σε μη τυποποιημένες συσκευές και στο συγκεκριμένο ακροατήριο.
5. Flipboard
Flipboard Ο απλός ιστοχώρος του Google διαθέτει έναν αρκετά τυπικό περιστροφέα περιεχομένου. Αυτό που κάνει αυτόν τον ιστότοπο να αισθάνεται πολύ όπως το Flash είναι το πώς κλιμακώνεται. Η σελίδα προσαρμόζεται δυναμικά ώστε να ταιριάζει στο πρόγραμμα περιήγησής σας (με κάποιους περιορισμούς), ένα τυπικό αποτέλεσμα στον κόσμο του Flash.
6. Crafty 2010
Crafty 2010 παρέχει την κύλιση στην σελίδα πολύ σαν την ιστοσελίδα του Cooper. Στην περίπτωση αυτή, η προβολή περιορίζεται στο περιεχόμενο που επιλέγει ο χρήστης. Ούτε είναι η "σωστή" λύση. απλώς επιδεικνύουν τις απεριόριστες δυνατότητες της προσέγγισης. Εκτιμώ πόσο εύθυμος είναι αυτός ο ιστότοπος: τα κινούμενα σχέδια είναι δροσερά, αλλά ποτέ δεν παρεμποδίζουν το περιεχόμενο. Μια ωραία ισορροπία μεταξύ στυλ και χρηστικότητας.
7. 20 πράγματα που έμαθα σχετικά με τα προγράμματα περιήγησης και τον ιστό
Η διαδραστική στροφή σελίδων είναι ένα δημοφιλές αποτέλεσμα στις ιστοσελίδες Flash, τόσο πολύ ώστε ολόκληρα προϊόντα έχουν δημιουργηθεί μόνο για να αξιοποιήσουν αυτή τη λειτουργικότητα. Από την πλευρά της, 20 πράγματα που έμαθα σχετικά με τα προγράμματα περιήγησης και τον ιστό δείχνει τι είναι δυνατό, επιδεικνύοντας επιπτώσεις που ήταν κάποτε δυνατές μόνο με το Flash. Αυτός ο ιστότοπος είναι ένα σοβαρό κομμάτι εργασίας και ένα λαμπρό παράδειγμα ενός ιστοτόπου με βάση τα πρότυπα.
8. NL Engenharia
NL Engenharia είναι μια τυπική ιστοσελίδα για μια εταιρεία αρχιτεκτονικής. Αυτό δεν είναι απαραίτητα κακό πράγμα. απλώς ταιριάζει με την εξειδικευμένη θέση. Φαίνεται ότι μεταφέρθηκε κυριολεκτικά από το Flash σε HTML: πλοήγηση slide-out, εικόνες πλήρους οθόνης, δυναμική μεγέθυνση, όλα τα χαρακτηριστικά γνωρίσματα του Flash. Λειτουργεί, όμως. Το αποτέλεσμα είναι όμορφο και αντιπροσωπεύει την επιχείρηση καλά.
9. Ryan C. Jones
Ryan C. Jones έχει ένα όμορφο φωτογραφικό χαρτοφυλάκιο. Το σημείο ενδιαφέροντος (οι φωτογραφίες) δίνεται σε συντριπτική πλειοψηφία. Είναι ένα λαμπρό παράδειγμα να μην αφήσουμε την τεχνολογία να μπει στο δρόμο. Ανεξάρτητα από τα εργαλεία που χρησιμοποιούνται για την κατασκευή του, το αποτέλεσμα είναι ένας απλός και αποτελεσματικός τρόπος προβολής του έργου αυτού του ατόμου.
10. Αρχιτέκτονες Gang Studio
Με την πρώτη ματιά, η δημιουργική διεπαφή και η κινούμενη εικόνα Αρχιτέκτονες Gang Studio μοιάζει φοβερά με Flash. Αλλά ενώ η διεπαφή είναι μοναδική και αξέχαστη, δεν μπορώ παρά να αναρωτιέμαι αν είναι σωστό. Παρ 'όλα αυτά, δείχνει τι μπορεί να γίνει με την καλή παλιομοδίτικη HTML.
11. Creative DIST
Δημιουργικό DIST έχει μοχλευτεί HTML με τρόπο που δεν είναι τίποτε λιγότερο από εκπληκτικό. Με τα κινούμενα σχέδια, τους δείκτες φόρτωσης και τη διασύνδεση υγρών, ο ιστότοπος αυτός συνδυάζει τη δημιουργικότητα με τις καλύτερες διατάξεις Flash με πολύ εύχρηστες λύσεις βασισμένες σε HTML. Παρά την ασυνήθιστη προσέγγιση, είναι εύκολο στη χρήση και επικοινωνεί με τη μοναδικότητα του δημιουργικού οργανισμού.
12. Μηνύματα για την Ιαπωνία
Μηνύματα για την Ιαπωνία δεν είναι απαραίτητα να φανεί "Flash". Αλλά η κινούμενη εικόνα και οι ειδικές πινελιές κάνουν τη διασύνδεση ομαλή και νεκρή απλή στη χρήση. Και τα διαδραστικά στοιχεία είναι εμφανή, αλλά δεν μπερδεύονται καθόλου. Είναι ένα εξαιρετικό παράδειγμα για το πώς αυτό το είδος της αισθητικής μπορεί να ενισχύσει έναν πρότυπο δικτυακό τόπο.
13. Atlason
Ως προγραμματιστής, δεν μπορείτε να κοιτάξετε Atlason Χωρίς να αισθάνεται δέος. Δεν μπορώ να φανταστώ τη δουλειά που πήγε για να κάνει αυτό. Αγαπώ ιδιαίτερα το γεγονός ότι το σχέδιο γεμίζει την οθόνη και κάνει μεγάλη χρήση των διαθέσιμων ακινήτων. Αγαπώ επίσης τον τρόπο με τον οποίο ακολουθούν τόσο λίγες συμβάσεις και παρόλα αυτά είναι ακόμα τόσο απλό στη χρήση.
14. Bit Byte Bit
Bit Bit Byte δυναμικά συγκεντρώνει περιεχόμενο από πολλές πηγές, συμπεριλαμβανομένου του blog του ιδιοκτήτη, της ροής Twitter και του λογαριασμού Forrst. Τέτοιες ζωοτροφές είναι αρκετά συνηθισμένες, αλλά αυτή η ιστοσελίδα δείχνει ότι δεν χρειάζεται να αισθάνεται στατική.
15. ΜΟΡΦΗ
ΜΟΡΦΗ ακολουθεί μια παρόμοια προσέγγιση με το Bit Byte Bit, αλλά περισσότερο προσανατολισμένη στην εικόνα, η οποία έχει νόημα δεδομένης της φύσης του έργου της. Αγαπώ ότι, αμέσως, δεν βλέπετε μόνο το έργο του οργανισμού, αλλά μπορείτε να ξεκινήσετε να φιλτράρετε το περιεχόμενο που σας αφορά. Το χαρτοφυλάκιο είναι ακριβώς στην αρχική σελίδα και όμως είναι πλήρως λειτουργικό, ακόμα και όταν ο ιστότοπος παραμένει εύκολος στη χρήση.
16. EEHarbor
Ενώ πολλοί από τους ιστότοπους που παρουσιάζονται εδώ χρησιμοποιούν μεταβάσεις σε σελίδες για να αλλάξουν περιεχόμενο χωρίς ανανέωση της σελίδας, τον τρόπο EEHarbor είναι αξιοσημείωτο. Η ταχύτητα της ιστοσελίδας είναι ένας μεγάλος λόγος για την επιτυχία της. Ποτέ δεν αισθάνεστε ότι τα φανταχτερά animations παρεμποδίζουν το περιεχόμενο. Αυτά συμβάλλουν μόνο στην εικόνα υψηλής ποιότητας της εταιρείας.
17. Wells Riley
Ένας από τους μεγαλύτερους περιορισμούς της HTML είναι η αντίσταση της σε οτιδήποτε άλλο εκτός από τις ευθείες κάθετες και οριζόντιες γραμμές. Υπάρχουν τρόποι γύρω από αυτό, αλλά παρουσιάζουν ορισμένα ζητήματα διαδικτυακού προγράμματος περιήγησης. Wells Riley συνδυάζει μια εντελώς ξεχωριστή διεπαφή με μια μικρή γωνία. Το αποτέλεσμα είναι δύσκολο να τραβηχτεί, αλλά αξίζει τον κόπο.
18. Συμπόσιο του Manchester Design
Συμπόσιο του Μάντσεστερ Σχεδιασμού έχει μια εξαιρετικά καθαρή και απλή διεπαφή. Ο ιστότοπος μιας σελίδας μετατοπίζεται κάθετα, με μια σταθερή κεφαλίδα. Παρόλο που το αποτέλεσμα δεν είναι ιδιαίτερα ασυνήθιστο, κάτι για αυτό μοιάζει με το Flash. Η απλή προσέγγιση και η απουσία τρελών κινουμένων σχεδίων και αλλαγών καθιστούν μια ενδιαφέρουσα αντίθεση με πολλές από τις ακραίες ιστοσελίδες που παρουσιάζονται εδώ.
19. Sophie Hardach
Sophie Hardach Έχει κάποιες ενδιαφέρουσες κινήσεις. Διάφορα στοιχεία μετακινούνται ή μεγεθύνονται καθώς στρέφετε πάνω τους. Και τα κύματα κατά μήκος του πυθμένα προσθέτουν κάποια ζωή σε μια κατά τα άλλα στατική σελίδα. Ένα άλλο άτυπο σχέδιο που λειτουργεί καλά με τα ομαλά animations JavaScript.
20. Renato Zero
Ο Renato Zero Του ενός σελίδας ιστοσελίδα μετατρέπει τη φόρτωση του περιεχομένου σε ένα όμορφο γεγονός. Αντί του περιεχομένου που είναι προ-φορτωμένο και έτοιμο να ξεκινήσει, κάθε τμήμα φορτώνεται με μια όμορφη κινούμενη εικόνα καθώς μετακινηθείτε προς τα κάτω. Τα κινούμενα σχέδια είναι γρήγορα? δεν αισθάνεστε ποτέ ότι τους περιμένετε. Το αποτέλεσμα σίγουρα μοιάζει με Flash.
Έχουμε χάσει οποιαδήποτε καταπληκτική ιστοσελίδες HTML που μοιάζουν με Flash;