Web2Mobile est une solution SaaS (Software as a Solution) développée au sein de l’équipe NetDevices. Cette solution a pour particularité de rendre votre site web déjà existant responsive sans toucher au code source.
Web2Mobile a été déployé ou est en production pour des clients tels que Total, SMI ou encore Infogreffe.
En particulier le site mobile.infogreffe.fr repose entièrement sur la solution et génère des millions de pages vues mobiles par mois.
Le responsive web design
Le responsive web design, c’est la façon de concevoir un site web afin que son contenu s’adapte automatiquement à la largeur et/ou à la hauteur de l’écran qui le visionne.
En pratique, un site qui possède un responsive design peut donc adapter de lui-même le menu, la sidebar, les images et même la structure pour être visible convenablement et sans zoom sur différents devices. (ex: tablette, smartphone, télévision, version imprimée…).
Pour la version mobile et tablette, la prise en compte de l’orientation portrait/paysage est plus facile.
Nous retrouvons cette idée de flexibilité et d’adaptabilité du contenu à travers Web2Mobile.
Afin de faciliter le process et de respecter les règles du responsive design, nos développeurs et webdesigners vont se baser notamment sur l’utilisation des Media Queries.
Les Media Queries (ou Requêtes Média) ont fait leur apparition avec les spécifications CSS3.
Du CSS aux spécifications CSS3
Le CSS (Cascading Style Sheets ou feuille de style en cascade) est un des langages principaux du web standardisés par le W3C. Utilisé parallèlement au HTML et au XML, il va servir de complément voire d’encadrement lors de la conception de sites web. En effet, ce langage informatique va permettre d’intervenir notamment sur l’aspect graphique / visuel d’un document HTML ou XML perçu par un navigateur. Il pourra de ce fait permettre aux développeurs de définir des éléments tels que la couleur, la police et / ou l’alignement d’un texte, les bordures, le fond…
Remarque : Grâce aux évolutions de ce langage et notamment aux transitions introduites par le CSS3 (“spécifications CSS3”) il va être possible aux développeurs d’animer et modifier des pages uniquement avec des feuilles de style CSS, sans devoir forcément utiliser du JavaScript.
Les transitions ou spécifications CSS3 au coeur du responsive design rassemblement les media queries ainsi que les unités viewport.
Les Media Queries qu’est-ce que c’est ?
Pour en revenir aux Media Queries, celles-ci peuvent donc être définies comme étant un ensemble de règles, de “spécifications CSS” qui vont permettre d’adapter le design d’un site web à différents supports multimédias de façon dynamique. Ces règles vont prendre en considération différentes caractéristiques telles que la hauteur ou la largeur du support d’affichage le type d’écran (smartphone, desktop, tablette…) voire même l’affichage sur différents navigateurs.
Il y a deux façons de les utiliser :
1- Lors du chargement d’une feuille de style .css :
la balise <link /> va permettre de charger un fichier .css dans le code HTML.
2- On les utilise aussi en écrivant la règle directement dans le fichier .css habituel.
Les unités Viewport, qu’est-ce que c’est ?
Les Unités viewport présentes elles aussi dans les spécifications CSS3 vont permettre aux développeurs d’intervenir directement sur la taille des composants d’une page, en fonction de l’écran qui la visionne.
Ainsi, lorsque l’internaute zoomera sur une page ou changera de device, les proportions des espacements entre les composants seront conservés. Elles sont donc très utile dans le responsive web design.
Elles demeurent cependant peu communes. En effet, leur compatibilité avec la plupart des navigateurs reste très récente.
Les unités les plus communes sont :
- le centimètre (cm),
- le millimètre (mm),
- le pourcentage (%),
- le pixel (px),
- le pica (pc),
- le point (pt),
- le cadratin (em),
Cependant d’autres unités de mesure plus ciblées ont fait leur apparition à partir de 2014:
- vw : “Viewport Width” : largeur de l’écran
- vh : “Viewport Height” : hauteur de l’écran
- vmin : “Viewport Min” : fait référence à la plus petite des deux dimensions (hauteur ou largeur) en fonction de l’orientation de l’écran.
- vmax : “Viewport Max” : fait référence à la plus grande des deux dimensions (hauteur ou largeur) en fonction de l’orientation de l’écran.
- rem “Root Em” : permet de déterminer la taille des textes ainsi que celle des “padding” et “margin”.
