Share
Le tabelle dei prezzi possono essere un mezzo molto efficace per visualizzare le informazioni e aiutare gli utenti a differenziare le opzioni a loro disposizione. In definitiva, le tabelle dei prezzi possono convertire i visitatori che passano in clienti di valore, quindi è importante considerare come funzionano su diversi schermi e dispositivi.
Creeremo una tabella dei prezzi fluida, quindi alteriamo il modo in cui viene visualizzata in diverse dimensioni di viewport utilizzando le query multimediali. Iniziamo!
Ci concentreremo su una struttura preesistente per risolvere le nostre misurazioni della griglia e le richieste dei media. Questo non è vitale, ma ci farà risparmiare un po 'di tempo.
Abbiamo un paio di opzioni qui, fondamentalmente tra layout adattivi e reattivi.
Preferisco Skeleton Framework per la creazione di design reattivi, ma il framework predefinito di Skeleton utilizza una gamma di layout fissi. Invece, userò una versione fluida di Skeleton di Ian Yates, durante questo tutorial.
Tradizionalmente, durante la progettazione di un computer desktop o laptop ci siamo basati su 960px come larghezza standard. Per semplicità, ecco come faremo a saltare qui - quindi vediamo come possiamo progettare la nostra tabella dei prezzi per schermi più grandi.
Tabella prezzi reattivi
- Di base
- $ 9.99
- vista
- Acquista ora
Inizialmente dobbiamo includere tutti i file CSS necessari per Skeleton Framework e gli stili personalizzati per la tabella dei prezzi.
In questo modello ho incluso l'HTML solo per una parte della tabella dei prezzi (tutti gli altri sono simili). Dovrai creare un contenitore per i tuoi elementi. In Skeleton puoi assegnare una classe contenitore a tutti i principali contenitori. Tutte le colonne dovrebbero andare all'interno di quell'elemento.
Lo scheletro divide il contenitore principale in 16 colonne. Ho usato 4 colonne ciascuna per i 4 pacchetti di prezzi - controlla il div con una classe quattro colonne.
Per i dati, ho utilizzato un semplice elenco di descrizioni per mostrare le funzionalità del pacchetto prezzi.
Aggiungiamo alcuni stili di base per migliorare l'aspetto della tabella dei prezzi:
.plan_features: nth-child (dispari) background: none repeat scroll 0 0 # F7F7F7; dimensione del font: 13px; font-weight: bold; imbottitura: 10px 5px; .plan_features: nth-child (even) background: none repeat scroll 0 0 #fff; dimensione del font: 13px; font-weight: bold; imbottitura: 10px 5px; .plan_price color: #FFFFFF; font-size: 35px; font-weight: bold; imbottitura: 30px; allineamento del testo: centro; # pricing_plan1 .plan_price, # pricing_plan1 .buy background: none repeat scroll 0 0 # B71A1A; border-top: 1px solid # F83333; # pricing_plan2 .plan_price, # pricing_plan2 .buy background: none repeat scroll 0 0 # 1A7BB7; border-top: 1px solid # 4BA3FF; # pricing_plan3 .plan_price, # pricing_plan3 .buy background: none repeat scroll 0 0 # 2D964B; border-top: 1px solid # 5AD540; # pricing_plan4 .plan_price, # pricing_plan4 .buy background: none repeat scroll 0 0 # 909092; border-top: 1px solid # BACAC;
Questo primo blocco disegna le strisce zebra alternate per le righe di dati, assegna a ciascun pacchetto uno schema di colori unico e imposta alcune regole tipografiche.
Accentsconagua
.plan_title background: none repeat scroll 0 0 # 000000; border-radius: 3px 3px 0 0; colore: #FFFFFF; font-family: helvetica; font-size: 20px; font-weight: bold; imbottitura: 20px; allineamento del testo: centro; text-shadow: 1px 1px 1px # 5E5858; .plan border: 1px solid #eee; margin-bottom: 15px; .plan_buy background: none repeat scroll 0 0 # 000000; border-radius: 0 0 3px 3px; imbottitura: 20px; .plan_buy a border-radius: 4px 4px 4px 4px; colore: #FFFFFF; blocco di visualizzazione; font-size: 15px; font-weight: bold; margine: auto; imbottitura: 10px 5px; allineamento del testo: centro; decorazione del testo: nessuna; larghezza: 90 px; .plan_more background: none repeat scroll 0 0 #fff; dimensione del font: 13px; font-weight: bold; imbottitura: 10px 5px; display: nessuno; border-left: 2px solid # 302C2C; border-right: 2px solid # 302C2C; border-bottom: 2px solid # 302C2C; .more_icon background-image: url ("... /plus_minus_icons.png"); posizione di sfondo: 25px -3px; float: giusto; altezza: 25px; larghezza: 25px; .more_icon: hover cursor: pointer; .less_icon background-image: url ("... /plus_minus_icons.png"); background-position: 0px -3px; float: giusto; altezza: 25px; larghezza: 25px; .less_icon: hover cursor: pointer; .plan_features img float: left; .feature_desc color: # 4E4E4E; font-family: arial; allineamento del testo: centro; .highlight color: # 333233; font-family: helvetica; font-size: 15px; font-weight: bold; Gli stili rimanenti sono piuttosto interessanti, ma trattano anche alcune icone che utilizzeremo su schermi più piccoli. Come potete vedere, .plan_more ha un display: nessuno; impostato, quindi è invisibile a dimensioni dello schermo più grandi, anche se abbiamo stilizzato l'icona al suo interno.
L'immagine sotto mostra come la tabella dei prezzi viene visualizzata su schermi di grandi dimensioni.
È pericoloso iniziare a definire le dimensioni dello schermo in termini di dispositivi (il fatto è che non sappiamo mai con certezza quale dispositivo viene utilizzato per visualizzare la nostra pagina) ma, normalmente, i tablet avranno una larghezza dello schermo tra 768px e 959px. Per tenere conto di questa ipotesi, scriveremo una query multimediale per gestire gli stili necessari.
Nel suo stato attuale, la demo verrà visualizzata perfettamente su schermi tablet con larghezza ridotta. Pertanto non codificherò nessuno stile personalizzato per i tablet. Nel nostro framework Skeleton, la sezione delle query multimediali per tablet sarà simile a questa (un po 'vuota):
/ * #Tablet (Portrait) =========================================== ======= * / / * Nota: progettazione per una larghezza di 768px * / solo @media screen e (min-width: 768px) e (max-width: 959px)
L'immagine sotto mostra come viene visualizzata la tabella dei prezzi su schermi "tablet":
Ok, quindi abbiamo progettato la tabella dei prezzi per gli schermi più grandi. Ora guarderemo gli schermi mobili di ritratto che sono così piccoli come ci preoccuperemo in questo tutorial. Poiché sarà largo circa 320 px, non sarà possibile visualizzare completamente un singolo pacchetto sullo schermo. Dovremo pianificare un layout diverso per schermi minuscoli in base a quanto segue:
Per prima cosa diamo un'occhiata alla nostra struttura HTML iniziale per la tabella dei prezzi che abbiamo esposto nel passaggio 1. Ricorda la sezione con la classe plan_more che è nascosto nella vista a schermo intero di default? Lo useremo come navigazione Visualizza caratteristiche.
Guarda gli stili per schermi tra 320px e 767px di larghezza:
@media solo schermo e (min-width: 320px) e (max-width: 767px) .plan_title width: 45%; float: sinistra; border-radius: 3px 0 0 0; .plan_price width: 55%; imbottitura: 20px 2%; border-top: nessuno! importante; float: sinistra; .plan_more display: block; chiaro: entrambi; .plan_buy padding: 10px; . plan> dd altezza: 0; overflow: nascosto; riempimento: 0! importante; opacità: 0; filtro: alfa (opacità = 0); / * IE6-IE8 * / -webkit-transition: opacity 0.9s easy-in-out; -moz-transition: opacity 0.9s easy-in-out; -o-transizione: opacità 0.9s facilità-in-out; -ms-transition: opacity 0.9s easy-in-out; transizione: opacità 0.9s easy-in-out; .plan: target> dd padding: 10px 5px! important; altezza: auto; opacità: 1; filtro: alfa (opacità = 100); / * IE6-IE8 * /
Assegniamo larghezze personalizzate per gli elementi del titolo e del prezzo e impostiamo il float: a sinistra per convertire entrambe le sezioni in un'unica riga. Quindi mostriamo la sezione Visualizza caratteristiche assegnando blocco di visualizzazione al plan_more classe. Conterrà le icone più e meno per l'apertura e la chiusura delle funzioni.
Una volta che l'utente fa clic sull'icona più, è necessario scorrere l'elenco delle funzioni e visualizzarle sullo schermo. Anche se può essere fatto facilmente usando jQuery, cercheremo una soluzione basata su CSS per evitare gli script.
Userò la tecnica CSS dimostrata da Ian Yates in Suggerimento rapido: Offri a Orman's Navigation: Target Treatment. Per prima cosa impostiamo l'altezza di tutte le funzioni su 0 per nasconderle. Quindi assegniamo alcuni codici di transizione CSS specifici per browser per ottenere l'effetto scorrevole.
Dopo aver fatto clic sul pulsante più, è possibile ottenere l'elemento di destinazione utilizzando l'identificatore di frammento all'interno dell'URL. Visualizziamo le funzionalità sul pacchetto cliccato impostando l'altezza. Semplice.
Ora quando si passa a schermi mobili più piccoli si otterrà il layout con titoli e prezzi di ogni pacchetto. Utilizzare il pulsante più e meno per visualizzare e nascondere le funzioni.
L'immagine seguente mostra come vengono visualizzate le funzioni quando le espandi utilizzando i pulsanti di navigazione:
Di nuovo, stiamo generalizzando, ma supponiamo che il layout orizzontale dei cellulari sia specificato tra 480px e 767px. Poiché utilizziamo un layout basato su colonne, la nostra tabella dei prezzi viene visualizzata correttamente nella schermata orizzontale mobile senza eseguire alcuna modifica. Guarda:
Come puoi vedere, un pacchetto viene visualizzato a larghezza intera. Non abbiamo davvero bisogno di questo spazio per un singolo pacchetto. Questa è un'altra cosa importante che devi considerare nel responsive design. Per prima cosa ci piacerebbe essere sicuri che tutti i contenuti possano essere sfogliati senza scorrere. Quindi dobbiamo ottimizzare il layout per fornire un'esperienza utente solida.
In linea di principio, questa larghezza mobile orizzontale può contenere due pacchetti della nostra tabella dei prezzi. Quindi giochiamo con alcuni CSS all'interno delle query multimediali per la sezione di layout mobile del paesaggio
@media solo schermo e (min-width: 480px) e (max-width: 767px) # pricing_plan4, # pricing_plan3, # pricing_plan2, # pricing_plan1 width: 50%; .plan_title width: auto; float: none; border-radius: 3px 3px 0 0; .plan_price width: auto; float: none; border-top: 1px solid # F83333; .plan_more display: none; . plan> dd padding: 10px 5px! important; height: auto; opacità: 1; filtro: alfa (opacità = 1); / * IE6-IE8 * / -webkit-transition: opacity 0.9s easy-in-out; -moz-transition: opacity 0.9s easy-in-out; -o-transizione: opacità 0.9s facilità-in-out; -ms-transition: opacity 0.9s easy-in-out; transizione: opacità 0.9s easy-in-out;
Abbiamo fornito pacchetti di prezzi di una larghezza di 50% e quindi saremo in grado di visualizzare due pacchetti anziché un pacchetto nel layout predefinito.
Ho usato alcuni stili personalizzati per il prezzo del piano e il titolo del piano, ma la cosa importante da notare è che float è impostato su none. Inizialmente non avevamo alcun float, ma nel layout mobile Portrait avevamo bisogno di impostarli. Questo è usato per cancellare quei galleggianti per lo schermo mobile Landscape.
Non vogliamo la sezione Visualizza caratteristiche in questo layout. Così display: none è usato sulla classe plan_more per nascondere la sezione.
Quindi abbiamo bisogno che le funzionalità vengano visualizzate automaticamente. A tutte le funzionalità viene assegnata un'altezza automatica utilizzando la tecnica CSS descritta nella sezione precedente.
Allora! Abbiamo completato la progettazione del layout per diversi dispositivi con diverse dimensioni dello schermo. Dovresti avere qualcosa che assomigli a questo:
vs. I più acuti tra voi noteranno che abbiamo usato un layout div-based con gli elenchi di descrizioni, anche se abbiamo a che fare con dati tabulari. Avremmo potuto facilmente andare con un design di tavolo reattivo per questo tutorial, come dimostra Chris Coyier in questo articolo.
Certo, dovremmo pensare di rendere il design reattivo, ma dovremmo anche considerare il tipo di dati usati nel design. Generalmente, i dati relativi vengono visualizzati nelle righe della tabella; otteniamo informazioni su un'entità leggendo una singola riga. Tuttavia, nel nostro scenario, i dati correlati sono visualizzati all'interno di un singolo colonna. Se dovessimo usare una tabella per visualizzarla usando la tecnica reattiva di Chris, otterremmo un layout come quello mostrato di seguito:
Tutti i prezzi sono visualizzati con i nomi dei pacchetti in cima. Quindi la capacità di memorizzazione di ciascun pacchetto viene visualizzata con i nomi dei pacchetti. Quindi, per ottenere informazioni su ogni singolo pacchetto, devi scorrere fino alla fine. Considerando questo scenario, scelgo di non andare con il design basato su tabelle.
Incartare
In questo tutorial abbiamo imparato come creare una tabella dei prezzi reattiva per adattarsi a tutti i tipi di dispositivi. Grazie per la lettura e buona fortuna con le tabelle dei prezzi reattivi!
