[Infographie] 10 choses à savoir sur le responsive design  

Les Archivistes 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. 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… « gridCalc » est une calculatrice facile à utiliser pour créer vos grilles. > 960.gs

Cours XHTML Introduction XHTML n'est pas un langage de programmation proprement dit, il s'agit simplement d'un langage de balisage dont le rôle est de formaliser l'écriture d'un document web avec des balises. Une page XHTML est donc un simple fichier texte contenant des balises permettant de mettre en forme la page (les titres, les paragraphes, les images, les liens…) et peut donc très facilement être conçue grâce à un simple éditeur de texte. Ces cours se basent sur la version XHTML 1.0 Strict. Chapitres Cours sur les bases du langage XHTML (Extensible HyperText Markup Language), le langage de structuration de données pour le web.

Story-boarding : 8 outils pour vos prototypes Le maquettage d’un site est une étape incontournable de l’approche de conception. Elle permet de visualiser dans des conditions les plus proches de la réalité les pages-clés de votre futur site. Effets de scrolling, placement des boutons d’actions, enchaînements des pages, aspects fonctionnels, rien ne vous échappera. Leurs bienfaits sont multiples et en phase de conception. Il en existe de nombreux aujourd’hui. Ne dites plus que vous n’en savez rien, ce billet vous en dresse une première liste, histoire de vous prendre pour un maître ergonome Les Mockups et wireframes Ces deux termes désignent l’ensemble des techniques et des outils qui permettent de maquetter un site web sous les angles graphiques, fonctionnels et ergonomiques,à l’image des story-boards utilisés dans l’audiovisuel. Pour quels usages ? La liste des usages peut aller encore bien plus loin et supporter des discours fonctionnels élaborés avec mises en situation. Quels sont les outils phares du marché ? Powerpoint Pencil Visio Axure

[Boîte à outils] 5 applications pour créer sa propre infographie   Esthétiques, claires, efficaces et surtout très virales, les infographies en tous genres envahissent la toile. Très sollicitées pour mettre en avant les chiffres clefs d’une études, les principales tendances d’un marché, elles sont utilisées par un panel d’acteurs : agences, cabinet d’études, blogueurs, médias, etc. Surfant sur cette tendance, plusieurs startups ont mis au point des web applications permettant à n’importe quel internaute de créer tout seul une infographie en ligne, en y insérant ses propres données. Pour l’heure, une majorité de ces services (en anglais) sont encore en version bêta et donc perfectibles. Tour d’horizon des 5 principaux outils actuellement disponibles. 1. En mars dernier, la plateforme de datavisualisation Visual.ly a lancé une nouvelle fonctionnalité baptisée Visual.ly Create. Visual.ly Create propose ainsi aux utilisateurs 7 types de templates différents. Visual.ly Create télécharge automatiquement en quelques secondes les données nécessaires. 2. 3. 4.

TUTO . com : Tuto Photoshop, Flash, After Effects, Indesign 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. De nos jours, il n’y a pas un client qui demande un site Internet sans demander une version mobile de celui-ci. Seulement en quelques années le nombre d’appareils et de résolutions servant à consulter des sites web a tout simplement explosé : ordinateurs, smartphones, tablettes, web TV, grille-pain, format portrait, paysage, etc… Entre 2005 et 2008 on a identifié pas moins de 400 résolutions d’écran différentes pour tous les appareils vendus. Définition du responsive web design La mise en page La typo

Structure d'un document EPUB 2 J'ai détaillé dans un autre billet l'intérêt du format EPUB. Comme on me pose souvent des questions sur la nature technique de ce format, et que je m'en pose moi-même de temps en temps, voici quelques explications concernant la version 2 de cette norme. Je n'ai pas encore eu le temps ni l'occasion d'étudier le format EPUB 3 pour le moment. Objectif de conception Le format EPUB a été conçu pour les publications électroniques, en utilisant autant que possible des technologies existantes : Cette volonté de réutilisation comporte quelques inconvénients, parmi lesquels un certain manque d'homogénéité et un recoupement partiel entre les formats NCX et OPF qui implique la duplication de certaines informations. Le format EPUB est donc défini par l'International Digital Publishing Forum (IDPF), sous le forme de trois volets : Conteneur ZIP mimetype META-INF/ container.xml OEBPS/ content.opf toc.ncx cover.xhtml cover.jpg chap1.xhtml chap2.xhtml … Point d'entrée META-INF/container.xml <? <? Contenu

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 ! Il est donc essentiel pour tout webdesigner qui se respect, d’apprécier les différents outils/ressources listés dans cet article présentant les 50 ressources indispensables pour les webdesigner. Inspiration / Showcase Site internet Logo Graphisme / Art digital Wallpapers Outils Générateurs de texte Couleurs Showcase de couleurs Nuances de couleurs Palette de Couleurs à partir d’une image Création de conceptBoard Ressources Icones Fonts Images Gratuites / Libre de droits Payantes (Discount) Payantes ($$$) Textures Motifs Brushes Vecteurs Partagez cet article Vos réactions ... Nadège 24 août 2010 at 20 h 35 minSuper ressources! Laisser un commentaire Articles en relation Articles populaires Articles Récents Recevoir votre code RIO Free Gratuitement

[Infographie AFDEL] Les chiffres clés du numérique en 2012  L’AFDEL a publié une infographie reprenant les chiffres clés du numérique. Celle-ci, organisée en 6 chapitres, revient sur le mobile, le software, les industries de pointe, la performance des entreprises, l’économie mais également les tendances 2015. Voici les principaux chiffres à retenir: 40% des français possèdent un smartphone60% des français se connectent plusieurs fois par jour à Internet : 34% via smartphone, 9% via console de jeu, 5% via tabletteOn compte 26,2M de français connectés aux réseaux sociaux en 2012 (Facebook, Twitter, Linkedin, Google +, etc) Les chiffres du numérique dans les industries de pointe sont également marquants: Le logiciel représente 30% de la valeur d’une automobile1/3 du coût global d’un avion est aujourd’hui lié aux systèmes embarqués, dont 40% en développement de logiciels.1 métro météor représente 1,3M d’heures de développement logiciel Le numérique a également un effet très bénéfique sur les entreprises.

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

Comment créer un epub Qu'est-ce qu'un fichier en format ePub ? Avec l'arrivée des lecteurs de livres électroniques (aussi appelés liseuses ou readers), nous avons vu l'arrivée de nouveaux formats de fichiers. Beaucoup de ces formats sont spécifiques à un lecteur. Suite à cette multitude de formats propriétaires (quasiment un par liseuse !) La solution OpenOffice Il existe plusieurs solutions pour transformer votre fichier. Tout d'abord, un petit mot sur OpenOffice. Je rappelle également que grâce à OpenOffice, on peut très facilement créer des fichiers PDF et que le correcteur orthographique Antidote le reconnait sans aucun problème. Le plug-in Writer2ePub Pour en revenir à notre format ePub, sachez qu'il existe pour le Writer d'OpenOffice (l'équivalent de Word), un plug-in à installer. Une fois installé, ouvrez Writer : de nouvelles icônes apparaissent dans le menu comme montré ci-dessous : Après avoir terminé de remplir les champs demandés, cliquez sur le bouton "OK" et attendez. Calibre e-book management

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. Tout d’abord, le design. Le Design Thinking, par exemple, est centré sur la résolution d’une problématique donnée. Aujourd’hui, l’utilisateur doit être au coeur du processus. Selon Sylvie Daumal, plus qu’un métier, le design d’expérience utilisateur est un processus de recherche, d’imagination, de conception, de création, de test et d’optimisation. Pour en savoir plus sur son expertise, ce qu’elle représente au jour le jour et les enjeux pour les entreprises, nous avons donc rencontré l’auteur de « Design d’expérience utilisateur, principes er méthodes UX ».

[Infographie] Les 5 clés d’une campagne d’acquisition online réussie  L’agence digitale spécialiste des stratégies d’acquisition Adlead a publié une infographie reprenant les 5 règles nécessaires à la réussite d’une campagne d’acquisition de prospects. Règle n°1 : Partir à la conquête de son public Cela passe par la compréhension des nouveaux usages: 50% de l’audience mobile est générée à partir d’applications mobiles tandis que 26% des mails sont lus depuis un smartphone. Sur les réseaux sociaux, on compte 750 tweets par seconde et 2,1M de « j’aime » Facebook par jour. Règle n°2 : établir un plan de campagne Il faut se demander quels sont ses objectifs : Visibilité ? Règle n°3 : Susciter de l’engagement Il faut partir du constat que la relation future et le ROI découlent du premier contact. Règle n°4 : Faire connaître son offre Le but est évidement de toucher la bonne personne, au bon moment, avec le bon message : emailing, application mobile de marque, display, réseaux sociaux, etc. Sur mobile, attention d’adapter vos contenus aux devices.