Extract of SpipFactory.com "Au doigt et à l'oeil! " Feuilleton optimobile http://spipfactory.com/?au-doigt-et-a-l-oeil-feuilleton "Au doigt et à l'oeil! " Feuilleton optimobile - Les Articles des Mutualisés - jaseur - Publication date: vendredi 22 mai 2015 Description: Comment faciliter la vie de vos lecteurs : Adoptez une ergonomie très rapide, sur tous navigateurs, et pour toutes résolutions Être compatible "mobile tactile", réclame des contenus plus concis, plus directs, plus rapides, pour délivrer des messages clés en quelques secondes sur des écrans diminués. Nous rassemblons dans cet article des conseils concernant les principaux points à Copyright SpipFactory.com Page 1/10
surveiller pour faciliter la lisibilité de vos sites internet. Participez, apportez vos contributions, la plus petite idée d'amélioration sera utile à tous. Copyright SpipFactory.com - Tous droits réservés Copyright SpipFactory.com Page 2/10
Optimiser la lecture au doigt et à l'oeil c'est adapter : «interface», «lisibilité», «vitesse» aux mobiles et écrans tactiles En 2015 votre site web se doit d'être lisible : vu et compris dès le premier coup d'oeil pour répondre aux besoins des internautes de façon intuitive Le web devient compatible mobile tactile, avec des contenus plus concis, plus directs, plus rapides, pour délivrer des messages clés en quelques secondes. Un conseil : concevez, pensez votre site d'abord en version mobile, et ensuite déclinez le pour des écrans plus grands! Escal à l'oeil et au doigt sur un écran 7" <div class='nivoslider-wrap nav-bullet' style="max-width:614px;max-height:717px"> <div id="slider_3074c8a9" class="nivoslider" data-slider="{ effect:'fade', slices:15, boxcols: 8, boxrows: 4, animspeed:500, pausetime:3000, startslide: 0, directionnav:false, controlnav:false, pauseonhover: true, manualadvance: false, prevtext: 'Précédent', nexttext: 'Suivant', randomstart: false }"> Copyright SpipFactory.com Page 3/10
Copyright SpipFactory.com Page 4/10
CHOISIR UNE INTERFACE SIMPLIFIEE & RESPONSIVE <dl class='spip_document_1905 spip_documents spip_documents_right' style='float:right;'> º UN MENU SIMPLIFIE COURT & ATTRACTIF Un menu optimisé pour le mobile, caché, coulissant, en perspective Un menu toujours accessible quelque soit la page. <dl class='spip_document_1904 spip_documents spip_documents_left' style='float:left;'> <a href="sites/spipfactory.com/img/gif/galaxy3lite-02.gif" title='gif - 106 ko' type="image/gif"> Escal au doigt et à l'oeil sur un écran 7" Copyright SpipFactory.com Page 5/10
º UNE GRILLE DYNAMIQUE LIQUIDE ADAPTATIVE OU RESPONSIVE Une interface plate optimisée pour les écrans tactiles Un contenu adapté à la taille de l'écran <span class='spip_document_1902 spip_documents spip_documents_left' style='float:left; width:129px;'><a href="sites/spipfactory.com/img/gif/galaxy3lite-06.gif" type="image/gif" title=""> º UNE NAVIGATION SIMPLIFIÉE : MOINS DE CLICS PLUS DE SCROLL La page d'accueil accessible depuis toutes les pages par le logo visible et cliquable. Navigation simplifiée avec Scrolling vertical et horizontal ou en biais Des incitations à l'action à l'avant et au centre. Évitez les appels à l'action vers de nouvelles fenêtres. Des liens URL bien distincts les uns des autres pour des clics faciles. VOTRE CONTENU CONCIS, DIRECT & RAPIDE Copyright SpipFactory.com Page 6/10
º MONO-PAGE AVEC PARALLAXE CRÉATIVE Une page épurée par article. Le story stelling d'une mono-page racontant une histoire différente à chaque fois est de plus en plus utilisé. º ILLUSTRATIONS, PHOTOS, VIDÉOS, INFOGRAPHIES, L'IMAGE S'AFFICHE EN GRAND PARTOUT Documents visuels optimisés et ajustés (diaporamas, tableaux, images, photos, vidéos,...) A éviter les vidéos qui ne peuvent pas être lues sur mobiles, Illustrations «sous forme d'icones», photos «authentiques», Vidéos «Pleine page» Infographies. LA PAGE AVEC UNE ESTHETIQUE EPUREE Copyright SpipFactory.com Page 7/10
<dl class='spip_document_1900 spip_documents spip_documents_left' style='float:left;'> <a href="sites/spipfactory.com/img/gif/galaxy3lite-08.gif" title='gif - 90.3 ko' type="image/gif"> Au doigt et à l'oeil! º LE DESIGN SIMPLIFIE Plus plat, contrasté, minimal et très vite chargé en mémoire, sans effet de profondeur (ni ombre, ni 3D, ni dégradé), avec des couleurs fraiches, vives et saturées. Saint SpipFactory, peux-tu optimiser les contrastes, les couleurs pour améliorer ta lisibilité? <dl class='spip_document_1899 spip_documents spip_documents_left' style='float:left;'> <a href="sites/spipfactory.com/img/gif/galaxy3lite-05.gif" title='gif - 107.8 ko' type="image/gif"> Au doigt et à l'oeil! º UNE TYPOGRAPHIE PLUS LISIBLE POUR MOBILES Des polices directement chargées par le navigateur. Le texte est lisible sans zoomer, contrasté et optimisé pour la lecture avec des grandes polices sans serif, light et simples, ajustées. Saint SpipFactory, peux-tu optimiser ta typographie? <dl class='spip_document_1901 spip_documents spip_documents_left' style='float:left;'> <a href="sites/spipfactory.com/img/gif/galaxy3lite-07.gif" title='gif - 104.9 ko' type="image/gif"> Copyright SpipFactory.com Page 8/10
Au doigt et à l'oeil! º DES ICÔNES POUR UNE MEILLEURE LISIBILITÉ Simples et optimisés pour petits et gros doigts sur tous les écrans tactiles Géométriques, carrés, ronds, triangles, rayures Monochromesou souvent blanc Réalistes : Représentant un élément graphique réel ex:une véritable horloge. <dl class='spip_document_1879 spip_documents spip_documents_left' style='float:left;'> <a href="sites/spipfactory.com/img/gif/spip2_copie.gif" title='gif - 11.5 ko' type="image/gif"> Spip Le CMS multilingue Exemples de sites spip au doigt et à l'oeil : http://www.mopp.net/?lang=fr http://ticplus.fr/ Autres sites adaptés mobiles : http://edition.cnn.com/europe http://side-ways.net/ Des sites utiles en conseils :https://blog.splio.com/fr/10-petits-conseils-en-responsive-design/ Un site pour vérifier : responsinator.com Copyright SpipFactory.com Page 9/10
Un site de test pour mobiles Alsa Créations comment tester un site responsive Les conseils de performance pour mobiles par akamai.com Le Site Escal pour tous écrans <dl class='spip_document_1868 spip_documents spip_documents_left' style='float:left;'> <a href="sites/spipfactory.com/img/pdf/au_doigt_a_oeil.pdf" title='pdf - 292.9 ko' type="application/pdf"> Au doigt et à l'oeil! Facilitez la vie de vos lecteurs :ergonomie très rapide sur tous navigateurs et résolutions Télécharger cet article en format PDF PS: Avez-vous besoin de plus de précisions? Souhaitez-vous des conseils pratiques pour mettre en place telle suggestion? Peut-être avez vous observé certains sites web avec une conception admirable qui vous a apporté quelques idées... c'est le moment de les partager entre nous... Merci de toutes vos contributions. Prochainement : la suite de notre feuilleton "Au doigt et à l'oeil " Spécialement pour les abonnés Spipeurs d'escal en cadeau la Check-list de 20 conseils à adapter pour améliorer la lisibilité de votre site web. D'autres copies d'écrans, d'autres sites selon d'autres orientation Points par points selon vos demandes, les explications Inscrivez-vous à la newsletter spipfactory pour recevoir les prochaines news Copyright SpipFactory.com Page 10/10