background preloader

Grille typographique et responsive design = « Responsive Grid » ?

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 ». Voici donc cinq services en ligne qui vont vous aider avec la grille typographique et notamment la « responsive grid », ou grille qui s’adapte à la largeur de votre écran, que ce soit une tablette ou un téléphone… > Grid Calculator > 960.gs > goldengridsystem.com Related:  thomaslecrouhennec

Tendances 2012 : Zoom sur les tendances web de 2012 - tendance-web Le Blog Du Webdesign a interrogé 5 professionnels du web pour nous faire partager leur vision des tendances dans leurs milieux. Pourrais-tu te présenter en quelques lignes ? Je m'appelle Geoffrey Dorne, je suis designer indépendant, chercheur et également blogueur sur et En 2011, quelle nouvelle ou phénomène a attiré le plus ton attention ? Pour moi, en 2011 le tactile, au travers des interfaces ET des objets s'est imposé au plus grand nombre, des grands-parents jusqu'aux enfants, le tactile est devenu presque un réflexe et je ne compte plus les gens qui "touchent" maintenant les écrans, auparavant sacralisés comme objet du regard. Selon toi, quelles sont les tendances pour 2012 et que pouvons-nous attendre de cette année? Selon toi, que faudrait-il surveiller cette année pour rester branché ? Pour rester "branché", je ne sais pas vraiment... ;-) Je pense qu'il faudrait garder un oeil attentif aux -r-évolutions sociales et leur rapport au design. 1. 2.

[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.

Blup! 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. Le problème est qu’on ne peut pas – ou du moins ce ne serait pas très pratique – développer autant de versions d’un site qu’il y a de résolutions différentes. Définition du responsive web design Cette évolution des techniques de webdesign, d’intégration et de développement se base sur un objectif simple : un même site doit pouvoir s’adapter lui-même aux différentes résolutions d’écrans… et donc son contenu aussi ! Voici 2 exemples pour illustrer des webdesigns crées de façon “responsive” : La typo 1.

Livre : Design émotionnel par Aarron Walter - webdesign-ressources Imaginez une nouvelle manière de faire des sites web en intégrant une véritable expérience émotionnelle pour vos visiteurs. Découvrez des techniques et concepts qui ont fait leur preuve avec l'auteur Aarron Walter. Design émotionnel Découvrez cette nouvelle publication "Design émotionnel" aux éditions Eyrolles qui vient agrandir la célèbre collection "A Book Appart". L'auteur Aaron Walter nous propose de découvrir les domaines de l'émotion et du design sensoriel par une série de chapitres qui apporte des exemples et des réponses à l'utilisation d'expériences dans nos web design. Le lecture de ce livre permet de renforcer l'importance du design au coeur de nos réalisations, il nous montre qu'un design et une expérience réussis peuvent remplacer l'ensemble des efforts en publicité et en communication autour du projet. À qui s'adresse ce livre ? L'auteur du livre : Aarron Walter Extrait du livre "Design émotionnel"Voir son site personnel : Caractéristiques :

Responsive design - site adapté aux mobiles | Blog iMDEO | Veille technologique et technique | agence de développement web 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 Avant de commencer à créer votre site, vous allez surement commencer à chercher des exemples de sites s’adaptant aux smartphones. Je ne vous en conseillerai qu’un seul, mais un bien : - Ce site référence de nombreux sites ayant un design responsive basé sur les media queries. Les média quoi ? Les média queries ! Ou pour ceux qui n’aiment pas trop l’anglais je vais être sympa : - Templating (400 / 900) x 100 = 44% Les script jQuery utile

Webmaster, tutoriaux et ressources Dreamweaver, Flash, Photoshop, CSS, Javascript - weByo.[net] 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, …). Les grilles fluides, c’est compliqué! Hors gérer une grille fluide reste plus difficile que de gérer une grille fixe. Je me suis donc posé la question: les notions de « design responsive », et de fluidité sont-elles réellement indissociables? Dans le premier cas, nous modifions les propriétés des styles, pour que la structure soit adaptée à la taille de l’affichage,Dans l’autre, les propriétés des styles ne changent pas, mais leurs valeurs permettent d’avoir une structure proportionnelle à l’affichage. Alors grille fixe?

Webdesign Mag

Related: