Quels choix de navigation en responsive design ? Faire le bon choix dans la navigation sur un site est primordial et depuis l’arrivée du responsive design, les choses se compliquent. Il faut garder un accès à l’information sans pour autant gâcher l’expérience utilisateur. Heureusement, Brad Frost a rédigé un excellent article sur son blog à ce sujet que je retranscris ici en français. Si d’emblée, le terme de responsive design vous est étranger, je vous recommande de lire cet article paru il y a quelques temps sur le blog : Responsive design : définition, fonctionnement, ressources et tutoriels Cet article (tout ce qui va suivre) est une traduction de l’article « Responsive Navigation Patterns » rédigé par Brad Frost, consultant et intégrateur pour mobiles, rédigé avec son approbation, et même avec ses encouragements. Je vous conseille chaudement de suivre son blog qui est une mine d’or pour le design sur mobiles. Introduction Voici quelques unes des techniques les plus populaires pour gérer la navigation en responsive design : Pour
Un e-mail en HTML responsive multi-clients L'e-mail (ou newsletter) reste encore aujourd’hui un moyen efficace de transmettre des informations à ses utilisateurs ou clients. En mode texte, aucun problème, c'est un standard interprété sans difficulté. En mode HTML c'est un art ô combien délicat en partie dû au nombre de clients lecteurs d'e-mail sur le marché qui ont des comportements bien différents (encore plus désormais que les navigateurs classiques). Cette disparité de l'interprétation des e-mails au format HTML provient de plusieurs facteurs : Les clients e-mails lourds (Outlook, Thunderbird, Lotus Notes...) ont un fonctionnement radicalement différents des webmails (Gmail, Yahoo Mail, Hotmail, Outlook.com...). Mettons fin immédiatement à vos désirs les plus fous : encore plus que le web, la réalisation d'e-mails graphiques en HTML, au pixel près ou presque, sur toutes les plates-formes, est une utopie. Voici quelques astuces et bonnes pratiques pour obtenir des e-mails au rendu proche sur la majorité des programmes.
Splash Vector Graphics on your Responsive Site - HTML5 Rocks Creating mobile content that dazzles means balancing the amount of data downloaded against maximal visual impact. Vector graphics are a great way to deliver stunning visual results using minimal bandwidth. Many people think of canvas as the only way to draw a mixture of vectors and rasters on the web, but there are alternatives that have some advantages. A great way to achieve vector drawing is through the use of Scalable Vector Graphics (SVG) which is a key part of HTML5. We all know responsive design is a big part of handling varying screen sizes, and SVG is ideal for handling different size screens with ease. SVG is a great way to present vector based line drawings and is a great complement to bitmaps, the latter being better suited for continuous tone images. Popular authoring tools like the Drawing application in Google Drive, Inkscape, Illustrator, Corel Draw and lots of others generate SVG so there are lots of ways to generate content. Scaling fundamentals So what's the big deal?
Les 20 meilleurs outils de datavisualisation au banc d’essai Que vous soyez absolument novice ou codeur amateur, il existe aujourd’hui sur le web une impressionnante palette d’outils (presque) gratuits pour réaliser des datavisualisations. Banc d’essai. Note : j’ai volontairement éliminé les outils (a) entièrement payants (b) trop moches pour être utilisés dans des rédactions (c) en Flash. Ce billet n’est consacré qu’aux outils de “visualisation”, et non de scraping ou de traitement des données (un autre billet suivra bientôt). ↑1 » Pour les novices/pressés : le clé-en-mains Ces outils gratuits ou freemium permettent de générer des graphiques ultra-rapidement en copiant-collant des données d’un tableur. Le meilleur – Datawrapper : Simple d’utilisation, sobre, rapide, Datawrapper est tout à fait satisfaisant pour la plupart des visualisations courantes. Les + : la possibilité de personnaliser les couleurs, de mettre en évidence une série, la navigation par onglets entre les différentes séries. Les challengers : Ils ne nous ont pas convaincu : Sources :
qTip2 - Pretty powerful tooltips Responsive design : définition, fonctionnement, ressources et tutoriels « Design Spartan : Art digital, digital painting, webdesign, illustration et inspiration… 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. 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 Voici 2 exemples pour illustrer des webdesigns crées de façon “responsive” : (Cliquez dessus pour voir en plus grand) Techniquement, dans les grandes lignes Un site et un contenu qui s’adaptent La typo
Formation continue - [FORM] Université de La Rochelle [FORM] L’Université de La Rochelle propose des formations diplômantes et qualifiantes aux professionnels. Du stage court à la formation diplômante, l’offre de formation évolue chaque année en fonction des besoins du marché. Pour qui ? Particuliers, salariés du secteur public et privé, demandeurs d’emploi, travailleurs indépendants, commerçants, artisans, professions libérales, entreprises ou collectivités. Comment ? L’ensemble de nos formations peut être accessible dans le cadre du Plan de Formation, du CIF, du CPF, de la période de professionnalisation…Nos conseillers spécialisés sont disponibles pour vous présenter notre offre de formation, vous accompagner dans vos projets et vos recherches de financement.. Trouvez votre formation par secteur d’activité Accès à nos Diplômes d’Université (DU) et formations courtes qualifiantes : Un accompagnement personnalisé pour trouver sa formation
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development ProtoFluid. Responsive Design Testing. Le fonctionnement de l’algorithme de Google adapté aux mobiles Google a annoncé la semaine dernière qu’à partir du 21 Avril 2015, un nouveau critère fera son apparition dans son algorithme. A cette date, les sites labellisés « site mobile » seront privilégiés dans les résultats mobile sur smartphones. La compatibilité sera vérifiée en temps réel, page par page. Un nouvel algorithme qui vérifie en temps réel les pages d’un site Lors du SMX West, Gary Illyes, encore lui, (décidément ce gars est très actif en ce moment!) a dévoilé le fonctionnement du nouvel algorithme déployé par la firme de Mountain View. Critères de performances des sites classiques D’autre part, Gary Illyes a aussi indiqué que certains critères de positionnement (vitesse de chargement des pages) étaient « analysés » sur la version classique du site et pas en version mobile. Articles similaires : Summary Article Name Le fonctionnement de l’algorithme de Google adapté aux mobiles Author Gabriel Description
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website Advertisement CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. Media Queries If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. The Media Queries in CSS3 take this idea and extend it. width and height (of the browser window)device width and heightorientation – for example is a phone in landscape or portrait mode? The dConstruct 2010 website in Safari on a desktop computer Tidying up
Detecting and Responding to iPad Orientation Change in Adobe Edge Animate | CHRIS GANNON With the help of Simon Widjaja and friends’ Edge Commons Dirty Little Helpers library I have extended the Flexible Layouts Using Adobe Edge Animate and the Edge Commons Library tutorial to work on an iPad. Simon’s tutorial/demo works well on a browser when resizing and this demo takes that one stage further and uses the ‘window.orientation‘ event to trigger the resize code uses a simple <meta content> tag to ensure the device as it 100% and recognises the change in dimensions. You can still trigger the resize code in your desktop browser but this is designed to detect your iPad’s orientation too. I’ll write it up fully later with a walk-through of the functionality but for now you can just play around with it and look at the (fairly simple) code – also I thought it would be a nice start to the week! I have removed the ‘window.orientation‘ call as it is not required – even simpler! View the demo on your iPad here Download the source here Like this: Like Loading... Related In "3d" MooDisco!
Comment tester un site responsive? (partie 1) Savoir si un site développé se comporte bien en responsive est devenu une nécessité de nos jours. Il est donc important de connaître tous les moyens mis à notre disposition pour réaliser cette étude. Deux lignes de conduites (probablement complémentaires) sont à prendre en compte : soit on teste sur des outils simulant le comportement des appareils, soit on teste directement sur les supports que l'on souhaite prendre en charge. Bien évidemment, la méthode la plus fiable reste celle qui consiste à utiliser le smartphone ou autre appareil dont l'éligibilité est à vérifier. La première méthode est moins fiable mais reste intéressante, voici pourquoi : Avantages Pas d'installation sur le poste et de ce fait, compatible avec toutes les plateformes. Inconvénients L'évènement Touch n'est généralement pas pris en charge. Nous vous proposons dans un premier temps de découvrir les différentes méthodes de simulations proposées par les éditeurs de navigateurs et des services en ligne. Chrome Firefox
20 tools to help you create responsive web designs Building responsive design has become a huge trend in the web design world. There is a good reason for that: responsive websites are much more relevant than fixed web designs in a time where a lot of internet traffic comes from mobile devices. In this article we take a look at some of the most useful tool to help you with the creation of responsive designs. Sketching / wireframing tools First things first, responsive design need to be well-thought or you’ll get much more work than you would have otherwise. 1. A common problem you’ll run into when planning a responsive web design is to chose which devices and sizes you’ll design for. 2. Simple PDF templates to help you map out how layout sections will change in different resolutions. 3. Quickly get the CSS for creating your fluid grid website with this simple tool. 4. ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries. Responsive design elements 5. 6. 7. 8. 9. 10. Templates and grids 11. 12. 13. 14. 15.