“Mobilitazione” generale: si passa al responsive design. Come realizzare un design reattivo con i CSS

Di recente, vengono sviluppate sempre più tecnologie e vari dispositivi (tablet, smartphone, monitor) con l'aiuto di quali siti vengono visualizzati.

Nel campo del quale otteniamo un'enorme varietà di diverse risoluzioni dello schermo, il che a sua volta porta alla difficoltà di ottenere informazioni dai siti. Per rendere le informazioni ben leggibili e facilmente visualizzabili sulla maggior parte dei dispositivi, è stata sviluppata una tecnologia di progettazione adattiva.

L'obiettivo del responsive design è sviluppare un design universale del sito web, che a sua volta ti permetta di visualizzare e interagire con la risorsa da diversi dispositivi.

Inoltre, questa tecnologia prevede lo sviluppo di una versione del sito Web per tutti i dispositivi e non per diversi.

Web design reattivo(English Adaptive Web Design) - progettazione di pagine web che garantisce la corretta visualizzazione del sito sui vari dispositivi connessi a Internet e si adatta dinamicamente alle dimensioni date della finestra del browser.

Principi di base del responsive design:

• Modello di sito web responsive, la capacità del template di adattarsi alle diverse risoluzioni dello schermo dei dispositivi dal monitor di un computer allo smartphone;
• Adattamento e spostamento di blocchi di contenuto, la capacità dei blocchi di contenuto, a seconda della risoluzione dello schermo del dispositivo, di assumere le dimensioni richieste, nonché la capacità di spostarsi in un'altra posizione nel layout;
• Adattare le immagini, la capacità delle immagini di ridimensionarsi in base alla risoluzione dello schermo o caricare un'immagine più adattata con meno peso e dimensioni;
• Utilizzo della rete flessibile, consente di modificare rapidamente il design del layout;
• Nascondere i blocchi meno importanti, su schermi piccoli, alcuni blocchi potrebbero essere nascosti;
• Riprogettazione della fruibilità degli elementi di navigazione, poiché sui dispositivi mobili, a causa della bassa risoluzione, gli elementi di navigazione diventano meno cliccabili, vengono rielaborati, rendendoli comodi da usare;
• Semplificare un numero di elementi in una pagina web, alcuni elementi sono semplificati per l'utilizzo su dispositivi mobili;
• Adattamento dei contenuti video, dovresti considerare anche l'adattamento del video;
• Utilizzo delle query multimediali(media query), consentono di creare un layout responsive;
• Mobile prima(mobile first), la progettazione di design reattivi inizia con un mockup per dispositivi mobili.

Riguardo all'ultimo punto, se sia giusto o meno è una domanda difficile, almeno molti sostengono che sia necessario iniziare a sviluppare un layout con una versione per dispositivi mobili. Aderisco a una visione leggermente diversa, è più facile per me sviluppare un layout per la massima risoluzione con una griglia ben congegnata e funzionalità complete, e solo successivamente adattarlo ad altre risoluzioni.

Dimensioni del layout del design reattivo

Qualche tempo fa, nel 2012, ho scritto un breve articolo su quali scegliere quando si sviluppa un design: un layout di un sito fisso. Questo articolo ha ricevuto molto interesse tra i lettori, si scopre che questo problema interessa molti designer e sviluppatori alle prime armi. A questo proposito, in questo articolo ho deciso di evidenziare anche questo problema.

Quindi, puramente dalla mia visione, delineerò il principio e le dimensioni per cui dovrebbe essere sviluppato il layout.

Se segui prima il principio del mobile, allora ci saranno tali dimensioni di risoluzioni per le quali è necessario sviluppare un layout 320 px / 480 px / 768 px / 1024 px / 1280 px forse di più dipende dai compiti.

L'immagine è simile a questa, ma spesso per una certa risoluzione non è necessario creare un layout, ad esempio per 480px. se il layout non si interrompe nel mezzo 768 - 320 px.

Naturalmente, creeremo una tela in Photoshop tenendo conto del riempimento, delle barre di scorrimento e di tutto il resto, proprio come un normale layout. per facilità di sviluppo e progettazione del layout più veloce. Molte persone usano i framework nel loro lavoro e quindi si affidano alla griglia del framework su cui si stanno sviluppando.

Grazie a questo, saremo in grado di mostrare al progettista del layout come si comporterà il layout su varie risoluzioni dello schermo e dispositivi. Ad esempio, ho abbozzato un piccolo layout, puoi vederlo nello screenshot qui sotto.

Media query e viewport in responsive design

Per indicare al browser come visualizzare le dimensioni della pagina e modificarne la scala, viene utilizzato il meta tag viewport. Questo meta tag è scritto in luogo. Consente agli sviluppatori di impostare la larghezza dello schermo per i dispositivi, che è scritta in css.

Il meta tag viewport è scritto in questo modo:

• larghezza = larghezza del dispositivo- significa che la larghezza della pagina del sito è impostata in base alla larghezza dello schermo del dispositivo.
• scala iniziale = 1.0- questo attributo dirà al browser di impostare una corrispondenza in scala 1: 1 per i pixel, che significa non ridimensionare.

A sinistra senza meta tag, a destra utilizzando il meta tag viewport.

Inoltre, è possibile impostare altri attributi e parametri per il meta tag.

Media query

CSS3 gioca un ruolo importante nello sviluppo di siti web responsive mediainterrogazioni(interrogazioni multimediali). Le query sui media includono il tipo di media (stampanti, smartphone, schermi, TV, proiettori, ecc.) e le condizioni, che possono essere vere o false (vero, falso). Verranno applicati stili CSS diversi a seconda che il tipo di supporto sia corretto e che la condizione sia soddisfatta. Se è vero, verranno applicati gli stili specificati in questa media query, se è falso, verranno applicati i soliti stili CSS.

Grazie a tali richieste vengono realizzate diverse visualizzazioni del sito, per mobile, tablet e monitor. Supportato da tutti i browser moderni.

È scritto come segue:

@media screen e (max-width: 1000px) (.class (proprietà: valore;))

• @media- interrogazione multimediale;
• schermo- tipo di supporto (chiamato anche tipo di supporto);
• larghezza massima: 1000 px- la condizione che deve essere soddisfatta (nel nostro caso gli stili verranno applicati se la larghezza della finestra è inferiore a 1000px);
• . classe- vengono registrati i corrispondenti selettori (classi, id) in cui vengono assegnati nuovi valori alle proprietà.

Nella maggior parte dei casi, le seguenti funzionalità multimediali vengono utilizzate per sviluppare progetti reattivi.

• larghezza massima: larghezza- significa che se la larghezza della finestra del browser è inferiore alla larghezza specificata, allora la condizione è soddisfatta e vengono applicati gli stili corrispondenti (esempio: max-width: 768px, significa che se la larghezza della finestra del browser è inferiore a 768px , quindi devono essere utilizzati gli stili specificati nella richiesta di supporto).
• larghezza minima: larghezza- significa che se la larghezza della finestra del browser è maggiore della larghezza specificata, allora la condizione è soddisfatta e gli stili specificati vengono applicati nella richiesta (esempio: min-width: 480px).

Ma possono essere utilizzate anche altre funzioni: colore, larghezza del dispositivo, griglia, altezza, orientamento: orizzontale, orientamento: verticale, risoluzione e altro.

I valori utilizzati nelle funzioni multimediali sono indicati anche come punti di interruzione(punti di non ritorno o checkpoint). A questi punti di interruzione, hai indovinato, il design del sito cambia.

• 320 px- cellulare
• 480px- cellulare
• 768 px- compresse
• 1024 px- tablet, netbook
• 1280 px e altro ancora: personal computer.

I punti di controllo potrebbero non essere rigidamente legati a una determinata risoluzione dello schermo, poiché possono essere creati con parametri diversi in quei valori in cui il layout è visibilmente rotto, visualizzato in modo errato e cessa di essere visualizzato correttamente.

Gli operatori logici vengono utilizzati anche nelle query multimediali, ad esempio:

• e- AND logico, utilizzato per combinare più condizioni (esempio: @media print e (color) (...)).
• non- NOT logico, usato per negare una condizione (esempio: @media not all e (color) (...)).
• solo- utilizzato per i browser meno recenti che non supportano le query multimediali (esempio: solo schermo @media e (larghezza massima: 1300 px) (…)).

Le media query sono scritte alla fine del foglio di stile, dopo tutti i principali stili CSS.

Come realizzare un design di un sito web responsive da un layout fisso

Quindi, supponiamo che tu abbia un tema del sito Web di dimensioni fisse che desideri mantenere e creare un layout reattivo, ma non sai da dove cominciare. Successivamente, ti dirò come è possibile farlo, se può essere fatto del tutto e cosa deve essere fatto, da dove cominciare.

1. Prima di tutto, facciamo una copia di backup del modello (tema), per ogni evenienza.
2. Successivamente, abbiamo bisogno di un programma per modificare css, può essere qualsiasi editor di codice, ad esempio parentesi di Adobe, è gratuito o Notepad ++.
3. E anche il browser google chrome, con il suo code inspector (chiamato dal tasto F12).

Quindi, iniziamo a modificare, per comodità, puoi trasferire il modello a Denver (server locale) o a un sottodominio, poiché è più conveniente per chiunque in modo che gli utenti non vedano tutte le modifiche che si verificheranno con il layout. Prima di tutto, aggiungiamo il meta tag viewport, ne ho scritto sopra come consigliato.
Successivamente, dobbiamo convertire tutte le unità di misura statiche in unità relative.

Quelli sono px, devi tradurli in% e impostare i caratteri su em. Ciò riguarda principalmente larghezze e caratteri.

Lascia la larghezza dell'involucro del contenitore principale (larghezza massima: 960 px;) invariata, se scritta, cambia la larghezza in larghezza massima. Per il resto dei contenitori, cambieremo la larghezza al rapporto%. Traduciamo secondo la formula:

Dimensioni del contenitore (px) / dimensione del contenitore principale (genitore) in (px) * 100% = risultato (%)

Ad esempio, un contenitore del corpo del sito statico è 720 px, la dimensione del contenitore principale (il suo genitore), ad esempio, lo standard 960 px, quindi otteniamo i seguenti 720/960 * 100 = 75%.

Pertanto, convertiremo il nostro layout statico in uno di gomma. Successivamente, tradurremo i nostri caratteri, se sono in px v em per farlo, ancora una volta, usa la formula:

Dimensione carattere (px) / 16 px (dimensione standard) = dimensione carattere (em)

Ad esempio, la dimensione del carattere è 32px, quindi 32/16 = 2em.
Quindi renderemo le nostre immagini responsive. Per fare ciò, scriveremo le seguenti proprietà e valori in css.

Img (larghezza massima: 100%; altezza: auto;)

Questo metodo adatta bene le immagini, l'unica cosa che non riduce il peso delle immagini, il che significa che le immagini con un peso elevato verranno caricate sui dispositivi mobili. Per evitare ciò, è necessario caricare immagini diverse a seconda delle dimensioni dello schermo.

Dopo aver apportato tutte queste modifiche, se hai apportato tutto correttamente, nulla sul sito dovrebbe cambiare e se provi a ridurre le finestre del browser, il design e le immagini dovrebbero ridursi.

Bene, ora la nostra base è pronta, ora è necessario determinare i punti di controllo in corrispondenza dei quali verrà ricostruito il layout, pensare a come si comporteranno i blocchi, cosa nasconderemo e registrare il tutto nelle query media. Determinare questi punti critici utilizzando il browser Google Chrome.

Apriamo il nostro layout in esso, premi il tasto F12 e ridurremo le dimensioni della finestra del browser. Nell'angolo in alto a destra, scriveremo la dimensione della finestra, ci interessa il primo valore, indica la larghezza. È necessario rimpicciolire fino a quando il disegno non viene più visualizzato correttamente. Alla dimensione in cui il layout non sembra corretto, creeremo un punto di interruzione.
Dopo aver identificato il primo punto di flesso, lo scriveremo nel file style.css alla fine dopo tutti gli stili principali. Supponiamo che il nostro layout abbia una barra laterale sinistra e una parte di contenuto con annunci e che a 910 px il sito inizi a essere visualizzato in modo errato. In questo caso, registreremo la seguente media query.

@media only screen e (max-width: 910px) (/ * rendiamo la parte del contenuto a tutta larghezza, annulliamo l'allineamento * / section (width: 100%; float: none;) / * rendiamo anche la barra laterale a tutta larghezza, annulla allineamento * / a parte (larghezza: 100%; float: nessuno;))

Se questi blocchi hanno margini, padding, dovrebbero essere azzerati o presi in considerazione quando si scrive la larghezza. Per esempio, imbottitura: 2%; quindi la larghezza sarà scritta come segue larghezza: 96%;.

Quindi abbiamo adattato il nostro layout a meno di 910 px. Se la finestra del browser è inferiore a 910 px, il contenuto diventerà a larghezza intera e la barra laterale rientrerà nella parte del contenuto e diventerà anche a larghezza intera.

Con lo stesso principio, creiamo il resto dei punti di controllo, troviamo la larghezza alla quale il layout si interrompe (non sembra corretto) scriviamo la media query, formiamo gli stili per essa, impostiamo la larghezza dei blocchi, possiamo nascondere meno importanti blocchi ( display: nessuno).

Come avrete notato, in questo esempio, i breakpoint non saranno rigidamente attaccati alle dimensioni dello schermo, il che a sua volta garantisce una buona visualizzazione del sito in vari dispositivi, indipendentemente dalla loro risoluzione.

Dovrai lavorare sodo, ma il risultato non tarderà ad arrivare e sarai in grado di realizzare autonomamente un design del sito web responsive da un layout fisso.

Bene, questo sembra essere tutto ciò che volevo dire in questo articolo, volevo scrivere un po' sul design reattivo, ma si è rivelato piuttosto voluminoso, spero che il materiale ti sia utile.

Ciao a tutti! Di recente, dopo aver esaminato le statistiche di uno dei miei progetti, mi sono reso conto che è ora di imparare a creare un design di siti Web responsive, ovvero un design che avrà un bell'aspetto sia su computer fissi e laptop, sia su dispositivi mobili. Dai un'occhiata tu stesso, suggerisce Metrica.

Ti piace questa foto? Forse, in alcuni argomenti, la percentuale di traffico mobile sarà inferiore, in altri sarà maggiore, ma in ogni caso non è più possibile ignorare i visitatori che ti leggono da smartphone o tablet.

Sai come gli utenti di dispositivi mobili vedono il tuo sito web? Fortunatamente, esiste un servizio eccellente per il controllo: responsinator.com

Tutto qui è scandalosamente semplice: inserisci l'indirizzo del sito web e vedi come appare sui dispositivi mobili. Diamo un'occhiata a un blog che probabilmente tutti conoscono come esempio.

Alexander Borisov ha un bellissimo modello, puoi immediatamente vedere che i soldi sono stati investiti nel design e nel layout, e non pochi soldi. Tuttavia, è molto scomodo leggere un blog da un telefono e non mi stupirei se la frequenza di rimbalzo tra gli utenti mobili fosse molto più elevata rispetto a quelli che visitano il sito da un computer.

Cosa fare? Ci sono due vie d'uscita: lascia tutto così com'è e guarda come altri progetti aggirano il tuo nei risultati dei motori di ricerca o rendono reattivo il design del tuo sito web.

Cos'è il design reattivo?

All'inizio non vedevo la differenza tra layout reattivi e fluidi, quando la dimensione dei blocchi cambia a seconda della larghezza dello schermo. Tuttavia, c'è una differenza.

Il design reattivo non si limita ad allungarsi o restringersi in larghezza, ma si adatta allo schermo, a volte cambiando completamente lo stile delle scatole.

L'esempio più semplice: l'area del contenuto viene estesa all'intera larghezza dello schermo e la barra laterale viene spostata verso il basso o scompare del tutto dalla pagina. Oppure il menu si trasforma dal solito orizzontale in un elenco a discesa.

Come realizzare un design responsive per il tuo sito web

Potrebbero esserci diverse opzioni a seconda del budget e della conoscenza di CSS/HTML.

Ordina un layout reattivo da un libero professionista

L'opzione più corretta, secondo me, ed è anche la più impopolare. Perché il piacere non è economico. Eppure, se i fondi lo consentono e non c'è desiderio di capire la complessità del layout, è meglio trovare uno studio o un libero professionista che adatti il ​​tuo modello per dispositivi mobili o ne crei uno nuovo. E sai già come verificarne il funzionamento su dispositivi con risoluzioni diverse: responsinator.com per aiutarti.

Trova un disegno finito

Ultimamente, quasi tutti i designer hanno cercato di adattare i propri modelli ai dispositivi mobili. Puoi cercare un design già pronto, ad esempio, qui:

• www.templatemonster.com è una delle raccolte più popolari di modelli a pagamento per vari CMS e solo siti HTML.
• www.templatemo.com - Molte opzioni di design moderno gratuite.

Questa opzione è adatta a coloro che non sono alla ricerca di un design esclusivo o sono in grado di apportare le proprie modifiche al codice per rendere unico il modello.

Usa framework

Framework (framework): puoi dire lo scheletro del modello, i suoi file principali e la griglia di blocchi. I designer li adorano per la loro facilità d'uso e risparmio di tempo, perché il "pesce" già pronto del modello ti consente di non perdere tempo con la routine. Se sai come lavorare con i framework, usarli per creare design reattivi è un'ottima soluzione.

Troverai un enorme elenco di framework reattivi per tutti i gusti su Habré. Ma la maggior parte di questi sono piuttosto difficili da usare e pesanti in volume. Pertanto, per chi ama il minimalismo, consiglio un altro elenco di framework reattivi leggeri da Beloweb.com. Allo stesso tempo, dai un'occhiata più da vicino al blog, ci sono molti "dolci" utili per designer e designer di layout.

Crea il layout da solo

Questo metodo è per coloro che non sono alla ricerca di modi semplici e vogliono capirlo da soli. Fondamentalmente, per rendere il tuo modello reattivo, devi usare due cose:

Il meta tag del viewport
Che determina il tipo di dispositivo da cui il visitatore è entrato nel sito e imposta la corretta larghezza dello schermo. Basta copiare questo codice nella testa del tuo sito.

@Regola dei media
Grazie al quale possiamo scrivere stili diversi per gli stessi blocchi nel nostro file css. Sembra così:

#left (larghezza: 600px; float: left; margin-right: 10px;) #right (larghezza: 400px; float: right;) @media only screen and (max-width: 1010px) (#left, #right (larghezza : 98%; float: nessuno; margin: 10px auto;))

In questo esempio, il blocco #sinistraè largo 600 pixel e sarà posizionato a sinistra del blocco #Giusto 400 pixel di larghezza. Ma se la risoluzione del monitor è inferiore a 1010 pixel, rimuoviamo l'involucro da entrambe le caselle e le allunghiamo al 98% della larghezza dello schermo.

E in questo modo, devi scrivere le regole per le seguenti dimensioni dello schermo:

• 320px per iPhone 3-5 in posizione verticale
• 480px per iPhone 3-4 in orizzontale
• 568px per iPhone 5 in orizzontale
• 384px per smartphone in posizione verticale
• 600px per smartphone in posizione orizzontale
• 768px per iPad in posizione orizzontale
• 1024px per iPad in posizione verticale

Un elenco completo delle risoluzioni può essere trovato su responsinator.com o nel rapporto Yandex.Metrica per il tuo sito (sezione Tecnologie / Risoluzioni display). In una parola, per coloro che hanno familiarità con il layout dei siti, non sarà difficile capire questo problema.

Sai, raramente mi collego a corsi a pagamento (perché non consiglio mai qualcosa che io stesso non ho mai usato), ma questo è davvero il miglior tutorial di layout che abbia mai visto. È grazie a Mikhail che il modello del mio blog ora non è solo adattato a diverse risoluzioni dello schermo, è diventato più leggero della versione precedente ed è ottimizzato meglio per i motori di ricerca.

A proposito, se stai leggendo un articolo da un telefono cellulare, scrivi, è tutto a posto, è tutto conveniente? E per oggi è tutto. Se hai domande o aggiunte, benvenuto nei commenti, come al solito sono aperti a tutti.

La presenza di un design reattivo è una necessità: la vita lo ha dimostrato con il proprio rake, nessun Mobile Joomla dà un tale effetto come l'adattamento diretto del sito. Oggi ti mostrerò come creare un design reattivo modificando gli stili CSS usando la testa e le dita. Non sarà possibile sistemare tutto sugli scaffali, poiché ogni modello ha sfumature, ma darò l'impulso per iniziare l'adattamento.

Adattamento desktop

Innanzitutto, eseguiamo l'adattamento per il desktop. Questa è la fase base, da cui poi iniziano le danze con il tamburello. Molte persone percepiscono erroneamente il mondo, pensando di non avere problemi con la visualizzazione del sito sui normali computer, poiché il modello è stato creato da qualcuno e sembra esattamente alla risoluzione normale. Alla risoluzione del tuo monitor, sì, ma come su uno schermo più grande, come guardi con assoluta e pixel su uno schermo con una risoluzione di 1920x1080? Lo scopo dell'adattamento del design è la normale visualizzazione del sito su dispositivi mobili e l'assenza di stipiti su schermi di grandi dimensioni.

Cosa stiamo facendo? La cosa principale è tradurre tutti i valori grandi nel css del modello da pixel (px) a percentuali (%). Ci sono alcune regole qui:

1. - Cambia px in% solo per valori grandi, cambia 5 px in 1% (ad esempio) non è necessario,
2. - Fai tutto il lavoro tramite Firebug, quindi trasferisci i valori nella vita reale.

Un po' per una comprensione generale. Hai un sito in cui la larghezza della pagina è 1000 px, ha tre blocchi: un 800 px centrale e due barre del sito laterali di 100 px ciascuna. Ciò significa che dopo la sostituzione con le percentuali, la dimensione della pagina diventerà 100%, il contenitore centrale sarà 80% e i blocchi laterali saranno 10% ciascuno. Ruvido, ma comprensibile. Ora un po' più di dettagli.

Prima dell'adattamento (ho salvato il vecchio file CSS per la cronologia), il contenitore principale era scritto negli stili come questo:

#contenitore (margine: 0 auto; larghezza: 1100px; ...

Dopo l'adattamento, è diventato così:

#container (margine: 0 auto; larghezza: 77%; overflow: nascosto! importante; ...

Il menu in alto è cambiato da:

Top-menu> ul> li ul (larghezza: 155px; ...

Top-menu> ul> li ul (larghezza: 90%; ...

E l'offset del blocco di contenuto è implementato con:

#contenuto (margine: 0 220px; ...

#contenuto (margine: 0 20% ...

Attenzione al codice:

overflow: nascosto!importante;

Li usiamo per rimuovere lo scorrimento orizzontale, questo è utile per l'adattamento mobile, a volte ha senso indicare solo il divieto di scorrimento orizzontale usando:

overflow-x: nascosto!importante;

Esegui tutto il lavoro tramite Firebug o Google Inspector, controlla con i tuoi occhi: il sito dovrebbe avere lo stesso aspetto dopo aver trasferito px a%. Non è ancora possibile comprimere lo schermo, non abbiamo ancora raggiunto l'adattamento mobile, mentre abbiamo svolto il lavoro di base per schermi di grandi dimensioni.

CSS per dispositivi mobili

La base è stata creata, tra l'altro, questa è la fase più difficile, ora è necessario assicurarsi che il sito venga visualizzato correttamente su tutti i dispositivi mobili. Le precedenti manipolazioni non sono sufficienti, poiché non funzionerà per comprimere tutto in percentuale sotto un piccolo schermo. D'accordo, è impossibile vedere la barra del sito al 10% su uno smartphone con una risoluzione di 320 px.

Avremo bisogno di usare @media screen e, che apporta modifiche agli stili per i dispositivi con una risoluzione specifica. Per prima cosa ho determinato riducendo lo schermo del browser a quale risoluzione avevo problemi di visualizzazione. Restringendo lo schermo, ho trovato il mio punto di "curvatura", inizia con una larghezza di 1000 px, quindi è necessario scrivere stili mobili di base da qui - tutto ciò che verrà visualizzato di più negli stili di un normale desktop, che è meno in stili separati.

Esempio di schermata @media e

Ho scritto CSS per dispositivi mobili su template Joomla 1.5 come questo:

@media screen and (max-width: 500px) (body, tbody (-moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;)

@media screen e (max-width: 400px) (td (word-break: break-all;)

@media screen e (max-width: 1000px) (td (word-break: break-all;) .page-numbers, #footer, #navigation, # header, .logo, .nav-box (display: nessuno! importante ;) #content (posizione: auto; larghezza: 80%; margine inferiore: 0; margine sinistro: 10%; margine destro: 20%;) #contenitore (larghezza: 90%! importante;) .content-box (larghezza: 110%) .content-box h1 (dimensione carattere: 130%;) .content-box h2 (dimensione carattere: 110%;) .content-box h3 (dimensione carattere: 120%;) .content -box h4 (font-size: 100%;) .top-menu> div (padding-right: 0px! importante;) img (max-larghezza: 96%! importante; altezza: auto! importante;)

Qualche precisazione sul codice.

Quando la larghezza dello schermo è inferiore a 1000 px, le barre laterali del sito, l'intestazione, l'impaginazione e il piè di pagina non vengono più visualizzati. Il mio IMHO - non sono necessari nella versione mobile. Questo è ciò che fa il codice:

Numeri di pagina, #footer, #navigation, # header, .logo, .nav-box (display: nessuno! Importante;).

Per impostazione predefinita, in Joomla 3 mobile e versioni successive, i blocchi laterali scendono, allungando la pagina fino a diventare una vergogna, quindi sui nuovi motori puoi modificare qualcosa con le maniglie.

Inoltre, sono indicati altri valori per i blocchi del contenitore principale e della finestra del contenuto e l'output H1-H4 viene convertito in percentuali (per il desktop, i pixel per me vanno bene). Sono state apportate modifiche alla visualizzazione del menu in alto (per una buona ragione, deve essere ridotto a icona, ma questo non è fondamentale e lo farò in seguito) ed è stata modificata la visualizzazione delle immagini:

img (larghezza massima: 96%! importante; altezza: auto! importante;).

Per loro, è indicato che la dimensione massima dell'immagine in larghezza è del 96% (con i margini bene) e l'altezza è automatica.

Le specifiche sono finite, ancora una volta nel senso generale di adattamento del sito (design) tramite CSS.

1. - Modifica i valori px grandi del%,
2. - Registriamo separatamente @media screen e per dispositivi mobili.

Attraverso @media screen e, assicurati di chiudere i blocchi non necessari per il mobile per la visualizzazione, ma traduci in% quei valori che vengono visualizzati in modo errato, poiché sono stati lasciati in pixel nella versione desktop di CSS.

Di conseguenza, la facilità d'uso quando si lavora con Joomla Mobile è stata del 65-70%, con il design reattivo in CSS è diventata del 99%. Conclusioni sul viso: Yandex e Goole non sono stati testati per l'adattabilità, ora stanno andando con il botto.

È abbastanza facile creare un modello di sito web reattivo, ma mantenere gli elementi in equilibrio in tutti i punti della modifica del modello è una vera arte. Questo tutorial introduce 5 tecniche da utilizzare in CSS per un layout reattivo. Esistono proprietà CSS di base come min-width, max-width, overflow e valori relativi, ma giocano tutte un ruolo importante nei design reattivi.

1. Video reattivo

Questo trucco CSS consente al video incorporato di allungarsi per adattarsi ai limiti.

Video (posizione: relativa; padding-bottom: 56,25%; altezza: 0; overflow: nascosto;) .video iframe, .video oggetto, .video embed (posizione: assoluta; alto: 0; sinistra: 0; larghezza: 100% ; altezza: 100% ;)

2. Larghezza minima e massima

La proprietà max-width consente di impostare la larghezza massima di un elemento. Dovrebbe essere usato per evitare che l'elemento si espanda oltre un certo limite.

Un contenitore con una proprietà di larghezza massima

L'esempio seguente definisce una dimensione del contenitore di 800 px, ma imposta un limite di dimensione del bordo del 90%.

Contenitore (larghezza: 800 px; larghezza massima: 90%;)

Immagine reattiva

Puoi fare in modo che un'immagine si ridimensioni automaticamente alla sua dimensione massima usando le proprietà max-width: 100% e height: auto.

Img (larghezza massima: 100%; altezza: auto;)

Il codice sopra per l'immagine reattiva funziona in IE7 e IE9, ma non funziona in IE8. Per risolvere la situazione, aggiungi la proprietà width: auto. Puoi utilizzare una regola CSS condizionale specifica per IE8 o il seguente trucco per IE:

@media \ 0screen (img (larghezza: auto; / * per cioè 8 * /))

Proprietà larghezza minima

La proprietà min-width è l'opposto della proprietà max-width. Imposta la larghezza minima possibile dell'elemento. Di seguito è riportato un esempio dell'utilizzo della proprietà min-width per evitare che il campo di input diventi troppo piccolo durante lo zoom indietro.

3. Valori relativi

In un layout reattivo, l'utilizzo di valori relativi può semplificare notevolmente il codice CSS e migliorare l'aspetto del design.

Campi relativi

Di seguito è riportato un esempio di commenti che utilizzano la larghezza relativa del margine sinistro per indentare la struttura ad albero. Invece di un valore assoluto in px, viene utilizzata una percentuale per il livello successivo nell'elenco. Sul lato sinistro della figura, puoi vedere che sui dispositivi mobili, lo spazio disponibile per le voci dell'elenco potrebbe diventare insufficiente per la visualizzazione normale se vengono utilizzati valori assoluti.

Dimensione relativa del carattere

Utilizzando i valori relativi per la dimensione del carattere (em o %), puoi facilmente ottenere modifiche appropriate nell'altezza della linea e nelle dimensioni del riempimento quando adatti il ​​modello allo schermo del dispositivo. Ad esempio, tutti gli elementi collegati vengono ridimensionati automaticamente quando vengono impostate nuove dimensioni del carattere per l'elemento padre.

Rientro relativo

La figura seguente mostra i vantaggi dell'utilizzo di un valore % relativo per il riempimento. La casella a sinistra ha uno spazio sbilanciato quando si applicano valori px assoluti. Il blocco a destra ha un bell'aspetto con riempimento del contenuto proporzionale.

4. L'overflow: trucco nascosto

È possibile utilizzare la proprietà overflow per impedire che il testo scorra attorno a un elemento. Un modo molto semplice e utile. È possibile annullare l'avvolgimento del testo attorno all'elemento precedente e mantenere la struttura del contenuto.

La proprietà max-width aiuta ad adattare il testo indistruttibile (come un URL lungo) su più righe invece che su una sola.

Break-word (word-wrap: break-word;)

Traduzione del preziosissimo articolo "Responsive Web Design Techniques, Tools and Design Strategies" della popolare pubblicazione online per sviluppatori Smashing Magazine.

A gennaio abbiamo pubblicato un articolo sul responsive design, "Responsive Web Design: cos'è e come usarlo". Il responsive web design continua ad attirare molta attenzione, ma considerando quanto sia diverso dai metodi di sviluppo di siti web tradizionali, può sembrare estremamente difficile per i designer e gli sviluppatori che non l'hanno provato.

Per questo motivo, abbiamo compilato una panoramica delle risorse utili durante la creazione di siti responsive. La recensione include guide dettagliate, approcci, strumenti, articoli contenenti i consigli pratici necessari per creare il proprio sito Web reattivo.

Tecniche di web design responsive

1. Transizioni CSS e query multimediali
Transizioni CSS e media query

Elliot Jay Stocks descrive in dettaglio il metodo per combinare CSS Media Query e transizioni CSS. L'idea di base è questa: quando si sviluppa un sito reattivo utilizzando Media Queries, si cambia costantemente la larghezza del browser per vedere come si comporta il sito mentre lo si fa. Ma ogni volta che viene eseguita una delle tue query multimediali, vedi una transizione difficile tra gli stili (il primo, ad esempio, per i desktop, il secondo per i tablet). Perché non utilizzare le transizioni CSS per appianare quelle transizioni difficili con l'animazione?

Immagini e video reattivi

5. Immagini fluide
Immagini gommose (ridimensionamento del browser)

Le immagini gommose sono uno dei temi centrali nel web design reattivo. Vedi l'articolo di Ethan Marcotte per una panoramica dettagliata su come crearli con il classico frammento di codice img (larghezza massima: 100%;), così come tutte le parti necessarie per iniziare.

Email reattive

14. Ottimizzazione della posta elettronica per dispositivi mobili con Media Query
Ottimizzazione della posta elettronica per dispositivi mobili con Media Queries

Le e-mail di grandi dimensioni richiedono spesso lo scorrimento orizzontale per essere visualizzate, soprattutto quando l'e-mail ha un'immagine grande allegata. In questo studio, Campaign Monitor spiega come è possibile ottimizzare le e-mail per i dispositivi mobili utilizzando Media query e ha suggerito alcuni metodi utili e frammenti di codice da utilizzare nella pratica.

Strumenti di web design reattivi

Puoi progettare design adattivo da zero o utilizzare gli strumenti elencati di seguito per velocizzare e semplificare il processo di creazione.

Questo è un Polyfill veloce e leggero (un frammento di codice che aggiunge funzionalità non supportate dal browser) creato da Scott Jehl per supportare le proprietà min-width e max-width delle CSS3 Media Queries in IE6-IE8 e versioni successive.

Usa le informazioni in questo piccolo strumento per creare un sito web reattivo.

Uno strumento per la prototipazione rapida del responsive design. Puoi progettare CSS per varie dimensioni dello schermo, orientamenti e browser più diffusi, che si tratti di telefoni (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tablet (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitor o TV (720p, 1080p).

Puoi visualizzare i risultati del progetto direttamente nel browser e utilizzare gli strumenti di sviluppo che conosci, come Firebug. Prova anche lo strumento alternativo ScreenFly.

Lo strumento 320 e Up si basa sul principio mobile prima(mobile first), in cui i design vengono prima creati per schermi mobili e poi estesi a tablet, desktop e schermi di grandi dimensioni. Funziona bene sia come add-on per il boilerplate HTML5 che come standalone.

Si tratta di modelli personalizzabili per la creazione di applicazioni Web mobili ricche e ad alte prestazioni. Otterrai la compatibilità cross-browser per gli smartphone di classe A e un buon supporto per i vecchi BlackBerry, Symbian e IE Mobile. E anche un gran numero di diverse ottimizzazioni per i browser mobili.

Framework per il responsive design

33.1140 Griglia CSS

1140 CSS Grid è ottimizzato per funzionare su schermi da dispositivi mobili fino a monitor di 1280 pixel di larghezza. È una griglia semplice e flessibile che utilizza Media query.

Questo framework CSS è una buona base per lo sviluppo su schermi piccoli (come i telefoni) e piccoli schermi (come i tablet) immediatamente pronti all'uso con il minimo sforzo. Inoltre, c'è un generatore per creare un framework CSS fluido per te stesso.

Flurid è una rete in gomma a 6, 7, 8, 9, 10, 12 e 16 colonne.

FluidGrids è un generatore di griglia modulare che crea layout di 6, 7, 8, 9, 10, 12 o 16 colonne.

Framework CSS per la creazione di layout reattivi. Contiene 4 layout di base e 3 set tipografici.

Un quadro fluido con un'enfasi sulla tipografia.

Tiny Fluid Grid ti aiuta a creare la tua griglia di gomma con 12, 16 o 24 colonne, impostare le loro larghezze massime e minime e il rientro in percentuale.

Strategie di design reattivo

40. Il flusso di lavoro del progettista reattivo
Flusso di lavoro per sviluppatori di web design reattivo

Luke Wroblewski ha illustrato una presentazione di Ethan Marcotte sull'applicazione dei principi del responsive web design al restyling del sito web di un importante quotidiano. Tra le altre cose, Ethan spiega come si avvicina alla metodologia di progettazione del web design reattivo e com'è la prototipazione nel contesto del web design reattivo.

Luke Wroblewski ha preso appunti alla Breaking Development Conference durante il discorso di Stephen Hay sulle realtà della progettazione per vari dispositivi.

Discussioni e diverse prospettive sul responsive web design

Questi articoli, pur non essendo tutorial, possono darti preziose informazioni sul perché (e quando) dovresti utilizzare tecniche di web design reattivo.

Un'eccellente introduzione al responsive design come modo di pensare, non come strumento o tecnica. Jeremy Keith sostiene che il web design reattivo non può essere aggiunto solo come passaggio a un flusso di lavoro esistente. Invece di cercare la perfezione dei pixel, dovremmo cercare una perfezione proporzionale.

L'editoria è una combinazione di filosofia e strategia per l'accumulo di best practice nel campo del responsive design.

Una raccolta regolarmente aggiornata di siti Web che utilizzano Media Queries.

Nell'episodio 9 di The Big Web Show, Jeffrey Zeldman e Dan Benjamin hanno invitato Ethan Marcotte a discutere di responsive design.

Un'ottima aggiunta a questo articolo sarà un blog sul design reattivo, in cui gli sviluppatori condividono le loro esperienze e scrivono recensioni sugli strumenti reattivi.

web design reattivo

design reattivo

css3

Aggiungi i tag