Développement
19 janvier 2021 In Asdoria,Développement

Qu’est-ce qu’un développeur full-stack ?

Parce que vous les avez aimées en 2020, nous revenons cette année avec nos interviews métiers. Le principe ? Vous faire découvrir le panel des compétences métiers qui se trouvent à l’Agence et qui se cachent derrière vos projets. Directeur Artistique, Responsable du Système d’Information, Intégrateur web, Développeur front-end, Traffic manager, Business incentive…

Aujourd’hui, zoom sur un métier qui séduit de plus en plus la nouvelle génération et qui se trouve être indispensable au vu du fort taux de croissance de la digitalisation des entreprises : le développeur full-stack. Mais qu’est-ce qu’un développeur full-stack au juste ? Pas de panique, notre expert Sébastien vous explique tout :

Au sein de l’Agence et en tant que développeur full-stack, j’interviens sur la conception technique d’une application web et ensuite, je développe toute la partie invisible d’un projet informatique.

Pour bien commencer, qu’est-ce qu’un développeur full-stack ?

Sébastien : « Pour moi, le terme « full-stack » est un peu ambigu. Chaque développeur a sa propre définition du métier. Je me considère plus comme un développeur Back-end, qui fait de temps en temps du Front-end. Globalement, j’interviens sur la conception technique d’une application web et ensuite, je développe toute la partie invisible d’un projet informatique.
Pour faire une analogie avec le monde automobile, je construis le moteur de la voiture (c’est la partie Back-end), et je fais de temps en temps des retouches sur la carrosserie (partie Front-end).
Techniquement, je peux intervenir sur toutes les parties d’un projet, mais pour le Front, je laisse faire les experts du domaine ! Voilà ma définition du développeur full-stack. »

Quelles sont tes missions en tant que dev. full-stack au sein d’un projet ? À quel moment interviens-tu ?

S. : « Ce qui est assez satisfaisant, c’est l’on peut avoir une vision globale d’un projet de A à Z :

  • j’interviens quelques fois en phase d’avant vente, pour estimer la faisabilité et le coût d’un projet.
  • en phase de conception, j’apporte mon expertise technique pour aider à la réalisation du cahier des charges.
  • en phase de production : je développe le site et j’encadre les alternants et les stagiaires, voire les développeurs juniors.
  • et enfin après le projet : c’est une étape de formation du client sur leurs outils, la maintenance du site et de ses évolutions. »

Tu as certainement dû vivre des projets enrichissants !

S. : « Être développeur, c’est de base une profession qui évolue énormément et rapidement, donc forcément enrichissante. C’est pour moi un métier qui demande une envie d’apprendre importante, de la curiosité et donc une bonne autonomie alliée à de la rigueur et un bon sens de la logique. Tous les projets sont enrichissants, on apprend toujours quelque chose, une nouvelle situation, de nouvelles manières de créer. Par exemple, lors de mes débuts dans une autre société, j’ai été grandement formé (et marqué) par un projet demandant la maintenance d’une très grosse application dans le domaine du tourisme. Il y avait de nombreux bugs et malfaçons. C’était un projet assez technique dans une techno que je connaissais pas à l’époque (Drupal). C’était très compliqué, très dur, mais j’ai appris énormément de choses sur le e-commerce et la façon de faire une application e-commerce.

Mais il y a aussi les projets enrichissants car tout se déroule à merveille : lors d’un projet ASDORIA pour une société italienne, nous avons dû créer 2 applications web et les faire communiquer avec d’autres applications, des marketplaces, des ERP… C’était un projet très technique, avec beaucoup d’intervenants. Il y a eu une très bonne synergie d’équipe.

Une bonne équipe, un projet très technique, un client satisfait : comment avoir un meilleur projet ! »

Ce que je préfère dans le métier de développeur full-stack ? La création et la variété des domaines d’activité de nos clients.

Pour toi, quels sont les outils indispensables pour un développeur full-stack ?

S. : « Mes outils, ce sont clairement PhpStorm, Git, Firefox et le terminal Linux.

Mais selon moi, le plus important pour un développeur, c’est de maîtriser les concepts de développement (algorithmique, design pattern, etc.), et les langages de programmation/techno.

Cela dit, le plus important, et je me répète, c’est d’apprendre à apprendre, parce que notre métier évolue constamment et très vite. »

Quel est ton aspect favori du métier ?

S. : « Pour moi, c’est la création. J’adore concevoir et ensuite construire un outil/un site web. Au début, on part d’une idée et à la fin de la journée, on a un site web : on a construit quelque chose avec nos connaissances. C’est comme quand tu es enfant avec les briques Lego. Au début, tu as plein de pièces éparpillées un peu partout. À la fin, tu as construit une maison, un vaisseau spatial ou une voiture avec juste ton imagination !

Mais c’est aussi la variété des domaines d’activité de nos clients : un jour on va faire une application pour des concessions automobiles, un autre jour un site pour vendre des parquets, des pièces automobiles, des cigarettes électroniques, un site pour une mairie ou des experts-comptables. C’est très très varié. On ne s’ennuie jamais. »

La question à 100 euros pour clôturer cet échange : pour toi, quelles sont les différences entre un développeur Front-End, un développeur Back-End et un développeur Full-Stack ?

S. : « Alors allons-y ! (rires)

  • Un développeur front-end va intervenir sur tout le côté visible du projet. Il va être plus attentif à la beauté d’un site, son esthétisme, etc. Il a un œil un peu plus artistique.
  • Un développeur back-end va intervenir plus sur la logique de l’application, le moteur même de l’application. Il va avoir un esprit plus mathématique, plus cartésien. Ce qu’il aime, c’est coder des algorithmes, se creuser la tête pour optimiser l’application, pour qu’elle aille plus vite.
  • Et comme je le disais plus tout à l’heure, un développeur full-stack, tout dépend de la définition qu’on lui donne. Ma définition : c’est soit un développeur back-end qui fait un peu de front-end, soit un développeur front-end qui fait un peu de back-end. Mais une personne qui maîtrise parfaitement les deux, ça n’existe pas !!! Ou c’est très rare. »

*****

C’est tout cela, la richesse d’une Agence Web. L’époque ou « faire des sites internet » ne nécessitait qu’un Webmaster, bon dans tous les aspects du web, est désormais révolue. Aujourd’hui, chaque métier se spécialise chaque jour un peu plus, et cela n’a pas manqué pour le développement. Les langages se sont étoffés, toujours en quête de performance et les spécificités liées aux métiers se sont détaillées encore plus.

Les hommes et les femmes qui constituent Asdoria sont tous experts dans leur domaine respectif sans jamais se fermer sur les compétences des autres, développeur front-end, back-end, full-stack, rédacteur, graphiste, UX-UI designer, webmarketeur, business analyst… sont autant de métiers qui font vivre vos projets !

Vous souhaitez en savoir plus sur l’agence ? N’hésitez pas à nous suivre sur nos réseaux sociaux ou à venir nous rendre visite (dans le respect des règles sanitaires en vigueur bien évidemment).

Posted by Julie Sébille
15 octobre 2020 In Développement

Créer un site web unique avec la technique du Développeur front-end

Dans l’interview dédiée au rôle de l’intégrateur web au sein de l’Agence, nous avons finit sur une question plutôt ouverte sur la différence entre l’intégrateur Web et le Développeur Front-End. Deux métiers très similaires ayant pour but transformer une maquette en un véritable site web. Votre site web.

Mais nous le savons tous, chaque entreprise a des besoins et des attentes différentes en fonction de son domaine d’activité, de ses objectifs, de ses produits, de ses cibles et du message qu’elle souhaite transmettre. Tout est une question de positionnement.

Comme chaque projet est unique, les fonctionnalités qui construisent et animent votre site web le sont tout autant. Voilà ce qui différencie ces deux métiers complémentaires. L’un aura une sensibilité plus accrue sur le graphisme et le côté créatif (l’intégrateur web), tandis que l’autre sera plus dirigé vers les problématiques techniques et le développement des fonctionnalités spécifiques visibles sur le front-office du projet.

Le « front » (prononcez le « t » final), c’est ce qui se voit sur votre site, un peu comme votre front sur votre visage. ?
Et aujourd’hui, nous avons une petite surprise. Ce n’est pas un mais deux de nos développeurs front-end qui se sont prêtés au jeu pour répondre à nos questions et balayer les interrogations que vous pouvez avoir quant à l’élaboration de votre site marchand, votre site vitrine, votre appli mobile, ou votre projet digital dans sa globalité. Laissons place à Florian et Maxence !

Florian
Développeur Front-End

Mon rôle ? Retranscrire vos volontés graphiques et fonctionnelles avec du code !

Maxence
Développeur Front-End

L’équipe front-end développe la technique visible pour l’utilisateur final.

Le développeur front-end a donc pour mission de développer les aspects techniques visibles d’un projet digital…

Florian : – Exactement, nous répondons aux attentes du cahier des charges concernant les fonctionnalités sans oublier le respect de la direction artistique ! Nous traitons les données mises à disposition afin d’afficher et de filtrer les données désirées à l’écran. Nous sommes également chargés de retranscrire les maquettes produites par l’UI Designer à l’identique. Nous intervenons donc juste après la validation des maquettes par le client.

Pour faire simple, le b.a.-ba de notre métier c’est de résoudre des problématiques. Ce qui est le plus satisfaisant, pour moi en tout cas, c’est de les avoir résolues avec tout le processus cognitif pour y arriver !

Maxence : – En effet, nous donnons vie à la maquette créée par le designer en mettant en place les fonctionnalités à grands coups de JS / Css et Html ! C’est toute la partie visible du site, nous intervenons donc principalement au milieu du projet, lorsque les UX et UI sont validées et ce jusqu’à la fin du projet afin de s’assurer que tout est conforme. Et comme dit Florian, s’assurer que toutes les éventuelles problématiques soient résolues au livrable (et même après d’ailleurs).

Vous arrivez à développer tout type de fonctionnalités pour vos clients… Vous avez une recette secrète pour y parvenir ?

M. Ah ! Pas de potion magique mais avant tout de la motivation et de la détermination ! Dans le web, tout va vite, voire trop vite, donc si tu n’es pas assez déterminé, cela va être rapidement compliqué à suivre et petit à petit ton savoir sera obsolète… Je ne connais pas la recette mais en tout cas une bonne dose de détermination est nécessaire !
Après, il faut aussi avoir une pointe de créativité, être autonome et surtout aimer ce que tu fais, sinon tu te tires une balle dans le pied tout seul, et ça c’est pas cool… et en plus ça fait mal.

F. (rires). De mon point de vue, il faut persévérer avant toute chose. Il faut se faire violence et ne pas lâcher face à la difficulté. Être curieux, savoir travailler en équipe sont également des aptitudes primordiales. Les compétences techniques viennent après. Et cela tombe bien, nous avons la chance d’évoluer au sein d’une très belle équipe de dev’ à l’Agence !
Nous utilisons également des outils qui offrent une bonne performance tels que l’IDE PHP Storm, Git comme dépôt de projets… En ce qui concerne les langages de programmation, nous nous concentrons sur le Javascript ES6, l’HTML5/CSS3. Nous utilisons des frameworks JS tels que Vue.js et des frameworks CSS tels que Tailwind. De quoi faire du travail qualitatif !

Vous travaillez donc aussi avec les intégrateurs web lors d’un projet ?

F. On peut dire que lors de l’élaboration et la construction d’un projet digital, nous sommes tous les maillons d’une chaîne bien solide. Le projet client passe entre beaucoup de mains expertes et complémentaires. L’intégrateur web et le développeur Front-End ont une tâche commune : l’intégration des maquettes en HTML5/CSS3. Cependant, l’intégrateur web aura plus une sensibilité graphique avec des compétences liées donc au graphisme comme la maîtrise des logiciels Adobe. Tandis que le développeur Front-End sera plus axé sur la logique et le traitement des données afin de résoudre un problème et développer des fonctionnalités correspondantes. Notamment en employant le Javascript et les technologies d’aujourd’hui comme les frameworks JS comme Vue.js ou React.

Infrastructure Web, Direction Artistique, Intégration Web, Développement Front-End… Un site qualitatif, c’est du travail. Mais surtout, c’est du travail d’équipe avec de bons outils ! Pour bien comprendre votre besoin, nous procédons toujours à une analyse de votre marché et des outils web indispensables pour un bon R.O.I.
Développer des fonctionnalités qui vous correspondent, comme un système de réservation compatible avec les outils que vous utilisez déjà, des modules custom, des effets visuels et graphiques particuliers, adapter le funnel de conversion, adapter votre site sur les différents devices…
C’est ça, une Agence Web proche de ses clients !

 

Découvrez l’intégralité des métiers qui composent notre équipe et nos expertises en nous suivant sur les réseaux sociaux : LinkedIn, Twitter, Facebook, Google My Business et bien évidemment, sur ce blog !

Posted by Julie Sébille
30 septembre 2020 In Design Graphique,Développement

L’intégrateur Web : De la maquette au site internet !

Il y a quelques semaines, nous avons pu interroger Teddy, notre Directeur Artistique, qui prenait parti des UX et UI (maquettages techniques et graphiques) de votre futur site internet vitrine ou e-Commerce.
Mais qu’advient-il de ces maquettes ? Qui s’occupe de transformer ces schémas colorés en page web attractives ? Pour le coup, c’est facile :  C’est l’Intégrateur Web prendra soin de faire de chacune des attentes graphiques et visuelles de votre site, une réalité (virtuelle).

Zoom sur un métier essentiel, celui qui donne vie à votre site !

Pour aborder le sujet, c’est André, l’un de nos intégrateurs qui répond à nos questions cette semaine ? :

André
Intégrateur Web

Intégrer tous les contenus de vos sites en m’assurant que le rendu soit visuellement beau et fonctionnel, voilà ma mission au sein de l’Agence.

André, comment décodes-tu le métier d’intégrateur web en 2020 ?

Comme dit précédemment, le métier d’un intégrateur consiste, en tout cas au sein de l’Agence, à retranscrire la maquette graphique du webdesigner en page internet. Pour ce faire, il nous faut un certain sens artistique, d’ailleurs, on participe souvent à l’élaboration du webdesign, tout en alliant la technicité de langages de programmation (front).

Nous bâtissons ce qui se voit à l’écran ainsi que les actions qu’offre un site internet (menu qui s’ouvre ou se ferme, des images qui défilent, la couleur de fond ou tout autre élément vu directement lors de la navigation de l’internaute). Globalement, l’intégrateur web de 2020 a le rôle de donner vie à un site internet en appliquant et en respectant la charte graphique tout en mettant en place tout ce qui rendra le site interactif !

Quelles sont tes missions au sein d’un projet ? À quel moment interviens-tu ?

La plupart du temps, j’interviens en « milieu de début de projet » jusqu’à la fin, pour m’assurer que tout ce qui se voit à l’écran est conforme et fonctionnel aux attentes du client.
Globalement, le plus important est de bien prendre en compte les besoins et les attentes du client. Le travail est « à moitié fait » une fois qu’on comprend exactement ce qu’il veut. C’est un travail en collaboration avec le DA (Directeur Artistique), le webdesigner, et le graphiste car il faudra retranscrire leur maquette. En plus de l’aspect visuel, nous intégrons les contenus du site, comme les images, les textes, les graphiques, ainsi que les fonctionnalités demandées. Un point important également : adapter le site à tous les écrans ! À l’heure où le format AMP (Mobile First) est favorisé par les moteurs de recherche comme Google, il est vraiment primordial de penser à cela ! C’est ce que l’on appelle le « responsive design ».
Nous assurons également un S.E.O (le référencement naturel) minimal, au travers des contenus textes et image. Ensuite, en fonction des projets, on peut également être appelés à installer, configurer des modules, des extensions…

L’intégrateur Web est le garant du beau et du fonctionnel d’un site.

Pour toi, l’intégrateur/trice web est plutôt technique ou créatif/ve ?

Quelle bonne question ! Je dirai les deux. Un intégrateur web doit être parfaitement organisé et respecter les normes de compatibilité entre les navigateurs et d’accessibilité par les moteurs de recherche tout en alliant un esprit créatif et technique. Il est le garant du beau et du fonctionnel d’un site internet, d’où l’importance d’avoir une certaine sensibilité à l’aspect créatif. Il faut savoir retoucher une image comme il faut être capable de coder ou de débugger des scripts.Étant ainsi dans le même temps un métier technique basé sur des connaissances spécifiques, la meilleure formation est de s’exercer sur des projets riches et variés.

Quel est ton aspect préféré du métier au sein de l’Agence ASDORIA ?

C’est évidemment lorsque le client découvre son site et qu’il est mieux que ce qu’il imaginait après avoir vu les maquettes ! Une maquette reste figée, un site peut être en mouvement avec plusieurs animations. On navigue sur un site, pas sur une maquette ! Alors, la plus grande satisfaction, c’est lorsque notre client et les personnes qui travaillent avec lui sont unanimes et apprécient le travail fourni, qui représente leur entreprise.

L’intégrateur web s’occupe de l’aspect visuel du site. Mais le développeur front-end aussi, non ?

Oui, mais il y a des différences majeures entre un intégrateur web et développeur front. Elles se trouvent essentiellement dans la technicité de leurs tâches. Un intégrateur web va jongler entre intégration de la maquette graphique, des contenus et des fonctionnalités plus ou moins standards. Le développeur front quant à lui va intégrer, développer des fonctionnalités « front » plus poussées et spécifiques au projet sur lequel il travaille. Étant donné les spécificités des sites aujourd’hui et de leur complexité, le rôle du développeur web est tout autant important que celui de l’intégrateur.

*****

À l’Agence, nos développeurs front-office, back-office, full-stack, intégrateurs web prennent soin de leur code pour s’assurer que tous les besoins techniques de votre entreprise soient retranscrits parfaitement sur votre site. La technicité de nos expertises de développement associée à des graphismes et design travaillés transmet l’expérience utilisateur la plus juste en fonction de vos cibles et vos besoins métier.

Et vous, qu’attendez-vous pour créer ou améliorer votre site vitrine ou votre boutique en ligne à l’aide d’experts du domaine ?

Posted by Julie Sébille
28 septembre 2020 In Développement,eCommerce

Sylius, la star montante du e-Commerce

Il est loin, le temps où l’on vous dressait le comparatif d’un Woocommerce VS un Prestashop ! Aujourd’hui, ce bon vieux Prestashop, utilisé et réutilisé va se voir placé en concurrence avec la star montante du moment : SYLIUS.

Vous en avez déjà entendu parler ?

Sylius, qui es-tu ?

Bien que Sylius commence à faire du bruit depuis quelques années, il est bon de savoir que le projet existe depuis 2010. Au passage, Sylius est une surcouche du framework Symfony, né en 2005.

Pourquoi n’en entendre parler que maintenant ? Car à l’inverse de ses consoeurs, Sylius a passé énormément de temps en R&D afin de proposer un outil stable, fiable et utile dès sa sortie.

A la base bien plus utilisé par les initiés que le grand public, Sylius connaît une première version stable en 2017. C’est là que tout s’accélère. Les développeurs qui l’utilisaient déjà découvrent une version bien plus élaborée qui promet encore plus de grands projets de développement web. Une réussite.

La valeur ajoutée de Sylius : Sa polyvalence

Alors, qu’est ce que cette solution a-t-elle de plus que ses homologues tels que Prestashop, étant déjà sur le marché depuis des années ?

Une polyvalence à toute épreuve.

Sylius vous permet si bien de créer un eCommerce de petite envergure qu’un eCommerce aux ambitions démesurées.

Là où un Prestashop verra des limites passé 5.000 commandes par mois, Sylius ne vacillera même pas à la 10.000ème commande mensuelle.

Une infinité de possibilités

Le plus ? Vous pouvez développer avec cette même solution votre propre Product Information Manager, automatiser le traitement de vos commandes, et développer un front-office qui colle parfaitement à l’image que vous aviez en tête.
Les fonctionnalités et développements étant créés sur une même base de code, les briques qui composent Sylius s’assemblent toutes à merveille. Pas de risque de mettre en péril la stabilité de votre code au moindre ajout de fonctionnalité.

Il ne faut pas négliger la capacité de Prestashop de comprendre une multitude de possibilités d’ajouts et de développements grâce à ses add-on spécifiques sur à peu près tous les domaines.
Cependant, c’est cette même capacité à pouvoir gérer tous ces aspects qui a la fâcheuse tendance de le rendre bien trop souvent instable.

Sylius : des bases solides

Sylius, cette surcouche eCommerce basée sur SYMFONY a la grande qualité d’avoir des bases solides. Grâces à elles, Sylius répond aussi bien que Prestashop à toutes vos demandes (gestion des langues, des catégories de produits, attributs et variantes de produits… tous les besoins nécessaires pour gérer votre eCommerce) sans risquer de mettre en péril les fondements du fonctionnement de votre boutique.

C’est cette qualité de code et cette énorme communauté de développeurs qui permet à Sylius d’être une solution maintenable et qui se met facilement à jour sans corrompre les versions précédentes (contrairement à la plupart de ses concurrents…).

La solution tech développée PAR et POUR les développeurs

Il peut également supporter de grosses charges car il bénéficie d’une qualité assez exceptionnelle : Sylius a été développé PAR les développeurs POUR les développeurs. Il est donc “malaxable” afin de façonner votre solution Sylius selon vos intérêts, à l’inverse d’un Prestashop plutôt pensé pour être utilisé presque immédiatement mais qui n’est pas prévu pour supporter de nombreuses modifications.

Attention, Sylius bénéficie d’une excellente technicité. L’avantage est que pour un eCommerce relativement simple et classique, il est tout à fait possible d’utiliser des plugins créés ou propulsés par Sylius. Cependant, pour des développement spécifiques, il vous faudra avoir affaire à des développeurs ayant de bonnes connaissances PHP Symfony pour pouvoir exploiter toutes ses possibilités même sur des ponts avancés.

Vous pourrez ainsi facilement installer une toute petite boutique, tout comme vous pourrez développer facilement une véritable machine de eCommerce à des envergures bien plus “folles”.

Un système de briques qui s’emboîtent parfaitement

Revenons à ce que l’on aime le plus chez Sylius :
Sa polyvalence, son code propre et épuré, ses possibilités de rétrocompatibilité, son système de briques permettant de développer des outils puissants. Enfin, son adaptabilité pour s’intégrer à tous les systèmes d’infos externes relatifs au commerce en ligne tels que votre ERP, votre PIM, ou votre CRM…

via GIPHY

Si l’on éclate Sylius en un schéma simple, on pourrait le représenter sous forme de briques. Il possède donc une brique produit, une brique gestion utilisateur, etc. Chacune de ces briques peut ainsi s’utiliser indépendamment.

C’est donc la porte ouverte pour pouvoir développer non seulement votre solution eCommerce mais toute la stratosphère qui gravite autour de votre domaine d’activité !
Gestion de contenu CMS, Administration des ventes… vous pouvez, avec quelques développeurs aguerris développer l’ensemble de vos besoins eCommerce selon votre propre cahier des charges sans avoir à passer par une solution prédéfinie avec ses qualités mais également ses défauts.

Sylius en bref :

Ce qu’il faut retenir de cette solution :

Bien plus qu’une nouvelle corde à notre arc

Passionnés de nouvelles technologies et méthodes de développement web, l’arrivée de Sylius ne nous a pas laissés de marbre. Nous avons appris à maîtriser ses codes et avons découvert avec passion et enthousiasme l’intégralité des possibilités que cette solution pouvait offrir pour les projets de nos clients.

Pour Asdoria, Sylius est définitivement la star montante du système eCommerce, l’allié de taille pour faire de votre projet web une belle réussite : Des développeurs qui maîtrisent Symfony réalisent un projet en un temps de conception beaucoup plus court ! Ce qui, in fine, conclu à une maintenance et un temps de développement beaucoup moins coûteux qu’un projet développé sous un outil standard.

Une solution, qui a tout pour plaire, que ce soit du côté tech que du côté clientèle !

Posted by Julie Sébille
4 mai 2018 In Développement , ,

Réussir votre site Responsive Design

Ce n’est plus un secret, nous tendons de plus en plus à une utilisation du web sur mobile. Selon le Crédoc, en 2017, 73% des français possèdent un smartphone et 42% d’entre eux s’en servent en premier lieu pour se connecter à internet. Le monde connecté tient désormais dans notre main. D’ailleurs, depuis avril 2015, Google a même créé un algorithme Mobile Friendly, favorisant les sites internet s’adaptant au format mobile (AMP). En sachant tout cela, il serait bien dommage de ne pas adapter son site en « responsive design » !

La préparation en amont pour réussir son site responsive design

Votre site internet est la vitrine de votre commerce à l’instar d’une boutique physique dans une rue passante, vue autant par des enfants, des adolescents ou des adultes. Du point de vue digital, il en est de même. Le responsive design permet de rendre votre site visible tant sur mobile, que sur tablette, ou sur un desktop classique. C’est un peu plus technique certes, mais rendre son site responsive design, c’est donner une image professionnelle et actuelle de votre entreprise. En s’adaptant au format que vos prospects utilisent pour afficher votre site, vous êtes assuré d’être visible du plus grand nombre quelle que soit la largeur de l’écran sur lequel il est affiché. Pour ce quelques points de préparation sont de mise :

Maquettez

Préparez les maquettes de votre site en fonction des trois formats différents pour y définir les diverses mises en page et les blocs indispensables (ou pas) à conserver en fonction de l’utilisation de vos utilisateurs web. Maintenant que le nombre de connexion sur les sites internet depuis un mobile dépasse les écrans Desktop, les agences créent maintenant les concepts web design en Mobile First, c’est à dire qu’elles mettent en priorité en question l’ergonomie du site Internet en format mobile avant le Desktop.

Simplifiez

Une mise en page de votre site simple, sous forme de différents blocs qui peuvent s’imbriquer de différente manière en fonction de l’espace qui leur est octroyé (adaptation de la barre de menu ou du menu déroulant, des textes à la taille variable pour assurer une bonne visibilité, un zoom qui reste parfait quelque soit le type d’écran…).

Allégez

Veiller au poids de vos visuels, pour qu’ils n’alourdissent pas le temps de chargement de votre site. Les internautes sont impatients et n’attendent pas plus de trois secondes environ avant de changer d’URL si la page sur laquelle ils sont est trop lente.

Cadrez

Mieux vaut définir une taille minimum par support ainsi qu’une taille maximum étant donné le nombre incalculable de tailles d’écrans différents :

  • Smartphones : jusqu’à 425px de large
  • Tablettes : de 426px à 767px de large
  • Ordinateurs portables : de 768px jusqu’à 1388px de large

Les aspects à ne pas négliger :

 

Il reste néanmoins quelques points importants à ne pas laisser de côté, qui optimiseront davantage l’expérience de votre responsive design.

Privilégier le toucher tactile

Le clic n’est pas maître en matière de mobile. Il faut privilégier les scrolls ou même les sliders pour favoriser une meilleure expérience utilisateur.

Minimiser les bannières

Plus l’écran est petit, moins il y a de place pour « la décoration ». Minimisez les espaces dédiés aux bannières pour laisser place à l’essentiel de l’information. Cela ne signifie pas qu’il ne faut pas soigner son design, mais ce qui n’est pas nécessaire en terme de pertinence peut être réduit ou supprimé en format mobile. Un autre exemple : la barre du menu se transformant en « Burger Menu ».

Rendre vos Medias Flexibles

Vos visuels, vos contenus doivent être rendus flexibles, pour s’adapter à la taille de l’écran. Si vous insérez une image de 1000px par 500px et qu’elle ne s’adapte pas à l’écran d’un téléphone mobile, elle débordera de l’espace dédié et rendra votre site totalement illisible.

L’importance des Grilles fluides

Les grilles fluides concernent les contenus et les blocs dans lesquels ils sont contenus – le bloc s’adapte à la taille de l’écran. Vous pouvez essayer en agrandissant et réduisant la fenêtre de votre navigateur desktop. A partir d’une taille max en pixels par exemple, indiquez que vous souhaitez changer la taille de vos blocs ou même leurs emplacements.

L’utilité des Media Queries

Ce sont, entre autres, les media queries qui vous permettent  d’agencer autrement les blocs et les unités. Ainsi, vous pouvez déclarer que vous avez plusieurs tailles et formats d’affichage et que pour chaque taille votre code CSS sera différent (retrouvez nos exemple de feuilles de style CSS dans le paragraphe suivant).

La praticité des Unités Relatives

Les unités relatives permettent de ne pas avoir à définir une taille en fonction de chaque type d’écran mais de définir une unité qui s’adaptera à la taille du bloc. Sans rentrer dans les détails, elle peut être en rem, vh, vn, vw ou en %… Si vous indiquez 100%, votre valeur s’adaptera toujours à 100% de la taille du bloc, quelle que soit l’écran sur lequel il est affiché.) Les unités relatives sont censées s’adapter à tous les cas de figure.

COIN TECHNIQUE :

Comprendre le Responsive Design par le CSS

Quoi de plus parlant qu’un petit tutoriel pour adapter la structure dans votre code CSS pour résulter à un site qui répond aux différents formats sur lequel il peut être affiché. Mais avant de commencer, n’oubliez pas de faire communiquer la feuille de style (style.css) en déclarant dans votre ficher HTML (<LINK rel=stylesheet type=text/css href=style.css>) sinon vous ne pourrez pas voir le résultat de votre travail ! 🙂

Initialisation

Cette étape est utile pour corriger les petits bugs présents par défaut (exemple : les margin ou padding générés quand nous insérons une balise <h1>). Nous supprimons donc ici tous ces « bugs » pour partir d’un bon pied :

Organisation des résolutions du Responsive Design

On définit les règles qui vont rendre votre site internet compatible sur les différents écrans :

Version desktop

Dans un premier temps nous définissons la taille standard du desktop (ici on choisira arbitrairement le nom de class CSS .test-largeur) qui permettra après de définir les différents points de rupture et de proposer un design adapté pour chaque écran (tablette, mobile, voire d’autre) :

Une fois fait, nous allons définir les différentes résolutions avec @media (max-width= XXXpx) {}  afin de personnaliser le comportement et la position des contenus comme on le souhaite pour chaque écran.

Version tablette

Pour la tablette nous définissons un maximum 1024px (@media), nous pouvons par exemple changer la largeur, la couleur du background et la couleur de la police, mais garder toutes les autres propriétés du .test-largeur.

Version mobile

Pour le mobile nous définissons un maximum 768px (@media), nous pouvons par exemple définir la largeur et réinitialiser les margins, mais garder toutes les autres propriétés du .test-largeur.

L’ultime et indispensable étape : la vérification

Alors, vous avez fait le test ? N’oubliez jamais de vérifier ces manipulations sur plusieurs périphériques et supports. Ce sera toujours le meilleur moyen de vous rendre compte de l’efficacité de votre travail et des petites améliorations à apporter sur la visibilité de votre contenu en fonction des formats d’écran d’affichage.

Vous avez besoin d’aide ou de conseils en matière de développement et intégration web ?

Contactez-nous

Nos compétences
Web developper | E-commerce | UX Design | Responsive Design | https | W3c | Frontend | Backend | PHP | HTML5 | Magento | Prestashop | CSS | Jquery | Ajax | PIM | Database | MySQL | SEO  | WordPress | Conseil | Intégration | XML | CSV | SOAP | REST | Talend | API | Symphonie | Linux | Windows | Solution d’Infra | Administrateur Serveur | Symphony | Bootstrap | Apach | GIT/SVN | Google Structured Data | Google Speed Insight | GT Metrix | PostGres

Posted by Julie Sébille