Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression
How to Create Retina Graphics for your Web Designs The more products Apple releases, the more widespread Retina displays become. So far we have Retina capable iPhones, iPods, iPads and MacBooks of various sizes, which together make up a pretty substantial audience. Let’s take a look at how you can create special retina graphics for your website so your design looks crisp, sharp and clear on those powerful screens. I initially didn’t expect the user base for Retina displays to be very large, after all it is a relatively new technology. You might expect Retina graphics to be saved with a higher PPI resolution, but that’s not the case. Design logos and icons in Illustrator Vector graphics are the perfect solution to creating retina graphics. Use Photoshop’s vector features Photoshop is a pixel based application at heart, but that doesn’t mean it’s not packed full of vector features. Cheat and scale up your pixel images What about design at 200%, then scale down? The easy Javascript way The manual CSS way The HTML way for inline images
Responsive design : le viewport Comme nous l’avions évoqué précédemment lors de l’introduction des Media Queries, ces dernières ne font pas tout dans le responsive design et ainsi, on peut constater que sur pas mal de smartphones (par exemple), les Media Queries ne semblent avoir aucun effet… Ce qui peut paraître étrange et surtout extrêmement gênant : si on fait tout ça, c’est surtout pour les mobinautes, après tout ! Le viewport Tout peut être expliqué grâce au viewport en fait. Il s’agit de la surface visible, la surface utilisée pour afficher votre site web. Sur un ordinateur classique, il s’agit tout simplement de votre fenêtre de navigateur. Dans ce cas, le viewport est donc facilement compréhensible : redimensionnez votre fenêtre et les Media Queries que vous utilisez feront effet. Sur un smartphone en revanche, ça se corse. Modifier le viewport La valeur à indiquer dépend de ce que vous voulez faire. Ce n’est qu’un exemple, bien évidemment vous pouvez indiquer la valeur que vous souhaitez. Et en CSS ?
Améliorer l’accessibilité d’un formulaire Clever Age vous proposait il y a quelque temps un livre blanc sur les formulaires web. Dans la même lignée, amis développeurs front, sachez que l’accessibilité web n’est pas forcément affaire de spécialistes. La plupart des questions peuvent se régler assez facilement. Améliorons à peu de frais l’accessibilité de nos formulaires ! Introduction Quand on parle d’accessibilité des formulaires, une des règles d’or consiste à utiliser de vrais champs de formulaire. Par exemple les listes déroulantes chartées aux petits oignons peuvent poser des problèmes importants d’accessibilité. Dans le cas qui nous concerne, il ne s’agit que de zones de saisie de texte, la moitié du travail est donc déjà faite pour nous : nous n’aurons à convaincre personne de la difficulté de rendre accessibles des éléments natifs HTML, très bien supportés depuis longtemps par les aides techniques. Contrôler les couleurs, les contrastes, etc. Oui évidemment dit comme ça c’est un peu aride. Utiliser les labels Conclusion
jQuery Mobile par l'exemple : démarrer Démarrer avec jQuery Mobile Pour commencer, il faut inclure (l'ordre a de l'importance) dans le head : la CSS de jQuery Mobile, le fichier JavaScript de jQuery, le JavaScript pour customiser les réglages par défaut, et le JavaScript de jQuery Mobile. Ce qui nous donne : Quelques éléments de compatibilité à savoir : jQuery Mobile 1.2.0 est compatible avec jQuery 1.7 jusqu'à 1.8.2. L'exemple avait été développé avec jQuery Mobile 1.0.1, je l'ai mis à jour avec la version 1.2.0. La structure d'une page simple est la suivante : <body><div data-role="page"><div data-role="header" data-theme="f"><h1>Kiwi Partÿ, by Alsacréations</h1></div><div data-role="content"> Ici le contenu </div></div></body> Vous aurez noté les attributs, c'est un des principes de jQuery Mobile : les attributs data-* vont servir à indiquer ce dont on a besoin, et vont être ajoutés au code par jQuery et jQuery Mobile. data-role="page" le rôle du bloc data-transition="slide" la transition à effectuer data-mini="true"
A Simple Device Diagram for Responsive Design Planning Updated for 2015! Check out Analytics-driven responsive web design planning At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design to. Just yesterday we had a big internal debate over what the best widths to design to are for 3 layout sites, 4 layout sites, etc. I'll get to our conclusions below, but another important distinction to call out is that for each layout there are two things to consider: what the pixel width range for a specific layout should be, and what pixel width the designer should create the PSDs at. There are an ever-increasing number of devices with different screen resolutions to take into account with a responsive design, so we put together a simple but handy diagram that lists the most common device widths as of the present, along with overlays for potential device width ranges. The Diagram Here's the result! A couple of things to note: Our Suggested Layouts 3 Layouts
Facebook connect Quoi de plus fastidieux et contraignant que de devoir saisir des informations dans un formulaire. Qui plus est, toujours les mêmes : prénom, nom, email, … Question aux e-commerçants : quel votre taux de perte sur la page de création de compte ? Il est certainement de toute façon trop important. Un prospect qui initie un panier d’achat, qui s’engage dans le tunnel de vente pour le quitter sur la page de saisie des informations représente une perte sèche. Il existe un moyen de faire progresser son taux de transformation : le Facebook Connect. Il faut appréhender le Facebook Connect comme le moyen pour l’internaute de se créer un compte en un clic. Une recommandation pour utiliser efficacement le Facebook Connect, il faut juste utiliser les informations disponible dans Facebook. Création directe du compte via le Facebook ConnectDemande d’informations complémentaire après et indépendamment de la phase de création de compte.
Towards A Retina Web Advertisement With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next wave of display standards. While the fourth-generation iPhone gave us a taste of the “non-Retina” Web in 2010, we had to wait for the third-generation iPad to fully realize how fuzzy and outdated our Web graphics and content images are. In the confines of Apple’s walled garden, popular native apps get updated with Retina graphics in a timely fashion, with the help of a solid SDK and a well-documented transition process. Before diving into the nitty gritty, let’s briefly cover some basic notions that are key to understanding the challenges and constraints of designing for multiple display densities. Device Pixels A device pixel (or physical pixel) is the tiniest physical unit in a display. Screen density refers to the number of device pixels on a physical surface. SVG: Pros
Un guide simple pour la typographie responsive : blog Scopart Le 14/12/2012 dans Développement Aujourd’hui je vous propose une traduction de l’article A simple guide to responsive typography de Cameron Chapman traitant d’un aspect peu abordé dans les techniques de responsive design. La plus grande partie des articles qui traitent du « responsive design » mettent l’accent sur 2 aspects : une grille fluide et flexible, des images fluides et flexibles. Et pourtant pour la majorité des sites Internet, le contenu est l’élément le plus important. Certes, pour les sites où le contenu principal est composé d’images ou de vidéos, cet aspect devient un peu moins important, mais il ne devrait quand même pas être négligé. La bonne nouvelle est que le responsive design au niveau typographique n’est pas particulièrement difficile à mettre en place. Principe de la typographie responsive Il existe deux façons principales de mettre en place une typographie responsive. La deuxième est d’optimiser la longueur des lignes pour maintenir la lisibilité. Conclusion
Facebook Connect : 3 raisons d'intégrer Facebook Connect Facebook Connect est une technologie exceptionnelle pour les sites web. Elle simplifie l’utilisation d’un site en permettant aux utilisateurs de Facebook de s’inscrire et de se connecter en un seul clic. Voici 3 bonnes raisons de développer une application Facebook Connect pour votre site et quelques exemples. 3 bonnes raisons d’intégrer Facebook Connect à votre site 1. La puissance de Facebook Connect réside d’abord dans la possibilité de s’inscrire à un site en quelques clics sans avoir à compléter de formulaire. Facebook Connect permet ainsi d’avoir plus d’inscrits, qualifiés, et de bonne qualité puisque la plupart des utilisateurs remplissent leur profil Facebook avec attention. 2. Les fonctionnalités de distribution sociale de FB Connect permettent à l’application de publier des informations depuis un site vers Facebook lorsque l’internaute effectue une action sur le site. Aussi, bien utilisée, l’application peut permettre de vendre plus. 3. 1. 2. 3. On aime aussi :
Introduction to jQuery Mobile Introduction jQuery Mobile is a superb framework for writing mobile web applications. Built on top of the popular jQuery and jQuery user interface (UI), jQuery Mobile is an effective, unified framework for writing your mobile web application. With jQuery Mobile you can ensure consistent look, feel, and behavior across different mobile platforms. General simplicity and flexibilityThe framework is simple to use. The jQuery Mobile framework includes all the UI components needed for building complete mobile web applications and websites: pages, dialogs, toolbars, different kinds of list views, a variety of form elements and buttons, and more. jQuery Mobile is built on top of jQuery core, so you have access to key facilities, including: HTML and XML document object model (DOM) traversing and manipulation; event handling; server communication using Ajax; and animation and image effects for web pages. With jQuery Mobile, you can write basic mobile web applications without much effort. Events