SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets Posted by Zach on 11/26/2012 You’re minding your own business, casually browsing around on the World Wide Web. You navigate to a page that begins to load and render, but suddenly it stalls. Social Networking widgets are a digital blot on the beautiful canvas we call the web. Design considerations aside, the widgets’ biggest affliction is their file size. A discerning developer might begin to wonder if it is possible to use these sharing tools without adversely affecting page performance and accessibility. To solve these problems, we built SocialCount. See it in action SocialCount’s live demo will show you a variety of sizes and orientations. How to use it Add socialcount.js and socialcount.css to your page, ideally the CSS in the \<head> and JS at the end of the \<body>. Use the included Markup Generator to create your baseline HTML. <ul class="socialcount" data-url=" data-counts="true"><li class="facebook"><a href="
L’accessibilité et le responsive : un certain conflit d’intérêt ? | Édition Nº7 Si vous vous considérez webdesigner/intégrateur au top de votre art, vous êtes sans doute habitué à contempler les constantes nouvelles tendances que l’on voit défiler dans nos métiers. Évidemment, j’imagine que vous ne vous autorisez pas à embrasser ces nouvelles tendances sans en remettre en cause les impacts sur les axes habituels de la qualité web (que ce soit par les dégradations apportées par la technologie en elle-même, ou parce que nous en sommes encore au stade de peaufinage des bonnes pratiques). Dans tous les cas, la “mode” du Responsive Web Design ne peut pas avoir échappé à votre radar, et vous vous êtes peut-être même trouvés en situation de tenter d’en décortiquer les usages pour vous faire un avis critique. Vous avez entendu à droite et à gauche “Le responsive, ça fait mal aux performances !”, alors vous avez peut-être décidé que le responsive, c’est bien, mais c’est sans doute mal aussi un peu parfois ! L’accessibilité : restons pragmatiques ! La fureur du “Responsive”
Calendario: A Flexible Calendar Plugin A jQuery calendar plugin for creating flexible calendars. View demo Download source Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. Please note that the demos will only work as intended in browsers that support the new CSS properties used here, especially calc(). The calendar designs are based on these two beauties found on Dribbble: For the calendar plugin to work, we simply need a container with the class “fc-calendar-container”: The plugin can be called like this: $( '#calendar' ).calendario(); The plugin will create a calendar with the following structure: The calendar will consist of a head for the listing of the weekdays and a body with rows for the days of the month. <div class="fc-content"><span class="fc-date">14</span><span class="fc-weekday">Wed</span><div></div></div> Options Demos
960 Grid System Gamma Gallery - A Responsive Image Gallery Experiment Assemblage Becoming Sky high Life Beleaguer Chatoyant Denouement Desuetude Diaphanous Desuetude Languor Inglenook Forbearance Penumbra Mondegreen Plethora Onomatopoeia Wafture Cynosure Epiphany Felicity Serenity Furtive Glamour Inure Labyrinthine Lagoon Desire Leisure Softness Moiety Nemesis Panacea Scintilla Example for loading more items...
5D Institute | The Future of Immersive Design Photobox – CSS3 jQuery image gallery – dropthebit I wanted 3 things from any image gallery script: first, it to be beautiful and posses a great look & feel. second to be lightweight and not use many assets, and third, I want a script that was built with performance at mind. I was working on something else entirely when I had to find a nice image gallery script. I wanted one of those that the user would basically click a thumbnail and the larger version of the image would be displayed on top of the page, in a modal window fashion. Feb 2 - Version 1.6 is available. Lots has been changed, for the better. Please report any bugs or ideas in the Github project page, as I'm perfecting this code on a daily basis. So, I opened Google search and type of sorts of things, and looked at many scripts that suppose to do that I wanted. I saw no choice but to write my own script. Demo page Benefits So what can this script do? How to use Put photobox.css and then jQuery in your page (make sure it's not a super old version..) Settings Demo page photobox on github
Responsive design : définition, fonctionnement, ressources et tutoriels 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. Seulement en quelques années le nombre d’appareils et de résolutions servant à consulter des sites web a tout simplement explosé : ordinateurs, smartphones, tablettes, web TV, grille-pain, format portrait, paysage, etc… Entre 2005 et 2008 on a identifié pas moins de 400 résolutions d’écran différentes pour tous les appareils vendus. Définition du responsive web design La mise en page La typo