Blog › Web e Grafica
Stavo gironzolando per il web e sfogliando la sezione Photographic Backgrounds del sito Design Meltdown ho cominciato a studiarmi le possibili soluzioni adottate per ovviare ai problemi di ridimensionamento di questo tipo layout.

Invece di farmi un mio appunto sulla scrivania e inserire qualche link nei segnalibri di firefox, ho pensato di scrivere le mie elucubrazioni qui, in modo da condividerle con voi.

Le soluzioni più utilizzate sono le seguenti:

Flash

La soluzione di gran lunga più utilizzata e forse la più efficace, ma quella che io amo meno è quella di costruire questi tipi di siti in flash, ma il mio interesse era sicuramente rivolto maggiormente ai siti che non utilizzano questo metodo.


Speriamo in bene



La soluzione "speriamo in bene" consiste nel creare un'immagine di background abbastanza grande sperando che nessuno abbia un monitor grande a sufficienza da vederne la fine.
Soluzione a mio avviso non molto adatta, visto il dilagare di monitor grandi e di dual e triple head.


Background ripetuti



Un'idea sempre efficace se la foto si presta ad un buon lavoro di "giunzione" è quella di preparare uno sfondo adatto ad essere ripetuto in orizzontale (per lo scorrimento verticale è spesso sufficiente bloccare il background rispetto allo scorrimento del testo come accade su teamaginc.com).
Un lavoro spettacolare per quanto riguarda questo metodo potete ammirarlo sul sito ubersuper.com.


Ridimensionamento dinamico



Soluzione interessante ma non applicabile a tutte le immagini è quella di mettere una div larga sempre il 100% sullo sfondo. L'immagine però deve reggere alla deformazione e alla sgranatura dovuta al ridimensionamento senza però pesare troppi Kbyte.


Sfumare verso un colore pieno



Un'altra soluzione molto adottata è quella di far sfumare un'immagine verso un colore pieno. L'immagine resta quindi tale quale a se stessa e l'eventuale ridimensionamento della finestra è colmato dal colore.

Concludendo:
Ho visto bei siti ma nessuna idea che davvero mi abbia illuminata, in ogni caso questo mi sembra un buon vademecum delle possibili soluzioni da adottare.
Se ne avete altre sarò ben lieta di accoglierle.
Permanent link
Commenti
01
Neanche a me piace più di tanto la soluzione Flash in quanto non lo considero uno strumento adatto per la creazione dei siti.

'Speriamo in bene' è la soluzione pegiore, IMHO. non solo per le dimensioni dei monitor, ma anche per il peso dell'immagine.

Con una buona foto il metodo della sfumatura è ottimo. Ho visto siti molto belli che lo usavano.

Con i background ripetuti è possibile creare cose fantastiche, come il sito da te segnalato. Non è certamente facile però molte volte i risultati sono ottimi.

Concludendo, penso che le ultime due tecniche (sfumatura & repeat) siano le migliori. Dipende tutto dalle capacità del grafico.
Permanent link Postato da Gabriel il 24 ago 2007 alle 18:08
02
ne ho visto uno postato nel forum dove avevano utilizzato tanti div sovrapposti, ognuno dei quali conteneva un elemento (casa, 2-3 persone, albero etc) in posizione diversa e con layout con larghezza 100%: se il layout era stretto, le figure erano sovrapposte, se era largo si distanziavano, mantenendo pero' un buon effetto "zona residenziale"

molto carino davvero e una soluzione che non ho rivisto da nessun'altra parte!
Permanent link Postato da reb il 25 ago 2007 alle 11:08
03
Non è che ti ricordi il link reb?
Mi interesserebbe studiarmelo.

Permanent link Postato da Memole il 25 ago 2007 alle 16:08
04
eh, dura! non mi ricordo piu' manco se si trattasse del forum o del subforum e sono sicura che la domanda non avesse a che fare con un problema legato all'header stesso; solo casualmente mi accorsi di questa cosa e dell'effetto

provo a cercare, ma non garantisco :\
Permanent link Postato da reb il 27 ago 2007 alle 16:08
05
Complimenti! Blog e sito sempre interessanti e ricchi di spunti per una neofita come me!
Permanent link Postato da kleo il 29 ago 2007 alle 11:08
06
Io uso spesso lo sfondo sfumato verso un colore pieno quando mi trovo di fronte al dilemma, trovo sia la soluzione più "fine".
Talvolta lo ammetto mi sono completamente dimenticata che esistono video più grandi. Ora mio malgrado, visto che ce l'ho in prima persona, mi rendo conto di alcuni errorini anche vecchi che mi tocca rimettere a posto eheh
Permanent link Postato da Lauryn il 01 set 2007 alle 23:09
07
bel sito complimenti
Permanent link Postato da nix il 19 apr 2008 alle 23:04
08
mmm...
usare un div con x-index=0 e un'immagine con width=100% e height=100%, e un altro div con x-index=1 per i contenuti (e position: absolute per entrambi)
http://wiki.softml.it/CSSzIndex
Permanent link Postato da marco_panino il 27 giu 2008 alle 17:06
09
z-index semmai eheh
in ogni caso usare i due div non risolve il problema tecnico di cui parlava Rossella, che proponeva delle soluzioni "grafiche" al problema dello sfondo con immagine unica ;)
Permanent link Postato da Lauryn il 27 giu 2008 alle 17:06
10
Desidero segnalare qualcosa che potrebbe cambiare l'aspetto usuale dei blog e andare a far parte delle novità proprie del web 2.0 appunto.

Lo SLIRK Layout che ho di recente sviluppato e attualmente in corso di ottimizzazione e bug fixing, risolve l'annoso problema della gestione delle diverse lunghezze del contenuto delle colonne costituenti il layout di un sito (in particolare di un blog).

Tutti gli attuali CMS per blog non contemplano la soluzione da me proposta ma spero che ciò si verifichi in breve.

Anche se non ancora affidabile, ho voluto condividere la mia soluzione sotto licenza GPL Common Creative.
Permanent link Postato da slirk il 11 lug 2008 alle 12:07
Lascia il tuo commento
Aggiungi il tuo commento
Nickname*
E-mail*
  Notifica delle risposte via email
Url
Messaggio*
Tredici più nove fa (in lettere)**
 
 

I campi con * sono obbligatori; per colpa dello spam, qualsiasi url inserita nel nickname verrà automaticamente rimossa.
** Campo obbligatorio che serve per eliminare almeno gli spambot più stupidi! :)


Fields marked with * and ** are mandatory; Beware: because of spam signatures we've received, any url written in nickname field would be automatically removed, and all the blog comments are excluded from any search engine indexing; so, please, do not waste both your and our time in trying to use our blog to rise your ranking in search engines, it just wouldn't happen. Thank you!



Valid html - Note sul copyright - Segnala errori - Cookie policy
🕑