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

Web Page (Store) IE11's Enterprise Mode (basically IT-managed IE8-frame)

Enterprise Mode for Internet Explorer 11, [...] provides better compatibility for older versions of Internet Explorer and tools to manage which Web apps use it. Businesses can benefit from the modern web standards, better performance, and increased security of our latest browser, while extending existing investments in legacy web apps. [...] Businesses can benefit from the modern Web standards, better performance, and increased security of our latest browser, while extending existing investments in legacy Web apps. http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx
Olivier Jaquemet · Front End Development JCMS · on 4/9/14 at 3:54 PM

Web Page (Store) jQuery CollagePlus - an image gallery plugin by Ed Lea

This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.
Kevin Bransard · Front End Development JCMS · on 4/9/14 at 10:17 AM

Web Page (Store) Form Label Design – David Bushell – Web Design & Front-end Development

It's impossible to tell if an input field is empty with CSS selectors (the :empty pseudo-class represents any element that has no children). My experiment abuses :valid and because the input field has a required attribute it becomes invalid when empty. For this reason the technique only works as expected on <input type="text">. With more complex validation requirements, like an email, the floating label won't appear immediately.
Kevin Bransard · Front End Development JCMS · on 4/8/14 at 11:06 AM

Web Page (Store) flexbox in 5 minutes

The Flexbox Layout module currently a W3C Candidate Recommandation aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic. The main idea behind the flex layout is to give the container the ability to alter its items’ width/height to best fill the available space. They work well for pages, they lack flexibility to support large or complex applications especially when it comes to orientation changing, resizing, stretching, shrinking, etc. Flexbox in 5 minutes is an interactive tour of all the major features of the new CSS property: flexbox. It’s built using Knockout.js. Read more at http://www.webappers.com/2014/04/07/learn-flexbox-in-5-minutes-with-interactive-tour/#mFkH3cEx42mDr0Pe.99
Kevin Bransard · Front End Development JCMS · on 4/8/14 at 9:41 AM

Web Page (Store) A Guide to Animated GIFs in Email | Litmus

Email marketers are always trying to improve their campaigns—through the use of copy, design, and images. They are always on the lookout for something to set them apart from the rest of the inbox and draw attention to their emails—enticing readers to click through and care about their message.
Kevin Bransard · Front End Development JCMS · on 4/4/14 at 10:03 AM

Web Page (Store) Stay up to date with Enterprise Mode for Internet Explorer 11

Many businesses are experiencing tension between today’s Web apps and services—which may require modern standards like HTML5 and CSS3—and older Web apps and services, designed for older versions of Internet Explorer. Legacy apps often represent a significant investment and have long, multi-year lifecycles, effectively making these customers dependent on an older version of Internet Explorer until they can upgrade these Web apps to modern Web standards. Introduced in 2009, Internet Explorer 8 was the first browser available on Windows 7 and included innovative features like Compatibility View for older Web sites. Because it also ran on Windows XP, many customers and developers chose to standardize on Internet Explorer 8 to help ease the migration to Windows 7. According to Net Applications, Internet Explorer 8 still has more than 20% of the desktop browser market share; despite the fact that IE9, IE10, and IE11 have superseded IE8, many customers still rely on Internet Explorer 8 to run their business. By providing better backward compatibility for Internet Explorer 8, Internet Explorer 11 with Enterprise Mode is intended to help break this dependency and provide the best of both worlds: A modern, up-to-date browser that helps customers extend their existing investments in older Web apps.
Jean-Phillipe Encausse · Front End Development JCMS · on 4/3/14 at 11:52 AM

Web Page (Store) Isotope v2 released

Responsive web design RequireJS Bower, Component(1), Browserify jsFiddle & CodePen When Isotope v1 was released three years ago, these things either weren’t on the map or didn’t even exist. Front-end development has made incredible leaps since then. Isotope v1 was designed to be at the cutting edge of front-end technology, but it eventually felt like it was being left behind by its own environment. With this big version 2 upgrade, Isotope is back in front. Isotope v2 big features include: Responsive web design with element sizing options AMD support for RequireJS Vanilla JavaScript. jQuery no longer required. Integrated Masonry features like stamp option and centering with isFitWidth
Kevin Bransard · Front End Development JCMS · on 3/31/14 at 6:58 PM

Web Page (Store) La tête dans le Flux ! - Découvertes, revirements et prédictions…

Découvertes, revirements et prédictions... Il y a un peu plus d'un an, je découvrais les Préprocesseurs CSS. Il y a un an, presque jour pour jour, j'ai confié que je ne trouvais pas vraiment d'intérêt...
Kevin Bransard · Front End Development JCMS · on 3/28/14 at 3:55 PM

Web Page (Store) Content-out Layout · An A List Apart Article

Grids serve well to divide up a predefined canvas and guide how content fits onto a page, but when designing for the web's fluid nature, we need something more responsive. Enter ratios, which architects, sculptors, and book designers have all used in their work to help set the tone for their compositions, and to scale their material from sketch to final build. Designers can apply a similar process on the web by focusing on the tone and shape of our content first, then working outward to design fluid, ratio-based grid systems that invite harmony between content, layout, and screen. Nathan Ford takes the next step toward more sophisticated, content-focused layouts on the web.
Kevin Bransard · Front End Development JCMS · on 3/28/14 at 12:02 PM

Web Page (Store) What You May Not Know About the Z-Index Property - Tuts+ Web Design Article

The z-index property in CSS seems simple enough, but there's a lot to discover beneath the surface if you really want to understand how it works. In this tutorial we'll clarify the inner workings of z-index, by looking at stacking contexts and a few practical examples. | Tags: HTML/CSS
Kevin Bransard · Front End Development JCMS · on 3/27/14 at 3:58 PM

Web Page (Store) Automating Layouts Bring Flipboard’s Magazine Style To Web And Windows | TechCrunch

Good layout design frames a story and impacts how you are informed by the content. For example, in the hallways of Sports Illustrated, editors hang up every page of the print edition to be reviewed and manually tweaked before publication.
Kevin Bransard · Front End Development JCMS · on 3/24/14 at 10:20 AM

Web Page (Store) Chrome DevTools for Mobile: Screencast and Emulation - HTML5 Rocks

Developing for mobile should be just as easy as it is developing for desktop. We've been working hard in the Chrome DevTools to make things easier for you and it's time to unveil some new features that should dramatically improve your mobile web development. First up, remote debugging and then we'll unveil proper mobile emulation.
Kevin Bransard · Front End Development JCMS · on 3/21/14 at 10:48 AM