Accueil > html5_css3 > transformez-votre-site-en-veritable-web-app

{ Transformez votre site en véritable web app }

Pourquoi ?

Dans ce tuto je vais vous expliquer comment rendre « compatible » un site avec les appareils iOS et en faire une Web App.
Mais qu’est-ce qu’une Web App au juste ?

A la différence d’une application native – que vous auriez acheté sur l’App Store – une Web App n’est pas entièrement dépendante du système puisque l’ensemble des données sont hébergées sur un, voire plusieurs serveurs.
L’application n’est en réalité qu’une fenêtre qui s’ouvre sur une bonne vielle page web. Ce qui est une bonne chose pour nous !
Et oui pas besoin d’apprendre un langage de programmation – ouf ! – et surtout c’est rapide à mettre en place.

Quand le web design devient réactif

Responsive Web Design ” (ou Web Design Réactif), est un terme important dans le développement de site multiplateformes. Aujourd’hui la nécessité de casser les barrières des plateformes/systèmes, et donc de créer un contenu réellement accessible par tous (première vocation du web), sont plus que jamais la ligne conductrice de tous les développements web. Et dans le domaine du webdesign, nous n’avons jamais été autant sensibilisé à ce sujet.

Les résolutions vs taille des écrans

Le piège courant est de penser que la résolution d’un écran va de pair avec sa taille. Hélas ce n’est pas aussi simple. Voici donc pour vous la liste (non exhaustive) des résolutions d’écrans les plus courantes pour les appareils mobiles :

  • 320x420 (largeur x hauteur en position portrait)

  • 240x320 (largeur x hauteur en position portrait)

  • 240x260 (largeur x hauteur en position portrait)

Et là vous vous dites : « 3 formats, finger in the nose ! » Mais vous vous doutez bien que les choses ne sont pas si simple ! Et oui, comme à sont habitude, notre cher marque à la pomme ne fait rien comme tout le monde (ou le monde ne fait rien comme Apple ?).
Et donc voici les spécificités des appareils mobile sous iOS :

  • iPhone 3 / 3GS : 320x480 pixels (largeur x hauteur en position portrait, ce qui donne l'inverse en position paysage)

  • iPhone 4 / 4S : 640x960 pixels (largeur x hauteur en position portrait)

Comme vous pouvez le constater l’iPhone 4 a donc une résolution 2 fois plus grande que son prédécesseur, ce qui ne l’empêche pas d’avoir exactement la même taille d’écran :
Soit 3,5 pouces (9 cm) pour des dimensions d’environ 7,5 cm x 5 cm !

Houlà vous suivez encore ?
Bon pour simplifier, votre iPhone 4 affichera toujours une page web dans 320px (comme un iPhone 3) mais avec 2 fois plus de netteté.

Finissons notre tour d’horizon des résolutions/tailles d’écrans sur mobile par l’inévitable iPad. Aujourd’hui le marché des tablettes commence tout juste à prendre ses marques. Peux d’appareils on réellement trouvé leur place et à l’heure actuel il n’y a pas vraiment de « standard » établit.

  • iPad 1/2: 768x1024 pixels (largeur x hauteur en position portrait) à raison de 132 pixels par pouce (ppp), pour un écran de 9,7 pouces (environs 25cm).

  • Nouvel iPad : 1536x2048 pixels (largeur x hauteur en position portrait) à raison de 264 pixels par pouce (ppp), pour un écran toujours de 9,7 pouces (environs 25cm).

Bref ! Vous l’aurez compris, ce n’est pas triste !
Mais on peut synthétiser tout ça en disant que dans le cas d’un développement de type “ Responsive Web Design ” on doit prendre en compte 3 grand cas de figure :

  1. Travailler en 960px (maximum) pour les versions dites « desktop » classiques

  2. Travailler en 720px (environs) pour les tablettes tactiles

  3. Plus compliqué pour les mobiles, travailler sur une largeur variable, c’est à dire sur un minimum de 480px et un maximum de 640px histoire de couvrir un large panel de possibilités étant donné le nombre de résolution entre les marques et modèles de mobiles.

Le viewport : fenêtre avec vue…

Non le viewport n’est pas le nom du dernier endroit à la mode, mais plutôt un terme désignant la surface d’affichage sur un appareil mobile. Et bonne nouvelle, on peut la modifier !
Exemple :

<meta name="viewport" content = "width = device-width, initial-scale = 2.3, user-scalable = yes" />

Mais c’est quoi ça ? Et bien voilà la métadonnée (à placer entre balise <head>) qui vous permet simplement de définir la zone à afficher sur votre site. Explications :

Width : Définit la largeur de la zone d’affichage. Par défaut elle est de 980px.

Plusieurs paramètres peuvent être spécifier :

  • device-width : Il est conseillé de l’utiliser afin de n’avoir qu’un seul viewport pour tous les appareils iOS (iphone/ipad). Ainsi cela permet d'ouvrir une page en pleine largeur.

<meta name="viewport" content = "width = device-width" />
  • Initiale-scale : La zone évolutive de la zone d’affichage (commence à 1 et fini à 9).

<meta name="viewport" content = "width = device-width, initial-scale = 1" />
  • User-Scalable : « yes » ou « no » vous permettant d’autoriser ou non l’utilisateur à zoomer /dé-zoomer sur votre site.

<meta name="viewport" content = "width = device-width, initial-scale = 1, user-scalable = yes" />

App icon et splash screen

Derrière ces nom un peut barbare se cache des éléments que les utilisateur iOS sont habitué à voir : l’icone de l’application et l’écran de chargement. L’icône de l’application (App Icon) c’est ce qui s’affiche sur « l’écran d’accueil » ou le bureau de votre iphone/ipad. L’écran de chargement (Splash Screen) c’est l’image de transition pendant le chargement de votre application.
En les spécifiant dans le head, vous pourrez personnaliser votre application :

<link rel="apple-touch-icon" href=" apple-touch-icon.png"/>
<link rel="apple-touch-startup-image" href=" splash-screen.png"/>

Bien-sûr il en faut un en format portrait ainsi qu’une autre en format paysage pour chaque appareil : l’iPhone 3, l’iPhone 4, l’iPad.
On procède comme ceci :

<!-- icon for iOS Devices -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />

<!--Splash screen for iOS Devices -->
<link rel="apple-touch-startup-image" href="splash-screen-320x460.png"/>
<link rel="apple-touch-startup-image" sizes="1024x748" href=" splash-screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="splash-screen-768x1004.png" />
<link rel="apple-touch-startup-image" sizes="640x960" href="splash-screen-640x960.png" />

Les différentes tailles des icônes doivent être 57x57, 72x72, 114x114 pour l’iphone 3, l’iphone 4 et l’ipad.
Pour les Splash Screen, vous devez avoir 320x460, 640x960, 768x1004, 1024x748, les 2 premiers concernent l’iphone (portrait/paysage) et les suivant l’ipad (portrait/paysage). Essayez de les nommer exactement «apple-touch-icon.png » et « splash-screen.png ».

Tout ceci est obligatoire seulement si vous souhaitez faire un site iphone & ipad compatible

Mise en situation

Voici un exemple de ce que cela pourrait donner :


<head >

<!-- Display compability for iOS Devices -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- END Display compability for iOS Devices -->

<!-- icon for iOS Devices -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-startup-image" href="images/splash-screen-320x460.png"/>
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash-screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash-screen-768x1004.png" />
<link rel="apple-touch-startup-image" sizes="640x960" href="images/splash-screen-640x960.png" />
<!-- END icon for iOS Devices -->

</head >

Conclusion

On voit qu’il n’est pas si difficile de créer une web app pour iOS, cela dit si vous testez votre site vous remarquerez une chose : il n’est pas adapté à la lecture sur mobile. Surtout sur iphone où le contenu est pour ainsi dire illisible ! Mais heureusement HTML5 & CSS3 vient à notre secours, grâce aux Medias Queries.

Media Queries ? Non, malgré son nom trompeur, ce n’est pas du JavaScript ! Ce sont des «appels » CSS3 qui permettent entre autre de détecter la taille d’un écran afin d’appliquer une feuille de style spécifique. Mais on verra ça dans un prochain tuto !

...Allez je ne part pas sans vous laisser un exemple de Media Queries :

<style type="text/css">

@import url("css/mobile.css") screen and (max-device-width: 600px) !important;

</style>

ou

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="css/mobile.css"/>