Optimiser son site Web pour une utilisation mobile

Les smartphones ont désormais envahi la planète et ont rendu l’accès à la toile possible pour tout internaute en déplacement. Un problème existe néanmoins : la résolution d’un site ne correspond pas forcément à celle du smartphone, ce qui fait que davantage de données doivent être chargées. Ceci peut parfois prendre un temps interminable. Toutefois si un site est bien adapté aux smartphones et aux tablettes, la navigation devient plus fluide et donc bien plus agréable. Nous souhaitons ici vous montrer combien il est facile d’optimiser votre site Internet à l’aide de MAGIX Web Designer.

Optimiser son site
Afin de pouvoir optimiser un site, nous avons bien sûr besoin d’une page dont la résolution est standard, c’est-à-dire aux alentours de 760 x 1 000. Si le site est déjà chargé, vous devrez faire une copie de cette page puis optimiser cette copie pour l’utilisation mobile (pour éviter de modifier votre version pour PC par inadvertance). La page doit tout d’abord être dotée d’une résolution adaptée à l’usage mobile, en d’autres termes une résolution réduite. Dans Web Designer, la taille de page peut être modifiée sous Fichier > Options pages. La plupart des périphériques mobiles ont une résolution moyenne de 480 x 320 pixels. Une fois que la page a été modifiée, vous pouvez constater que ni les éléments ni les textes n’ont subi de modifications. Cliquez simplement sur ceux-ci et tirez sur les poignées extérieures afin de leur donner une taille correcte. Veillez à doter vos boutons d’une taille suffisante afin qu’ils puissent être cliqués du bout des doigts par les utilisateurs. Les pages seront naturellement allongées à cause de ces grands boutons, mais pas de panique ! Web Designer possède une fonction anti-chevauchement qui laisse la page s’adapter automatiquement aux modifications apportées aux boutons et aux textes. Pour que le site mobile soit chargé encore plus rapidement, il est également recommandé d’échanger les graphiques par des équivalents de plus faible résolution. Effectuez un clic droit sur l’espace de travail puis sélectionnez « Affichage multipage » pour bénéficier d’un aperçu clair de toutes les pages placées les unes en dessous des autres.

Accès au site mobile
Une fois votre version mobile terminée, vous pouvez la charger sur votre domaine comme vous le faites d’habitude. Entrez toutefois une URL légèrement différente comme par exemple « monsite.mobile.fr ». De cette manière, l’internaute ainsi que vous-même savez de quelle version il s’agit. Le site est accessible de deux manières : premièrement par détection de navigateur HTML. Cependant comme son nom l’indique, vous devrez travailler en HTML. Votre périphérique mobile détecte automatiquement à quelle version il doit accéder puis charge votre version mobile. Quiconque ne souhaite pas se servir de la détection de navigateur HTML peut également opter pour une seconde manière bien plus simple. Créez simplement un bouton sur votre version PC classique portant par exemple le titre « Version mobile » qui mènera le visiteur de votre site vers… sa version mobile !