Adrian Sommeling, photographie Photographe et photo-manipulateur hollandais, Adrian Sommeling travaille dans un registre relativement fun et décalé. Découvrez un extrait de son portfolio dans la suite. Adrian reste assez discret sur sa carrière et sa biographie en général. Making of Le photographe propose de décripter son processus créatif en publiant des vidéos sur son site : Le porfolio d’Adrian Sommeling Trop retouché ? Cette entrée a été publiée dans Photographie. A Pure CSS3 Cycling Slideshow
Drag and drop sur le web : exemples et bonnes pratiques Le drag and drop (ou “glisser-déposer”) s’est immiscé progressivement sur le web. Ce principe d'interaction est ludique et pratique pour l'utilisateur. S'appuyant sur la métaphore de l'interaction dans le monde réel, il est également facile à mémoriser. Initier l'interaction Avant même de concevoir l'interaction de drag and drop, il faut faire comprendre à l’utilisateur qu’il peut faire glisser des éléments. Sur le site Netvibes, seule la modification du curseur indiquait le drag and drop. Depuis, Netvibes a intégré un tutoriel d’initiation qui apparaît lors de l’inscription au site. Picasa affiche clairement la zone de réception des fichiers et donne les instructions dans cette zone. Recommandations Guider le déplacement Une fois que l’utilisateur a compris qu’il peut glisser certains objets de la page, il faut continuer de le guider tout au long de l'interaction. Sur Netvibes, au cours du déplacement la page est réduite à une vignette Chez Yahoo! Dans la nouvelle version de Yahoo!
Demoing and displaying JavaScript at the same time using CSS Tuesday, May 8th, 2012 at 12:53 pm When writing documentation or doing examples you constantly run into the same issue: how do you display and demo the code at the same time? You don’t want to have a code display and live code as they will get out of sync (on the other hand I always found that when copying code into a document I also cleaned it up and optimised it). The easiest way for this are all the “new” services like JSFiddle, JSBin, Dabblet, Tinker.io and others (there seems to be a new one every month now) and you can even embed them into other documents, but it means you need an iframe and load content from another service (which might go down or get forgotten in the future). The other way of course is to use Ajax/JavaScript to load the code into the page. I was wondering how you can simply demo and show inline JavaScript in a document without needing any extra libraries. However, you can do a simple demo and display of the same script much easier these days using CSS.
5 Really Useful Responsive Web Design Patterns Responsive web design requires a very different way of thinking about layout that is both challenging and exciting. The art of layout was already complex enough for the centuries that it was defined by fixed elements, now things are becoming exponentially more complicated as layouts become increasingly adaptive. To help reprogram your brain to consider layouts in new ways, we’re going to take a look at some interesting responsive design patterns that are being implemented by talented designers all over the web. Starting Small One of the most popular ways that I see responsive design being implemented is to simply assign a fluid width to the columns of content on the page, which become narrower and narrower as the page width decreases until the one major jump to a single column mobile layout. We can see this technique at work on the luxury hotel website 137 Pillars House. As you can see, the layout really only goes through a single major transformation. Mondrian In The Wild Basic Gallery
Code a Responsive Navigation Menu Navigation menus used to be a fairly simple thing. Code up an unordered list, float it left and you’re good to go. With responsive design being all the rage these days though you’re faced with some new challenges when creating a menu design. Follow along as we start from scratch and code a simple but effective responsive navigation menu that you can easily modify and reuse in your own projects. What We’re Building If you’re the kind of person who likes to skip ahead, here’s a sneak peek at what we’re building. Demo: Click here to see and tweak it on Dabblet. The HTML Let’s jump right into this project without a bunch of unnecessary fluff. The first step is to decide on some markup. Believe it or not, this one little piece of code had my head spinning when it came time to test. Fortunately, the fix is easy, just drop in the famous html5shiv and you’re good to go (place this in the head portion of your document). Add the List Add The Sub Tag Progress Check Starter Styles Container Styles Border Fix
Responsive Web Design: 5 Handy Tips Tutorial by Matt Doyle | Level: Intermediate | Published on 17 February 2012 Categories: Learn how to improve your responsive website layouts with 5 useful techniques: Hiding content, collapsing content, scaling images, responsive images, and type resizing. In my previous article Responsive Web Design Demystified, I explained the concepts behind responsive web design, and showed how to build a simple responsive layout from the ground up. In this article, you learn five additional techniques that will help you build great responsive layouts. Here's what you'll learn in this article: How to hide non-essential content on smaller screens Creating collapsible blocks of content to make the best use of mobile displays Scaling images in proportion to the available screen width How to create responsive images that are optimised for different screen sizes and network speeds, and Resizing type according to browser width. Ready? Hiding content Let's look at an example. Collapsing content collapse Summary
The ultimate responsive web design roundup Responsive design is the new darling of the web design world. It seems that not a week goes by that there aren’t new resources for doing it, opinions about how to do it or even whether to do it at all, and new sites that make beautiful use of it. It can quickly get overwhelming trying to keep up with it all. Here we’ve compiled a list of more than seventy resources for creating responsive designs. Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more. Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas. Articles and Publications Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Responsive Web Design Responsive Web Design Book Big vs. Responsive by Default Context FitText
Loi de Fitts Un article de Wikipédia, l'encyclopédie libre. §Le modèle[modifier | modifier le code] Mathématiquement, la loi de Fitts a été formulée de plusieurs manières différentes. Une forme commune est la formulation de Shannon (proposée par Scott MacKenzie, et nommée d'après sa ressemblance avec le théorème de Shannon-Hartley (en)) pour le mouvement suivant une unique dimension : où T est le temps moyen pris pour effectuer le mouvement ;a et b sont des paramètres pouvant être déterminés empiriquement par régression linéaire ;D est la distance séparant le point de départ du centre de la cible ;L est la largeur de la cible mesurée selon l'axe de mouvement ; L peut également être considérée comme la tolérance de la position finale, étant donné que le point final du mouvement peut tomber dans la fourchette de plus ou moins L/2 du centre. §Notes et références[modifier | modifier le code]
Goban Club – Responsive Web Design par Ethan Marcotte : une traduction française Le Web Design Réactif par ETHAN MARCOTTE Le contrôle qu’exercent les designers au sein du média imprimé et qu’ils désirent souvent retrouver au sein du virtuel est simplement le produit d’une limitation de la page imprimée. Nous devrions accepter le fait que le Web n’a pas les mêmes contraintes, et concevoir en fonction de cette flexibilité. Mais avant, nous devons « accepter le flux et le cours des choses. John Allsopp, « Le Maître du Web Design ». Commentant son métier, l’Anglais Christopher Wren affirmait avec un brin d’ironie que « l’architecture vise l’éternité ». Le domaine du Web est une tout autre dimension. Mais l’environnement change, peut-être plus vite qu’on ne le souhaiterait. J’ai récemment rencontré des entreprises ayant pour projet de créer un « site web pour iPhone ». Une base flexible Prenons un exemple de mise en page. Aucune mise en page, qu’elle soit fixe ou variable, ne peut s’adapter de façon homogène à un contexte autre que celui pour lequel elle a été conçue.