Mobilisez vous pour le Responsive, nos recommandations

Transcription

1 Mobilisez vous pour le Responsive, nos recommandations Nous vous parlions en janvier 2013 sur ce blog de la montée en puissance du smartphone et des adaptations indispensables qu il faudrait inventer pour que les mobinautes naviguent avec autant de plaisir sur votre site à partir d un ordinateur ou à partir d un smartphone. Ce constat reste valable et le phénomène s amplifie, et est même devenu la norme comme le montrent les chiffres ci-dessous. 61% des français possèdent un smartphone 1h19 en moyenne sur un smartphone par jour en France 65% des consommateurs connectés commencent leur parcours d achat sur un smartphone (en France) ; si vous vendez en ligne, vous ne pouvez ignorer cette donnée! 7,3 milliards de cartes SIM sont désormais utilisées à travers le globe (moyenne 1 par être humain) : la concurrence est donc mondiale, opportunité d exporter, risque d être concurrencé sur son propre marché. Votre site ou votre boutique doit donc absolument être visible et surtout lisible sur un smartphone.

2 Les techniques permettant une adaptation d un site quel que soit le lecteur utilisé (ordinateur, tablette, smartphone) sont désignées par le terme «responsive design». Sachez que la taille de visualisation va varier de environ 24 pouces soit 61 cm de diagonale à 5.1 pouces soit 13 cm de diagonale, soit un rapport de 1 à 5! La taille de l écran est un facteur important mais pas le seul ; pensez aux différences d ergonomie et d usage de chaque outil de lecture. Fort de notre expérience, nous vous proposons quelques recommandations non exhaustives pour aller vers le responsive design : Penser «mobile first», c est-à-dire concevez votre site pour un écran tactile de smartphone puis adaptez le à l écran d un ordinateur. On inverse ici la démarche qui était auparavant de créer le site pour un écran d ordinateur, puis de l adapter à l environnement d un smartphone. Pas facile de changer ses habitudes! Multiplier les pavés cliquables : pratiquant vous-même la navigation sur un site à partir d un mobile, vous avez expérimenté la difficulté voire la galère pour accéder à un lien positionné sur un mot. Et à l inverse la facilité et le bonheur de cliquer sur des zones mieux délimitées parfois par une image. Adapter la taille des contenus, c est aussi optimiser pour les grands écrans. Si vous devez proposer un site visualisable facilement sur un smartphone, il reste des utilisateurs de votre site à partir d un ordinateur, et dans ce cas, les écrans sont de plus en plus imposants.

3 Profitez de cet espace pour véhiculer votre image à travers de belles photos sous forme de diaporama ou de fond. Supprimer certains contenus (vidéo, image ou texte)? That is the question! Aux débuts du responsive, on imaginait ou on supposait que le mobinaute commençait la visite sur un site et s il voulait approfondir utilisait son ordinateur pour accéder à une information plus détaillée. Que nenni! le mobinaute est avant tout un internaute et il veut accéder au même contenu. On adapte donc le contenu par sa taille et son positionnement. Faciliter la viralité ; on constate que l usage du smartphone est orienté massivement vers la consultation et la conversation sur ses réseaux sociaux. Sachant cela, mettez bien en évidence tous les appels au partage sur votre site. Le mobinaute a plus que n importe quel usager de votre site, le réflexe «réseaux sociaux». Que du bénéfice pour vous, afin que votre message soit diffusé largement. Éviter les pages trop lourdes, surtout pour l accueil. En effet, l accès aux réseaux n est pas toujours performant surtout s il est mutualisé dans un espace public. Prévoir un test utilisateur, évidemment, en faisant appel à des testeurs utilisant des environnements différents et en fonction de votre cible. Si vous vous demandez si votre site répond aux règles du responsive design, testez-le avec un smartphone relativement récent, et constatez si l expérience utilisateur sur les différentes pages est concluant. Vous disposez également d outils en ligne, permettant une analyse robotisée, comme Google Resizer qui teste l affichage sous PC, tablette et smartphone. Peut-être que 2 ou 3 aménagements seront nécessaires pour

4 améliorer l ergonomie ou alors c est la refonte complète qui s impose décidez en fonction des enjeux. Source pour les données chiffrées 2015 : Ovum, App Mobile, Minutebuzz Auteur: Philippe Boyadjis Vous souhaitez refondre votre site? Contactez-nous! Les tendances du webdesign en 2016 Le long scrolling Des pages qui s étendent sur la longueur à consulter en scrollant. Déja présent pour les tendances 2015, le long scrolling sera encore plus populaire en Popularisé par Facebook et l internet mobile, le long scrolling se retrouve aujourd hui sur tous types de sites y compris les catalogues produits. Pratique et esthétique il doit être le fruit d une vraie réflexion ergonomique et graphique, il ne suffit pas de mettre les éléments les uns en dessous des autres.

5 Le menu caché De nombreux sites utilisent une image, icône avec 3 lignes horizontales pour cacher leur menu. Le menu se dévoile au passage de la souris. Pratique quasi systématique sur mobile elle se retrouve de plus en plus sur tous les supports permettant ainsi une homogénéité quel soit le support, mobile, tablette ou écran et de laisser plus de place aux informations importantes, au contenu. Attention tout de même à cette mode qui va à l encontre d une des règles d or du web : la simplicité. La disparition des grandes images d entête et de fond De nombreux sites proposent un slider, une grande image en tête de page, une autre en background. La tendance actuelle va vers un style minimaliste de plus en plus épuré (on supprime les éléments inutiles) avec une grande place pour les textes et les typos travaillées. Les images seront toujours présentes mais pas en bandeau haut ni en background. Le retour de la typo Cette année les typos frapperont fort! Les typographies créatives vont envahir vos écrans et permettre aux graphistes et designers de donner un style authentique et moderne aux sites internet. GoogleFont permet de proposer sur son site une multitude de polices originales qui mettent en valeur le texte. Des sites plus rapides

6 Ces tendances ont aussi une source technique, la nécessite de rendre les sites internet plus rapides. La simplification, l utilisation des typo en partie à la place des images répondent aux exigences d un web plus accessible, pratique, rapide. En conclusion les tendances 2016 font la part belle au contenu et à la simplicité, le scrolling permettant de raconter une histoire agrémentée d éléments graphiques sous différentes formes : icônes, images, typos créatives. Auteur: Renaud Taupenas Les erreurs du webdesign à ne pas commettre Le design d un site est un élément essentiel, il doit non seulement être attrayant mais surtout permettre à l internaute d y trouver ce qu il cherche dans un environnement confortable. Souvent les entreprises décident de renouveler le design de leur site en ne prenant en compte que le côté visuel.

7 Les erreurs essentielles à ne pas commettre : (et des images écrans d exemples à suivre) Un message flou Si les internautes n identifient pas tout de suite votre activité ils s en vont! Allez à l essentiel, un message clair et direct, une bonne infographie, un diaporama,, les moyens de faire passer l information sont nombreux. Exemple à suivre : Une navigation compliquée. Si les internautes ne comprennent pas tout de suite comment naviguer dans votre site, ils s en vont! Pensez ergonomie! la navigation doit être claire et adaptée aux différents supports (tablette, smartphone, pc).

8 Une police pas adaptée et mal utilisée. Rien de pire qu un beau design associé à une police illisible? Avec google font vous pouvez choisir facilement des polices graphiquement intéressantes mais surtout LISIBLES. Exemple à suivre : lukas.fr/formation-17_initiation_pratique_a_photoshop.htm

9 Une mise en forme pas adaptée Sur internet les utilisateurs ne lisent pas ; ils scannent, parcourent visuellement et rapidement les blocs d information! Proposez des paragraphes courts avec titres et sous titres mis en forme (gras, taille de police, etc..) afin de faciliter une lecture immédiate. Ne pas mettre en avant les moyens de vous contacter Dans certains sites il est impossible de trouver les formulaires de contact ou un simple numéro de téléphone! Créez une page de contact avec toutes les informations (téléphone, adresse physique, formulaire de contact) avec un lien bien visible sur chacune de vos pages (toujours au même endroit). Remarque : proposer des adresses où vous contacter vous expose aux spams. Exemple à suivre : Auteur: Renaud TAUPENAS

10 Erreurs à ne pas commettre lors de la création d un logo Un logo trop complexe Les logos les plus simples sont souvent les meilleurs. Si votre logo comporte trop d éléments ou d effets, il risque d être illisible ou d apparaître brouillon. Beaucoup d entreprises tentent de faire passer une multitude de messages à travers leur logo. Le résultat est souvent l effet inverse : rien ne se dégage Ayez un message clair! Le logo doit représenter l entreprise, ses valeurs, pas forcément toutes ses activités. Il doit pouvoir se décliner sur tous les supports commerciaux ( cartes de visite, affiches, objets promotionnels), un logo trop complexe risque de ne pas se voir sur tous ces supports. Un logo illisible

11 Une erreur récurrente est la création d un logo pas suffisamment lisible. Les formes qui le composent doivent être suffisamment espacées et nettes. Le logo ne doit pas comporter trop d éléments pour être facilement identifiable. Pensez également qu il peut être regardé de loin, sur une enseigne ou un support publicitaire lointain, et, donc, évitez les traits trop fins et les éléments trop petits. Choisissez une police qui se lit facilement. La difficulté est de trouver l équilibre entre création et lisibilité Négliger le choix de la typographie La typographie est un point essentiel dans la création d un logo. Faites des essais, achetez des typos, déformez les, modifiez les pour avoir le rendu souhaité. N utilisez pas de polices trop communes que l on retrouve partout, pas assez claires ou pas adaptées à votre secteur d activité.

12 Utiliser des images bitmap Un logo doit être réalisé en vectoriel avec un logiciel comme Illustrator, et les images bitmap sont à proscrire. Votre logo doit pouvoir être agrandi sans perte de qualité. Acheter un logo tout fait Solution économique mais qui ne permet pas de vous différencier, vous allez obtenir le même logo que votre voisin. Si vous n avez pas le budget, vous pouvez tenter de le faire vous même : restez simple, choisissez votre typographie et des formes simples. Sinon contactez un graphiste et exposez lui votre activité, vos valeurs et les idées majeures que vous voulez faire passer à travers votre logo.

13 Copier les autres C est l une des erreurs les plus courantes, créer un logo est pour une entreprise un moyen de se démarquer et de représenter ses valeurs. Copier un logo existant est donc une aberration et ne peux en aucun cas valoriser votre entreprise et ses spécificités. Auteur: Renaud Taupenas L importance du design dans la création d un site web Stratégie web Un site internet réussi est un outil de communication, mais également source de développement et de rentabilité accrue. Sa conception nécessite donc une vraie réflexion en interne mais aussi les conseils et compétences de professionnels du secteur. Il convient donc de mettre en place une stratégie web et choisir un ou plusieurs prestataires qui vont maîtriser l ensemble et chacune des compétences nécessaires, dont le design graphique.

14 Webdesign L objectif du web design est de faire comprendre une information sur un site internet par l utilisation d éléments graphiques (l image, la typographie, la vidéo,, ). Pour que cette information atteigne son public, il faut que le designer graphique crée un lien affectif avec l internaute. Il pourra ainsi lui transmettre les valeurs de la marque, de la société et établir un sentiment de confiance. Un bon design graphique doit visuellement séduire l internaute et en même temps le rassurer. Le choix des images, des typographies, le travail sur l espace, la mise en page, tous ces éléments contribuent à mettre en place ce sentiment de confiance et de pertinence du site.

15 Design et ergonomie Cette confiance ne peut être établie que si le l internaute peut trouver simplement et rapidement l information qu il recherche. Un site beau mais où la navigation n est pas adaptée ou trop compliquée ne fidélisera pas. Ergonomie et webdesign soit étroitement liés, le design graphique doit guider, aider l internaute à naviguer sur le site et trouver l information facilement. Nous sommes tous très sensibles à l apparence des choses, un premier jugement basé sur l apparence du site est établi dès l ouverture de la première page. C est un peu comme lorsque l on rencontre une personne pour la première fois et qu au premier regard, consciemment ou inconsciemment, nous nous disons il/elle a une bonne tête et cette première impression, subjective ou objective, facilitera le premier contact. La fiabilité, la qualité du design a donc un impact immédiat sur le ressenti général et la qualité du site et de son contenu.

16 et n est-ce pas la première accroche de la page d accueil qui est déterminante pour éviter le fameux rebond immédiat vers d autres sites! Il est donc indispensable de faire appel à un prestataire confirmé capable non seulement de concevoir une interface graphique de qualité, mais aussi d appréhender les contraintes techniques liées à l ergonomie et aux objectifs mis en place lors de l élaboration du cahier des charges.