background preloader

Quels choix de navigation en responsive design ?

Quels choix de navigation en responsive design ?
Faire le bon choix dans la navigation sur un site est primordial et depuis l’arrivée du responsive design, les choses se compliquent. Il faut garder un accès à l’information sans pour autant gâcher l’expérience utilisateur. Heureusement, Brad Frost a rédigé un excellent article sur son blog à ce sujet que je retranscris ici en français. Si d’emblée, le terme de responsive design vous est étranger, je vous recommande de lire cet article paru il y a quelques temps sur le blog : Responsive design : définition, fonctionnement, ressources et tutoriels Cet article (tout ce qui va suivre) est une traduction de l’article « Responsive Navigation Patterns » rédigé par Brad Frost, consultant et intégrateur pour mobiles, rédigé avec son approbation, et même avec ses encouragements. Je vous conseille chaudement de suivre son blog qui est une mine d’or pour le design sur mobiles. Introduction Voici quelques unes des techniques les plus populaires pour gérer la navigation en responsive design : Pour Related:  Sites web : diagnostic - refontegaellefoBENCHMARK MOBILE BRUNEAU

Méthodologie pour la refonte d'un site | Premier Juin La littérature consacrée à l’art de la création de sites web est conséquente : nombreux sont les ouvrages d’éditeurs spécialisés qui traitent de ce domaine, je n’évoquerai donc même pas les nombreux blogs et forums qui abordent ce sujet. Cette sur-représentation de la création de sites dans les contenus francophones a sans doute un effet néfaste sur la gestion de projets des refontes de sites internet par les annonceurs et agences web. Tour d’horizon sur ce qui fait des refontes une situation particulière nécessitant une méthodologie spécifique. Du passé faisons table rase : La principale erreur des refontes Web, oublier d’où on vient ! Votre site ou celui de votre client a déjà rendu de (trop) longs services, on peut même dire qu’il vous sort par les yeux ; dans les faits de nouveaux services, une nouvelle équipe dirigeante ou un changement de communication, voire de marque vous impose la refonte de votre site Web. Grave erreur, ce site est un point d’appui à plusieurs titres :

Responsive Webdesign – présent et futur de l’adaptation mobile Après plusieurs mois de recherche sur le sujet, j'ai enfin publié mon article sur Smashing Magazine qui s'intitule "The State Of Responsive Web Design". Ce qui suit en est la traduction. Avertissement avant la lecture : Je n'ai pas la prétention de changer le monde, d'avoir la vérité absolue. Dans cet article – qui est long, je le sais – je souhaitais juste rendre attentif le lecteur au reste de ce gigantesque iceberg dont les Media Queries n'en sont que la surface. Le responsive webdesign reste une technique et une infime partie de ce qui est aujourd'hui appelé "Adaptive Webdesign". Le but de l'article n'est pas non plus de décourager les gens qui optimisent des sites pour mobile, mais de mettre le doigt sur ce qui aujourd'hui pose problème, est bancal, pour ensemble, trouver des solutions à ces différents problèmes. On entend parler de "Responsive Webdesign" depuis plusieurs années maintenant, et le sujet s'est vraiment démocratisé et popularisé en 2012. La solution flexbox Conclusion

io Sencha Space is an advanced platform for securely deploying mobile apps and delivering a consistent, elegant, mobile user experience to end-users. Users can launch any mobile web app, or HTML5 app in a secure, managed environment. Your users will have secure access to mission critical applications and data regardless of their mobile platform or location. Sencha Space simplifies your mobile strategy Improve Efficiency Reduce the time, cost, and complexity of developing and deploying secure mobile apps Centrally manage users, apps, and data Manage access to critical data and user privileges from one centralized administrative console Secure sensitive data Protect mission critical data on individual devices and on the network Sencha Space Mobile Workspace Administration application Adding your organization’s applications to Sencha Space is easy. Sencha Space is a native mobile app that is installed on end users’ devices Sencha Space with your organization’s apps ready for users

Mobile Menu AB Tested: Hamburger Not the Best Choice? UPDATE: A second larger test was undertaken after this test, read about it here. (Hint: hamburger icon still didn’t work so well). Recently I’ve been reading books about quantum physics (clearly I’ve got too much time on my hands). I don’t profess to understand even a tenth of what I’ve read, but it’s fascinating (even if my friends shake their heads at the new levels of geekdom I’ve aspired to). The subatomic world seems to exist in a mystical state of uncertain probabilities – UNTIL it’s measured and observed. Exactly like user experience and usability. We really have no idea at all how users interact with our websites. Until we measure and observe, our assumptions are based on uncertain probabilities. Previous Hamburger Icon Test I did a previous test that seemed to show that a bordered “hamburger” (aka sandwich) icon was used more than other options. The menu icon on the right was clicked more than the previous two. I then decided to test the hamburger icon against the word “MENU”. Results

Méthodologie de l'agence Netemedia pour la refonte de sites internet Cahier des charges fonctionnel Durant cette étape, votre chef de projet Netemedia établit un document précis, commenté et exhaustif détaillant tous les aspects du projet, c’est-à-dire : - ses gabarits (structure des pages de votre site ou des écrans de votre application), – ses fonctions et fonctionnalités (ex. : type et comportement des éléments de navigation, type de menu, moteur de recherche, compte client, module dédié, etc.), – son arborescence (structure et répartition des contenus, rubriques ou produits, libellés des rubriques, etc.), – une page type complète (ex. : une notice livre ou album pour un éditeur, une fiche produit pour un site marchand, une page “contenus“ pour un site éditorial, etc.) ; c’est cette page qui, au final, motivera la visite de votre internaute ou l’installation de votre application, autant dire qu’elle fait chez nous l’objet du plus grand soin dès le cahier des charges !

Les 20 meilleurs outils de datavisualisation au banc d’essai Que vous soyez absolument novice ou codeur amateur, il existe aujourd’hui sur le web une impressionnante palette d’outils (presque) gratuits pour réaliser des datavisualisations. Banc d’essai. Note : j’ai volontairement éliminé les outils (a) entièrement payants (b) trop moches pour être utilisés dans des rédactions (c) en Flash. Ce billet n’est consacré qu’aux outils de “visualisation”, et non de scraping ou de traitement des données (un autre billet suivra bientôt). ↑1 » Pour les novices/pressés : le clé-en-mains Ces outils gratuits ou freemium permettent de générer des graphiques ultra-rapidement en copiant-collant des données d’un tableur. Le meilleur – Datawrapper : Simple d’utilisation, sobre, rapide, Datawrapper est tout à fait satisfaisant pour la plupart des visualisations courantes. Les + : la possibilité de personnaliser les couleurs, de mettre en évidence une série, la navigation par onglets entre les différentes séries. Les challengers : Ils ne nous ont pas convaincu : Sources :

Adaptive Images in HTML Quelles sont les étapes de création de votre site Internet ? Il faut donc que les sites Internet s’adaptent aux nouvelles modalités de connexion tout en prenant en compte les règles de base : Tactilité, résolution d’écran, intuitivité, ... Chaque terminal a ses propres caractéristiques. Le site doit donc s’adapter à tous les formats pour pouvoir être lu correctement. Que l’on choisisse le Responsive Design ou le développement d’une version mobile, ce sont aujourd'hui des solutions incontournables si l’on veut conserver une présence sur Internet. Mais quelle solution choisir pour son site ? Chaque solution a ses avantages et ses contraintes et chaque site à ses objectifs. Le Responsive Design Le responsive Design est la faculté d'un site web à s'adapter au terminal de lecture. En faisant l’état des lieux des points positifs et négatifs de ces deux solutions nous pouvons dire que le Responsive design et les sites mobiles n’ont pas les mêmes vocations.

Persona Dans le domaine du web, une persona est un personnage imaginaire qui représente un groupe ciblé. Lors de la conception d'un site web, il peut être nécessaire de définir plusieurs personas qui représenterons chacun un type de visiteurs potentiels. Grâce à ces profils, l'étape de conception prend en compte plus efficacement les besoins et objectifs des futurs visiteurs du site. Cela permet d'améliorer l'usabilité et l'ergonomie du site web. Par ailleurs, les personnes impliquées dans la conception et la promotion du site prennent plus à cœur le projet en ayant en tête ces utilisateurs fictifs. Exemple fictif d'un persona Bien que les personas représentent des utilisateurs classiques, ils ne doivent pas représenter un utilisateur moyen, bien au contraire. Le profil d'une persona contient des informations tel qu'un nom, un prénom, une photo, l'âge, le métier (ou statut social), la personnalité et tout autres facteurs qui peut se révéler utile. Lien interne Lien externe

Formation continue - [FORM] Université de La Rochelle [FORM] L’Université de La Rochelle propose des formations diplômantes et qualifiantes aux professionnels. Du stage court à la formation diplômante, l’offre de formation évolue chaque année en fonction des besoins du marché. Pour qui ? Particuliers, salariés du secteur public et privé, demandeurs d’emploi, travailleurs indépendants, commerçants, artisans, professions libérales, entreprises ou collectivités. Comment ? L’ensemble de nos formations peut être accessible dans le cadre du Plan de Formation, du CIF, du CPF, de la période de professionnalisation…Nos conseillers spécialisés sont disponibles pour vous présenter notre offre de formation, vous accompagner dans vos projets et vos recherches de financement.. Trouvez votre formation par secteur d’activité Accès à nos Diplômes d’Université (DU) et formations courtes qualifiantes : Un accompagnement personnalisé pour trouver sa formation

Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. This is how I still work today and definitely a method I advocate. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):

Useful List of Responsive Navigation and Menu Patterns Having functional navigation that works on both mobile and desktop platforms is challenging. Should the mobile have fewer navigation options?Will the user figure out how to use it? Fortunately there is a growing number of stunning examples and tutorials to be found. 1. Desktop Layout Mobile content slides in. This new jQuery-based solution is under active development has been tested in a number of environments (including older Android phones). It uses CSS transforms where possible, and fallback to jQuery animate. I am now using this on a production site – it seems to work well. Link: 2. Desktop Layout Menu Equivalent mobile layout (after tapping the nav icon). A very clean Javascript solution (NOT dependent on jQuery) that uses CSS3 transitions. Link: responsive-nav.com 3. Example slide in menu. No desktop image shown as there is no default desktop menu. A tutorial that shows how to slide menus in from the left, right, top, or bottom. 4. 5. 6. Tablet layout 7.

Related: