Share
Les tableaux de tarification peuvent constituer un moyen très efficace d’afficher des informations et d’aider les utilisateurs à différencier les options qui leur sont offertes. En fin de compte, les tableaux de tarification peuvent convertir les visiteurs de passage en clients précieux. Il est donc important que nous examinions comment ils fonctionnent sur différents écrans et appareils..
Nous allons créer un tableau de prix fluide, puis modifier la façon dont il est affiché pour différentes tailles de fenêtres d'affichage à l'aide de requêtes multimédia. Commençons!
Nous allons nous appuyer sur un cadre préexistant pour régler nos mesures de grille et nos requêtes média. Ce n'est pas vital, mais cela nous fera gagner du temps.
Nous avons quelques options ici, la plupart fondamentalement entre les dispositions adaptatives et réactives.
Je préfère le framework Skeleton pour la création de conceptions réactives, mais le framework Skeleton par défaut utilise une gamme de dispositions fixes. Au lieu de cela, je vais utiliser une version fluide de Skeleton de Ian Yates, tout au long de ce tutoriel..
Traditionnellement, lors de la conception pour un ordinateur de bureau ou un ordinateur portable, nous nous basions sur la largeur standard de 960px. Pour plus de facilité, c'est ce que nous allons faire ici. Voyons comment concevoir notre tableau des prix pour les écrans plus grands..
Tableau de tarification réactif
- De base
- 9,99 $
- Vue
- Acheter maintenant
Au départ, nous devons inclure tous les fichiers CSS nécessaires pour Skeleton Framework et des styles personnalisés pour le tableau de tarification..
Dans cette maquette, j'ai inclus le code HTML pour une partie seulement du tableau des prix (tous les autres sont similaires). Vous devrez créer un conteneur pour vos éléments. Dans Skeleton, vous pouvez assigner une classe récipient à tous les principaux conteneurs. Toutes les colonnes doivent aller à l'intérieur de cet élément.
Skeleton divise le conteneur principal en 16 colonnes. J'ai utilisé 4 colonnes chacune pour les 4 ensembles de prix - consultez le div avec une classe quatre colonnes.
Pour les données, j'ai utilisé une liste de description simple pour afficher les fonctionnalités du package de prix..
Ajoutons quelques styles de base pour améliorer l'apparence du tableau de prix:
.fonctionnalités_plan: nth-child (impair) arrière-plan: aucune répétition défilement 0 0 # F7F7F7; taille de police: 13px; poids de police: gras; rembourrage: 10px 5px; .plan_features: nième-enfant (pair) arrière-plan: aucune répétition défiler 0 0 #fff; taille de police: 13px; poids de police: gras; rembourrage: 10px 5px; .plan_price color: #FFFFFF; taille de police: 35px; poids de police: gras; rembourrage: 30px; text-align: center; # pricing_plan1 .plan_price, # pricing_plan1 .buy arrière-plan: aucune répétition défiler 0 0 # B71A1A; bord supérieur: solide 1px # F83333; # pricing_plan2 .plan_price, # pricing_plan2 .buy arrière-plan: aucune répétition défiler 0 0 # 1A7BB7; border-top: 1px solide # 4BA3FF; # pricing_plan3 .plan_price, # pricing_plan3 .buy arrière-plan: aucune répétition défiler 0 0 # 2D964B; bord supérieur: 1px solide # 5AD540; # pricing_plan4 .plan_price, # pricing_plan4 .buy arrière-plan: aucune répétition faire défiler 0 0 # 909092; border-top: 1px solide # B1ACAC;
Ce premier morceau définit les bandes de zèbres en alternance pour les lignes de données, attribue à chaque paquet un jeu de couleurs unique et définit des règles typographiques..
Accentsconagua
.plan_title background: aucune répétition scroll 0 0 # 000000; border-radius: 3px 3px 0 0; couleur: #FFFFFF; famille de polices: helvetica; taille de police: 20px; poids de police: gras; rembourrage: 20px; text-align: center; text-shadow: 1px 1px 1px # 5E5858; .plan border: 1px solid #eee; marge inférieure: 15 px; .plan_buy background: aucune répétition scroll 0 0 # 000000; border-radius: 0 0 3px 3px; rembourrage: 20px; .plan_buy a border-radius: 4px 4px 4px 4px; couleur: #FFFFFF; bloc de visualisation; taille de police: 15px; poids de police: gras; marge: auto; rembourrage: 10px 5px; text-align: center; texte-décoration: aucun; largeur: 90px; .plan_more background: aucune répétition scroll 0 0 #fff; taille de police: 13px; poids de police: gras; rembourrage: 10px 5px; affichage: aucun; bordure gauche: solide 2px # 302C2C; bordure droite: solide 2px # 302C2C; fond de bordure: solide 2px # 302C2C; .more_icon background-image: url ("… /plus_minus_icons.png"); position d'arrière-plan: 25px -3px; Flotter à droite; hauteur: 25px; largeur: 25px; .more_icon: hover curseur: pointeur; .less_icon background-image: url ("… /plus_minus_icons.png"); position d'arrière-plan: 0px -3px; Flotter à droite; hauteur: 25px; largeur: 25px; .less_icon: hover curseur: pointeur; .plan_features img float: left; .feature_desc color: # 4E4E4E; famille de polices: arial; text-align: center; .highlight color: # 333233; famille de polices: helvetica; taille de police: 15px; poids de police: gras; Les styles restants sont assez jolis, mais traitent également de quelques icônes que nous utiliserons sur des écrans plus petits. Comme vous pouvez le voir, .plan_plus a un affichage: aucun; réglé, il est donc invisible pour les écrans de grande taille, même si nous avons stylé l'icône en son sein.
L'image ci-dessous montre comment le tableau de prix s'affiche sur de grands écrans.
Il est dangereux de commencer à définir la taille de l'écran en termes de périphériques (le fait est que nous ne savons jamais avec certitude quel périphérique est utilisé pour afficher notre page), mais normalement, les tablettes auront une largeur d'écran comprise entre 768 et 959 pixels. Pour répondre à cette hypothèse, nous allons rédiger une requête multimédia pour traiter les styles nécessaires..
Dans son état actuel, la démonstration s’affiche parfaitement sur les écrans de tablette de largeur réduite. Par conséquent, je ne coderai aucun style personnalisé pour les tablettes. Dans notre framework Skeleton, la section des requêtes multimédia pour les tablettes ressemblera à ceci (un peu vide):
/ * #Tablet (Portrait) ========================================= ======= * / / * Remarque: concevez une largeur d'écran de 768px * / @media et (largeur minimale: 768px) et (largeur maximale: 959px)
L'image ci-dessous montre comment le tableau de prix s'affiche sur les écrans de la "tablette":
D'accord, nous avons donc conçu le tableau des prix pour les écrans plus grands. Nous allons maintenant examiner les écrans pour portrait mobiles qui sont aussi petits que ce qui nous préoccupe dans ce tutoriel. Comme il aura environ 320 pixels de large, nous ne pourrons pas afficher complètement un seul paquet sur l’écran. Nous allons devoir planifier une disposition différente pour les petits écrans sur la base des éléments suivants:
Jetons d'abord un coup d'œil à notre structure HTML initiale pour le tableau de prix que nous avons présenté à l'étape 1. N'oubliez pas la section avec la classe plan_plus qui est caché dans la vue d'écran large par défaut? Nous l'utiliserons comme navigation dans les fonctionnalités d'affichage..
Découvrez les styles pour les écrans de 320 à 767 pixels de large:
Écran @média uniquement et (largeur minimale: 320 pixels) et (largeur maximale: 767 pixels) .plan_title width: 45%; float: gauche; border-radius: 3px 0 0 0; .plan_price width: 55%; rembourrage: 20px 2%; border-top: aucun! important; float: gauche; .plan_more display: block; clarifier les deux; .plan_buy padding: 10px; .plan> dd height: 0; débordement caché; rembourrage: 0! important; opacité: 0; filtre: alpha (opacité = 0); / * IE6-IE8 * / / -webkit-transition: l'opacité 0.9s easy-in-out; -moz-transition: opacité 0,9 seconde; -o-transition: opacité 0,9s easy-in-out; -ms-transition: opacité 0,9s easy-in-out; transition: opacité 0,9s easy-in-out; .plan: target> dd padding: 10px 5px! important; hauteur: auto; opacité: 1; filtre: alpha (opacité = 100); / * IE6-IE8 * /
Nous affectons des largeurs personnalisées aux éléments title et price et définissons la float: gauche afin de convertir les deux sections en une seule ligne. Ensuite, nous montrons la section View Features en assignant bloc de visualisation au plan_plus classe. Il contiendra des icônes plus et moins pour ouvrir et fermer les fonctionnalités.
Une fois que l'utilisateur a cliqué sur l'icône plus, nous devons faire glisser la liste des fonctionnalités et l'afficher à l'écran. Même si cela peut être fait facilement en utilisant jQuery, nous allons rechercher une solution basée sur CSS pour éviter les scripts.
Je vais utiliser la technique CSS présentée par Ian Yates dans Quick Tip: Donnez à la navigation d'Orman le traitement: cible. Tout d'abord, nous définissons la hauteur de toutes les entités sur 0 pour les masquer. Ensuite, nous affectons des codes de transition CSS spécifiques au navigateur pour obtenir l’effet glissant..
Une fois le bouton Plus cliqué, nous pouvons obtenir l’élément cible à l’aide de l’identificateur de fragment contenu dans l’URL. Nous affichons les fonctionnalités sur le package cliqué en définissant la hauteur. Simple.
Maintenant, lorsque vous basculez sur des écrans mobiles plus petits, vous obtenez la mise en page avec les titres et les prix de chaque forfait. Utilisez les boutons plus et moins pour afficher et masquer les fonctionnalités.
L'image suivante montre comment les fonctionnalités sont affichées lorsque vous les développez à l'aide des boutons de navigation:
Encore une fois, nous généralisons, mais nous supposerons que la disposition en paysage des mobiles est spécifiée entre 480px et 767px. Comme nous utilisons une disposition basée sur des colonnes, notre tableau de prix s’affiche correctement sur l’écran paysage mobile sans effectuer de modification. Regarde:
Comme vous pouvez le constater, un paquet est affiché en pleine largeur. Nous n'avons pas vraiment besoin d'un tel espace pour un seul colis. Ceci est une autre chose importante à prendre en compte dans la conception réactive. Premièrement, nous aimerions nous assurer que tout le contenu peut être parcouru sans défilement. Ensuite, nous devons optimiser la mise en page pour fournir une expérience utilisateur solide.
En principe, cette largeur mobile paysagère peut contenir deux packages de notre tableau de prix. Jouons donc avec quelques CSS dans les requêtes de support pour la section de mise en page de paysage mobile
Écran @média uniquement et (largeur minimale: 480px) et (largeur maximale: 767px) # pricing_plan4, # pricing_plan3, # pricing_plan2, # pricing_plan1 width: 50%; .plan_title width: auto; float: aucun; border-radius: 3px 3px 0 0; .plan_price width: auto; float: aucun; bord supérieur: solide 1px # F83333; .plan_more display: none; .plan> dd padding: 10px 5px! important; hauteur: auto; opacité: 1; filtre: alpha (opacité = 1); / * IE6-IE8 * / / -webkit-transition: l'opacité 0.9s easy-in-out; -moz-transition: opacité 0,9 seconde; -o-transition: opacité 0,9s easy-in-out; -ms-transition: opacité 0,9s easy-in-out; transition: opacité 0,9s easy-in-out;
Nous avons donné aux paquets de tarification une largeur de 50% et par conséquent, nous serons en mesure d'afficher deux packages au lieu d'un package dans la présentation par défaut.
J'ai utilisé des styles personnalisés pour le prix et le titre du plan, mais il est important de noter que la valeur float est définie sur none. Au départ, nous n'avions pas de flottants, mais dans l'agencement mobile Portrait, nous devions les définir. Ceci est utilisé pour effacer ces flotteurs pour l'écran mobile Paysage.
Nous ne voulons pas que la section Afficher les fonctionnalités de cette présentation. Alors affichage: aucun est utilisé sur la classe plan_more pour masquer la section.
Ensuite, nous avons besoin que les fonctionnalités s'affichent automatiquement. Toutes les fonctionnalités reçoivent une hauteur automatique en utilisant la technique CSS décrite dans la section précédente..
Donc alors! Nous avons terminé la conception de la disposition pour différents appareils avec différentes tailles d'écran. Vous devriez avoir quelque chose qui ressemble à ceci:
contre. Le plus net d'entre vous remarquera que nous avons utilisé une présentation basée sur des divisions avec des listes de description, même s'il s'agit de données tabulaires. Nous aurions facilement pu utiliser une conception de table réactive pour ce didacticiel, comme le montre Chris Coyier dans cet article..
Bien sûr, nous devrions envisager de rendre la conception réactive, mais nous devrions également tenir compte du type de données utilisé dans la conception. Généralement, les données associées sont affichées dans les lignes du tableau. nous obtenons des informations sur une entité en lisant une seule ligne. Cependant, dans notre scénario, les données associées sont affichées dans un seul fichier. colonne. Si nous devions utiliser un tableau puis l'afficher en utilisant la technique de réponse de Chris, nous obtiendrions une présentation similaire à celle présentée ci-dessous:
Tous les prix sont affichés avec les noms de colis en haut. Ensuite, la capacité de stockage de chaque paquet est affichée avec les noms de paquet. Donc, pour obtenir des informations sur un seul paquet, vous devez faire défiler l'écran jusqu'à la fin. Compte tenu de ce scénario, j'ai choisi de ne pas utiliser la conception basée sur les tables..
Emballer
Tout au long de ce didacticiel, nous avons appris à créer un tableau de prix adaptatif adapté à tous les types d'appareils. Merci de votre lecture et bonne chance avec vos tableaux de prix réactifs!
