Site Responsive

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

Faire son site internet responsive design en 2020, ça n’est pas une option, mais une obligation

Du coup, parce que c’est devenu une nécessité, les adaptations mobiles se sont démocratisées : en un mot, il est devenu carrément fastoche ;-), d’obtenir un affichage adapté à tous les types d’écran. 

En revanche, créer un site responsive design efficace est un peu moins fastoche !

Nous allons profiter de cet article : 

  • pour vous fournir des solutions concrètes pour faire un site responsive, en deux temps trois mouvements. 
  • Mais aussi pour vous glisser quelques astuces, qui vous permettront de créer un responsive design au top de l’efficacité, quelle que soit la solution de web design, que vous avez choisie.

Soyons pragmatique : aujourd’hui, on est tous pressés et overbookés. Et on n’a pas de temps à perdre. Alors, quelles sont les solutions les plus simples, pour construire un site responsive ?

Créer un site web responsive avec Orson.io

Les logiciels de création de site internet en ligne, appelés également “Website builders”, sont des outils modernes de création de site internet, tout en un, et entièrement en ligne.

La majorité des logiciels, comme Orson.io, propose des templates gratuites de base, et 100% responsive design.

Pensez bien à tester, en construisant un réel site internet. Ca tombe super bien : sur Orson, vous pouvez essayer l’outil gratuitement pendant 15 jours. Profitez-en, par exemple, pour faire la page d’accueil de votre site internet, et voir si le résultat vous convient.

Il existe des outils pour vérifier que votre site internet s’adapte bien en responsive design. 

Chez Orson, aucun souci ! Nous utilisons un système de grille qui vous permet toujours d’avoir un site internet au look professionnel, et 100% responsive design.

Le rendu graphique d’un site fabriqué sur Orson, sera parfait sur tablettes ou sur mobiles, quel que soit le contenu textes, images, vidéos que vous allez ajouter ou modifier sur votre site internet. Et le site sera également pré-optimisé pour le SEO.

Créer un site internet responsive design avec WordPress

Les CMS (Content management system), tels que WordPress ou encore 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 à peu près tout ce que l’on souhaite, si l’on maîtrise la technique et la programmation informatique.

Là où le bât blesse, c’est pour la maintenance et de la mise à jour de ces logiciels gratuits. Étant très utilisés, ces CMS progressent rapidement et nécessitent des actualisations fréquentes, en termes de sécurité. Conséquence : des nouvelles versions voient le jour très régulièrement. 

Et 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. 

Résultat : vous êtes sans arrêt en train de courir après les mises à jour techniques, et vous consacrez un temps précieux, à maintenir votre site.

Faire un site internet responsive avec SiteW

SiteW est également un logiciel Saas en ligne pour créer un site web (Website builder). 

Tout comme Orson, il propose des templates prédéfinis, nativement 100% responsive, pour vos projets de web design. 

Ils offrent également une fonction automatique, pour créer la version mobile de votre site internet, en un seul p’tit clic de souris.

Vos pages seront non seulement adaptées visuellement à l’affichage sur smartphones et tablettes, mais également “Mobile-friendly”, c’est à dire optimisées pour le référencement Google.

Option intéressante : vous aurez aussi la possibilité, sur leur plateforme, de personnaliser l’affichage de vos pages web, sur chaque appareil, élément par élément. Tous les composants du site pourront ainsi être modifiés, repositionnés, redimensionnés, cachés ou montrés, en fonction des dispositifs (mobiles ou fixes), afin de créer la meilleure navigation mobile possible.

On sait maintenant quelles sont les solutions les plus pratiques, pour concevoir un site pour mobile, en moins temps qu’il ne faut pour le dire. Et ça, c’est génial.

Voici maintenant quelques règles plus générales, pour faire un site internet responsive, avec un template web dédié, ou en personnalisant le code informatique.

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

Si vous avez opté pour un CMS pour votre projet web, sachez que vous pouvez créer votre site internet responsive design avec un template dédié

  • si vous ne trouvez pas votre bonheur, parmi les versions gratuites, proposées par votre prestataire, 
  • ou que vous souhaitez une template responsive design, plus personnalisée et plus aboutie, 

vous dénicherez certainement la perle rare, sur des places de marché de templates, telles que Themeforest.

Lorsque vous ferez votre sélection, regardez bien les critères suivants. Vérifiez : 

  • Si c’est bien garanti 100% Responsive design
  • La compatibilité avec la version de votre CMS. Il est super 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.
  • Le nombre de sites internet qui utilisent cette template, à savoir la popularité de cette dernière : les thèmes les plus populaires sont souvent riches en termes 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.
  • La compatibilité avec les bonnes versions de WordPress, et le type de licence, sous laquelle elle fonctionne.

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 nouveau template préalablement sélectionné.

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

Coder soi-même un site internet responsive design

Dans le cas où vous prenez l’option de développer vousmê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. N’hésitez pas à vous rendre directement sur Bootstrap afin de voir différents exemples de sites réalisés avec leur technologie.

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.

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. 

Ok ! On vient de voir, en première partie, les solutions concrètes pour réaliser un site web responsive design, sans trop galérer. 😉

Et, dans une seconde section, pour les plus courageux : comment faire un site pour mobiles, avec une template dédiée, ou en codant…

On va aborder maintenant la question qu’on attend tous, à savoir : comment faire un site internet responsive efficace : bien référencé, et qui convient aux visiteurs.

Comment créer un site web responsive design ?

On pourrait penser naïvement, que pour créer un site responsive design efficace, il suffit de refaire la même page web, à l’identique, mais en plus petit…. 

Erreur ! :-O

L’affichage sur appareils portatifs nécessite des ajustements bien spécifiques.

Alors, comment optimiser la version mobile de son site internet ?

Il faut commencer par le commencement, à savoir examiner à la loupe, nos problématiques. Autrement dit, se poser cette question : quelles sont les spécificités de la navigation sur smartphones et tablettes ?

Les particularités de la navigation mobile

L’écran d’un téléphone est en moyenne 3 fois plus étroit qu’un écran d’ordi fixe. Le contenu devra donc s’adapter à ce tout p’tit format.

Parallèlement, quand on consulte son smartphone, on est souvent hors de chez soi : dans la rue, dans les transports en commun, en soirée chez un pote, dans la salle d’attente chez le docteur, que sait-on encore…

En tout cas, en transit, et pas forcément confortablement installé ! 

Du coup, plus encore qu’un internaute, un mobinaute n’a pas le temps de flâner. 

Il a besoin d’une mise en page, simple, claire, efficace et synthétique, afin de trouver au plus vite, une réponse à sa requête.

Optimiser son contenu pour les appareils mobiles

Un écran plus étroit requiert un contenu plus succinct. Il est donc conseillé de résumer ses textes, et de ne mettre que l’essentiel.

Un menu spécial mobile

Toujours en raison d’une surface modérée, l’affichage sur mobile nécessite un menu condensé, souvent un menu de type “hamburger”, déroulant, afin d’optimiser l’espace.

Un temps de chargement mobile réduit au minimum

Le temps de chargement est un élément essentiel pour un site internet. Et encore une fois, encore plus pour la version mobile. Eh oui, on l’a vu, vos mobinautes sont en déplacement, pas chez eux, pas confortables, entre deux lieux, entre deux eaux, il leur faut donc du rapide

Sinon, ils vont pester, et ne seront pas contents. Or nous, ce qu’on souhaite, c’est leur pleine satisfaction, évidemment. 😉

Donc veillez à ce que votre code informatique soit optimisé pour un temps de chargement bref, et à ce que vos pages ne soient pas trop lourdes.

Des images optimisées pour l’ensemble de vos appareils

Directement liées au temps de chargement et au confort-utilisateur, vos images devront être à la fois de qualité, et rapides à s’afficher.

Une mise en page adaptée mobile-friendly

Vous serez amené à apporter quelques ajustements logiques, tels que la réduction du nombre de champs d’un formulaire ou d’un questionnaire, par exemple. Car, bien sûr, il n’est pas facile de taper de longues phrases sur un mini clavier, avec nos petits doigts boudinés, …surtout l’hiver, avec des moufles. 😉

Créer un site web, pour smartphones et tablettes, avec un website builder, faire un site internet responsive design à l’aide d’un CMS, coder un site mobile… on a fait le tour de la question. 

Cerise sur le gâteau : on sait maintenant comment rendre son site internet pour appareils portatifs, efficace et performant.

Alors, à vos claviers, pour construire la meilleure “mini version” de votre site, qui soit !

Frédérique Biau

Traductrice et Rédactrice autour des Nouvelles Technologies et du Web. Frédérique est en charge de partager nos astuces avec l'art et la manière !