errori grafica sito

[kikko088]

ciao a tutti, mi chiamo Francesco, ho avuto qualche problema con il posizionamento di alcune scritte cosi ho provato a scrivere nel forum css, dove mi hanno risolto il problema ma mi hanno messo al corrente di un altro problema + grave...il mio sito è pieno di errori volevo chiedere a voi (mi è stato detto di vedere in questa sezione...) se potevate darmi una mano a risolverli, di css ne so poco e niente però magari guardando un po qua e un po la le guide su internet posso fare qualcosa di buono...
avete qualche guida per correggere almeno gli errori + banali?




kikko088

[rebelia]

che errori?

[kikko088]

è quelo che volevo sapere da voi....ti rimando alla pagina in cui mi è stato detto che ci sono degli errori:

http://forum.html.it/forum/showthrea...readid=1268155

se non c'e ne sono ovviamente è meglio...

kikko088

[rebelia]

intanto per comodita' metto qui un link al tuo sito: http://www.endurodoc.net/

alcuni errori che vedo:

il layout sembrerebbe ottimizzato a 1024, ma in realta' e' troppo largo di qualche pixel e compare la scroll orrizontale; se vuoi ottimizzare un sito per 1024, devi fare una grafica che resti sotto i 950-970 pixel e per far questo devi semplicemente ritagliare le immagini, rimpicciolirle e ridimensionare il codice di conseguenza

altra cosa: l'header sembra fatto di due parti divise e l'effetto finale non e' molto buono: trova il modo di fonderle meglio; un'idea potrebbe essere mettere un bordo nero attorno al pupazzo e appoggiarlo direttamente sull'immagine oppure far sfumare l'immagine sul nero di sfondo del pupazzo

personalmente probabilmente toglierei la foto piu' alta e lascerei lo sfondo nero col titolo (usando magari un font piu' accattivante) e il pupazzo stesso, tanto hai gia' la foto sotto

poi: il rosso sul grigio scuro tende a cavare gli occhi, io sceglierei un colore diverso per quei titoli; per aiutarti puoi usare questo strumento che verifica la leggibilita': http://juicystudio.com/services/colourcontrast.php

per le questioni di codice ti do qualche dritta, ma per approfondire devi rivolgerti alle varie sezioni html/xhtml - javascript - css

qui puoi verificare il peso totale delle pagine: http://www.websiteoptimization.com/s...yze/index.html
devi tener conto che un utente normale aspetta di veder comparire qualcosa al massimo dopo una decina di secondi d'attesa, poi si spazientisce, quindi le immagini e il resto devono essere quanto piu' leggere possibile (di solito salvando in jpg i programmi consentono non solo di aumentarne la compressione, ma anche di verificare qual'e' il peso e il risultato visivo finale, quindi si tratta di trovare il miglior compromesso tra questi due parametri)

il validatore di codice gia' lo conosci: http://validator.w3.org/#validate_by_uri+with_options

sempre il w3c permette anche la validazione dei css: http://jigsaw.w3.org/css-validator/

questa pero' e' solo la primissima parte, infatti puoi tranquillamente validare una struttura fatta a tabelle superannidate senza problemi e i css piu' disparati: il validatore infatti si limita a testare la correttezza sintattica (la "grammatica" del linguaggio in pratica), non certo la sua efficienza

uno degli accorgimenti e' di usare del codice leggero (si ai div, no alle tabelle annidate), esportare tutta la formattazione con i css, limitarsi agli script necessari (SE necessari), controllare il peso delle immagini usate e poi verificare la resa del tutto su quanti piu' browser possibile o almeno sui piu' usati

normalmente ie, ff e opera, che ha anche qualche tool extra tipo la simulazione di visualizzazione su piccoli schermi o simili

ti consiglio anche di installarti la web developer toolbar, un'estensione di ff che permette di accedere velocemente a buona parte degli strumenti che ti ho indicato

spero di averti chiarito un po' le idee

comunque come dicevo per approfondimenti sulle varie parti devi chiedere nelle sezioni dedicate, qui se vuoi/se ti serve continuiamo la discussione sulla grafica e sulle immagini

[kikko088]

innanzitutto ti ringrazio infinitamente per avermi fatto un quadro dei problemi del sito....piano piano cercerò di migliorarlo, per l'header anke io avevo pensato di mettere soltanto la scritta su sfondo nero, però non ho mai trovato un font bello, e poi pensavo non cambiasse molto...Usando wordpress posso cambiare solo il font del titolo oppure devo fare un'immagine con la scritta col font che mi piace?
colori e contrasto: di questo non me ne sono mai accorto, forse ci lavoro cosi tanto su sto sito che ormai mi ci sono abituato , appena riesco provo il tool che mi hai linkato in modo da cambiare colore al testo.
Un chiarimento, hai parlato di tabelle annidate, come si definiscono le tabelle nel css? il div so cos'è però le tabelle nu...
visto che siete cosi gentili vorrei continuare la discussione, visto che anche questo è un'aspetto molto importante per avere un bel sito...quindi qualsiasi consiglio è ben accetto!ora vedrò di tagliare le immagini.





kikko088

[rebelia]

Originariamente inviato da kikko088
devo fare un'immagine con la scritta col font che mi piace?

esatto; per trovarne uno che ti piace, puoi guardare su http://www.dafont.com

Un chiarimento, hai parlato di tabelle annidate, come si definiscono le tabelle nel css? il div so cos'è però le tabelle nu...

niente male se non sai cosa sono le tabelle

scherzi a parte, volevo dire che codice valido non e' necessariamente sinonimo di codice ben fatto, ma solo il suo primo passo e le tabelle annidate mi sono servite solo come esempio (ma se lavori con i div e' meglio, il tutto risulta piu' flessibile)

chiuso argomento tabelle, che qui siamo fuori sezione

ora vedrò di tagliare le immagini.

quando salvi controlla le opzioni avanzate del programma che usi: sicuramente ti dara' una mano a comprimere quanto basta per non penalizzare troppo la foto; di solito se un sito e' prettamente di foto si usa una grafica superleggera e si punta tutto sulla foto stessa, generalmente non piu' di una grande per pagina e non piu' pesante di 60-70kb

se invece le foto sono tante, allora meglio ridurle un poco, in modo da contenerne il peso entro i 20-30kb (ovviamente sempre considerando che meno le fai pesare, meglio e': un po' recuperi sulla compressione e un po' sulla grandezza); per la mia esperienza, di solito una foto compressa al 25% ha un discreto rapporto qualita'/peso (meglio non automatizzare pero', perche' sulle foto con pochi particolari magari puoi spingere ulteriormente la compressione, mentre su altre col 25% di compressione hai una qualita' gia' inaccettabile)

occhio: io dico 25%, ma a volte i programmi te lo segnano al contrario, cioe' 75%, cmq di solito il punto di maggior qualita' e di maggior leggerezza sono chiaramente segnati, quindi non dovresti aver problemi a distinguere i due limiti massimi

eventualmente puoi anche considerare l'opportunita' di dividere la pagina come ti ha suggerito mich_ se non puoi lavorare piu' di tanto sulla foto

[kikko088]

mmm allora il font l'ho cambiato, le immagini del tema pesano già molto poco tutte....il problema è che ora lavoro su un portatile quindi non riesco a vedere lo scroll orizzontale e di conseguenza non lavoro senza vedere cosa succede....devo aspettare che mi arrivi l'hdd del mio pc





kikko088

[rebelia]

Originariamente inviato da kikko088
il problema è che ora lavoro su un portatile quindi non riesco a vedere lo scroll orizzontale

nella web developer toolbar di cui ti parlavo c'e' anche la funzionalita' "resize" proprio per testare i layout alle diverse risoluzioni ed e' esattamente cosi' che io l'ho fatta apparire, perche' normalmente uso una risoluzione di 1920x1200

[kikko088]

perfetto...ora sono riuscito a metterlo a posto!ho capito dove stava l'errore e adesso a 1024 x 768 si vede da dio




kikko088

[rebelia]

ottimo