Adaptive Images et Responsive Web Design - Le blog Nursit Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, résolution et qualité des images utilisées dans le contenu éditorial d’une page web en fonction de l’utilisateur. Les images adaptatives sont nécessaires pour les sites Responsive qui vont adapter leur affichage au périphérique de consultation [1] : sur un site Responsive la même page est rendue de manière différente selon la taille de l’écran. Adapter les images vise avant tout à améliorer l’expérience utilisateur, en délivrant l’image qui convient le mieux : inutile d’envoyer une image trop grande et trop lourde si l’utilisateur consulte la page sur un smartphone avec un petit écran et une mauvaise connexion internet ! Le champ des images adaptatives regroupe plusieurs cas d’usage [2] : Depuis quelques années, de nombreuses solutions émergent mais toutes ont leurs défauts et imperfections, et en choisir une s’avère compliqué. Images Adaptatives Idéales Couche 1 : HTML
Design Tip: Never Use Black by Ian Storm Taylor One of the most important color tricks I’ve ever learned was to avoid using the color black in my work. Mrs. Zamula, my childhood art teacher, first warned me about black when I was in middle school. Problem is, we see dark things and assume they are black things. Shadows aren’t black. In high school, I spent lots of my free time in the art room with a few other art-loving friends. I probably went through that book ten times. His shadows are some of the most saturated parts of his paintings, and that’s on the screen too. Now you might be thinking, “Yeah, but those are paintings. But I must have been thinking the same thing, because one of those days in art class Mrs. I was amazed. The corner of Chestnut and Polk. The darkest part of that image? Black overpowers everything else. When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. Lots of the apps we use on a daily basis have blacks that aren’t really blacks, but dark grays. Mrs.
Première maquette graphique web : comment faire Maquettistes affirmés, mais débutants sur le Web, voici les repères élémentaires à connaître pour créer votre première maquette graphique pour le Web : résolution d’écran, pixels, couleurs hexadécimales, page web, scroll, découpe, tout ça. Pour partir sur de bonnes bases. Exprimez tout en pixel : l’unité de mesure, sur le Web, est le pixel, point élémentaire de l’écran, et non pas le pica, le point ou le centimètre pour lesquels il n’existe pas de conversion et qu’il faut donc oublier. Travaillez en bitmap à l’échelle 1:1. Jetez-moi les logiciels vectoriels (Flash, Illustrator) aux oubliettes ! Commencez par fixer la largeur de la page. Vous pouvez maintenant commencer à composer votre première maquette web, en partant du bon pied, sur des bases correctes : pixel, bitmap, RVB, 72 dpi, etc. Un conseil : faites moultes captures d’écrans des sites qui vous inspirent et découpez-les dans un logiciel graphique. Que livrer ?
MozCamp Warsaw: Design Principles Behind Firefox OS UX | Mozilla UX This is the presentation I gave at MozCamp Warsaw earlier this month. Many people have been asking for it, so it made sense to create a post about it, and give a bit more context the slides. It all started like a “skunks works” project, we had a few people working on many parts… I was contributing a few hours a week, and Josh Carpenter @joshcarpenter was tasked on penning the entire UX with the Visual Design in about a week for the MWC demo, which is a near impossible feat! But our showing at MWC was success… Since both of our teams were small and had strengths in different areas it only made sense to partner up for v.1 of the OS. At this point (April 2012) with this new partnership I wanted to create a realignment of the visual design. Shapes which are Bold, Geometric but with hints of organic softness.UI that communicates a sense of handcrafted design.Design that is minimal, effective and intuitive but doesn’t feel soulless; has warmth. Common elements in every application: YES!
One Page Portfolio Hand-coded HTML and CSS is what I do. It's what I'm good at so why not? Featured Project: Inspect Element My Portfolio About Me Now this is a story all about how my life got twisted upside down and I'd like to take a minute just sit right there I'll tell you how I became the prince of a town called Bel-Air. I whistled for a cab and when it came near the license plate said fresh and had dice in the mirror, if anything I could say that this cab was rare but I thought nah, forget it, yo home to Bel-Air! Les 12 tendances webdesign qui se confirment pour 2015 Ça y est, 2015 est à notre porte ! Durant l’année 2014, nous avons expérimenté et avons intégré intelligemment les tendances webdesign dans nos projets. Selon Shiva Sherbaf, lead du pôle DA, certaines tendances ne sont pas prêtes de disparaître bientôt, d’autres vont évoluer… tandis que de nouvelles feront leur apparition. 1 – Multi-device design De plus en plus les gens utilisent leur mobile pour accéder à Internet et le mobile sera bientôt le moyen le plus commun pour surfer. Avoir un site web qui peut être visualisé facilement sur mobile, tablette et ordinateur de bureau est devenu indispensable. 2 – Des menus cachés à faire glisser ou à afficher Pendant longtemps, les menus et les barres de navigation étaient très voyants et présents en permanence sur les interfaces. 3 – En 2015, moins de clic et plus de scroll Les sites au scroll infini sont agréables esthétiquement parlant, bien que difficiles à optimiser pour le SEO. 4- Les microinteractions 5 – La Conception en mosaïque
Quels sont les termes les plus utilisés dans les noms de domaine en .fr ? Nous nous sommes livrés à des investigations dans la base .fr pour identifier les termes les plus employés par les titulaires. Nous révèlent-ils quelque chose sur les motivations à déposer des .fr ? Tout d’abord, le constat que le premier terme est « paris », ce qui est très encourageant pour le .paris. Mais au-delà de cette ville emblématique, nous trouvons 4 termes liés à l’économie ou au e-commerce : « service », « conseil », « services » et « shop », 4 termes liés au tourisme et aux loisirs : « sport », « hotel », « restaurant » et « photo » et 3 au secteur immobilier : « maison », « immobilier » et « location ». Les autres termes sont plus difficiles à regrouper en catégories : « saint » (du fait du grand nombre de noms de communes contenant ce terme), « info », « tech », « club »…
16 Pixels: For Body Copy. Anything Less Is A Costly Mistake 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake Advertisement I know what you’re thinking. I’d like to persuade you otherwise. As usability expert Oliver Reichenstein says in “The 100% Easy-2-Read Standard1”: [16 pixels] is not big. In this article, I’ll explain why 16 pixels should generally be the minimum size for body copy in modern Web design. You see, in most cases, if you’re building websites with the font size set between 10 and 15 pixels, you are costing your clients money. Readership = Revenue If you’re building a website for someone — even yourself — chances are its purpose is to make money. Perhaps it’s to sell a product directly, or to offer a service, or just to generate leads. So, every element should be designed to achieve that goal. Think about it. Important Facts About Reading There are some particular findings that are pivotal to issues such as readership and readability and comprehension, which is really what body copy is all about. “But Users Can Zoom” Not so.
Tendances Web design 2017 : smartphones et contenus La devise « Mobile First » ne s’applique pas uniquement à l’affichage et à la visualisation de contenu Web sans perte sur différents périphériques. La popularisation des appareils mobiles a une influence de plus en plus grande sur le contenu Web. Et l’une des évolutions dans ce contexte est le passage du clic au défilement (scrolling). Le concept du site Web avec une navigation en scroll est ancien, cependant les concepts de design comme les effets Infinite scrolling, long scrolling et Parallax continuent de gagner en popularité et vont rester une tendance importante en 2018. Infinite Scrolling : les tendances Web design 2018 comptent parmi elles une méthode bien connue : le défilement infini (infinite scrolling en anglais), qui permet aux internautes d’accéder à de nouveaux contenus en faisant défiler leurs souris (ou doigt) au lieu de cliquer. Le défilement infini est idéal pour les sites Web avec un large éventail d’informations.
Sticky Menus Are Quicker To Navigate Advertisement Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to the top of the website to access the navigation menu. I recently wondered whether sticky menus makes websites quicker to navigate, and I conducted a usability study to find the answer. Let’s look at the results of the study, a few implementation techniques and some related challenges. Sticky Navigation Defined Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll. Usability Study Research Conditions For the study, I created two test websites that were nearly identical. 1. 2. 100% Preferred Sticky Menus Without Knowing Why Desktop Software Navigation Menus Some Good Examples Getting Started Avoid iFrames Conclusion
A Dao of Web Design What Zen was to the 70’s (most famously with motorcycle maintenance), the Tao Te Ching was to the 90’s. From Piglet and Pooh to Physics and back, many have sought sense in applying the Tao Te Ching to something (the Tao of Physics), or something to the Tao Te Ching (the Tao of Pooh). It can be a cheap trick, but lately it has struck me that there is more than a little to be understood about web design by looking through the prism of the Tao. Article Continues Below Daoism is a philosophy, like Buddhism, a way of living, of being in the world, which stems from a text of great antiquity, the Tao Te Ching, whose 81 “chapters” enigmatically sweep across human experience, but with a strong common theme, that of harmony. For the last couple of years, for better or worse, my life has revolved more than a little around style sheets. What I sense is a real tension between the web as we know it, and the web as it would be. Same old new medium? Controlling web pages#section2 [The Sage] The Way#section5