Libretoile

Si vous êtes l’heureux possesseur d’un smartphone (Iphone, HTC magic, BlackBerry, etc.), vous vous êtes vite rendu compte que surfer sur internet avec ces merveilleux appareils n’est pas très confortable. Malgré l’apparition de systèmes de zooming très sophistiqués tels que celui de l’Iphone (par étirement et resserrement du pouce et de l’index), la lecture des sites traditionnels n’est pas des plus aisée, les zoomings répétitifs et les va-et-vient transversaux et incessants de l’écran ne facilitent pas la lecture . Les grandes entreprises ont vite saisi l’ampleur du marché des smartphones et ont quasiment toutes conçu des sites dédiés à ces petites machines. Il s’agit de sites minimalistes, allant à l’essentiel et permettant une prise de contact téléphonique rapide avec par exemple un prestataire. C’est donc la conception d’un site pour smartphones (Iphone et autres joujoux) que je vous propose de suivre aujourd’hui.


Avant d’entrer dans le vif du sujet, je tiens à préciser que vous pourrez visualiser sur votre smartphone le site (l’ébauche de site) que j’ai conçu. Rien ne vaut la pratique à mon sens pour expliquer. A ce sujet, j’ai lu sur certains blogs qu’il fallait concevoir le site en 320 X 480 pixels. Ne vous prenez pas la tête, vous utiliserez la résolution habituelle pour votre body mais avec des caractères plus gros. Si vous suiviez le conseil précédemment évoqué, vous obtiendriez…un timbre-poste sur l’écran de votre smartophone.

Un autre précision aussi, la conception de ce site est une première ébauche qui demande à être améliorée grâce à votre expérience et à vos suggestions. Je compte sur votre participation.

Pour réaliser HTMLPocket, j’ai eu recours à certaines ressources et outils :

• Un hébergeur (j’ai choisi Free pour sa gratuité, sa fiabilité et sa rapidité de mise en place)
• Un éditeur HTML et CSS (j’utilise le vieux Notepad++)
• Un logiciel de retouche d’images (Photofiltre sera largement suffisant)
• Un client FTP (ma préférence va à FileZilla)

Si vous avez des lacunes ou si vous ne connaissez rien au HTML et aux CSS, rien n’est perdu. Il vous suffira de vous rendre sur le site du zéro et sur le site css-faciles.com pour y remédier (voir auto-formation dans le sidebar).

Nous allons commencer par voir les premières lignes de ma feuille de style :

body
{
   width: 95%;
   margin: auto; /* Pour centrer notre page */
   margin-top: 2px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 2px;    /* Idem pour le bas du navigateur */
   background-image: url("images/image fond2.jpg"); /* Un fond tramé bleu pour éviter d'avoir un vieux fond blanc */

}

Comme vous le voyez, j’utilise “body” à 95% sans spécifier de largeur ni de hauteur.

Allons voir maintenant comment débuter côté (X)HTML :

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

       HTMLPocket

Comme vous pouvez le constater, le Doctype est classique et ne subit aucune modification. La seule différence, c’est l’ajout de cette petite ligne de code qui permet de vous connecter au site grâce à une icône positionnée le bureau de l’Iphone. Je vous expliquerai par la suite comment la créer :

A part le nom de l’image (ici pocket_iphone.png) et le chemin pour y accéder, ne changez rien à cette ligne.

Question caractères, positionnement et alignement je vous laisse découvrir quelques lignes principales de ma feuille de style :

feuille de style :

 body
{
   width: 95%;
   margin: auto; /* Pour centrer notre page */
   margin-top: 2px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 2px;    /* Idem pour le bas du navigateur */
   background-image: url("images/image fond2.jpg"); /* Un fond tramé bleu pour éviter d'avoir un vieux fond blanc */

}

	h1
	{color: orange;
	font-family:Verdana;arial;sans-serif;text-align: center;
	font-size: 60px;
  }
  h3
  {color: #66FFFF;
  font-family:Verdana,arial,sans-serif;
  text-align: center;
  font-size: 40px
  }
  a,strong.evident
  {
  color:orange
  }
	a.lien
	{
	font-weight:bold
	}
		a.lien:hover
		{
		color:red;background-color: yellow;
		}
		h2
		{
		color:red;text-decoration:bold;text-align: center;
		}
		h4
		{
		font-weight:bold; color:#FFCC00;
		}

J’ai choisi des caractères de grandes tailles, 28 px :

p {

		font-family:Verdana,arial,sans-serif;
		font-size:28px;
		color:white;
		text-align:justify;
		}

En ce qui concerne la présentation de chaque “nouvelle brève”, ornée d’une vignette sur la gauche et d’une flèche sur la droite, j’ai choisi d’opter pour des tableaux (oui, je sais…c’est mal vu en CSS), bien que ce choix ne soit aucun cas définitif :

 /*ci-dessous, style des tableaux de présentation*/
		table
		{
		border-collapse: separate;
		border-spacing: 3px;/* Les bordures du tableau seront collées (plus joli), border-spacing ne fonctionne pas avec tous les navigateurs */
width: 100%
}
		 td.photo
		 {
		 width:200px;
		 height: 200px;
		 background-color: white;
		 border: 1px solid red;
		 }
		 td.texte
		 { width: 1100px;
		 height: 200px;
		 border-bottom: 3px dotted #66FFFF;
		 vertical-align: top;
		 font-family:Verdana,arial,sans-serif;
		 font-size:35px;
		 color:white;
		 text-align:left;
		 }
		 td.fleche
		 {
		 width: 50px;
		 height: 200px;
		 }
		/*ce qui suit ne concerne plus les tables*/

Le but s’un site dédié aux smartphones est également et surtout de permettre aux internautes de contacter téléphoniquement un annonceur simplement en cliquant sur son n° de téléphone, sans le composer. Pour ce faire, vous utiliserez ce lien sans toucher à sa syntaxe (sauf le numéro bien sûr) :

<a class=”telephone” href=”n° de tél”> n° de tél</a>

Comme convenu, je reviens sur la fabrication de la fameuse icône de raccourci qui s’insérera sur le bureau des Iphone quand l’utilisateur voudra mettre votre site en signe (clique sur + au bas et au centre de l’écran, puis “ajouter à l’écran d’accueil”). L’icône sera réalisée en PNG et exclusivement en 57X57 pixels, sans se soucier des coins arrondis qui seront automatiquement générés par l’Iphone. Pour HTMLPocket, j’ai conçu cette icône :

Il ne vous reste plus qu’à vous rendre avec votre smartphone sur le site http://htmlpocket.free.fr. Vous constaterez qu’HTMLPocket n’est qu’une première ébauche de site, créer pour la diffusion de ce billet. Il manque beaucoup d’ingrédients (notamment php). Il serait intéressant que nous échangions entre nous pour arriver à construire ensemble un “gabarit” pouvant être utilisé pour nos projets respectifs.

A ce niveau, les projets ne manquent pas : guides touristiques, sites pour restaurants, pour hôtels, etc. Tout ce qui peut intéresser les possesseurs de smartphones qui sont de plus en plus nombreux.

Si cet article vous a intéressé, sachez qu’en vous abonnant à la newsletter de Libretoile, vous recevrez automatiquement dans votre boîte mail les nouvelles parutions par flux RSS.

Les commentaires sont fermés.