background preloader

[Infographie] 10 choses à savoir sur le responsive design

[Infographie] 10 choses à savoir sur le responsive design
Splio, prestataire spécialiste de la relation client multicanal, vient de réaliser une infographie sur le responsive design. Cette notion consiste à repenser la manière de concevoir les parcours de navigation en ligne. L’objectif est donc de réorganiser l’information en fonction des paramètres de l’appareil. Outre une véritable tendance, ce concept constitue un enjeu majeur compte tenu de l’explosion des usages mobiles. Relativement technique, l’infographie met en avant, sur un ton décalé, 10 conseils clefs à destination des designers et développeurs. Mettre en place une mise en page simple. Afin d’illustrer l’ensemble de ces « tips », l’agence Splio renvoie les curieux vers le site mediaqueri.es, qui propose une série d’exemples.

http://frenchweb.fr/infographie-10-choses-a-savoir-sur-le-responsive-design/89672

Related:  thomaslecrouhennecOutils création

Grille typographique et responsive design = « Responsive Grid » ? Hello Bon, je viens de voir ce matin que c’était un jour férié, on va donc prendre un peu de temps pour jeter un œil à la fameuse « grille typographique » ! L’organisation en colonnes d’une page de magazine, d’une affiche ou des pages web tire son origine de la nécessité d’un meilleur confort de lecture. En effet, même si ces formats de lecture sont différents, nos yeux perçoivent les mots d’une façon assez proche et ressentent également la fatigue sur ces supports. Donc plus de confort, et donc… la grille! Même si composer une grille est assez simple, je souhaitais ce matin vous proposer différents services en ligne qui permettent de concevoir votre grille pour le web, et notamment pour ce qu’on appelle le « responsive design ».

Excel et Illustrator Ce tutoriel nécessite Illustrator, logiciel payant de dessin vectoriel commercialisé par Adobe. Il se peut que certains conseils donnés ici puissent servir dans d'autres logiciels de dessin mais je n'ai pas testé. Merci de vos retours sur ce point. Excel permet bien sur de faire des graphiques mais les possibilités de mise en forme restent limitées. En particulier concernant le texte. Par exemple, comment afficher des valeurs contenant des puissances de 10 sous le format habituel 6x103 au lieu de cet horrible 6.0E+3 qui ne correspond à aucune notation internationale ? Responsive design : définition, fonctionnement, ressources et tutoriels Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “responsive web design”. Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !). Le “responsive web design” est né suite à un besoin grandissant.

50+ Ressources indispensables pour les webdesigners 50+ Ressources indispensables pour les webdesigners Webdesign 24 août 2010 Utiliser les bonnes ressources peuvent parfois vous faire économiser un sacré temps tout en vous apportant une valeur ajouté à votre travail…Vous êtes ainsi plus performant et professionnel ! Responsive design - site adapté aux mobiles Beaucoup de personnes utilisent un smartphone pour aller sur internet, et de plus en plus de personne veulent donc un site compatible avec ces dits smartphones. Je ne vais pas faire un énième guide sur les bonnes pratiques pour réaliser un tel site, le web en est déjà bien rempli, mais je vais regrouper ici les sites ayant les informations les plus complètes pour vous permettre de produire un site adaptable aux smartphones. 1ère étape : chercher l’inspiration

50 Banque d'images gratuites Toute image trouvée sur Internet et que vous pouvez télécharger est gratuite et vous pouvez en faire ce que vous voulez pour un usage privé, il est donc inutile de se poser la question. Puis-je utiliser telle ou telle photo que j’ai trouvée sur Internet? Réponse : oui. Oui à partir du moment où l’usage de la photo est strictement privé (répétition volontaire). En revanche, si vous commencez à bloguer, à vous servir d’une photo pour faire de la pub, créer des encarts publicitaires, les choses sont un peu moins évidentes et il ne s’agit donc pas de rigoler sous peine d’avoir quelques ennuis, même si la probabilité d’avoir des problèmes avec la justice est minime, je ne tenterais pas trop le diable. Gridpak - Générateur de grille CSS "responsive" - Épinards & Caramel Gridpak - Générateur de grille CSS "responsive" Par Manu · Etiquette(s) : CSS Technos Web · J'ai peut-être enfin trouvé mon bonheur dans le monde des grilles CSS et du design "responsive" ! Une grille permet de placer facilement les différents éléments de votre mise en page, d'une façon plaisante et qui s'adapte à la largeur de l'écran de vos lecteurs. Une mise en page "responsive" signifie quant à elle que l'on définit différentes grilles selon la largeur du navigateur web. On peut donc avoir, sur la même page, la version "mobile" et la version PC de votre site.

Interview de Sylvie Daumal, experte en design d’expérience utilisateur Plus qu’un produit ou un service, les clients sont aujourd’hui à la recherche d’expériences de consommation. Nous avons rencontré Sylvie Daumal, auteure du premier ouvrage français sur le design d’expérience utilisateur, « Design d’expérience utilisateur, principes et méthodes UX ». Le design d’expérience utilisateur ou UX Design, est une méthode venue des pays anglo-saxons et assez récemment arrivée en France. Avant de plonger avec Sylvie Daumal dans sa vision du métier, commençons par quelques définitions. Tout d’abord, le design.

Responsive design: retour d’experience Le développement du thème actuel m’a permis de travailler sur deux techniques: le couple HTML5/CSS3 d’une part, et le « Responsive Design » d’autre part. Comme je l’ai fait précédemment pour HTML5/CSS3, je vous présente, dans cet article, mes commentaires sur le design « responsive ». Grille fluide ou Grille fixe? Le responsive design est basé sur trois composants une grille fluide,les média-queries (voir cet article pour en savoir plus),un contenu fluide (images, …). 10 outils gratuits pour faire vos wireframes - Responsive Mind Les wireframes, ou chemins de fer sont souvent négligés par manque de temps ou parce qu’on n’a pas les bons outils. Pourtant, avec les bons outils, un wireframe peut être fait en quelques instants, seule la réflexion sera longue. Exemple de wireframe C’est pourquoi, après des années passées à concevoir des zonings et wireframes avec des outils à la pointe de la technologie tels que l’application de dessin de Google Docs ou même un stylo et du papier à petits carreaux je me suis décidé à trouver un logiciel un peu moins hype, histoire de voir comment vivent les chefs de projet en 2014.

Responsive web design : Les autres usages Un site web « adaptatif » Vous l’aurez remarqué, depuis quelques temps, le web ne se consomme plus seulement derrière son écran d’ordinateur mais sur des tas de nouveaux appareils ayant chacun leurs spécificités (Taille de l’écran, résolution, connectivité internet, écran tactile, …). Au début de cette transition, beaucoup se sont lancés dans la création de site internet dédié au mobile afin de permettre aux utilisateurs nomades, d’avoir accès à l’information dans une version souvent très simpliste. A cette époque, il n’était pas rare de trouver deux versions d’un site internet (La version Desktop et la version Mobile).

C'est quoi, le design numérique ? (Visuel : Mo, Ircam + DaFact + Grame + Nodesign + Voxler, projet de recherches de l’Agence Nationale de la Recherche (ANR), 2010 ; présenté à Saint-Etienne dans le cadre de la Biennale du Design) A gauche, l'industrie du papier peint, filière que l'on imagine volontiers un brin vieillissante, et pas forcément à la pointe de la R&D. A droite, des créatifs, issus du monde du design et du graphisme. Comment des créatifs peuvent-ils contribuer à apporter des innovations stratégiques à cette filière, au-delà de leur simple champ de compétences, en appréhendant des enjeux de fabrication à échelle industrielle ? Que peut retirer, de son côté, une filière industrielle de créations que l'on imagine plutôt réservées aux musées ?

La tête dans le Flux ! Ayant été interrogé par Clubic, je fais une brève double apparition dans un article intitulé "Post PC : est-il temps d’adopter le Responsive Web Design ?" (en page 4). Le billet couvre différents domaines du Responsive Web Design (du référencement, des usages, des performances web, etc.) et on y trouve - forcément - quelques raccourcis et trolls latents, mais il est loin d’être mauvais :) Je suis juste un peu vexé qu’il n’ait conservé qu’environ 10% de mes réponses à ses questions, je ne m’y attendais pas du tout… Qu’est-ce que le Responsive Web Design + 3 exemples En mai 2011, 3 millions de français déclaraient avoir déjà acheté depuis leur mobile ( Fevad, chiffre clés 2011 ). Ce chiffre, bien qu’encore loin des chiffres du e-commerce classique, cachent un phénomène plus révolutionnaire qu’il n’y parait: le web devient mobile. Et même si consulter un site internet depuis sont smartphone ne sera jamais aussi complet et confortable que depuis un écran 22″, il devient de plus en plus dangereux pour votre projet web d’être conçu sans intégrer les plateformes de diverses dimensions. C’est à cet enjeux que le Responsive Web Design (traduisez « Design Adaptable à toutes les résolutions ») se propose de répondre.

Related: