I migliori Pixel formati per le immagini su siti web

August 30

I migliori Pixel formati per le immagini su siti web


I telefoni cellulari, tablet e monitor di computer hanno diversi usi, gli utenti e le dimensioni, una petizione di principio per gli sviluppatori di siti web: Quali sono le dimensioni dovrebbero essere le mie immagini? Se il sito sarà progettata per essere visitati e visualizzati dagli utenti "standard" su un monitor wide-screen nel 1680-by-1024 pixel di risoluzione, la dimensione del sito web dovrebbe essere adattata per adattarsi all'interno della finestra principale del browser. Se il sito è destinato all'uso da dispositivi mobili, deve essere dimensionato per uno schermo molto più piccolo.

Fluido vs. statici layout

La prima considerazione è se il vostro sito web richiede una dimensione insieme in pixel a tutti. Utilizzando le percentuali invece, è possibile creare un layout "fluido" che ri-dimensioni delle aree di contenuto in modo dinamico, a seconda della dimensione della finestra del browser dell'utente. Quando utilizzato in combinazione con avvolgimento automatico del testo, layout fluido può essere la scelta migliore per la creazione di un sito web per risoluzioni dello schermo standard così come i browser mobili. layout fluidi vengono raggiunti utilizzando "width = 100%" nella dichiarazione CSS del contenuto piuttosto che "width = 960px", per esempio.

Montaggio dimensioni dello schermo standard

Per creare layout "fisso" o statici, la larghezza dei principali div contenuti, involucri o tabelle deve inserirsi all'interno della finestra del browser dell'utente, tenendo conto sia della barra di scorrimento e la barra degli strumenti del browser. È anche prendere in considerazione la progettazione per la maggior parte dei visitatori. Nel 2014, il 99 per cento dei browser web utilizza una risoluzione dello schermo 1024 per 768 pixel o superiore. Questo significa che si potrebbe progettare per pixel 1680-per-1024, ma è una buona idea di puntare ad una via di mezzo. 960 pixel di larghezza e 980 pixel di larghezza sono due larghezze infallibili utilizzati per visualizzare il contenuto comodamente nel browser per chiunque utilizzi un pixel di risoluzione 1024 per 768 o superiore. Questo sistema di scale bene anche su dispositivi mobili in grado di visualizzare i siti web completi. Se questo è troppo stretta, 1080 pixel è il prossimo best-larghezza. Tenere presente l'altezza di una finestra del browser standard in qualsiasi risoluzione per mantenere le informazioni più importanti sopra la "piega" o il punto in cui è richiesta scorrimento.

schermi mobili

Se volete che il vostro sito per guardare bene su una varietà di dispositivi mobili, è necessario progettare appositamente per il dispositivo o creare uno speciale foglio di stile che viene utilizzato da browser mobile per visualizzare una versione 'mobile' della pagina web. Una risoluzione di 240-by-320 pixel è uno standard corrente per la maggior parte degli smartphone e dispositivi mobili Internet-ready come l'iPhone. Si raccomanda di usare le percentuali o layout "fluido" qui, anche se, come molti dispositivi supportano sia la modalità orizzontale e.

La Griglia d'Oro

Forse il miglior sistema per determinare dimensioni del layout è attraverso l'utilizzo di un sistema a griglia. Griglie calcolano regioni perfettamente bilanciate all'interno di un dato di larghezza al fine di fornire una linea guida per come gli elementi dimensione all'interno del layout principale o area di contenuto. Questi elementi potrebbero includere scatole promozionali, barre laterali, ad-spazio o paragrafi. Come esempio, un layout utilizzando una larghezza totale di 1080 pixel e diviso utilizzando la griglia d'oro avrebbe un settore sinistro per post blog che è larga 739 pixel e una barra laterale destra che è largo 311 pixel, sia con un pixel 10 margine. Il risultato finale è un layout perfettamente bilanciato ed allineato. Si può sperimentare con differenti griglie visitando il generatore di sistema di rete (vedi Risorse).