Vidéo: Comment modifier le format d'une image pour l'imprimer avec Photoshop ? 2025
Lorsque vous allumez un iPhone ou un iPad, l'orientation d'une page Web s'ajuste automatiquement. Le navigateur Web Safari agrandit (ou réduit) intelligemment les pages Web pour s'adapter à l'écran, mais ce n'est pas parfait. Même si Safari peut faire en sorte que vos pages s'intègrent bien dans l'ensemble, vos conceptions peuvent souffrir parce que:
-
Lorsque la page est agrandie pour s'adapter au mode paysage sur un iPad, les images optimisées peuvent devenir floues.
-
La réduction de la taille des pages peut rendre le texte impossible à lire.
Pendant des années, la plupart des gens ont optimisé la largeur et la hauteur des pages Web pour les écrans d'ordinateurs les plus utilisés:
-
Largeur: Au début du Web, cette stratégie signifiait que vous créiez des conceptions pas plus de 780 pixels de large afin qu'ils s'inscrivent dans une résolution de moniteur réglée sur 800 x 600 pixels. La plupart des gens ont choisi 780 pixels parce que ce paramètre laissait une petite place à la barre de défilement de chaque côté de la fenêtre du navigateur.
Ces dernières années, les moniteurs les plus grands étant devenus plus abordables et plus répandus, la plupart des concepteurs Web ont mis à jour la taille cible de 960 à 980 pixels, ce qui correspond parfaitement aux moniteurs avec une résolution de 1024 x 768 pixels.
-
Hauteur: Bien que la plupart des concepteurs s'accordent sur la largeur d'un design optimisé pour ces tailles d'écran (10 ou 20 pixels), un débat a éclaté sur la question de savoir si les designs des pages web devraient tenir dans ces designs.
La théorie qui sous-tend la limitation de la hauteur des pages Web est basée sur des études suggérant que les utilisateurs n'aiment pas faire défiler une page et que tout contenu non visible lors du premier chargement de la page est ignoré. Peut-être que le défilement a eu une mauvaise réputation au fil des ans. Il est temps d'abandonner l'idée que les conceptions Web ne devraient jamais dépasser plus de 600 pixels sur une page.
Cette figure illustre pourquoi l'iPad a changé pour toujours le débat sur la durée d'une page Web. Vous voyez ici une capture d'écran du site Web ING Direct tel qu'il apparaît sur un iPad en mode portrait. En toute justice pour les concepteurs d'ING Direct, le site s'inscrit confortablement dans les contraintes d'un moniteur avec une résolution de 800 x 600 pixels.
Cependant, en limitant le contenu du site au seuil de 600 pixels, le design n'occupe qu'environ un tiers de l'écran de l'iPad en mode portrait. Même en mode paysage sur l'iPad, le design ne prend pas l'espace vertical, remplissant plutôt le quart inférieur de l'écran avec la couleur de fond orange vif.
Si vous souhaitez créer un seul dessin pour un site Web, il est préférable de concevoir des pages d'une largeur de 980 pixels, puis de les étendre d'au moins 980 pixels sur l'écran.Si vous faites cela, l'iPad et l'iPhone ajustent automatiquement la conception pour remplir l'écran en mode paysage et portrait en ajustant la taille pour s'adapter.
Toutefois, si vous vous souciez réellement du design et que vous souhaitez que vos pages soient à leur meilleur sur l'iPad et l'iPhone, il est préférable de créer deux designs différents.
Les règles relatives aux feuilles de style en cascade (CSS) incluent la possibilité de créer plusieurs feuilles de style afin de tirer le meilleur parti de la taille et des fonctionnalités de chaque périphérique. Par exemple, vous pouvez créer des styles ciblés sur l'orientation paysage ou portrait de l'iPhone ou de l'iPad (comme dans la conception présentée ici).
De même, vous pouvez cibler différents périphériques avec des feuilles de style différentes en créant un jeu de styles pour une page lorsqu'elle est affichée sur un ordinateur de bureau et un jeu de styles différent lorsque la page est envoyée à une imprimante.
