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. Lorsqu’un champ d’informations arrive à sa fin, le suivant est immédiatement chargé.
Responsive & Adaptive Web Design If you work in or with the web and make even a modicum of effort to remain buzzword compliant, you're probably uber-familiar with the term "responsive web design." Perhaps you've also heard of "adaptive web design" and "progressive enhancement"? If you're like me, you may have found yourself wondering what exactly these words mean, what the differences are, and why everyone seems so giddy to use them in a sentence. Humble Beginnings Let's start by acknowledging that the web, by its very nature, began as a rather "responsive" thing. Designers Are Control Freaks As the web evolved into something that more and more businesses were using, more and more designers could get paid to work on making websites instead of brochures, annual reports, business cards and the like (not that there's anything wrong with those). Tiny Screens & Slow Internet to the Rescue! And then there were iPads A responsive response Fluid GridsFlexible ImagesMedia Queries An adaptive response But, isn't it all so responsive?
13 Excellent jQuery Animation Techniques | Tutorials Only a few years ago, if something was animated on a website it was automatically assumed to be Flash. However, this is not the case today. With the growing popularity and wide spread use of JavaScript frameworks, sometimes you have to take a closer look to find out what is powering all of those smooth animations. With several JavaScript frameworks available, jQuery is quickly becoming a favorite. Building an Animated Cartoon Robot with jQuery Animate a hover with jQuery How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery CSS Sprites2 – It’s JavaScript Time Build An Incredible Login Form With jQuery Learning jQuery: Revealing Photo Slider Learning jQuery: Fading Menu – Replacing Content Using jQuery for Background Image Animations Animated Menus Using jQuery Create a Cool Animated Navigation with CSS and jQuery Animated Drop Down Menu with jQuery jQuery Tutorials for Designers How to Load In and Animate Content with jQuery About the Author Related Posts
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 »…
Future of Web Design Conference 2011 – Day 2 Review Posted on 15'11 Nov Posted on November 15, 2011 along with 7 JUST™ Creative Comments The 2011 Future of Web Design Conference was recently held in NYC and I was fortunate enough to attend the two days of talks. Below is the summary of Day 2. The Day 1 FOWD summary can be found here. As a disclaimer, these notes were quickly jotted down & summarised and may not be understood out of context but I’ve done what I could from my notes. Below are the summarised keynotes which you can click to jump to. Pith, Passion & Productivity – Cameron Moll How can you make a name for yourself? “If you don’t write, you don’t know how you think.” – Jeffrey Zeldman“The details are not details, they make the product.” – Charles EamesWords with pith, convey knowledge & personality.Good writing not only comes from grammar & sentence structure, but practice.Start writing, don’t just convey information but write with authenticity, passion & pith. Recommended reading: Editing tips for designers Who’s A-Game Pithy? 1.
Trend alert: 20 animated website designs In order to be a great designer, you need to be on top of the trend before it becomes a trend. Being able to have this sense of what’s going to take off is key in creating a wonderful product. You’re recognized for being one of the ‘firsts’ and you’re also given props for your innovation and new approach to common problems. All this is great and desired. With advances in technology, I think it’s safe to say one of the trends to look forward to are animated web designs. Le Singe Fume Sa Cigarette This website is odd and creative. Adventure World There are many theme parks that have websites that normally just tell you about attractions and how to go about purchasing tickets. Pragmatic Mates Pragmatic Mates is a creative studio that focuses in app development and creation. Baroque.me This is another simple project or experiment that illustrates music in real time. blacknegative Blacknegative is one of my most favorite sites. Copywriters of Distinction Denise Chandler Blue Acorn Games We Played
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! 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: (Diagram thanks to Ian Barlow @ibarlow). YES!
iA Writer Ruby on Rails Znowu walczyłem z autocomplete w Rails. Walczyłem, bo inaczej tego nie można określić. Twórcą tego pluginu jest osobnik o swojsko brzmiącym nicku dhh. Na stronie poświęconej temu pluginowi można nawet (sic!) natknąć się na przykład jego wykorzystania. Aby zainstalować z konsoli zawołaj: ruby script/plugin install auto_complete oczywiście zazwyczaj nie działa :-( Można więc ręcznie. /vendor/plugins/auto_complete zazwyczaj pomaga. Aby użyć tej kontrolki w widoku wpisz: gdzie approveForm jest nazwą funkcji JavaScript, która zostanie wywołana po wybraniu elementu z listy. Aby rozwikłać pozostałe zawiłości złapałem się po raz kolejny za google i gugłam. Chodziło mi o prostą rzecz. Zadziałało! ale to nie działa. tworzy dynamicznie metodę: Co wiec stało na przeszkodzie aby taka metodę samemu napisać? Sprawdzam... prawie działa. Rozwiązanie proste, łatwe i przyjemne. Pozostała jeszcze sprawa pozostałych opcji. Ogólna notacja kontrolki w widoku jest taka:
Guidelines pour produire des PSD adaptés au web Je préparais dernièrement un document pour un boulot afin de montrer à des boîtes de créa print comment faire des PSD propres pour le web. Le but inavouable de la démarche était d’éviter de se retrouver avec des charniers inexploitables en intégration, chose qui arrive encore un peu trop souvent. Pas de règles de ninja ou de gimmicks avant-gardistes ici, juste des bonnes bases saines pour faire un boulot clean. J’ai omis sciemment les nouveautés CSS3 et autres gadgets pour me focaliser sur l’essentiel. Après avoir soumis ma petite liste sur Twitter et à quelques copains, j’ai constaté que beaucoup avaient leur mot à dire sur la question et il m’a paru intéressant de publier la chose pour avoir des retours plus complets. Dernière modification : le 12 juin 2014. Préparer le fichier Quelques règles de base et rappels simples pour préparer un document web-safe : Travailler en RVB et profil sRVB (pas de CMJN !). Adapter la créa aux contraintes web Et voilà.