Un site vitrine comprend en général ce type de pages :
- Accueil - A propos /qui sommes-nous - L’équipe - Nos missions - Nos services - Actualités - Contact
Les Règles de l'art, pour un site web à la française, en html5 et css3
Créer un site Web est une technique jeune qui n’existe que depuis quelques années. Toujours en plein développement, il n'existe pas encore de véritables "règles de l'art" mais je n'ai pas pu résister
à la tentation de rassembler ci-après quelques règles ou normes qui, à défaut d'être toujours explicables, sont généralement respectées en matière de publication sur le Web.
1 - La règle des trois clics. Toute information dans un site doit être accessible en 3 clics de souris maximum à partir de la page d'accueil.
2 - La règle des trois écrans. La longueur d'une page ne doit pas dépasser 3 à 5 écrans (grand maximum) pour limiter le défilement vertical.
3 - Le premier écran d'un page doit rassembler le maximum de l'information et inviter à en poursuivre la découverte. Un pourcentage important des internautes n'utilisent pas ou peu le défilement vertical.
4 - Le défilement horizontal de la page est à éviter (sinon à proscrire) quelle que soit la résolution d'écran de votre visiteur. Débrouillez-vous...
5 - Un écran ne doit être rempli qu'à 50% de texte et de graphiques. Le reste est consacré au fond d'écran.
6 - Quels que soient vos goûts en matière artistique, le texte doit toujours rester lisible par rapport au fond d'écran. Comme dans la vie de tous les jours, le Web comporte son lot de mal voyants. Pensez-y.
7 - Prévoir une possibilité de retour à la page d'accueil à chaque page du site. Un visiteur perdu est un visiteur déçu.
8 - Ecrire des phrases courtes à la construction simple. N'oubliez pas de communiquer...
9 - La lecture de texte sur écran se révèle vite fatiguante. Des lignes de texte de 60 à 90 caractères maximum semblent être un bon compromis surtout si on sait que la tendance est aux résolution d'écran de 800 x 600 et 1024 x 768 ...
10 - Si après les 10 secondes (*) suivant un clic, il ne se passe rien, l'internaute s’inquiète, s'ennuie, s'impatiente ou quitte la page. [* à adapter selon votre capital de patience].
11 - Tous les liens seront dûment vérifiés et valides. A ce stade de développement de la publication Internet, un lien non valide devient (presque) inadmissible.
12 - Sans oublier tout de ceci, soyez toujours vous-même et si possible créatif.
1
LES ANIMATIONS
- Bonnes pratiques
Les animations peuvent grandement améliorer l'expérience utilisateur d'une interface, mais il est important de suivre certaines règles pour ne pas en faire trop et détériorer l'expérience utilisateur sur vos objets Web.
Suivre les règles suivantes devrait constituer un bon début.
- Des animations significatives
Vous devez éviter d'animer un élément juste pour le plaisir. Gardez à l'esprit que les animations doivent exprimer clairement une intention. Les animations telles que les animations qui attirent l'attention
(rebond, flash, impulsion, etc.) doivent être utilisées pour attirer l'attention de l'utilisateur sur un élément spécial de votre interface et pas seulement comme un moyen de lui apporter un côté "flashy".
- Les animations d'entrée et de sortie
Doivent être utilisées pour orienter ce qui se passe dans l'interface, signalant clairement qu'elle passe à un nouvel état.Cela ne signifie pas que vous devez éviter d'ajouter du côté ludique à l'interface,
assurez-vous simplement que les animations ne gênent pas votre utilisateur et que les performances de la page ne sont pas affectées par une utilisation exagérée des animations.
- N'animez pas de gros éléments
Évitez-le car il n'apportera pas beaucoup de valeur à l'utilisateur et ne provoquera probablement que de la confusion. En outre, il y a de fortes chances que les animations soient de mauvaise qualité, aboutissant à
une mauvaise expérience utilisateur.
- Les animations infinies doivent être évitées
Même si Animate.css fournit des classes utilitaires pour répéter des animations, y compris une animation infinie, vous devriez éviter les animations sans fin. Cela ne fera que distraire vos utilisateurs et pourrait
en agacer une bonne partie. Alors, utilisez-le à bon escient !
- Faites attention à l'état initial et final de vos éléments
Toutes les animations Animate.css incluent une propriété CSS appelée animation-fill-mode, qui contrôle les états d'un élément avant et après l'animation. Vous pouvez en savoir plus à ce sujet ici .
La valeur par défaut d'Animate.css est animation-fill-mode: both, mais vous pouvez la modifier en fonction de vos besoins.
- Ne désactivez pas la prefers-reduced-motionrequête multimédia
Depuis la version 3.7.0, Animate.css prend en charge la prefers-reduced-motion requête média qui désactive les animations en fonction des préférences du système d'exploitation concernant la prise en charge
des navigateurs (la plupart des navigateurs actuels la prennent en charge). Il s'agit d'une fonctionnalité d'accessibilité essentielle qui ne doit jamais être désactivée ! Elle est intégrée aux navigateurs pour
aider les personnes souffrant de troubles vestibulaires et épileptiques. Vous pouvez en savoir plus à ce sujet ici . Si votre site Web a besoin des animations pour fonctionner, avertissez les utilisateurs,
mais ne désactivez pas la fonctionnalité. Vous pouvez le faire facilement avec CSS uniquement. Voici un exemple simple :
- Pièges
Vous ne pouvez pas animer les éléments en ligne
Même si certains navigateurs peuvent animer des éléments en ligne, cela va à l'encontre des spécifications d'animation CSS et se brisera sur certains navigateurs ou cessera éventuellement de fonctionner.
Animez toujours les éléments de niveau bloc ou bloc en ligne (les conteneurs et enfants de grille et flexibles sont également des éléments de niveau bloc). Vous pouvez définir un élément sur display:
inline-block lorsque vous animez un élément de niveau en ligne.
- Débordement
La plupart des animations Animate.css déplacent des éléments sur l'écran et peuvent créer des barres de défilement sur votre élément Web. Cela est gérable à l'aide de la overflow: hidden propriété.
Il n'y a pas de recette pour savoir quand et où l'utiliser, mais l'idée de base est de l'utiliser dans le parent contenant l'élément animé. C'est à vous de déterminer quand et comment l'utiliser,
ce guide peut vous aider à le comprendre.
- Intervalles entre les répétitions
Malheureusement, ce n'est pas possible avec du CSS pur pour le moment. Vous devez utiliser Javascript pour obtenir ce résultat.
Bonnes pratiques des animations
Les animations peuvent grandement améliorer l'expérience utilisateur d'une interface, mais il est important de suivre certaines règles pour ne pas en faire trop et détériorer l'expérience utilisateur sur vos objets Web.
Suivre les règles suivantes devrait constituer un bon début.
- Des animations significatives
Vous devez éviter d'animer un élément juste pour le plaisir. Gardez à l'esprit que les animations doivent exprimer clairement une intention. Les animations telles que les animations qui attirent l'attention
(rebond, flash, impulsion, etc.) doivent être utilisées pour attirer l'attention de l'utilisateur sur un élément spécial de votre interface et pas seulement comme un moyen de lui apporter un côté "flashy".
- Les animations d'entrée et de sortie doivent être utilisées pour orienter ce qui se passe dans l'interface, signalant clairement qu'elle passe à un nouvel état.
- Cela ne signifie pas que vous devez éviter d'ajouter du côté ludique à l'interface, assurez-vous simplement que les animations ne gênent pas votre utilisateur et que les performances de la page ne sont
pas affectées par une utilisation exagérée des animations.
- N'animez pas de gros éléments
Évitez-le car il n'apportera pas beaucoup de valeur à l'utilisateur et ne provoquera probablement que de la confusion. En outre, il y a de fortes chances que les animations soient de mauvaise qualité,
aboutissant à une mauvaise expérience utilisateur.
- Les animations infinies doivent être évitées
Même si Animate.css fournit des classes utilitaires pour répéter des animations, y compris une animation infinie, vous devriez éviter les animations sans fin. Cela ne fera que distraire vos utilisateurs
et pourrait en agacer une bonne partie. Alors, utilisez-le à bon escient !
- Faites attention à l'état initial et final de vos éléments
Toutes les animations Animate.css incluent une propriété CSS appelée animation-fill-mode, qui contrôle les états d'un élément avant et après l'animation. Vous pouvez en savoir plus à ce sujet ici.
La valeur par défaut d'Animate.css est animation-fill-mode: both, mais vous pouvez la modifier en fonction de vos besoins.
Étude de votre activité
Analyse approfondie de votre entreprise et de vos objectifs pour une stratégie sur mesure.
Création de votre site web
Conception d'une maquette professionnelle.
Hébergement et sécurisation de votre site sur des serveurs performants.
Mise en ligne
Lancement de votre site web optimisé et responsive.
J'accompagne mes clients dans la conception, le développement et la maintenance, la réactualisation ou la modernisation de votre sites internet dans les années à venir. Une demande de devis WEB ? Besoin d'information pour un projet numérique, je suis joignable au 07 45 72 17 01 et/ou par texto du lundi au vendredi
Et comme une image vaut mille mots, il est aujourd’hui acquis que notre cerveau se souvient beaucoup mieux d’un visuel ou d’une image que d’un texte écrit ou entendu. Fournissez les photos les légendes. et prévoyez plusieurs séances de corrections.
Vous n'êtes pas les seuls à être intéressés, convaincus, satisfaits et intéressés par mes services.
Combien de temps faut-il pour créer un site ?
La création d'un site internet dépend de plusieurs facteurs. En général, la création d'un site vitrine prend entre 1 à 2 semaines. et ensuite la maintenace évolutive et réatualisation si nécessaire. Sur plusieurs années à votre convenance.
Conception de votre site-vitrine,site trés utilisé par les artisants pour présenter leurs activités
Création d'une application web sur mesure en fonction des besoins de votre entreprise et de vos clients.
Un minimum d’implication de votre part est donc, quoi qu’il en soit nécessaire.vous devez fournir les photos avec legende. En d'autre termes votre cahier des charges.
Un développeur ou programmeur Web est une personne qui prend un projet Web, qui a été pensée et réfléchie par un client, et la transforme en site Web. Ils le font en écrivant des lignes de code compliqué. Pour les écrire, ils utilisent différents langages comme HTML. CSS, PHP, JAVA-SCRIPT.
Il ne faut pas perdre de vue la raison pour laquelle votre site attire du trafic. Ce n’est pas pour les animations sympas ou les petits détails clinquants, mais pour son contenu. Donnez à vos visiteurs ce qu’ils recherchent grâce à un design simple et efficace
Le développement Web désigne de manière générale les tâches associées au développement de sites Web destinés à être hébergés
via un Internet. Le processus de développement web comprend, entre autres, la conception de sites web, le développement
de contenu web, l’élaboration de scripts côté client (JS) ou côté serveur (PHP) et la configuration de la sécurité du réseau.
Cela vous parrait compliqué, oui bien sùr, mais je suis là pour vous conseiller au mieux et concevoir le code source de votre site.
La conception du site.
La programmation.
La gestion de projet.
L’hébergement.
Les mises à jour.
La maintenance.
Dans 2 semaines au plus tard vous avez votre site vitrine de votre activité professionnel, grace à votre participation, en construisant votre vitrine Pro.
Enfin, un site internet moderne peut être consulté depuis n’importe quel support. Plus de 60 % de la population consulte le net depuis son smartphone. Mieux vaut donc que votre site soit lisible et facilement consultable aussi bien depuis un ordinateur que depuis un téléphone portable.
Et n'oubliez pas votre site doit être surveillé, mis à jour et optimisé régulièrement pour refléter les évolutions de votre entreprise
Site web concu sans CMS (outil de gestion de contenu ). Uniquement en code source sans Javascript ni d'anti-virus.
1
