background preloader

Responsive Webdesign – présent et futur de l’adaptation mobile

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

http://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html

Related:  Articles et documentationgaellefoResponsiveResponsive

Media queries - CSS Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même. Syntaxe Les requêtes de média sont formées d'un type de média, et peuvent, d'après la spécification CSS3, contenir une ou plusieurs expressions, traitant des fonctionnalités du média, qui sont interprétées comme vraies ou fausses.

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.

iPad : conception et ergonomie de l’interface Dans un article précédent nous avons étudié les secteurs d'activité où l'iPad s'est rapidement implanté et les usages qu'il permet. Allons un peu plus loin aujourd'hui. Pour replacer le contexte, une étude de comScore de juin 2011 montrait que l'iPad représentait 89% du trafic mondial de données sur tablette. L'iPad est donc actuellement hégémonique sur ce marché et c'est lui qui définit les conventions d'interactions sur tablettes. Plus globalement, l'usage du PC recule : les ventes ont chuté de 3,2% au premier trimestre 2011 (article de tablette-tactile.net). Celui des tablettes lui explose : 1,45 millions de tablettes vendu en France en 2011, soit plus que les PC de salon !

Images responsive et attribut sizes, amstramgram, pic... Résumé de l’épisode précédent : avec Geoffrey, nous avons vu qu’il est désormais possible d’avoir plusieurs sources de différente taille pour une image grâce à l’attribut srcset. En version tl,dr; on utilise l'attribut srcset pour donner au navigateur une liste d'images, on renseigne la taille de chacune avec le descripteur w, le navigateur se débrouille (oui se débrouille, littéralement c'est lui qui choisit) pour afficher l'image la plus appropriée en fonction de différents critères : tailles de la fenêtre de navigation, résolution de l'écran, voire pourquoi pas bande passante et âge du capitaine ? Et parce que je vous connais, voici un gros disclaimer : Attention ce qui suit fait partie d'une spécification en cours de rédaction à la date du 9 mars 2015. Elle peut encore évoluer. Ce n'est pas encore implémenté sur tous les navigateurs.

Comprendre le Viewport dans le Web mobile Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique

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.

La conception pour les sites Web Mobile Les ventes de Smartphones et de Tablettes tactiles ne cessent de progresser et la nécessité de concevoir des sites Web spécifiques devient incontournable. Afin de suivre cette évolution, de nouveaux principes de conception doivent émerger. L'enjeu est bien chercher à satisfaire des utilisateurs de plus en plus nombreux et de plus en plus exigeants. Patrick Cox nous propose une liste de ces principes, qui sont autant de points de vigilance. Traduction libre de l’article : Fingers are Bigger than Mice – Design Concepts for Mobile Websites de Patrick Cox publié en anglais sur Tympanus.net/Codrops. « Alors que les abonnements téléphoniques avec Smartphone devraient encore progresser de plus de 50% d'ici la fin de 2011 (1), la conception pour les navigateurs des mobiles et appareils tactiles a désormais atteint une part prépondérante.

e-mail en HTML "responsive multi-clients" L'e-mail (ou newsletter) reste encore aujourd’hui un moyen efficace de transmettre des informations à ses utilisateurs ou clients. En mode texte, aucun problème, c'est un standard interprété sans difficulté. En mode HTML c'est un art ô combien délicat en partie dû au nombre de clients lecteurs d'e-mail sur le marché qui ont des comportements bien différents (encore plus désormais que les navigateurs classiques). Cette disparité de l'interprétation des e-mails au format HTML provient de plusieurs facteurs :

Responsive webdesign : adapter un site à toutes les résolutions Le Responsive Web design (conception adaptative ou réactive en français) représente un ensemble de méthodes et techniques permettant d’universaliser un site Web. Qu’il soit consulté sur ordinateur, tablette, e-reader ou mobile, le site ainsi conçu s’adapte automatiquement à la taille de l’écran. Cette évolution très séduisante du Web pose néanmoins certaines questions d’ergonomie et oblige à repenser la conception des sites. Nous abordons dans cet article les objectifs du responsive design, les critères qui doivent décider à le mettre en œuvre, les recommandations de conception et les considérations techniques. Objectifs du responsive webdesign Pour commencer, rien de tel qu'une démonstration.

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.

Introduction aux images responsives, 1 : définitions Notre série de l'été 2015 est consacrée aux images responsives, présentées par le grand Jason Grigsby. Pour ne plus rien ignorer sur le pourquoi et le comment, suivez le guide! Par Jason Grigsby Le fonctionnement de l’algorithme de Google adapté aux mobiles Google a annoncé la semaine dernière qu’à partir du 21 Avril 2015, un nouveau critère fera son apparition dans son algorithme. A cette date, les sites labellisés « site mobile » seront privilégiés dans les résultats mobile sur smartphones. La compatibilité sera vérifiée en temps réel, page par page. Un nouvel algorithme qui vérifie en temps réel les pages d’un site Lors du SMX West, Gary Illyes, encore lui, (décidément ce gars est très actif en ce moment!) a dévoilé le fonctionnement du nouvel algorithme déployé par la firme de Mountain View.

C'est quoi le Responsive Web Design Consacré "mot-clé de l'année 2013" par le célèbre magazine Mashable, le Responsive Web design (RWD) est aujourd'hui incontournable dans nos projets web (et dans les cahiers des charges de nos clients)… mais demeure toujours aussi confus et insaisissable même chez les professionnels ! Voici donc une petite introduction pour mieux comprendre ce phénomène... Ébauche de définition Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau). Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages. Le terme de "Responsive Web design" a été introduit par Ethan Marcotte dans un article de A List Apart publié en mai 2010.

Media et Meta Quand vous travaillez sur un nouveau design de site Web, une des choses auxquelles il faut penser est le « responsive design ». Est-ce que le site que vous allez développer a besoin d'un « responsive design » ? Tous les sites Web aujourd'hui devraient prendre en considération l'aspect « responsive design ». Il y a encore certains développeurs qui pensent qu'un visiteur sur mobile peut toujours zoomer pour rendre une page lisible, mais le sentiment général est que de nos jours, chaque développeur devrait rendre son site facile d'accès et d'utilisation. Le « responsive design » c'est lorsque le design de votre site s'adapte à la résolution de l'écran de votre visiteur. Ce concept se met en œuvre avec l'utilisation des « media queries » CSS3.

Related: