Arieccoci
Yeah!
ormai sgravata da ambasce, ho risolto produrre una bozza HTML prima di partire con lo sviluppo passo passo a quattro mani
Ma è fantastico, quando l'ho visto ho sballato, veramente impressionante, anche se così mi sembra di barare, io non ho fatto assolutamente nulla! Quindi non darò nemmeno una sbirciata al codice, vorrei riuscir a tirarlo su (piano piano) andando a scrivere personalmente, consapevole della difficoltà di tale impresa e che alla fine il risultato non sarà paragonabile a quello che hai fatto tu
Mobile first vs desktop first;
Avevo letto questa parte in uno dei documenti da te linkato, e anche loro consigliavano la partenza da mobile, non riesco però a concepire però di creare un sito partendo da mobile, che solitamente preclude alcune sezioni/funzioni, preferirei partire dalla versione "completa" desktop per poi scremare.
1.
mi ero scordata di dirti di orchestrare la grafica per le versioni mobile (*);
conseguentemente ho improvvisato rendendo maggiormente visibili, su risoluzioni mobile, le icone sociali (ché fare tap su immaginette minute e ravvicinate rasenta il delirio) e lasciando la navigazione a vista estesa (per i menu comprensivi di meno di quattro voci di solito evito tendine a comparsa tramite iconcina ma, ripeto, son gusti che sei liberissimo di modificare in fase di sviluppo);
2.
le immagini (quadratoni) integrano qualche funzione o sono semplici segnaposto?
Nel primo caso si potrebbero figliare effetti interessanti sull'hover (un esempio su tutti, fornito dal magno Codrops con tanto di tutorial);
3.
disegna due ulteriori bozze, una per la pagina 404 (è uso ormai comune crearne di graziosissime) ed una per i browser obsoleti (dove verrà notificato agli incauti visitatori di stare navigando con mezzi arcaici - IE -9, Camino, et cetera, indirizzandoli a valide alternative).
Il redirect alle pagine lo creeremo tramite .htaccess (ne illustrerò le modalità molto più avanti).
1. Mi piace come hai organizzato i contenuti dell'header, le icone nella barra e il Nav subito sotto. Non mi convince molto il background nero delle varie sezioni, probabilmente vedrò come sarà bianco, non è detto che poi mi piaccia di più però.
Darei più importanza al bannerone, ma elaborerò un layout mobile il prima possibile
2.
Per essere sinceri le avevo pensate statiche, ma prendendo ispirazione dal sito che hai linkato potrei farmi influenzare e implementare il bel zoom out/zoom in o scroll in base al focus che voglio dare alla foto, grazie
3. Fighissime le pagine 404, tirerò fuori qualcosa dal cilindro, come sempre. Non ho ben capito se per i browser obsoleti la schermata gli precluderà la visione totale del sito o se è solo un avviso che potrebbero vedere il sito non ottimizzato causa browser del 15-18
logo ed iconcine connaturano lo snello/ridimensionabile formato SVG;
immagino tu non abbia bisogno di istruzioni concernenti l'esportazione vettoriale, ma rammenta di pulire i file generati;
Ok, esporterò tutti i vettori in SVG, e userò la guida per ripulirle (devo ancora leggerla )
non è stata ancora testata/ottimizzata per IE (dal 9+ non dovrebbe generare grane, mentre la versione 8, incapace di gestire nuovi tag HTML5, elementari proprietà quali min/max height e SVG nel background CSS verrà reindirizzata o patchcata strada facendo).
Per il tuo sito è possibile operare una scelta mentre, per lavoro, si è (sempre, non spesso) forzati alla retrocompatibilità IE;
le versioni 6 e 7 sono ormai scavalcabili, ma la 8 è un demone che ossessionerà i webdesigner per molto tempo ancora (gli appartenenti alla categoria rammenteranno con orrore l'eguale longevità dell'ormai defunto IE6 - generante incoercibili patologie, quali: "il mal caduco del Webdesigner").
Agli ottimisti che fidano la 8 dimenticabile faccio presenti due fattori: in barba al termine del supporto, su XP non è possibile installare versioni più recenti di IE, e viene utilizzato a tutt'oggi da più del 20% dell'utenza desktop (un incubo).
Ho capito la parte dell'incompatibilità, non ho capito invece cosa andremo a fare per ottimizzarlo o per scavalcare il problema, posso apparire un po' tardo, ma oggi mi son davvero spremuto per bene davanti allo schermo, son un po stanco in effetti
Spero possa tornarti utile/indicativa per sviluppare le strutture mobile (in verità non l'ho ancora testata neanche sugli emulatori - mi sono limitata al grossolano resize del browser - ma, non connaturando JS/CSS evoluti, non dovrebbe presentare troppe rogne neanche da grezza.
L'ho visualizzata in primis su Iphone, ero fuori casa e non ho saputo resistere, l'effetto è stato veramente "wow" sicuramente il fatto che sia qualcosa che riguarda me mi farà dare un giudizio un po di parte, ma l'impressione che mi ha dato è stata molto positiva, si adatta benissimo sia al portrait che al landscape, ora non ho un tablet per verificare da li, ma da desktop e ridimensionando la finestra è veramente adattabile ad ogni risoluzione senza perdere leggibilità
A presto, in attesa delle nuove grafiche (al seguito tratteremo la costruzione di header/nav + specifiche sul posizionamento absolute del logo).
Edit: ovviamente i CSS sono provvisori e le animazioni in entrata ancora embrionali. Oltre questo, essendo i font da te adottati (Helvetica Neue Ligh/Ultralight) proprietari - come già notificatoti precedentemente da Faxus - mi sono limitata, in attesa tu scelga font differenti da integrare, all'utilizzo del buon Arial, con variante cromatica in sostituzione di spessori non applicabili.
E' a tutti gli effetti l'esperienza più stimolante dell'estate, son davvero contento di come si stanno svolgendo le cose, sei veramente disponibile e gentile, oltre che paziente
P.S: Per il font stavo vedendo su google font, e quello che mi ha colpito è stato l'Open Sans.
Stay tuned
)