background preloader

Les 10 commandements du web adaptatif

Les 10 commandements du web adaptatif
En 320px ton webdesign, tu commenceras Partir de la plus petite taille d’écran ciblée, pour ensuite enrichir les possibles du site ; c’est s’assurer d’aller à l’essentiel sur le mobile. Ton contenu rédactionnel, tu soigneras Parce que le mobinaute est exigeant, travailler le texte autant que l’image est primordial. Capter l’attention d’un mobinaute commence par adapter un message à son contexte d’usage. Les sites à hauteur fixe, tu oublieras La page à taille fixe est morte ! Les Media Queries CSS3, tu maîtriseras Le responsive design vient tirer sa puissance des nouveaux standards du web : à chaque média son affichage optimisé grâce à CSS3. Les grilles, tu utiliseras Parce que les affichages sont fonction du terminal utilisé, les grilles de mise en page vous aideront à organiser vos interfaces. Tes images d’ambiance, tu travailleras Selon la taille et résolution de l’écran (mobile, tablette, PC ou TV connectée) le fond d’une page est vu partiellement ou en entier, alors soignez-le !

Ergonomie et référencement 2013 Vous avez été plus de 300 à nous suivre lors de la conférence du salon e-Commerce Paris 2012. C’est avec un grand plaisir que nous vous livrons ici les Best Practices 2013 en matière d’optimisation du référencement et de l’ergonomie. Tout d’abord, un bref rappel des conventions et règles ergonomiques déjà en vigueur… 1. Les conventions et règles à respecter dans une démarche ergonomique pour le haut de page (header) Vous remarquerez que beaucoup de ces éléments relèvent désormais du bon sens. Ci-dessous, les éléments pour le footer : Les conventions et règles à respecter dans une démarche ergonomique pour le bas de page (footer) Les conventions en Ergonomie : des règles de bon sens qui doivent être adoptées et appliquées par tous en 2013. Les conventions et règles à respecter dans une démarche ergonomique Christian Bastien & Dominique Scapin, chercheurs en ergonomie des IHM à l’INRIA ont procédé en 1997 à la synthèse de plus de 900 recommandations en 18 critères regroupés en 8 dimensions. 2.

Custom Sidebars Joins WPMU DEV's FREE Plugin Collection Custom Sidebars has become the latest addition to WPMU DEV’s collection of free plugins available for download in the WordPress Plugin Repository. Custom Sidebars allows you to create your own widgetized areas and custom sidebars, and select which sidebars to use on posts or pages. We acquired the highly rated and popular plugin after hiring its creator Javi Marquez. Javi said he originally created the plugin because he was building WordPress sites that required better sidebar functionality. He is now part of a core team at WPMU DEV working on an exciting new theme project. 15 Free WPMU DEV Plugins We have 15 plugins available for free in the repository, including lite editions of our popular Membership and MarketPress plugins. MarketPress – WordPress eCommerce offers a raft of features, including access to major payment gateways, support for major currencies, multiple shipping options, easy customization, powerful widgets and compatibility with Multisite. Chat – Add chat to your site.

Définition WireFrame et Zoning Définition de Zoning ou Wireframe Le Wireframe ou "maquette fil de fer" ou encore Zoning en français, consiste à schématiser sa page Web de façon plus ou moins complète. Cette schématisation peut se faire sur papier ou à l’aide d’un logiciel spécialisé est permet de mettre en place l’architecture de ses pages Web. La création d’un Wireframe (ou Zoning) est avant tout un travail de réflexion : "Comment placer mes blocs de contenus, sont-ils pertinent et en quantité suffisante, communiquent-ils le bon message, la navigation est-elle intuitive ? Les outils pour la création d’un Wireframe Les meilleurs outils, nous dit-on, sont le crayon et le papier, mais on peut aussi utiliser des logiciels pour ces raisons : disposer d’une bibliothèque de composants Web réutilisablesdéplacer facilement les blocs de contenupermettre un travail collaboratif en ligneexporter son Wireframe pour ces collaborateurs et/ou clients Les meilleures ressources sont évidemment en anglais : Les logiciels : Et le Storyboard ?

The top 25 responsive web design tools | Web design Over the past few years we've seen an explosion of web-enabled devices with varying resolutions, capabilities, form factors, pixel densities, interaction methods and more. This onslaught of connected devices is just the beginning, and we're bound to see people accessing the web from a greater number of devices in the coming years. It's futile to create a dedicated web experience for every single device class out there, and the need to create a smart, flexible, adaptable web experiences is becoming more apparent every day. Responsive/adaptive/multi-device web design (whatever you want to call it) is here to stay. Just because responsive design is becoming necessary doesn't mean it's easy. Innovative tools These are formidable problems we're up against, but thankfully the web design community is up to the challenge. There's a lot to get excited about, but it can also be a huge task to keep track of the latest tips and tricks. 01. 02. This is where Jetstrap comes in. 03. 04. 05. 06. 07. 08.

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

Installer un espace membres sur son blog Wordpress en 5 mn chrono e vous en parlais hier, quand on veut vraiment décoller avec son blog, il faut plus qu’un ebook de 10 pages, un formulaire Aweber et une liste d’emails pour ça : Il faut que chacun de vos visiteurs puisse s’inscrire sur votre blog pour en devenir membre. Ainsi, ce n’est plus un pauvre ebook en cadeau qui donnera envie à vos visiteurs de s’abonner chez vous, c’est TOUTES les ressources de votre blog qui serviront à faire exploser votre liste de membres ciblés et véritablement intéressés par ce que vous proposez. Mais peut-être que vous pensez que c’est compliqué à mettre en place tout ça ? Pas du tout ! Et ce n’est pas une expression : Ca prend VRAIMENT 5 minutes ! Comment ? Grâce à une fonction de WordPress et à un plugin gratuit que je vous propose d’installer sur votre blog. Vous allez ainsi pouvoir créer votre espace membres en quelques clics. Le tout directement à partir de votre blog. Mais avant de vous parler de ce plugin, rappelons ce qu’est un espace membres. Par exemple, sur ce blog : 1.

Responsive webdesign : adapter un site à toutes les résolutions Le Responsive webdesign (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. Entrons dans le vif du sujet. Les sites Web sont aujourd’hui consultés sur une multitude d’appareils ayant des résolutions différentes Proposer une seule version du site Web censée s’adapter à tous ces terminaux est utopique. Le site ifttt n’est pas adaptable. Responsive ou versions séparées ?

10 Common WordPress Theme Issues & How To Fix Them There are thousands of forum posts opened everyday not only on WordPress.org but also on other forums and of course nearly every theme developer’s support site regarding very common issues that can be solved very quickly and easily. I’m sure theme developers and community members are pretty bored of answering these questions over and over again, so I’ve decided to write the following post which addresses some of the most common WordPress theme issues so you can bookmark it and have it ready at your disposal. 1. Stylesheet Is Missing You’ve just downloaded or purchased a super awesome theme and you go to install it and see the lovely message below: Well your first thought might be… “the developer screwed me and gave me a theme without a stylesheet” Of course it is possible the zip file you received didn’t have a style.css file, but more likely the issue is you didn’t upload the root theme folder. Missing Stylesheet Error Solution 2. Failed to Import Error Solution 1 3. 4. 5. 6. 7. 8. 9. 10.

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. Puisque cette révolution doit s'accompagner d'une expérience utilisateur de qualité, dans ce nouvel article nous vous donnons quelques conseils pour concevoir une application iPad conviviale. Ne pas réinventer la roue Les applications interactives n'ont pas seulement investi le champ de la mobilité, elles ont également permis de simplifier leur usage en proposant une interaction plus directe avec l'utilisateur grace au tactile. Dailymotion a placé la barre de progression à l'opposé du standard iPad Le bouton ON/OFF d'iPad a été dénaturé. Recommandations

Related: