Il est aujourd'hui indispensable de permettre à vos visiteurs d'accéder à votre site depuis n'importe quel appareil. Le web est aujourd'hui omniprésent et plus aucun téléphone actuellement vendu n'est dépourvu d'un accès à internet. Ceci dit, les téléphones, les tablettes, les télévisions connectées et tous les autres appareils dits "intelligents" ne permettent pas aux utilisateurs d'accéder aux contenus que les sites internet proposent dans les même conditions qu'avec un ordinateur : les écrans sont plus petits, souvent tactiles, il n'y a pas de souris et parfois aucun autre dispositif de saisie qu'une télécommande. Plein de petites différences qui rendent la visite de certains sites particulièrement complexes.

OnlineCreation.me a réfléchi à ces problématiques et peut vous aider à transformer votre site en un site dit "responsive", c’est-à-dire qui s'adapte à l'appareil de l'utilisateur. Le principe de base du responsive design est qu'un site doit être aussi confortable à consulter sur une tablette que sur un téléphone, un ordinateur, ou tout autre appareil connecté, tant qu'il dispose des technologies suffisamment avancées pour profiter pleinement des usages actuels du web. Il est évident qu'il sera impossible de faire fonctionner parfaitement un site comportant des vidéos et des animations sur un téléphone monochrome, disposant d'un écran minuscule, non tactile ou incapable d'afficher une photographie dans une qualité acceptable.

0. Sauvegarde

L'opération à venir est relativement facile à réaliser, mais pour plus de sécurité, il est recommandé de faire une sauvegarde de votre site internet avant.

Pour vous faciliter les choses, nous vous offrons le coupon suivant pour effectuer une sauvegarde de votre site :

BACKUP

Attention, ce coupon n'est valable qu'une seule fois par site et n'offre qu'une seule sauvegarde.

En savoir plus sur "Comment faire une sauvegarde"

1. Optimisation des pages

La première des choses à faire pour assurer une compatibilité avec les mobiles est de passer en revue chaque page de votre site à la recherche de :

• tableaux
• grandes images (en dehors des albums photos)
• éléments (objets publicitaires, vidéos intégrées, etc.) que vous avez définis comme devant occuper une grande largeur (>250 px)

Notez les endroits de chacun de ces éléments. Dans la mesure du possible, réduisez la largeur de chacun de ces éléments à 250 pixels ou, dans l'idéal ou si vous en avez la possibilité, ne définissez aucune largeur. Cela se fait généralement en vidant le champ largeur dans les tableaux, en définissant une largeur à 100% dans la plupart des autres cas. Si aucune de ces options ne vous est offerte ou si vous n'êtes pas satisfait du résultat, notez simplement leur emplacement, nous y reviendrons.

Toutes les images pour lesquelles vous avez remarqué un temps de chargement un peu long peuvent être retravaillées à l'aide d'un outil comme Punchi.me (gratuit) :

1. Rendez-vous sur Punchi.me
2. Choisissez une ou plusieurs images qui met du temps à se charger et ajoutez-les à l'aide du bouton Parcourez vos photos
3. Téléchargez et envoyez les nouvelles images dans la gestion des documents de votre site
4. Remplacez les images lentes à charger par les nouvelles et testez.

La réduction de la taille et l'augmentation de la compression font que les images prendront à l'avenir moins de temps à apparaître. Les utilisateurs de connexions mobiles lentes (EDGE ou 3G) vous en remercieront.

2. Changement de thème graphique

Il est difficile de faire autrement : les anciens designs, l'apparence du web d'avant l'arrivée du responsive design, ne sont plus utilisable sur appareil mobile. Pour pouvoir s'adapter au nouveaux usages, votre site doit changer d'apparence. Afin de vous permettre de choisir un thème graphique correspondant au mieux à l'esprit de votre site, OnlineCreation.me a développé plus de 200 nouveaux designs prêts à l'emploi et travaille sur l'adaptation de l'outil de conception de thème graphique personnalisé pour lui apporter cette compatibilité mobile.

Attention : si vous n'avez pas encore fait de sauvegarde de votre site, il est fortement recommandé de le faire maintenant
Reprendre un design d'ancienne génération peut causer des dysfonctionnements imprévisibles sur votre site. Seul une sauvegarde peut vous permettre d'annuler de manière fiable cette opération.

Notez que cette opération modifiera l'outil de rédaction de l'espace d'administration.

1. Dans l'administration de votre site, cliquez sur Configuration
2. Cliquez sur Thème graphique
3. Cliquez sur En choisissant un thème prédéfini
4. Choisissez un thème graphique et cliquez sur Utiliser le thème sélectionné.

« Vos designs sont un peu austères ! Je veux des photos, des dessins, des trucs qui claquent ! »
- Rassurez-vous, nous avons conçus ces designs les plus sobrement possible afin de ne pas perturber votre créativité et de vous permettre d'ajouter les éléments que vous souhaitez sans risquer de faute de goût. Une fois que vous avez choisi un design, c'est votre image qui l'habillera ! Illustrez vos pages avec des photos, intégrez même votre logo, votre site est libre d'accueillir votre esprit créatif !

3. Vérification et correction des anomalies

Le plus gros du travail est fait, votre site a maintenant une apparence équivalente sur mobile, tablette ou ordinateur. Cependant, quelques petits défauts graphiques risquent de perturber la navigation. Commencez par consulter votre site sur un ordinateur. Passez en revue chaque page et, à l'aide de l'administration, corrigez les éléments qui pourraient avoir changé d'aspect ou présenterait une irrégularité.

Ensuite, reprenez la liste des éléments étudiés en 1. Rendez-vous sur votre site, toujours à l'aide d'un ordinateur et, pour chaque page notée :

1. Rendez-vous sur la page contenant un élément volumineux
2. Avec le pointeur de votre souris, cliquez sur le coin inférieur droit de votre navigateur, maintenez le bouton enfoncé et déplacez votre curseur vers la gauche afin de réduire au strict minimum la largeur de la fenêtre. Vous simulez ainsi un écran d'appareil mobile : lorsque la fenêtre occupe un espace équivalent à la taille d'une tablette, vous simulez l'affichage en mode tablette tactile, lorsque la fenêtre occupe un espace équivalent à un téléphone portable, vous simulez l'affichage en mode téléphone portable. Notez comment le menu de votre site change de disposition et comment, normalement, le contenu de votre site s'adapte à la nouvelle disposition.
3. Partout où vous avez été obligés de conserver un tableau, s'il ne s'adapte pas bien ou s'il ne rentre pas dans la disposition la plus petite, si son objectif est uniquement de présenter de manière esthétique des éléments en vis-à-vis, récréez cette disposition à l'aide des "thèmes". Pour ce faire :
   1. Rendez-vous sur l'administration de votre site, ouvrez l'outil de rédaction et placez-vous sur la page en question
      
   2. Cliquez sur le menu Insérer puis sur Ajouter un thème
   3. Choisissez le même nombre de colonnes que contenait votre tableau
   4. Des blocs dessinés en pointillés apparaissent, disposés les uns au-dessus des autres ou côte à côte. Ces blocs sont destinés à s'adapter dynamiquement en fonction de l'espace dont ils disposent. Agrandissez l'éditeur au maximum pour voir apparaître les blocs en colonnes si ce n'est pas encore le cas.
   5. Disposez dans les colonnes les éléments précédemment disposés dans le tableau. Si vous souhaitez créer une nouvelle rangée de colonnes, placez-vous à la suite de la première ligne créée et ajoutez un nouveau thème.
4. Maintenant, testez sur un maximum d'appareils ! Si vous avez un smartphone ou une tablette, rendez-vous sur votre site (attention à vous assurer que cela est bien inclus dans votre abonnement et ne représente pas de surcoût), sinon, empruntez-en un à un proche, ami, collègue... N'hésitez pas non plus à utiliser les outils de simulation que vous pourrez trouver sur le net, comme http://www.responsimulator.com.
   
   Sur le navigateur Firefox, vous disposez aussi de fonctionnalités de simulation d'appareil mobile. Pour cela, ouvrez Firefox, rendez-vous sur votre site, cliquez avec le bouton droit de votre souris sur une page de votre site et cliquez sur Examiner l'élément. Cliquez ensuite sur le bouton Vue adaptative et parcourez votre site.

Vous avez maintenant les clés pour offrir à votre site les visiteurs de demain. A partir de maintenant, vos visiteurs sont susceptibles d'arriver à l'aide de n'importe quel appareil, pensez donc à tester régulièrement que les contenus que vous installez soient bien compatibles avec les écrans étroits ou tactiles.

4. Bonus : intégrez votre logo à votre nouveau design !

Vous avez été nombreux à demander cette fonctionnalité, elle est enfin disponible avec cette nouvelle génération de designs : vous pouvez maintenant intégrer l'image de votre choix à l'emplacement du titre de votre site. Pour cela :

1. Dans l'administration de votre site, cliquez sur Configuration
2. Cliquez sur Configurer votre site
3. En face du champ Logo, cliquez sur Choisir une image
4. Choisissez une image, validez et enregistrez
5. Rendez-vous sur votre site et vérifiez que votre logo s'intègre bien à votre nouveau design.

Si votre projet ne possède pas encore de logo, essayez https://logo.onlinecreation.me !

Crédit photo : William Iven