Zoom sur l'effet parallaxe Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe. Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax. Qu'est-ce que l'effet parallaxe ? Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Des exemples Utilisant le positionnement de la souris digitalhands.net bikingboss.com Utilisant le niveau du scroll nikebetterworld.com ok-studios.de driver-club Principe et théorie Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll). Illustration pour le scroll Avec une même distance de scroll, l'élément a aura parcouru une distance plus faible que l'élément b. Illustration pour le positionnement de la souris En pratique Démonstration
Responsive webdesign : adapter un site à toutes les résolutions Le Responsive webdesign (conception adaptative ou réactive en français) représente un ensemble de méthodes et techniques permettant d’universaliser un site Web. Qu’il soit consulté sur ordinateur, tablette, e-reader ou mobile, le site ainsi conçu s’adapte automatiquement à la taille de l’écran. Cette évolution très séduisante du Web pose néanmoins certaines questions d’ergonomie et oblige à repenser la conception des sites. Nous abordons dans cet article les objectifs du responsive design, les critères qui doivent décider à le mettre en œuvre, les recommandations de conception et les considérations techniques. Objectifs du responsive webdesign Pour commencer, rien de tel qu’une démonstration. Entrons dans le vif du sujet. Les sites Web sont aujourd’hui consultés sur une multitude d’appareils ayant des résolutions différentes Proposer une seule version du site Web censée s’adapter à tous ces terminaux est utopique. Le site ifttt n’est pas adaptable. Responsive ou versions séparées ?
Adaptive Images in HTML A Complete Guide to Progressive Enhancement For years, web designers have been using graceful degradation principles to make sure visitors in older browsers can at least see the content on their websites, even if they don’t see it exactly how the designer intended. Graceful degradation let designers design for the newest and best browsers without completely alienating those using older browser versions. And just because those with older browsers often got a less-than-optimal user experience didn’t deter designers from placing their focus squarely on the newest technologies and techniques, rationalizing that those using older browsers were either used to it or should just upgrade. Progressive enhancement gives us a better option. As most designers would certainly agree, content is the most important part of virtually any website project. Read on for answers to those questions and information on how to use progressive enhancement on your next website design project. Who Benefits from Progressive Enhancement? Build From the Inside Out
Menu déroulant en CSS Si vous voulez avoir tout de suite un aperçu du type de menu décrit dans cette page, vous pouvez visiter notre page de démonstration. Et pour garder le script proposé au chaud sur votre PC, vous pouvez aussi le télécharger. Avec ou sans javascript ? Lorsqu'on peut se passer de javascript, il est prudent de le faire. Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures. Notre choix a consisté à mettre au point un menu à 2 vitesses qui fonctionne : Sans javascript pour Firefox, Opera, Mozilla et IE7Avec javascript pour IE 5.5 et 6 Ce choix permet à notre menu de rester pleinement opérationnel pour la quasi-totalité des visiteurs. Une partie de cache-cache En réfléchissant au principe de base d'un menu déroulant, vous constaterez qu'il s'agit essentiellement d'une partie de cache-cache : certaines parties en sont masquées et n'apparaissent que lorsque l'utilisateur survole le menu principal. La ligne :
Dynamic Drive CSS Library- CSS Triangle Arrow DIVs CSS Triangle Arrow DIVs Author: Dynamic Drive An subtle characteristic of CSS that's been exploited to do something interesting is CSS borders and using it to create pure CSS triangles. These triangles have the advantage of being extremely lightweight (no image used) and scalable to boot. The technique works using the fact that the 4 CSS borders of an element meet at an angle; when the dimensions of the element is set to 0, the 4 borders collapse and touch one another, creating the appearance of 4 triangles: Here's the CSS used to create the above DIV: Style: Markup: To display just a specific triangle then, you would set the border-color of all but the desired border side to transparent. The following adds a CSS based triangle to a DIV to produce a speech bubble look that can be used to show comments, quotes etc. Demo: This is a test The CSS: Code Info Rate this code: Date Posted: 03/22/2011 Revision History: None Usage Terms: Click here Your Comments (6) Comment Pages 1 of 1 pages
Ergonomie web et logiciel, architecture de l'information, utilisabilité sites Internet – Ergolab Responsive Web Design : Le guide de référence pour les SEOs Depuis février 2012, le smartphone a quasiment atteint 50% du marché mobile aux Etats-Unis. 2012 est ENFIN « l’année du mobile », et cela signifie que vous avez besoin de vous faire votre propre expérience en tant qu’utilisateur. Ami SEO, gardez un œil sur vos stats Google Analytics (statistiques) – le marché du smartphone n’a pas fini de progresser ! Avec toute l’attention que le responsive web design attire, que pourrait faire d’autre les marketeurs et les SEO qui veulent réussir que de s’orienter vers des stratégies mobile à long terme ? Avant tout, qu’est-ce que le Responsive Web Design ? En bref, le RWD (Responsive Web Design, «Web Design réactif» en français) est une technique utilisant une mise en page souple (qui « étire » l’écran en s’adaptant dynamiquement au mieux) en plus des « media queries » CSS, qui appliquent différentes feuilles de style (CSS) basées sur la taille de l’écran de l’appareil. Exemple de Responsive Web Design installé par UC San Diego. Application mobile
Dossier comparatif de 12 solutions de curation Christophe Deschamps, consultant-formateur en intelligence économique et en veille et auteur du blog Outils Froids publie un dossier comparatif de 12 solutions de curation (« ensemble de pratiques et une gamme d’outils destinés à des opérations de republication web ») qui fait écho à l’article de NetPublic.fr : Curation : Méthodologie, objectifs, pratiques et choix des outils. Ce dossier analyse la pertinence d’utilisation de ces solutions (gratuites dans leur version de base) en terme de pertinence mais aussi de 32 critères formels regroupés en 7 catégories majeures : 7 catégories de critères de pertinence des solutions de curation Sources : comment le service de curation est-il alimenté en informations nouvelles susceptibles d’être diffusées ? Typologie de la comparaison des solutions de curation Les 12 outils analysés dans ce dossier : BagTheWeb, Delicious, Diigo, Flipboard, Memolane, Paper.li, Pearltrees, Pinterest, Scoop.it, Searcheeze, Searchteam, Storify.
browserling - interactive cross-browser testing HTeuMeuLeu : HTML5, CSS3, et le quotidien du web pour un intégrateur ! La conception pour les sites Web Mobile Les ventes de Smartphones et de Tablettes tactiles ne cessent de progresser et la nécessité de concevoir des sites Web spécifiques devient incontournable. Afin de suivre cette évolution, de nouveaux principes de conception doivent émerger. L'enjeu est bien chercher à satisfaire des utilisateurs de plus en plus nombreux et de plus en plus exigeants. Patrick Cox nous propose une liste de ces principes, qui sont autant de points de vigilance. « Alors que les abonnements téléphoniques avec Smartphone devraient encore progresser de plus de 50% d'ici la fin de 2011 (1), la conception pour les navigateurs des mobiles et appareils tactiles a désormais atteint une part prépondérante. Les appareils nomades, des téléphones aux tablettes, ont pris leur place dans le marché et gagnent encore en popularité. Qu'est-ce que cela signifie? 1. Nous savons tous qu’il faut toujours chercher à séparer le contenu de la forme. Recommandations 2. Dédiez votre site Web mobile à un nombre limité de tâches. 3. 4.
Quels sont les outils de veille les plus populaires sur les médias sociaux ? Tout veilleur se doit d’utiliser plusieurs outils de veille pour effectuer des recherches d’information pertinentes. Mais quels sont les critères de performance attendus par un veilleur ? Le site Oneforty a publié le mois dernier une infographie à ce sujet. Les Social Media Monitoring tools, qui permettent de surveiller l’ensemble des blogs et réseaux sociaux, sont désormais très nombreux et continuent de se développer considérablement. Tout d’abord, qui utilise ces outils ? Intéressons-nous maintenant aux principales raisons pour lesquelles ces professionnels utilisent un outil de veille. Sur ce dernier point, on constate que 54,7% des professionnels concernés payent jusqu’à 100 dollars par mois (environ 67 euros) pour utiliser un outil de veille. L’outil idéal est donc difficile à trouver et chaque veilleur, chaque social media manager, possède des objectifs différents et des critères de choix qui lui sont propres. - l’objectif final de la veille, la stratégie adoptée Source : oneforty
5 Useful CSS Tricks for Responsive Design Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design. View Demos 1. This responsive video CSS trick was discovered by tjkdesign.com. 2. Max-width property allows you to set the max width of the element. Max-Width Container In the example below, I specify the container to display at 800px if possible, but it should not exceed 90% of the boundary width. Responsive Image You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto. The above responsive image CSS works on IE7 and IE9, but doesn’t work on IE8. Min-Width 3. Relative Margin 4.