Tradotto liberamente da questo post su creativebits:

10 comandamenti del web design

1. Non abuserai di flash
2. Non occulterai il Contenuto
3. Non confonderai il tuo prossimo
4. Non cederai alla tentazione di abusare di riflessi e luccichii
5. Rifuggi gli appellativi superflui e preserva le vocali nel nome della tua azienda web 2.0
6. Pregherai dinnanzi all'altare della tipografia
7. Ti adoprerai per creare Atmosfere coinvolgenti
8. Va e crea la tua Community
9. Confiderai solo in ciò che è assodato
10. Non avrai altro dio all'infuori del Contenuto

E' già la seconda volta che mi capita! La prima pensavo fosse un errore, una trasposizione di grafica cartacea ma a questo punto cominciano a venirmi dei dubbi.

I fatti.
Collaborando con Manuele di Atipica.it mi capita di dover splittare e ottimizzare layout creati da altri, infatti a volte ci commissionano siti la cui parte grafica è già stata creata.
La prima volta mi arriva una jpg (!) a 300dpi del layout, perplessa chiedo per che dimensione di monitor debba essere ottimizzato, dato che, per come è fatto, è evidente che non può essere fluido. Mi dicono fate voi (fate voi?) ... cominciamo bene...

Cerco di fare del mio meglio per sistemare tutto in modo da minimizzare i problemi dovuti all'antialias in ridimensionamento, cercando anche di far combaciare il risultato con una grandezza di font adeguata e leggibile (date le proporzioni sballate che ne uscivano dal ridimensionamento).

Insomma, sebbene perdendo un enormità di tempo in più del previsto, me la cavo, non senza però chiedere spiegazioni.
Cercando di  indagare sul perchè di questa scelta mi viene detto che così facendo il layout si poteva vedere bene stampato su carta per presentarlo al cliente... mah.... mi chiedo perchè mai un layout di sito non si possa presentare su un monitor che tra l'altro rende sicuramente di più l'idea del risultato finito, io l'ho sempre fatto con ottimi risultati!
Mi convinco che questo grafico è strano e mi auguro sia un caso isolato.

Invece mi sbaglio, perchè questa settimana mi si presenta un altro grafico con un layout in psd enorme e a 300 dpi, io allucinata sempre più domando per che risoluzione va ottimizzato e mi risponde che la dimensione giusta è quella che si ottiene ridimensionando a 72 dpi il layout che mi ha dato. Ma per din dirin diana... allora lo sai che il web supporta 72 dpi e non 300, allora perchè mi molli sto mastodonte per cui io devo impazzire a sistemare gli errori di ridimensionamento (leggi righine che diventano invisibili, bullet che si pasticciano, loghetti che non si leggono, font che diventano di 6 o 7 punti e quindi illeggibili ecc...)? Perchè? Perchè?

Data la strana coincidenza ho provato, cercato, imprecato ma nulla... non mi è venuta in mente una singola buona ragione per cui un layout fatto apposta per il web debba venir studiato a 300dpi.

Avete delle idee? Perchè io davvero non me lo spiego.

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.

Ormai in rete si trovano generatori di qualunque cosa, alcuni pessimi altri effettivamente utili.
In questa carrellata ho selezionato quelli che mi sembrano più interessanti, innovativi o divertenti. Il tono è volutamente ironico perchè, ovviamente, trovo davvero poco creativo utilizzare questi automatismi senza aggiungere la propria fantasia.
Il mio consiglio è di usarli con parsimonia senza dimenticarsi mai di aggiungere qualcosa di personale; nella massa dei siti presenti su internet l'importante è differenziarsi non omologarsi.

Partiamo dal nome.
Non sapete che nome dare al vostra azienda o al vostro progetto web 2.0? Nessun problema c'è web 2.0 name generator per voi

Dovete trovare un buon nome di dominio? Ecco nameboy ultimate domain name generator che vi viene in aiuto.
Nota: non fidatevi troppo della disponibilità dei domini segnalata in questo sito dato che sostiene che ideespettinate.com sia libero O_o

Deciso il nome è ora di occuparsi del logo.
Potete affidarvi al pratico web2.0 logo creator:
o al facile quanto divertente flickr logo maker Bene, ora che il logo è fatto possiamo pensare allo sfondo.
Se desideriamo sfondi rigati tanto di moda possiamo affidarci al pratico stripe generator,
se invece desideriamo uno sfondo scozzese (tartan) possiamo giocare con il semplice quanto efficace  tartan maker.

Ma, perbacco, forse abbiamo corso troppo: dobbiamo prima trovare una giusta cromia.
Qui la scelta di generatori è vasta (pensate che no ho fatto uno anch'io!)
Partiamo dal "più cool" di tutti, ovvero Kuler, il generatore di colori della adobe;
poi ci sono altre proposte interessanti, come, ad esempio, color blander o color scheme generator.

Perfetto, ora passiamo ad occuparci dei bottoni.
Se vogliamo uno stile web 2.0 glossy possiamo affidarci alle procedure sapienti di my coll buttons:

se invece siamo interessati ai così detti antipixel, abbiamo ben due possibilità:
pixel button e botton maker online.


Fatti i bottoni possiamo dedicarci all'arrotondamento degli angoli dei box, utilizzando Ajax Rounded Corners Generator.

Per finire possiamo creare la favicon con favicon generator,
e anche una bellissima gif di caricamento con ajaxload.


Et voilà, il sito è servito!

La tendenza a creare layout con strutture sempre analoghe, facendo seguire al navigatore percorsi conosciuti e assimilati, lo aiuta a non perdersi (o almeno questo è quello che speriamo) nei meandri di un sito web.

Questa stessa tendenza (in cui io stessa mi riconosco) finisce però per diventare un limite. Un limite invisibile che a volte non ci permette di vedere nuove e semplici soluzioni al problema.

Me ne sono resa conto oggi guardano alcuni siti linkati da Design Meltdown.

Guardate anche voi questi siti:
uno, due e tre

Cos'hanno in comune? Il menù di navigazione ben piazzato in basso, direte voi. Ok, questa era facile, dico io...
Ora provate a navigarli...

Non trovate la navigazione ergonomica? Io sì.
Quando si scorre un pagina per leggerla, ci si ritrova inevitabilmente col cursore oltre la metà inferiore dello schermo: bene, per cliccare una diversa voce di menù normalmente dobbiamo spostare il cursore (e la mano) in alto, spesso in alto a sinistra. In questo caso no, il menù è lì sotto pronto ad aspettare il nostro successivo click.

L'uovo di colombo direi. Credo che questa nuova possibilità di strutturare un sito la prenderò presto in considerazione per i miei prossimi lavori.

Sempre in materia di layout innovativi vi mostro anche un'altra soluzione interessante:
eyebeam.org

eyebeam propone una soluzione decisamente innovativa ma molto navigabile e intuitiva.
Inutile spiegarla a parole... provatela!