Les principes du webdesign responsive - Viaduc.fr

Pack : Site

Avoir un site web mobile avec le webdesign responsive

Lorsque l’on navigue sur son smartphone ou sur sa tablette et que l’on cherche un site web, il arrive que : soit l’affichage ne soit pas optimal, soit qu’il y est simplement un refus d’affichage. Ceci provient de l’architecture web design de la page et par conséquent du site web, qui a été prévu pour un affichage sur moniteur de grande taille en format large (paysage ou à l’italienne). Pour contourner cet écueil et faire apparaître correctement le site web sur mobile, il existe deux solutions. La première consiste à créer deux voire trois sites web différents adaptés aux diverses conditions d’affichage. C’est une solution lourde et chère à créer et à gérer. Elle optimise l’affichage mais est très mal « vue » par les moteurs de recherche, à commencer par Google. En effet ceux-ci n’aiment pas voir les mêmes contenus sous deux (ou plus) adresses IP. La seconde consiste à créer une « enveloppe » de contenu réactif (responsive en anglais) à la taille et à la position de l’écran. Cela est possible grâce à trois éléments.

Le responsive web design est donc la solution qui a été adoptée majoritairement pour adapter les sites web sur mobile ou sur les autres différents terminaux.

La navigation sur mobile révolutionne les habitudes web

Sans rentrer dans les statistiques, il suffit de regarder autour de soi pour constater l’usage permanent qui est fait des terminaux mobiles pour naviguer sur internet. Dans les transports, en voiture, au café… une question que l’on se pose, une information que l’on entend, une envie soudaine d’achat… et c’est vers son smartphone ou sa tablette que l’on se tourne, c’est pour cela que posséder un site internet responsive design est devenu une obligation pour les entreprises. Pourtant lorsque l’on est chez soi ou au bureau, l’affichage sur grand écran (ordinateur HD, voire télévision 4 K) est privilégier pour la navigation, les achats ou le visionnage des vidéos.

D’autre part, et nous n’en sommes qu’aux débuts, le règne des objets connectés a commencé, avec obligatoirement des écrans des multiples tailles et positionnements (de la montre, à l’affichage mural), de définitions toujours plus poussées, et aussi progressivement la mise à disposition de bandes passantes qui se rapprochent de celles de l’internet fixe. Tous ces paramètres imposent aux webdesigners de trouver des solutions qui conjuguent l’affichage multi formats, la légèreté du code et la non-duplication de contenus sur deux ou trois adresses IP. L’adaptabilité des sites web sur mobile également appelée responsive web design est la solution la plus pertinente qui conjugue tous ces éléments pour relever le défi. C’est le choix qu’ont fait de nombreux éditeurs de sites, à l’image de Viaduc dont l’ensemble des créations web répondent aux normes responsives.

S’adapter à ces changements grâce au responsive design

Depuis le début d’internet, de nombreuses évolutions sont intervenues qui ont obligé les webdesigners, à trouver de nouveaux outils et techniques, pour adapter les sites web : sites dynamiques (PHP et bases de données MySQL,…), CSS et maintenant le design responsive pour les smartphones et tablettes. Comme il a été indiqué plus haut ce dernier, moyennant l’ajout de quelques lignes de code supplémentaires, permet de positionner et de dimensionner le contenu des pages (les blocs) en fonction des caractéristiques d’affichage du terminal. Il est à noter aussi que, toujours moyennant quelques lignes de code, il est possible de supprimer ou faire apparaitre des éléments tels que les menus en fonction de la place disponible.

Concrètement le responsive design consiste à créer trois ou quatre maquettes de présentation en CSS (le design), chacune adaptée à une plage de format d’affichage. Puis d’indiquer avec du code (le responsive) les différentes corrections à faire pour que les éléments s’ordonnent sur l’écran, après que les medias queries aient détectées les caractéristiques du terminal. À ce niveau se pose un problème concernant le poids des éléments (photos, vidéos, animations) qui vont être envoyés vers les mobiles, car la bande passante en 3 G n’est pas encore suffisante pour afficher rapidement des éléments prévus pour ordinateurs. Aussi a-t-on trouvé une parade avec le « mobile first » ou mobile en premier.

Les deux grands principes des sites mobiles

Avec l’apparition des affichages sur mobile, la plupart des webdesigners ont pensé le responsive du plus grand vers le plus petit, technique connue sous le nom de dégradation (l’on construit un site pour un affichage normal qui est ensuite réduit pour les mobiles). Le gros inconvénient de cette solution (de facilité ?), est que les médias quéries téléchargent d’abord la version grand format, puis celle destinée au portable. D’où rallongement des délais et création de nombreuses « scories », qui encombrent les mémoires des smartphones et tablettes déjà passablement encombrées. L’autre solution est de penser du plus petit vers le plus grand. C’est le principe du « mobile first ». Dans ce cas les medias queries ne téléchargeront que les éléments prévus pour l’affichage en taille réduite, avec pour corolaire un gain de temps appréciable et un téléchargement « propre ». Lorsque l’on possède déjà un site web normal et que l’on souhaite passer en responsive, il est tout à fait possible de l’adapter. Mais cela occasionnera bien souvent des petits bugs d’affichage et des problèmes supplémentaires dans la gestion du site. La meilleure solution est de repartir du matériel brut (le contenu) et de construire le site web en « mobile first ».

Les atouts des produits et
services Viaduc©

30 jours d’éssai gratuit

Viaduc compte de nombreux expert au sein de son équipe pour vous accompagner dans la gestion de vos besoins de visibilité numérique. Pour votre confort & un bon suivi, un chef de projet dédié vous est proposé.

100 % personnalisable

10 ans de suivi client, un taux de renouvellement de 97% nous permettent de vous amener une solution concrète et efficace pour la réservation de vos noms de domaine.

L’assitance

Disposez d’une assistance dans vos démarches et installations Internet. À votre écoute, nous répondons à chacune de vos interrogations de manière claire et immédiate.

Intuitif, rapide
& entièrement
modifiable

Artisans, commerçants, TPE/PME, bâtissez
un site internet à votre image, performant
et ergonomique.

Questions fréquentes

Liées aux services Viaduc®

Qui est Viaduc® ?

Viaduc® est, depuis 2004, un acteur majeur de la protection de noms de domaine, de l’hébergement et de l’accompagnement à la création de site Internet. Nous nous attachons à fournir un service simple et de qualité à nos clients, quel que soit leur budget, qu’ils soient des Grands Comptes, des PME/TPE, ou des associations. C’est dans cette optique que nous développons toujours plus notre offre, afin de répondre à vos besoins de communication numérique.

Vous pouvez retrouver toutes ces informations en suivant ce lien.

Comment accéder à mon espace client ?

Votre espace client est accessible directement via ce lien.

Il est entièrement personnel, et protégé par l’identifiant et le mot de passe que vous avez saisi lors de votre inscription.

J'ai oublié mon identifiant et mon mot de passe, comment faire ?

Nous vous invitons à vous rendre sur ce lien.

Il vous suffira alors de saisir l’adresse email de contact que vous nous avez indiqué lors de votre souscription, afin que votre identifiant et un nouveau mot de passe y soient envoyés.

Où sont situés les serveurs ?

Situés en France, les serveurs de Viaduc® sont sécurisés au sein de Datacenter. Vos données sont ainsi protégées par une sécurité drastique respectueuse des normes en vigueur : firewall (pare feu informatique), système anti-incendie, système anti intrusion, surveillance totale et permanente…

Comment effectuer une commande ?

Il est très facile de passer une commande. Vous pouvez passer commande directement depuis notre site internet en cliquant sur le bouton « commander  » présent sur les pages présentant nos offres. Après cela, il suffit de se laisser guider par le processus de commande.

Il est également possible de souscrire une offre par téléphone auprès de notre service commercial.

Enfin, vous pouvez utiliser la fonction de rappel gratuit située en haut de notre page d’accueil, en bleu.

Quels sont les différents moyens de paiement acceptés ?

Les différents modes de règlements sont les suivants :

  • Par carte bancaire : Visa, MasterCard, Carte-Bleu (paiement sécurisé par notre partenaire banque Crédit Mutuel)
  • Par Virement Bancaire
  • Par chèque: A l’ordre de Viaduc® (9 rue James Watt – 49070 Beaucouzé – France)
  • Par PayPal

Dès que votre règlement est effectué, vous obtenez une confirmation de votre facture par e-mail.

Où trouver mes factures ?

Vous recevrez automatiquement votre première facture par e-mail à l’adresse que vous nous aurez indiqué, après votre première commande. Par la suite, un récapitulatif de votre facturation sera disponible directement sur votre espace client, auquel vous pouvez vous connecter en cliquant sur ce lien.

Comment joindre le service client ?

Vous pouvez joindre Viaduc® :

  • Par mail surinfo@Viaduc®.fr
  • Par téléphone auprès de notre service commercial, ou en profitant de notre option de rappel automatique (du lundi au vendredi, de 9h à 12h30 et de 13h30 à 18h)
  • Par courrier : Viaduc®, 9 rue James Watt – 49070 Beaucouzé
  • Via le chat en temps réelprésent sur notre site (il s’affiche en bas à droite de votre navigateur)
Combien coûte un appel au service client ?

Pour tous les numéros géographiques (débutant par 01, 02, 03, 04 ou 05), le coût est celui d’un appel local vers un fixe en France métropolitaine. Appeler au 0 820 20 20 56 coûte 0.09€/min.

Si vous disposez d’un interlocuteur dédié dans le cadre d’un pack Intégral, il pourra vous communiquer son numéro de ligne fixe.

Quelles sont vos CGV ?

Vous pourrez trouver l’intégralité de nos CGV en suivant ce lien.

Les atouts des produits et
services Viaduc©

    Vous souhaitez valider votre commande ? Précisez votre demande


    No, thank you. I do not want.
    100% secure your website.
    Powered by

      Etre rappelé(e) par un Conseiller Commercial