mardi 4 août 2020    Inscription

bannière dossiers

 

 

Par la rédaction le 26/01/2012 Article Rating

Des images flexibles

Le responsive webdesign a toutefois un problème majeur : le travail avec les images. Comme nous l’avons expliqué, il existe de nombreuses techniques (simples) qui permettent de redimensionner les images proportionnellement. La technique classique est celle expérimentée par Richard Rutter, en utilisant le « max-width » de CSS : 

img { max-width: 100%; }

Comme l’expliquait le webdesigner et expert en mobilité Jason Grigsby (" www.cloudfour.com), « l’idée générale des images fluides est de diffuser l’image dans sa taille maximale. On ne déclare pas la hauteur et la largeur (height et width, ndlr) dans le code, mais on laisse le navigateur redimensionner les images en fonction des caractéristiques de la page en utilisant CSS pour donner leur taille relative ».


Toutefois, notez que le « max-width » de CSS n’est pas supporté dans Internet Explorer de Microsoft, même si la solution est alors d’utiliser : width: 100%

Dans tout cela, n’oublions pas non plus que les préoccupations principales : résolution, poids des images et temps de téléchargement. Redimensionner une grande image est très simple, mais cela peut aussi significativement augmenter le temps de chargement de votre page. 

Voici également une autre technique qui peut s’avérer très opportune. Elle a été pensée et créée par le Filament Group. Elle consiste non seulement à redimensionner les images proportionnellement, mais aussi à rétrécir la résolution de l’image sur les petits appareils mobiles. Ainsi, les très grandes images ne gâchent pas l’espace sur ces appareils. Une démonstration est disponible à cette adresse : " http://filamentgroup.com/examples/responsive-images/.

Cette technique nécessite quelques astuces, ainsi que des ressources à chercher sur " https://github.com/filamentgroup/Responsive-Images.


A la rencontre des media queries

Depuis la version 2.1 de CSS, nous pouvons utiliser les media types comme « screen », « print » ou « handheld ». CSS3 ajoute une douzaine de nouvelles fonctionnnalités, à l’instar de « maxwidth », « device-width », « orientation » ou « color ». Les nouveaux appareils (iPad, Android…) supporteront nativement ces fonctions. Ainsi, appeler un media query qui utilise une fonction CSS3 pour ces appareils marchera très bien, mais sera ignoré sur un navigateur non compatible avec CSS3. Voici un exemple de media query donné par Ethan Marcotte :

1     <link rel="stylesheet" type="text/css"
2      media="screen and (max-device-width:480px)"
3      href="shetland.css" />

Cette requête est assez explicite : si le navigateur affiche la page sur un, et si la largeur de l'écran (pas nécessairement celle de la fenêtre) est de 480 pixels ou moins, charger Shetland. css. Dans l’exemple, on distingue donc deux composants :
  • Un type de média (ici l’écran en l’occurrence), 
  • Puis la « query », entre parenthèses, qui contient la fonction donnée, suivie par la valeur.

Intéressons-nous également aux fonctions « orientation » et « device-width » qui sont autrement nécessaires, avec la banalisation de la bascule entre mode portrait et paysage, notamment sur les appareils mobiles. Ces 2 notions s’affrontent, et les spécialistes s’accordent sur leur utilisation. Le consensus s’établit autour du fait qu’il convient d’utiliser « device-width » par défaut dans presque tous les cas. Presque tous, puisque l’iOS pose un problème sur ce point, et il est donc préférable d’utiliser le media query « orientation » (pour plus d’informations sur ce sujet : " http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html).

Une autre technique consiste à créer plusieurs media queries dans une seule feuille de style. Ce qui donne ce résultat (issu d’un template gratuit d’Andy Clark) :

01      /* Smartphones (portrait and landscape)
----------- */
02      @media only screen
03      and (min-device-width : 320px)
04      and (max-device-width : 480px) {
05      /* Styles */
06      }
07
08      /* Smartphones (landscape) -----------
     */
09      @media only screen
10      and (min-width : 321px) {
11      /* Styles */
12      }
13
14      /* Smartphones (portrait) ----------- */
15      @media only screen
16      and (max-width : 320px) {
17      /* Styles */
18      }

Voir tous les dossiers PhotoShop

Notations 

Sélection de tutoriels

Créez votre portfolio (2)
Par la rédaction le 19/10/2011
Dans ce didacticiel nous allons voir ensemble comment créer sous Photoshop (peu importe la version) un portfolio simple mais efficace puis comment découper le design afin de l’intégrer en utilisant le couple HTML / CSS. Le design de celui-ci est minimaliste et je pense que cela est important et valable sur n’importe lequel des supports où vous pouvez présenter vos travaux (par exemple pour le book).

[Voir le tuto...]

Autres tutoriels Flash, Web
Colorisation dans Flash
Par la rédaction le 01/10/2006

DOMAINE : Couleur
LOGICIEL : Flash
NIVEAU : Amateur

Cet exercice va vous montrer qu'il est possible de faire de la colorisation de dessin directement dans Flash pour ensuite pouvoir animer les éléments. - Dan Drapper/Philippe Beaudran

[Voir le tuto...]

Autres tutoriels Flash, Web
Flash : page de chargement /preloading
Par la rédaction le 10/05/2006

DOMAINE : Web
LOGICIEL
: Flash
NIVEAU:
Amateur
PUBLIE LE :
10-05-06

Lorsque votre site tout entier ou même une partie en Flash est un peu trop lourde, un chargement est nécessaire. Aussi appelé "preload", voici comment réaliser cette "salle d'attente". - Maurice Philippon

[Voir le tuto...]

Autres tutoriels Flash, Web