Les utilisateurs accédant à Internet via des tablettes et des téléphones portables sont de plus en plus nombreux. Cela, comme vous le savez déjà, signifie qu'il ne suffit plus de concevoir une bonne page Web qui a l'air bien sur notre ordinateur: elle doit également être vue sur chaque appareil mobile. Le problème? Différentes tailles d'écran et résolutions. C'est pourquoi il est si difficile de réaliser un design qui s'adapte correctement à tous les supports (le fameux responsive design, traduit par conception adaptative).
Voici quelques conseils à garder à l'esprit lorsque vous créez un design avec ces caractéristiques. Accorde une attention!
Conseils pour la conception adaptative
- Créer un modèle simplePar simple, je ne veux pas dire fade. Je parle du structure HTML de votre site Web: plus il est clair, mieux c'est. Gardez à l'esprit qu'un écran d'ordinateur peut contenir trois colonnes verticales; sur l'écran d'un mobile, vous n'en mettrez qu'un. Pensez-y et comment vous allez repositionner les éléments.
- Éliminez tout ce qui est inutileÉvitez les effets jQuery, les animations Flash et tout autre code qui ralentit le chargement de votre page. Moins vous avez de contenu de ce type, plus le Web se charge rapidement.
- Définir un style css pour chaque "taille"Créez un tiny.css, small.css et big.css (par exemple) qui s'exécute en fonction de l'appareil sur lequel il est affiché. Par exemple:
<style>
@import url (tiny.css) (largeur min: 300px);
@import url (small.css) (largeur min: 600px);
@import url (big.css) (largeur min: 900px);
</style>
- Les résolutions les plus utilisées320px/480px/720px/768px/900px/1024px
- Rendez votre modèle FLEXIBLEChaque fois que vous le pouvez, travaillez avec des pourcentages au lieu de montants fixes. Voici quelques équivalences de référence: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Typographie C'est plus important que jamais. Parfois, l'écran de votre appareil peut être si petit que vous ne voyez que du texte. C'est pourquoi nous devons sélectionner très soigneusement les meilleures polices sur notre site, afin que lorsqu'elles sont réduites en taille, elles ne perdent pas de lisibilité. De plus, nous devons savoir combiner des polices plus neutres avec d'autres avec une personnalité qui donne au web le caractère nécessaire. Par conséquent, le premier conseil est que vous passiez du temps à sélectionner les polices que vous allez utiliser.
- Utiliser images de haute qualitéComme l'espace est réduit, les images l'accompagneront. Sélectionnez ceux qui ne perdent pas de qualité lorsqu'ils sont réduits et qui fonctionnent de la même manière lorsqu'ils sont mis à l'échelle. Une image de mauvaise qualité rendra votre site Web mauvais.
- Que tes images sont toujours vues en entierEmpêchez vos photos d'être coupées en ajoutant le code img (width: 100%;) dans votre css. De cette façon, vous indiquez à l'appareil de recalculer la hauteur à donner à l'image afin que sa largeur soit visible à cent pour cent.
- Tout bas la même URLOubliez les sous-domaines tels que www.monsite.com/mobile, car le même fichier index.html dans le dossier racine fonctionnera pour tous les appareils (si vous faites correctement la conception adaptative). Vous connaissez déjà l'avantage: moins il y a de sous-domaines, plus le chargement de la page sera rapide.
- Profitez des supports: Soyez imaginatif Ce n'est pas la même chose d'accéder à un site Web depuis un ordinateur de bureau que depuis un iPad ou un téléphone mobile. Avec le premier, vous naviguerez de manière calme et sereine. Avec ce dernier, vous le ferez aux heures creuses et fermerez la fenêtre dès que vous vous ennuierez. Profitez de ces conditions pour divertir l'utilisateur et lui faire s'amuser dans les quelques minutes qu'il va vous consacrer. Peut-être qu'à son retour à la maison, il décidera de vous rendre visite d'une manière plus détendue.
- Être inspiré Dans les publications numériques, vous vous demanderez pourquoi ce conseil. Très facile: magazines numériques (bon) savoir profiter du support et leur conception est très intelligente. Inspirez-vous d'eux et créez un site Web difficile à quitter.
Plus d'informations - Magazines numériques
La source - splio, 960.gs, en colonne
Il y a des choses avec lesquelles je ne suis pas vraiment d'accord.
Au point 5 ... puisque 200px = 15,38% et les suivants ... cette comparaison de référence ne peut se faire sans aucune mesure parent, la taille par pixels n'est pas une mesure relative comme les pourcentages!
Spécifiez les images avec la largeur: 100% faux, je ne pense pas que cela devrait être une recommandation. Il vaut mieux définir les images avec leur largeur et hauteur, donc le serveur prend moins de temps pour traiter les informations (il n'a pas à calculer sa taille) et nous améliorons la vitesse de chargement de la page (très important en web adaptatif ou responsive conception).
J'inclurais déjà, même si c'est une touche de nez ... les images pour les écrans rétine. Si nous voulons faire de la conception Web réactive, il est obligatoire d'utiliser des images pour l'affichage de la rétine, car un pourcentage élevé de vues mobiles et tablettes utilisent ces écrans. Il ne sert donc à rien de mettre l'effort dans une conception pour eux à mi-régime.
Bon pour le reste
Au point 5, ils vous mettent en contexte et vous parlent d'une mise en page totale de 1300px avec 3 colonnes, une de 200, 300 et 1000.
Si vous le passez à des pourcentages, dans leur cas, ils sont comme vous le dites, 15,38% ((200 * 100) / 1300) (décimal ci-dessous, système international: P)
Mais si nous parlons d'une mise en page 500px et que nous avons 3 colonnes, une de 200, une autre de 200 et une autre de 100px, les pourcentages ne sont plus les mêmes, dans ce cas 200px = 40% ((200 * 100) / 500)
Ils seraient: 200px = 40% et 100px = 10%
Allez, comme je l'ai dit, ils ne sont pas une référence ce que vous indiquez, ils ne sont qu'une référence sur une mise en page 1300px.
salutations
Quel échec, vous avez absolument raison dans le monde! Merci encore ;)