Come creare un sito web che si adatta a tutti i browser

January 30

Nel design di stampa, ogni persona vede lo stesso logo, gli stessi colori, gli stessi font e lo stesso layout. Questa identità è molto importante nella pubblicità perché stabilisce un brand. Nella progettazione Web, però, i siti web spesso un aspetto diverso da un computer all'altro, a causa delle differenze del browser e le singole impostazioni utente. web designer professionisti combattere queste differenze utilizzando i caratteri più comuni e l'hacking i loro fogli di stile per farli lavorare nelle versioni precedenti di Internet Explorer. Alcuni progettisti preferiscono anche a fare il loro layout "fluido" per adeguarsi alle dimensioni dello schermo variabili.

istruzione

1 Progetta il tuo sito web per rendere al meglio in Firefox, Chrome o Safari. Questi browser tutti interpretano il codice per gli standard del World Wide Web Consortium (W3C). Quando si utilizzano fogli di stile CSS versione a tre (CSS3), assicurarsi di includere le versioni specifiche per il browser di ogni stile CSS3. Ad esempio, quando si imposta "border-radius," utilizzare sia "-khtml-border-radius" e "-moz-border-radius."

2 Impostare le dimensioni di tutti i testi e <div> tag per percentuali al posto dei numeri specifici. In questo modo si permette al sito di spremere ed espandere a seconda delle dimensioni dello schermo e le impostazioni dell'utente. Solo impostare alcuni elementi di design - come ad esempio una barra laterale contenente pubblicità o la navigazione - a un numero specifico di pixel. Testare la progettazione con l'apertura del sito in un browser. Ridimensionare la finestra del browser più volte per testare la flessibilità del layout.

3 Scegliere un buon stack di carattere che contiene i caratteri comuni alla maggior parte dei computer. pile caratteri sono liste di font del sito web utilizza per ogni elemento in CSS, come ad esempio "p {font-family: Arial, Helvetica, sans-serif}". Nel caso di questo esempio, il sito utilizza Arial per ogni punto sulla pagina, o userà Helvetica se Arial non è disponibile. Se il computer dell'utente non dispone di uno di questi font installati, il sito utilizza font di default sans-serif del browser.

4 Aggiungere la riga <! - [If lt 9 IE]> prima di qualsiasi altro collegamento o tag di stile nel codice HTML della pagina Web. Dopo questa riga, aggiungere un tag link specificando un nuovo file di foglio di stile si creerà per Internet Explorer. Porre fine a questo "hack" aggiungendo la riga <[endif] -> dopo il tag link. Ora creare un nuovo foglio di stile. Apri il tuo sito web in Internet Explorer 6 e cominciare fissare il design del sito. Aggiungere le modifiche apportate da nuove regole di stile nel nuovo foglio di stile. Quando una persona esplora il vostro sito web utilizzando una versione di IE di età superiore a 9, vedranno il sito in stile con queste regole.