Création de site responsive design : Top 3 des solutions

Création de site responsive design : Top 3 des solutions

Faire son site internet en 2017 est devenu simple. Créer un site responsive design l'est un peu moins. Nous allons à travers cette article vous donner toutes les astuces pour créer un site internet responsive design, peu importe comment vous allez décider de créer votre site web.

1. Créer un site web responsive avec un logiciel de création de site web en ligne

Les logiciels de création de site internet en ligne, appelés également Website builder, sont des outils modernes de création de site internet, tout en un et 100% en ligne.

La majorité des logiciels comme Orson.io propose des templates gratuites de base et 100% responsive design. Ce n’est pas le cas de chaque website builder, il faudra bien vérifier lorsque vous allez tester. Vous avez généralement une période d’essai gratuite pour essayer les différentes fonctionnalités.

Pensez bien à tester en construisant un réel site internet. Vous pouvez essayer par exemple de faire la page d’accueil de votre site internet pour pouvoir comparer les différents éditeurs.

Testez si votre site internet s’adapte bien en responsive design. Chez Orson.io, on s’assure que peu importe le contenu textes, images, vidéos que vous allez ajouter ou modifier sur votre site internet, le rendu graphique sera toujours parfait sur tablettes ou sur mobiles. Nous utilisons un système de grille qui vous permet toujours d’avoir un site internet au look professionnel et 100% responsive design.

Dans d’autres logiciels de création de site web, vous devrez sans doute faire une version de votre site internet pour ordinateur et une autre pour mobile.

Pour aller plus loin dans la comparaison des différents logiciels de création de site internet, voici un comparateur en ligne qui traite de ce sujet:

Comparatif des solutions de création responsive design

 

http://www.logicielcreationsiteinternet.info/

2. Créer un site internet responsive design avec un CMS

Les CMS (Content management system) tels que WordPress ou Joomla sont les logiciels les plus utilisés pour la création de site internet dans le monde. Ils présentent l'avantage de pouvoir personnaliser énormément son site internet et de faire ce que l'on souhaite si l’on maîtrise la technique et la programmation informatique.

La réelle difficulté réside dans la maintenance et de la mise à jour de ces logiciels gratuits. Étant très utilisés, ces CMS progressent rapidement et sont sollicités en termes de sécurité, conséquence des nouvelles versions voient le jour régulièrement. Les mises à jour automatiques ne sont pas assurées puisque chacun personnalise le CMS pour son propre site internet avec un système de plugins et de modules complexes.

Comment créer un site web mobile avec une template dédiée?

Pour créer votre site internet responsive design avec une template dédiée, vous pouvez choisir une version gratuite directement sur les plateformes du logiciel concerné.
Si vous souhaitez une template responsive design plus personnalisée et plus aboutie pour votre CMS, vous trouverez votre bonheur sur des places de marché de templates tels que Themeforest.
Themeforest

 

https://themeforest.net/popular_item/by_category?category=wordpress

Lorsque vous faites votre sélection, regardez bien les critères suivants:

  • Est ce garantit Responsive design ?
  • La compatibilité avec la version de votre CMS: très important de vérifier la version du CMS que vous utilisez. Comme évoqué précédemment, les templates ne sont pas forcément compatibles avec l’ensemble des versions antérieures des CMS mais uniquement avec les plus modernes.
  • Nombre de sites internet qui utilise cette template, popularité: les thèmes les plus populaires sont souvent riches en terme de profondeur, c’est-à-dire qu’ils permettent de faire réellement tous types de sites internet: blogs, magazines, sites vitrine ou sites e-commerce. Il sera seulement un peu plus compliqué de les installer et de les configurer du fait du nombre important de paramétrages proposés.
  • Votre template est elle compatible avec les bonnes versions de Worpress et sous quelle type de licence cela fonctionne t’elle ?

Si vous avez déjà un site existant avec un thème qui n'est pas responsive design, vous allez pouvoir le migrer vers votre nouvelle template préalablement sélectionnée.

L’installation du thème peut prendre du temps puisqu’il y’a beaucoup de chose à paramétrer pour faire le site internet que vous souhaitez. Suivez bien la documentation fournie.

Si vous avez du mal à paramétrer la template depuis 0, prenez la version de base de la template qui sert d’exemple tout fait. Vous pouvez partir de cet exemple et ensuite enlever les contenus que vous n’aimez pas.

Si vous avez des questions, vous avez généralement accès à un support assez limité ou vous devrez trouver votre réponse sur des forums maintenus par la communauté de clients ayant acheté ce même thème.

Les templates de CMS coûtent entre 40€ et 70€ selon la complexité des templates et des fonctionnalités proposées.

Tester Orson gratuitement

3. Coder soi même un site internet responsive design

Dans le cas où vous prenez l'option de développer vous même votre site internet, nous vous conseillons vivement d'utiliser un Frameworks HTML/CSS adapté. Il faut savoir maîtriser les langages de développement HTML et CSS pour pouvoir utiliser ces outils.
Les plus connus sont ceux conçus par Twitter Bootstrap ou Foundations. Ils sont gratuits et en open source, vous pourrez donc faire ce que vous souhaitez du code fourni.
Voici des exemples de sites réalisés avec la technologie Bootstrap (Spotify, Netflix)

http://expo.getbootstrap.com

Vous êtes clairement entre de bonnes mains.

Qu’est ce qu’un Framework HTML/CSS responsive design?

Un framework HTML/CSS est une boîte à outils en abstraction qui permet de répondre à 90% des besoins de création de site internet.

Ces frameworks intègrent un système de grille ingénieux qui va vous permettre de vraiment créer la mise en page que vous souhaitez. C'est une sorte de jeux de briques avec des colonnes que vous personnalisez et dans lesquelles vous allez ajouter le contenu de votre site internet.

Vous y trouverez également tous les composants nécessaires pour construire un site internet professionnel: menu, colonnes, boutons etc.

http://getbootstrap.com/components/#btn-groups

L’ensemble de ces composants ont été testés par la communauté de développeurs. Vous allez bien évidemment pouvoir personnaliser l’ensemble des composants, de la taille aux couleurs.

Astuce Orson.io: vous pouvez utiliser Orson bootstrap thème pour personnaliser en quelques clics votre thème bootstrap et changer par exemple le bleu ou le rouge des boutons que vous voyez dans l’exemple ci-dessus.

Le vrai avantage de ces Framework est, lorsque vous maîtrisez les composants proposés, de vous permettre de monter et construire votre site internet en un temps record avec une qualité professionnelle.

Ces Frameworks vous permettront de définir simplement une mise en page différente en fonction des différents tailles d'écrans. Vous pourrez également afficher ou cacher certains composants uniquement sur mobile, tablette ou ordinateur. Très pratique pour fluidifier la navigation sur votre site mobile qui demande moins de contenus et d’actions à faire pour l’internaute.

Nous vous conseillons de commencer à développer la version mobile de votre site internet. En effet, c’est sur la version mobile qu’on retrouve le moins de contenus en général. Le contenu s’ajoute ensuite plus la taille de l’écran s’agrandit.

Dans le cas où vous avez déjà développé votre site web et que vous souhaitez le rendre responsive design, il sera réellement complexe de rajouter une surcouche de framework sur du code existant. Les Frameworks apportent un tel changement dans la façon de coder. Cette surcouche sera d’autant plus difficile à maintenir dans le temps.

Le plus simple sera de refaire la structure globale de votre site internet en prenant compte le responsive design dès le début.

Nouveau guide gratuit. Votre site est-il efficace ?

Tsi-Fei Chan

Tsi-Fei Chan

Tsi-fei is the Co-Founder of Orson.io and has a passion for digital marketing, GrowthHacking and SEO. You can find him at @tsifeichan

Plus de conseils pour créer un site efficace

Scribing sur la création de site internet

Hier soir, nous animions notre workshop mensuel (gratuit) sur la création de site internet . Nous avons accueilli une cinquantaine d'entrepreneurs surmotivés !

Lire la suite

Comment créer un site web professionnel ?

Chacun le sait, le premier canal d’information des clients est aujourd’hui le web. C’est vrai dans tous les métiers, que ce soit pour se faire connaître de particuliers ou d’entreprises.

Lire la suite

Refaire son site internet : les questions à se poser

Vous avez de bonnes raisons d’envisager de refaire votre site internet (site vitrine, blog ou site e commerce). On a souvent tendance à remplacer l’ancien site web pour être plus en phase avec les nouvelles tendances graphiques, mais cette seule...

Lire la suite

10 fonctionnalités indispensables pour créer un site vitrine efficace

Vous envisagez de créer un site vitrine et vous vous interrogez sur les fonctionnalités indispensables pour faire un site vitrine efficace et professionnel.

Lire la suite