Actualités

Web Page (Store) 24 outils pour mesurer et optimiser les temps de chargement de votre site web - Korben

Si vous souhaitez optimiser le chargement de vos sites, il faut avant tout que vous ayez un bon outil de mesure et d'analyse. Voici donc une petite liste de 24 outils ou services en ligne qui vous permettront de mieux comprendre comment se chargent les éléments de votre site et quels sont les points à …
Xuan Tuong LE · Front End Development JCMS · on 3/20/15 at 9:59 AM

Web Page (Store) Design Accessibly, See Differently: Color Contrast Tips And Tools | Smashing Magazine

Cathy O'Connor shares one aspect of design accessibility: making sure that the look and feel are sufficiently inclusive of differently sighted users.
Kevin Bransard · Front End Development JCMS · on 10/23/14 at 10:10 AM

Web Page (Store) Introducing the HTML5 “Menu” and “Menuitem” Elements - Tuts+ Web Design Tutorial

Today I'm going to introduce you to two elements: and , part of the Interactive Elements specification. The web has evolved into something more than just linked documents; pages behave increasingly these days like apps. As such, it's an appropriate time to form standard web interactivity features. | Difficulty: Beginner; Length: Short; Tags: HTML5, JavaScript, HTML
Kevin Bransard · Front End Development JCMS · on 10/17/14 at 11:52 AM

Web Page (Store) Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started

Finally, true responsive images are becoming a reality on the web — in pure HTML, without convoluted hacks. The <picture> element and a couple of new attributes for the <img> element are behing a flag in Chromium 37 (so coming soon in Opera), in Firefox Nightly and are being implemented in WebKit (although it remains to be seen if Apple will ship it in the next version of Safari).
Kevin Bransard · Front End Development JCMS · on 7/24/14 at 10:30 AM

Web Page (Store) Deb.js: the Tiniest Debugger in the World - Tuts+ Code Tutorial

Using the proper tools and instruments will help you to debug your web apps painlessly, all from within the browser. Today, let's take a look at Deb.js, a library designed to help you do just that. | Difficulty: Beginner; Length: Medium; Tags: Web Development, JavaScript & AJAX, HTML/CSS, Debugging, Google Chrome
Kevin Bransard · Front End Development JCMS · on 7/2/14 at 10:19 AM

Web Page (Store) Server-Side Device Detection With JavaScript | Smashing Magazine

This article introduces WURFL.js that provides an easy-to-use, reliable and scalable alternative to traditional server-side device detection, all the while complementing other client-side techniques and tools.
Kevin Bransard · Front End Development JCMS · on 7/1/14 at 6:34 PM

Web Page (Store) Using the :target pseudo-selector for alternative layouts ⚒ Nerd

I really like the :target pseudo-selector. It enables you to style the target of a so called skip-link. For instance when you link to a section in an article: you could highlight the header of that section. Or you can use it for toggling simple drop-down menus — the ones you see a lot on small screens. But you can also use it to create a completely different layout. j First I did this: <html lang="en" id="g"> Then I wrote this #g:target body { columns: 15em; column-gap: 0; } /* and some other styles, you can look at the code: view-source:http://ghehehe.nl/the-daily-rectangle/ */
Kevin Bransard · Front End Development JCMS · on 5/15/14 at 9:38 PM

Web Page (Store) Apple adds iOS Developer interface design guidelines book to iBooks | 9to5Mac

Apple has added the iOS Human Interface Guidelines for App Store app designers to the iBookstore. Previously, the guidelines were solely available from the online Apple developer portal, and the addition to the iBookstore makes the guidelines for designing iOS 7 apps more easily accessible.
Kevin Bransard · Front End Development JCMS · on 5/14/14 at 12:05 PM

Web Page (Store) Leaving Pixels Behind - Todd Parker - (Google Slides)

A vector workflow for designers - "SVG is the future, don't fear the vectors" Présentation très complète qui détail pourquoi il ne faut pas utiliser les bitmaps ... ni les caractères unicode (emoji & co) ou les font-face (font awesome & co), pourquoi le SVG c'est formidable, et comment utiliser le SVG.
Olivier Jaquemet · Front End Development JCMS · on 5/14/14 at 10:50 AM

Web Page (Store) An Introduction to the Geolocation API - Tuts+ Code Tutorial

Paper maps have long been replaced by dedicated GPS navigation devices and mobile applications, which have become ubiquitous. Today, we're lucky enough to have geolocation natively supported by browsers. In this article, we'll discuss the Geolocation API, which allows us to detect and track the location of a device. | Difficulty: Beginner; Length: Medium; Tags: Mobile Development, HTML5, Javascript, Geolocation
Kevin Bransard · Front End Development JCMS · on 4/29/14 at 11:17 AM

Web Page (Store) Chrome DevTools Features You May Have Missed - Tuts+ Code Tutorial

With the recent updates to Chrome DevTools, let's take a look at a few of the newer features which you can use to help debug and improve your web application workflow with. | Difficulty: Beginner; Length: Medium; Tags: Web Development, Chrome Dev-Tools, JavaScript & AJAX
Kevin Bransard · Front End Development JCMS · on 4/28/14 at 10:11 AM

Web Page (Store) 3 stunning CSS animation effects that will captivate your users | Webdesigner Depot

Beautiful visual design isn’t enough any more, modern design needs great interaction to really stand out. Animations in your designs can provide clarity, direct attention, and create a delightful experience. Designing interactions is exciting, but costly. Often it takes back and forth between designers and developers to get animations just right; but it doesn’t need to be this way. CSS transitions afford the opportunity for designers with limited knowledge of code to enhance their projects with stunning motion effects that will engage users like never before. Let’s start with something simple: moving from one screen to another…
Kevin Bransard · Front End Development JCMS · on 4/25/14 at 10:36 AM

Web Page (Store) Rethinking Mobile Tutorials: Which Patterns Really Work? | Smashing Magazine

In this post, we'll look at why many common tutorial patterns are ineffective and how you can leverage game design principles to increase user engagement.
Kevin Bransard · Front End Development JCMS · on 4/22/14 at 3:32 PM

Web Page (Store) Mobile Navigation: Image Grids or Text Lists?

For mobile navigation, image grids should be saved for deeper IA levels where visual differentiation between menu items is critical.
Kevin Bransard · Front End Development JCMS · on 4/22/14 at 12:01 PM

Web Page (Store) Mobile first versus Responsive Web Design | Le bloc-notes ; ergonomie & UX

Deux sujets à la mode dans un même titre, si avec ça je ne fais pas péter le compteur de visites, je n’ai plus qu’a me tourner vers le porno ! Alors oui, c’est deux sujets à la mode mais qui me paraissent mal compris, individuellement d’une part et ensemble d’une autre part. J’ai déjà évoqué la problématique du Responsive Web Design (RWD en abrégé pour la suite.) dans cet article. Je ne vais donc pas revenir en détail dessus. (Lisez-le pour suivre ce que je vais raconter par la suite.). Ce qu’il faut retenir c’est que cette méthode d’adaptation des sites Web en fonction du support a des limites liées aux usages et aux conditions techniques.
Kevin Bransard · Front End Development JCMS · on 4/16/14 at 11:15 AM

Web Page (Store) Focal Point: Intelligent Cropping of Responsive Images | Design Shack

Focal Point is a GitHub project and CSS framework created by Adam Bradley. As you know, the concept of responsive images requires that any images on your page resize and reflow to achieve optimal layout for the current viewport size. Focal Point takes this idea a step further though and not only resizes your images, but crops them as well.
Kevin Bransard · Front End Development JCMS · on 4/9/14 at 4:11 PM

Web Page (Store) Creating Style Guides

A style guide, also referred to as a pattern library, is a living document that details the front-end code for all the elements and modules of a website or application. It also documents the site's visual language, from header styles to color palettes. In short, a proper style guide is a one-stop guide that the entire team can reference when considering site changes and iterations. Susan Robertson shows us how to build and maintain a style guide that helps everyone from product owners and producers to designers and developers keep an ever-changing site on brand and on target.
Xuan Tuong LE · Front End Development JCMS · on 4/9/14 at 3:58 PM