Principi di costruzione di un design responsivo

Saper creare siti web responsivi e quindi un design responsivo è molto importante oggi. La quantità di utenti che usano dispositivi mobili per visitare il tuo sito aumenta dal giorno al giorno, non puoi piu trascurarli. Il tuo sito e il design del tuo sito web devono addatarsi a piccoli schermi.

La maggior parte dei siti hanno un design in grado di addatarsi a una sola risoluzione dello schermo. I questo caso potrebbe sucedere che con una risoluzione di 800x600 sito e meraviglioso, ma con lo schermo 1024x768 sito sembra vuota. Grandi spazi liberi creano l'illusione di un piccolo sito. Sempre più persone stanno iniziando a usare i monitor ad alta risoluzione. Perciò è molto importante progetare siti per qualsiasi risoluzione dello schermo. Nella lezione vedremo come progettare un sito web per qualsiasi risoluzione dello schermo.


Fase 1: Determinare la risoluzione dello schermo più bassa. Prima di iniziare a lavorare sul sito, è necessario determinare la risoluzione dello schermo più bassa. Numerosi studi dicono che risoluzione di 640x480 recentemente molto difusf al momento di oggi viene usato oggi solo dallo 0,5% degli utenti. Quindi, possiamo ignorare una tale risoluzione bassa. Un'altra variabile importante è 800x600. Nonostante la tendenza di diminuzione di utenti che usano scermo con tale risoluzione, non possiamo ancora scaricarli . Ciò significa che il sito deve essere progettato per schermi con una risoluzione di 800x600 o superiore.

Fase 2: Sviluppare la struttura del sito per la risoluzione dello schermo minima. Una volta che la risoluzione minima dello schermo è determinat possiamo cominciare a sviluppare un design del sito per questa grandezza. Ciò significa che tutti gli elementi grafici devono essere progettati in modo che il sito vada bene ad una risoluzione minima dello schermo.

Fase 3: Nello sviluppo del codice HTML, assicurarsi che tutte le tabelle hanno l'unità in percentuale.

Importante: questo è il segreto del design del sito per qualsiasi risoluzione dello schermo. Hai bisogno di lavorare con percentuali piuttosto che pixel. Se si lavora con i pixel, si specifica una dimensione assoluta, mentre i valori precentuali consentono l'utilizzo di dimensioni relative. Le dimensioni sono indicate in percentuale della risoluzione dello schermo. Per avere una chiara comprensione della questione diamo un'occhiata ad un esempio. Se si progetta un sito web per una risoluzione dello schermo di 800x600, probabilmente, si farà una larghezza di lavoro di 800 px e un'altezza di 600 pixel. Ma se si progetta un sito web per qualsiasi risoluzione, è necessario impostare l'altezza e la larghezza della tabella al 100%, in modo che, indipendentemente dalla risoluzione dello schermo, la pagina riempirà tutto lo spazio disponibile. Sarà il 100% della risoluzione dello schermo. I valori percentuali possono essere qualsiasi. Al primo passo facciamo una tabella con 100% di alteza e il 100% di larghezza. È possibile impostare il 95%, se si vuole ottenere un po 'di spazio libero intorno alla pagina.

Fase 4: Per le celle di tabella usate pixel come unita di misura , salvo per il contenuto del sito. Questo è un punto molto importante. È necessario impostare le dimensioni per tutte le cellule tranne per la cellula centrale del sito. La dimensione di questa cellula possiamo non metere .
Dimostrazione di un semplice sito web design Controllare la progettazione del sito ad una risoluzione di
  640 x 480 , 800 x 600 e 1024 x 768

 

Sito per qualsiasi risoluzione dello scermo

 

Menu

Voce 1
Voce 2
Voce 3

Il contenuto del sito
Questo è un semplice sito web progettato per mostrare il design per ogni risoluzione ....
Questo è un semplice sito web progettato per mostrare il design per ogni risoluzione ....

 
 
     
     

Nota:      Larghezza e altezza sono impostate su 100%
    La prima e l'ultima colonne hanno una dimensione fissa di 120 px 10 px, rispettivamente
     La colonna centrale (contenuto) non ha una dimensione in modo che si adatta allo schermo
     La stessa logica è utilizzata per le linee (per altezza). Tutte le linee sono di una dimensione fissa, tranne linea con il contenuto che viene scalata per adattarsi allo schermo. Esempio 2 - Solo Titolo

Prova  con risoluzione 640 x 480 , 800 x 600

1024 x 768

 

 

z

a

g

o

l

o

b

o

k

 

Codice HTML

<table width="100%" border="0" cellspacing="5" cellpadding="5">
<td width="9%"> (Ogni cellula 9%)

Fase 5: Inserire immagini e contenuti. Una volta avete finicon con dimensioni in precentuale della vostra tabella, è necessario inserire le immagini e contenuti. Di solito il logo del sito si mete nell'angolo in alto a sinistra ed i pulsanti di navigazione in alto oppure a sinistra. Per i modelli più complessi, potrebbe essere necessario riempire lo sfondo per completare la progettazione del sito. Ricorda che si progetta sito per qualsiasi risoluzione e le immagini vano messi adeguatamente. Il modo più semplice - utilizzare gli angoli superiori sinistro e destro per immagine fissa e lasciare il mezzo per addatamento a dimensione dello schermo.
Fase 6: Controllare il sito web in tutte le risoluzioni. L'ultimo passo - è una prova del tuo sito web in tutte le risoluzioni che sono disponibili sul computer. Per eseguirlo, è necessario utilizzare il sistema operativo per impostare la risoluzione del monitor. Eseguire il test in tutte le possibili risoluzioni supportate dal monitor.

 

Fonte lezione: www.entheosweb.com

Letto 2560 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso