Aller au contenu

Utilisez ces 5 bonnes pratiques CSS3 pour des applications performantes sur mobiles

Apprenez les bonnes pratiques pour créer des sites pour les terminaux mobiles (smartphone ou tablette).

Dans ce cours vous verrez comment faire des feuilles de style adapter aux sites mobiles.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Utilisez ces 5 bonnes pratiques CSS3 pour des applications performantes sur mobiles

Bonjour à tous et bienvenu sur Développement Facile.

Dans cette nouvelle vidéo vous allez apprendre à utiliser les bonnes pratiques pour créer des sites mobiles pour les terminaux mobiles que ce soit les Smartphones ou les tablettes, grâce aux nouvelles propriétés CSS 3, il y a tout un tas de bonnes pratiques à respecter, c’est que vous allez découvrir dans cette vidéo.

Les bonnes pratiques CSS3

Tout d’abord, comme vous vous en doutez sûrement, avec les Smartphones ou les tablettes on accède très souvent à Internet via la 3G, un petit peu la 4G mais ce n’est pas encore très développé, donc c’est beaucoup en 3G ou 3G+, donc bien évidemment le site pour mobile doit être le plus léger possible et effectuer le moins de requête possible au serveur. Optimisez ça, la taille de vos fichiers CSS, le moins de requête possible au serveur, déjà vous devez inclure les feuilles de style via un fichier externe, pourquoi ?

Si vous avez plusieurs pages qui utilisent le même fichier CSS via un import externe, et bien ce fichier CSS il va être mis dans le cache du navigateur et donc ça va être un changement beaucoup plus rapide de votre site Internet. Pensez à minimiser également vous feuilles de style pour qu’elles prennent le moins de place possible, je vous ai mis ici deux adresses de sites cssminifier.com et refresh-sf.com/yui,  ça va vous permettre de minimiser la taille de vos feuilles de style CSS, elles seront encore plus rapides à charger et votre utilisateur il attendra moins de temps pour charger son site Internet sur son Smartphone.

Utilisez plutôt un défilement vertical, que ce soit sur une tablette ou sur un Smartphone on utilise un défilement vertical c’est beaucoup plus intuitif, beaucoup plus simple, le défilement horizontal est vraiment très peu utilisé donc adaptez la largeur comme je vous l’ai dit, de votre site à la taille de l’écran du périphérique, tout simplement, vous pouvez également utiliser un système d’affichage sous forme d’accordions, sous forme d’accordions il y a un menu, on clic, ça ouvre, on clique sur un autre menu, ça ouvre une autre zone, c’est très pratique l’accordion pour afficher énormément d’informations sur un espace réduit, à chaque fois c’est des panneaux qui s’ouvre et le contenu change, vous avez également la technique d’utiliser des Sprite avec CSS3, vous avez une image qui contient plusieurs logos et avec les sprites CSS3 vous donnez des coordonnées de l’image, l’avantage c’est que vous faites une seule requête pour charger la grande image au serveur, et grâce à CSS 3, vous prenez des morceaux donc chaque logo qui sont dans votre image.

Vous pouvez également utiliser les pourcentages dans les fichier CSS pour afficher vos images ainsi, si vous donnez une largeur et une hauteur en pourcentage, l’image va s’afficher automatiquement quel que soit la taille de l’écran, du périphérique que ce soit une tablette ou un Smartphone et donc c’est là ou vous devez utiliser des designs responsive je vous ai fait plusieurs tutoriels déjà sur développement facile que je vous invite à consulter sinon en gros pour résumer un site responsive, c’est un site dont la largeur, la position des éléments s’adaptent automatiquement que ce soit un Smartphone, une tablette ou un ordinateur de bureau, votre site Internet va détecter le périphérique, il va savoir adapter son affichage pour qu’il soit toujours agréable pour l’utilisateur que ce soit sur un Smartphone, une tablette ou un ordinateur de bureau.

C’est très important de créer des designs responsive.

Je vous ai mis un petit exemple de code source d’une div, par exemple vous avez une image qui contient plusieurs logos, vous faites une div de la taille de votre image largeur hauteur, vous mettez la background de votre image qui appelle logo.png, cette image logo.png contient les différents logos et ensuite dans votre CSS vous faites flèche gauche, flèche droite pour définir ça, et ça va définir si vous voulez l’affichage de votre image, si vous voulez afficher des éléments en plus, donc vous faites une div avec flèche gauche pour la référence à votre image gauche qui est dans tous les logos, une div avec flèche droite pour la référence à votre image droite qui est dans tous les logos et ensuite c’est là où vous expliquez, ou vous définissez une image avec les coordonnées correctes qui s’affiche. De toute façon je vais reprendre dans un exemple pour vous montrer les coordonnées ce sera beaucoup plus simple parce que là c’est expliqué un peu rapidement sur un power point, je pense que c’est beaucoup plus parlant quand on voit ça à travers un exemple.

Vous pouvez également encoder vos images en base 64 et non pas via un fichier externe, l’encodage en base 64 ça rend la taille de l’image plus grande mais ça permet de réduire très fortement les appelle au serveur, car aucun fichier n’est chargé, si vous utilisez des images avec CSS, à chaque fois qu’un background, l’URL de l’image vous allez interroger le serveur pour charger l’image or si vous l’encodez en base 64 directement dans votre fichier CSS, vous chargez uniquement votre fichier CSS donc il y a une seule requête envoyée au serveur c’est tout, je vous ai mis l’URL d’un site qui va vous permettre de convertir vos images en base 64, c’est très pratique, le seul inconvénient c’est que la base 64 ça définit la taille de l’image plus grande, ça prend plus de poids dans vos fichiers CSS, il faut allier les deux, c’est à vous de voir en fonction, soit vous privilégier le poids, soit vous faites plus de requête au serveur, à vous de faire des tests, de ce que vous souhaitez.

Voir l’exemple d’accordion

Je vais vous montrer un exemple de code source pour créer un accordion ça permets d’afficher tout un tas d’informations dans un espace très réduit en taille d’écran, vous allez voir un exemple de code source avec une image encodée en base 64, très pratique, très simple et vous allez voir un exemple de code source avec une image encodée dans des Sprite, une image qui contient plusieurs logos et comment utiliser le système de Sprite avec CSS3.

On passe tout de suite à la pratique, on passe à l’exemple de code source. Pour créer l’accordion vous avez une classe accordion qui a bien été évidemment définie en CSS, donc l’accordion on définit une largeur ce que je vous ai conseillé dans les bonnes pratiques, c’est de plutôt définir vos largeurs non pas en pixel mais en pourcentage, comme ça quel que soit la taille de l’écran la largeur de l’écran, que ce soit sur un Smartphone ou une tablette, bien le fait de définir un pourcentage, on prend 90 % de l’espace disponible de la largeur, donc là l’accordions pour le titre, le titre en fait c’est ça, là vous avez l’accordion en fonctionnement il suffit de cliquer pour afficher beaucoup de contenu et ensuite vous avez le contenu de l’accordion avec un effet de transition que vous pouvez définir, donc vous l’intégrez comment ?

Un div qui utilise la classe accordion, une section, le titre, et une autre div avec une table ou vous mettez le descriptif donc plusieurs sections pour l’accordion à chaque fois avec l’id langage et le Href référence pour effectuer l’affichage, donc ça, vous pouvez mettre une image, ce que vous voulez dans le contenu de l’accordion donc ça donne ici, notre table, au clic ça affiche un autre élément, vous pouvez entasser tout un tas d’informations et à chaque fois, vous cliquez ça vous permet de gérer un affichage donc d’afficher énormément d’informations sur un espace disponible restreint. Ensuite ça c’est une image encodée en base 64 comment ça marche ?

On a une div avec un id point rouge et dans le CSS on a l’id point rouge donc l’image est encodée en base 64 et là vous obtenez le décodage, là vous l’avez encodée en base 64 votre image, et juste ici elle s’affiche correctement donc c’est interprété correctement par le HTML, ensuite vous avez un Sprite, une image Sprite, je vous montre ce que ça donne, une image Sprite c’est tout simplement une image ou il y a un logo, ou il y a plusieurs logos, dans cette image il y a seulement deux logo et donc comment ça marche ?

Vous définissez un conteneur avec l’URL de background de votre image, la taille d’une seule image et derrière le sprite du logo un, le Sprite du logo deux avec les positions en 0 0, la taille c’est l’image une, zéro et -100, parce qu’il y a 50 la première après on descend plus bas pour avoir la deuxième, on définit la taille et dans le fichier HTML on a le containers avec le sprit un, un autre container avec le Sprite deux, et ce qui vous donne tout simplement, l’image une, l’image deux, pourquoi il y un et deux ?

C’est pour les différencier, j’ai rajouté le texte un et deux donc la l’image encodée en base 64 dans le CSS tout simplement, donc c’est long, le Sprite, les coordonnées pour récupérer le Sprite avec la hauteur et la largeur, voilà et donc là le menu accordion donc vous avez vu c’est assez simple de créer un menu accordion, d’encoder une image en base 64 et d’utiliser les Sprite.

Votre plan d’actions

Maintenant c’est à vous de jouer, utilisez les nouvelles possibilités d’HTML 5, CSS 3, pour vos site sur mobile, vous avez déjà eu plusieurs cours pour apprendre à utiliser le potentiel qui s’ouvre à vous avec HTML 5, CSS 3, pour créer des sites mobiles aussi bien sur Smartphone que sur tablette et également sur ordinateur portable, si vous avez des questions comme d’habitude posaient les directement sous ce cours vidéo, moi je vous invite là, justement dans la deuxième vidéo à cliquer sur le lien, sur l’image lancer la deuxième vidéo, dans la deuxième vidéo, ensemble on va aller beaucoup plus loin dans la création de sites complexes et toujours performants pour les mobiles, les Smartphones, les tablettes et également les ordinateurs de bureau, vous allez apprendre à créer deux à trois fois plus rapidement en équipe des sites pour mobiles donc vraiment tout est expliqué dans la deuxième vidéo, en plus il y a un système de questions-réponses vous pouvez poser toutes vos questions et je vous réponds dans le détail toujours avec des exemples de code source, donc cliquez simplement sur l’image lancer la deuxième vidéo sur ce lien moi je vous retrouve suite dans la deuxième vidéo.

 

[/ppmtoggle][/ppmaccordion]

Minimisez vos feuilles de style CSS

http://cssminifier.com

http://refresh-sf.com/yui

Convertissez vos images en base 64 pour les intégrer dans votre CSS

http://www.base64-image.de/

 

Télécharger l’exemple de site accordion pour mobile

Retrouvez le code source commenté de l’exemple d’accordion ci-dessous

Téléchargement du code source Feuille de style CSS 3 pour mobile

Cliquez ici pour télécharger le code source Feuille de style CSS 3 pour mobile

Montrez nous vos feuilles de style pour mobile

Utilisez la zone commentaire pour poster vos exemples de codes sources

 

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>