Blog | F4 Design : Créer différemment.

Comment faire un site internet pour smartphone, tablette et ordinateur ?

Cliquez sur la citation pour la partager sur Twitter :

Avec l’avènement des supports mobile, tablette et smartphone, le site internet d’une entreprise doit s’adapter pour capter des nouveaux clients.

Créer un site internet pour mobile, tablette et ordinateur

2 axes de solutions s’offrent à l’entreprise pour créer son site internet :

  1. Créer un site internet pour chaque support et ses résolutions d’écran
  2. Créer un site internet qui s’adapte à chaque support et ses résolutions d’écran avec le « Responsive web design » dit « conception de sites web adaptatifs ».

1.Le site internet créé sur mesure pour chacun des supports et ses résolutions d’écran

Avec cette solution, l’avantage sera d’avoir un environnement de site internet unique pour l’utilisateur et 100% repensé par rapport au support et à la façon dont l’utilisateur se sert du site sur un écran de taille différente. Encore faut-il que le travail soit correctement effectué pour chaque support.

Le plus gros problème de cette méthode pour les petites et moyennes entreprises ou pour les indépendants, c’est le coût bien sûr ! Car chaque site devra être refait entièrement sur la partie visible et la partie gestion de contenu pour pouvoir gérer le site en fonction du support. Cela engendre globalement une multiplication par 3 du prix initial du site pour le refaire sur chaque support. Soit pour un site vitrine à environ 1500 €, optimisé pour l’affichage sur un écran d’ordinateur, on passe à 4500 € au total pour faire 2 autres versions, l’une pour les écrans de tablettes et l’autre pour les smartphones.

Le 2ème inconvénient est que le site ne sera vraiment pas adapté aux autres types d’écran avec leurs résolutions diverses. Il faudra donc se contenter d’une des 3 versions pour la visionner tant bien que mal sur un nouveau support d’écran. Ou investir encore dans une nouvelle version spécifiquement prévue pour un type de plateforme avec sa résolution d’écran.

Exemple de processus de création pour une site vitrine créé 3 fois pour 3 supports : ( ordinateur, tablette, smartphone )

  1. Conception pré-projet pour le site version écran d’ordinateur
  2. Maquettage (écran d’ordinateur)
  3. Découpage/intégration (écran d’ordinateur)
  4. Développement (écran d’ordinateur)
  5. Tests (écran d’ordinateur)
  6. Mise en ligne (écran d’ordinateur)
  7. Optimisation pour le référencement naturel (écran d’ordinateur)
  8. Référencement naturel (écran d’ordinateur)
  9. Mise à jour à effectuer (écran d’ordinateur)
  10. Suivi
  11. Conception pré -projet pour le site version écran de tablette tactile
  12. Maquettage (écran de tablette tactile)
  13. Découpage/intégration (écran de tablette tactile)
  14. Développement (écran de tablette tactile)
  15. Tests (écran de tablette tactile)
  16. Mise en ligne (écran de tablette tactile)
  17. Optimisation pour le référencement naturel (écran de tablette tactile)
  18. Référencement naturel (écran de tablette tactile)
  19. Mise à jour à effectuer (écran de tablette tactile)
  20. Suivi
  21. Conception pré-projet pour le site version écran de smartphone
  22. Maquettage (écran de smartphone)
  23. Découpage/intégration (écran de smartphone)
  24. Développement (écran de smartphone)
  25. Tests (écran de smartphone)
  26. Mise en ligne (écran de smartphone)
  27. Optimisation pour le référencement naturel (écran de smartphone)
  28. Référencement naturel (écran de smartphone)
  29. Mise à jour à effectuer (écran de smartphone)
  30. Suivi

Nous nous retrouvons ensuite avec la redirection de l’ensemble de la communication visuelle vers 3 types de liens en fonction des 3 supports.

Comme vous pouvez le constater, le processus est répété entièrement 3 fois est donc il est forcement très long et coûteux.
Il est aussi bien de souligner qu’il y aura donc 3 interfaces de gestion pour chaque site sur un support donné, donc il sera beaucoup plus long de faire des mises à jours.

Maintenant, découvrons la solution qui est vraiment avantageuse pour les budgets de la plupart des petites et moyennes entreprises… Et qui n’est pas une solution bon marché mais belle est bien une autre façon d’aborder le design et l’interface multisupports.

2.Le site internet créé pour s’adapter à chaque support et ses résolutions d’écran avec le « Responsive web design »

responsive web design (conception de sites web adaptatifs)

Avec cette solution, le site internet devient unique dans sa gestion et il s’adapte à tous les écrans. Pour cela, le principe vient du « Responsive web design » qui est une façon de penser et de développer une interface graphique qui s’adapte à toutes les résolutions des écrans, quels que soient les supports.
Pour arriver à un tel résultat de façon optimisé sur au moins 3 types de supports, il faut partir du principe que l’on casse certaines contraintes qui vont nous permettre d’avoir un site qui s’adapte à toute les résolutions et définir des limites d’affichage en dessous ou au dessus d’une résolution donnée.

3 points essentiels pour créer un site en  » Responsive web design « 

  1. Mettre en place un système de grille flexible
  2. Prévoir l’affichage des images flexibles
  3. Utiliser les media queries

Exemple de processus de création pour une site vitrine créé 1 fois en « Responsive web design »  pour 3 supports : ( ordinateur, tablette, smartphone )

  1. Conception pré-projet pour le site version écran d’ordinateur, tablette et smartphone en commun
  2. Maquettage en commun (écran de smartphone, ordinateur, tablette tactile)
  3. Découpage et intégration en commun (écran de smartphone, ordinateur, tablette tactile)
  4. Développement unique
  5. Tests d’affichage en commun sur les 3 supports  (écran de smartphone, ordinateur, tablette tactile)
  6. Mise en ligne unique
  7. Optimisation pour le référencement naturel unique
  8. Référencement naturel unique
  9. Mise à jour à effectuer unique
  10. Suivi en commun

Pour faire un site internet pour smartphone, tablette et ordinateur, vous avez donc 2 solutions : faire un site sur mesure pour chaque support ou faire un site responsive web design. Les deux approches ont leur lot d’avantages et d’inconvénients, néanmoins pour les petites et moyennes entreprises qui veulent être présentes sur le marché mobile et tablette, le responsive web design est la solution la plus adaptée au budget mais aussi la plus rapide à mettre en oeuvre, la plus simple pour les mises à jour et recommandée pour le référencement naturel par Google.

Voir nos offres de création de sites internet responsive

A propos Loïc Tortelier

Chargé de communication / infographiste et web designer. Sur F4 Design Loïc est le créateur d’identités visuelles, supports de communication, publicité web et de sites internet de plusieurs 10aines d'entreprises, sociétés et associations.

Recevez la newsletter !

liste des supports de communication pour un projet d'entreprise

Recevez dès votre inscription la liste incontournable pour définir vos supports de communication pour votre projet.

  • 42 supports de communication proposés
  • 4 questions indispensables pour chaque supports

Ainsi que les prochains articles et vidéos des projets ou conseils en création de communication visuelle, web et multimédia pour des sociétés, entreprises et indépendants directement par email !






* champ obligatoire.

2 réflexions au sujet de « Comment faire un site internet pour smartphone, tablette et ordinateur ? »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je possède un blog et je souhaite afficher un lien vers l'un de mes articles