Tendenze: ritorna in voga lo stile anni 90
La nostra rubrica sugli stili grafici del web design sta per volgere al termine: lo stile che approfondiremo oggi è infatti l’ultimo della serie. Si tratta di uno stile dall’aria vagamente retrò, che ricalca alcune tendenze estetiche in voga negli anni novanta.
Un nuovo vintage dunque, che potrebbe diventare un vero e proprio must di questo 2011 e scalzare dal podio il classico vintage ormai così abusato nel web design.
Andiamo a vedere alcune caratteristiche, prendendo come esempio un sito trovato oggi su Cssmania:
Ma quali sono i punti di forza di questo stile? Vediamoli insieme.
Colori brillanti e vivaci
Una delle principali caratteristiche di questo stile è l’utilizzo di colori estremamente accesi e vivaci. Dai recenti studi del settore (leggi l’ultimo articolo di A list apart al riguardo) è emerso che lavorare sui contrasti è un inutile convenevole: a livello inconscio gli utenti prediligono le informazioni che arrivano ai recettori sensoriali con tinte cromatiche diverse tra loro ed è appurato che un contrasto poco elevato non solo contribuisce a rendere più gradevole il layout, ma fa si che la lettura dei contenuti testuali sia più agevole.
Gif animate
Il web le aveva etichettate come datate e antiestetiche. E sbagliava. Un corretto utilizzo di Gif animate può rendere il sito più dinamico ed accattivante. Nel webdesign che verrà le gif animate prenderanno senz’altro il posto delle tante animazioni in Javascript che adesso popolano il web: le gif sono più leggere, hanno una compatibilità maggiore con i vari browser e con i supporti mobili e, diciamocelo, sono anche più simpatiche.
Nel nostro esempio possiamo vedere come un sapiente uso di alcune gif contribuisce a rendere il layout originale; le gif utilizzate da questa pescheria, inoltre, attireranno senz’altro le simpatie degli utenti più giovani che a livello istintivo assoceranno i prodotti ittici ad un’attività piacevole e stimolante. Un ottimo modo per colpire il proprio target.
Decentramento del layout
I siti centrati in mezzo allo schermo andavano bene prima dell’avvento di Facebook, ovvero prima che le persone si abituassero a spostare lo sguardo verso sinistra più e più volte al giorno per controllare lo stato utente sul proprio profilo personale:
Mesi e mesi di questa costante inclinazione oculare ha fatto si che gli utenti si siano abituati a spostare lo sguardo verso sinistra durante la consultazione di un qualsiasi sito web.
Per venire incontro alle nuove esigenze dei suoi clienti, Orazio ha quindi deciso di allineare il suo sito alla nuova panoramica visiva adottata da tutti coloro che hanno fatto del famoso Social Network il loro credo personale:
Nulla da eccepire, il web master della pescheria del nostro amico Orazio ha lavorato in modo davvero professionale, rivelando cosi di essere un vero precursore del nuovo stile retro.
Ma questo stile comporta qualche interessante novità anche nel campo dello sviluppo. Analizzando il codice del nostro layout di esempio, ci accorgiamo subito che ci sono grandi cose in arrivo per voi sviluppatori!
Ma lascio la parola a Nando, che commenterà per noi il codice del sito protagonista di questo nostro articolo.
Che cosa cambia dal punto di vista tecnico?
Analizzando il markup della pagina interessata, la prima cosa che risulta evidente è l’enorme semplificazione dell’header del documento: tutta l’inutile parte che prima veniva riservata alla dichiarazione del doctype, ai meta tag, all’inclusione dei fogli di stile, librerie javascript, ecc… è stata eliminata, in questo modo il documento risulta molto più leggero e veloce al caricamento accostandosi così sempre più ai nuovi parametri presi in considerazione da Google per il calcolo del posizionamento di un sito all’interno delle SERP.
<html>
<body style="background-image:url('bg.gif')">
Da notare anche il ritorno all’uso delle tabelle per impaginare il lavoro. Non più quindi tanti e inutili div sparsi all’interno del documento – che il più delle volte finivano per appesantire le dimensioni della pagina – ma largo alle tanto discusse tabelle molto più leggere e comode che permettono di minimizzare le dimensioni del documento, come ha dichiarato recentemente anche Chris Coyier in un suo articolo.
<table width="700" cellpadding="10" style="margin-left:300px; background-color:#FF33FF;">
<tr>
<td>
<h1><font color="#66FF33" size="35" face="Comic Sans MS">Pescheria da Orazio</font></h1>
</td>
<td>
<a href="index.html"><img src="pesce.gif" border="3"></a>
</td>
</tr>
<tr>
<td align="right">
<img src="arrow06.gif">
</td>
<td>
<font color="#cccccc"><b>PROMOZIONE: Orata a 7€ al Kg</font></b>
</td>
</tr>
<tr>
<td>
<h1><font color="#66FF33" size="35" face="Comic Sans MS">Scopri le altre promozioni</font></h1>
cliccando su enter<br><a href="#"><img src="enter.gif"></a>
</td>
<td>
<h2><font color="#f82222" size="15" face="Comic Sans MS">Prenota il tuo pesce scrivendo un email</font></h2>
<img src="email.gif">
</td>
</tr>
</table>
Da non sottovalutare il notevole guadagno di tempo che si ottiene utilizzando questo metodo di sviluppo: basta perdere tempo con la creazione di apposite classi all’interno dei fogli di stili; per dividere il layout in due colonne in questo caso è bastato realizzare una semplice tabella con due celle.
Altro aspetto fondamentale è riservato all’accessibilità, per quanti navigano sul web utilizzando i nuovi screen reader di ultima generazione, pare che assegnando la formattazione ai contenuti mediante gli attributi dei marcatori html (senza quindi passare attraverso i fogli di stile), questi siano in grado di comprendere con largo anticipo quelli che saranno i contenuti del documento interpretandoli così ancora più rapidamente.
<td>
<h1><font color="#66FF33" size="35" face="Comic Sans MS">Pescheria da Orazio</font></h1>
</td>
Conclusione
Come abbiamo avuto modo di vedere i vantaggi di questa nuova metodologia di concepire lo sviluppo del markup di un progetto web sono davvero tanti e siamo certi che questo nel breve periodo diventerà un nuovo standard.
Abbiamo sempre sostenuto che, per un professionista che lavora in questo settore, è fondamentale restare continuamente aggiornato sui nuovi modelli di sviluppo, pertanto il consiglio che sentiamo di darti è di iniziare subito a mettere in pratica quanto appena visto.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
76 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Grazie per il bellissimo e illuminante articolo!
Finalmente tornano alla ribalta le scelte e gli stili grafici di quando ho iniziato ad usare il computer e internet!
E finalmente posso tornare ad utilizzare le tabelle per i miei layout!!
Già già… ;)
ciao davide, questa è stata la prima cosa che ho pensato anche io… un ritorno alle origini.
….scarsetto come pesce d’aprile…….
…pesce d’aprile?
A caval donato non si guarda in bocca ;)
[miiiii che antipaticone!]
Appena ho visto la pagina di esempio ho pensato: “Oddio, Sara è impazzita”, poi continuando a leggere ho capito lo scherzo :D
La testimonianza di Nando poi è la ciliegina sulla torta :)
ragazzi ma di che scherzo parlate?
lo avevo detto a sara che pubblicando questo articolo proprio il primo aprile a molti sarebbe potuto sembrare uno scherzo =)
Queste sono le reminescenze del button di ieri? :)
a pensarci… potevamo mettere anche quel button per gestire la prenotazione dell’orata =)
Dovete avere fede in Saruzza vostra. E se io dico che questo stile grafico sara’ una nuova tendenza, voi ci dovete credere. Tsk, questi malfidati..
Bel pesce d’aprile ahahah…
ragazzi non è uno scherzo… giuro sull’orata di orazio =)
ahahah buon primo aprile! :D
scienze, non è uno scherzoooooooo
Bel pesce!!! hahah
si, proprio buone le orate di orazio =)
Quale, quello con gli occhi che ruotano? Non e’ simpatico? :) vogliamo usarla come mascotte di Yiw e metterla in alto, proprio accanto al logo. Crediamo che cosi l’header sarebbe molto piu coinvolgente per i nostri lettori. :)
Mi avete fatto arrivare a “…le gif animate prenderanno senz’altro il posto delle tante animazioni in Javascript…” prima di capire che era un mega-pesce…. hahahah! Belllissimo!
non sottovalutiamo la “potenza” di una bella gif animata…
Appero’, che perspicacia :D
Giuro, ma GIURO, che stavo per scriverti qualcosa…
POI L’ILLUMINAZIONE :)))
ok, ci son cascato con tutte le scarpe. E brava Sarah!!!!
E cosa m’avresti scritto, sentiamo un po’? :)
Sicuramente che avevi fuso le valvole :D
cmq brava! complimenti! il markup poi… geniale. Uno scherzo, per qualnto mi riguarda, riusciutissimo! te possino :))))
hahaaha ke bello!!
alla prima immagine pensavo foste impazziti :D
Buon Primo Aprile! :)
mi raccomandi eli, comprate le orate di orazio che ha messo su questo e-commerce solo per noi =)
Complimenti !! ottima scelta sia per il layout che per il Pesce :-D
Ciao Nicola, per il layout dobbiamo ringraziare il nostro maurizio… a lui viene del tutto naturale disegnare questi siti, fosse per lui internet sarebbe a riga di comando.
questi sviluppatori, valli a capire…
Certo! Ma vuoi mettere?
tutto da shell. Più veloce, più sicuro.
E’ solo una questione di abitudine
OOO vedi vedi…………mai buttare i vestiti vecchi dall’armadio :D
……..Sara……….qui mi suggeriscono di mettere in vendita il template su themeforest…………
cavolo, sarebbe sicuramente un best sellers =)
stiamo gia’ lavorando sulla versione di WordPress. ;)
AHAH grande =)
“Da non sottovalutare il notevole guadagno di tempo che si ottiene utilizzando questo metodo di sviluppo: basta perdere tempo con la creazione di apposite classi all’interno dei fogli di stili; per dividere il layout in due colonne in questo caso è bastato realizzare una semplice tabella con due celle.”
Il bello è che ti sei anche impegnata! Complimenti!
Per le prime due righe vi ho preso per sul serio, poi ho guardato il la data sul calendario e ho capito ;)
Bravi ragazzi!!!
Anch’io ho fatto la stessa pensata di Tizionario…hahahahhaha grandi!!!
ragazzi, oggi siete tutti invitati a pranzo sul nostro forum… orate per tutti appena arrivate dalla pescheria di orazio.
in cucina il nostro cuoco maurizio vi delizierà con una delle sue prelibatezze…
A questo proposito, ieri sul mio profilo fb è successo di tutto
e tutto per colpa di una polenta con i funghi :)
Leggendo l’articolo ho inziato a pensare “che cavolata che ha scritto”…proseguendo la lettura”seconda cavolata2…andando ancora avanti” Ma quest’articolo è un coacervo di errori madornali…”.
Poi mi sono ricordato che è 1° Aprile.
Grandiosa!! :))
Bellissima la “motivazione Facebook” :D :D
E fu cosi che quegli ignorantoni degli autori di YIW impararono una nuova parola…
“COACERVO”
:D
Mai visto un pesce così bello!
Grazie di cuore
Eh si Giovanni, le orate di orazio sono squisite =)
Giuro che per un attimo ho avuto paura…
Prendere come esempio una pescheria e mettere in bella mostra “prenota il tuo pesce” è veramente una finezza :D
Nel nostro esempio possiamo vedere come un sapiente uso di alcune gif contribuisce a rendere il layout originale; Oddio ahahahha
ragazzi, la vogliamo smettere con sta roba del pesce d’aprile? poi la gente ci crede che davvero che si tratta di uno scherzo =)
1. Il sito della pescheria Orazio non lo dimenticherete per un pezzo (e così ha già raggiunto un obiettivo)
2. A poche ora dalla sua messa online, ha già scalato le vette di google (a conferma di quanto esposto nell’articolo) arrivando in seconda posizione e con un elevato indice di affidabilità
Evviva lo sitle sia grafico che tecnico degli anni 90!!!
ottima osservazione, maurì…
fatti… non parole
Maurizio………fai vedere anche i risultati che ci sono dopo……..escono due vere di Pescherie da Orazio :D
Avete scavalcato in classifica google persino gli originali ahahah :D
Oh dai ma lo diciamo che è un pesce d’aprile? Altrimente mi tocca cancellare YIW dai feed.. ahah
nooooooooooooooooooooooooooooo
Ed io che ho aspettato anche l’ora di pranzo per leggermi tutto l’articolo. Ahaha :D
Complimenti davevro per lo scherzo. Azzeccatissimo!!! Mi avete fatto proprio ridere!!!
un giorno questo stile sarà ricordato come il vintage di oggi =)
Mi sono presa un colpo….
elisa, no dai, per prenderti un vero colpo ci sarebbero volute altre due finezze: la musica di sottofondo e il contatore shinistat =)
Ma LOL! XD Appena ho letto che QUEL sito era stato messo su CSS Mania ho capito che era un pesce d’aprile! AUHAUHAUAHAUHAU! Siete dei grandi! Mi sto ancora spanciando dalle risate! UAHAUAHUAHUAHAUHA!
l’idea era di farvelo trovare davvero su css mania =)
Ma io non capisco tutto questo accanimento… tutti a dire che è uno scherzo!!
Io vedo l’articolo normale, che tratta di argomenti attuali e di notevole qualità… la casualità ha voluto che quest’articolo sia stato pubblicato l’1 Aprile e che, di conseguenza, sia trattato come uno scherzo… la casualità ha voluto pure che il sito preso in oggetto come esempio, contenesse del pesce… a questo proposito, inviterei gli autori a stare attenti a queste cose, altrimenti il vero scopo dell’articolo si va perdendo per colpa di queste dicerie popolari….
Allora se, oggi, si dice che Windows Vista è il miglior sistema operativo della storia informatica, viene preso come scherzo?
certo che si… il primo è sicuramente Windows ME!!
Assolutamente d’accordo con Marco, il sistema più riuscito e stabile della Microsoft è sicuramente Windows ME.
E lasciatemi dire che in tutto questo c’è un qualcosa di geniale… la scelta del font… Comic Sans è una chicca non da poco…
non poteva mancare l’utilizzo del comic in questo stile retrò…
Devo ammettere, inizialmente ci sono cascato per bene, davvero ben fatto,
dopo 5 minuti passati a ipnotizzarmi a guardare il layout con quei colori brillanti pensavo che fosse un articolo ben realizzato, ma quando avete inneggiato all’uso delle tabelle e dell’assenza del doctype… ho capito che avevate architettato davvero un bel tranello.
Complimenti come al solito!!!
cavolo che velocità di caricamento quel sito =)
Ottimo layout, fresco (come il pesce, si spera) e vivace, l’unico inconveniente è che osservare troppo a lungo la schermata può scatenare epilessia, manca un apposito warning.
vivacità e freschezza erano proprio le keyword che il sito voleva comunicare =)
genialeeeeeeeeeeeeeeeeeeeeeeeeeee
ahaha, volevamo fare molto di più di quello che abbiamo fatto ma purtroppo i casini dovuti alla migrazione ci hanno tolto tempo prezioso per l0organizzazione dello scherzo.
Hey!!
È molto tempo che vi seguo ma non ho mai commentato nulla, sono un ragazzo d 19 anni che studia web design al NID di Perugia e volevo complimentarmi con tutti gli articoli che scrivete, ma giuro che mi avete fatto prendere un colpo a leggere questo ahah che paura :D
ciao Edoardo e benvenuto su YIW!
Stupendo! Peccato averlo visto solo oggi, ci sarei cascato come un pollo ieri ^^ Grande Sarah! Ottimo anche il posizionamento in Google, il povero vero Orazio si starà rigirando tra i salmoni!
Per un attimo ho avuto un colpo :D !!!!però nello stesso tempo che nostalgia anni 90 :DD
un tuffo nel passato, quando il 90% dei siti web erano realizzati come il sito della pescherzia di orazio =)
okay, oggi possiamo confermare che si trattava del nostro pesce d’aprile architettato per sorridere in modo simpatico insieme a tutti voi.
siamo contenti che sia riuscito nonostante non abbiamo avuto molto tempo per organizzarlo come volevamo (i recenti casini dovuti alla migrazione sul nuovo server ci hanno costretti a fare tutto l’ultimo giorno).
avevamo intenzione di coinvolgere nello scherzo altre realtà come appunto css mania, chiedendogli se per il 1° aprile potevano contribuire anche loro ad uno scherzo collettivo mettendo sulla loro home tutti siti realizzati in stile anni ’90, compreso ovviamente il sito della pescheria di orazio, così lo avreste trovato davvero su css mania =)
inoltre sarebbe stato carino coinvolgere anche chris coyier chiedendogli se poteva pubblicare anche lui sul suo blog un articolo dove inneggiava allo stile anni ’90, così anche il nostro riferimento al suo articolo sarebbe stato reale =)
comunque vi ringraziamo tutti per i complimenti e per essere intervenuti e siamo contenti che il nostro “scherzetto” sia stato di vostro gradimento =)
ma come, era uno scherzo?
)-:
Già mi pregustavo fama e gloria. Nello stile 90 sono imbattibile
Ho quasi pianto!!!!
Poi leggendolo oggi non ci ho proprio pensato..
hehhehe, bravi!! stavo già entrando nel panico!