Zepto.js: the aerogel-weight jQuery-compatible JavaScript library. Lo-Dash. Font Awesome, the iconic font designed for use with Twitter Bootstrap. Leemachin/say-cheese. 10 outils pour le Web mobile. Les contraintes d'ergonomie, d'adaptation et de performance dans le monde du Web mobile impliquent parfois certaines techniques rendues complexes par le peu de spécifications et d'outils existants à l'heure actuelle.
En attendant des modules de positionnements CSS flexibles tels que "Flexbox", ou des spécifications stables concernant les informations de type "retina" ou de bande passante d'un terminal, nous sommes contraints à créer nous-même nos outils et stratégies. Pour nous faciliter la tâche, voici une sélection de 10 ressources bien pratiques. La majorité des dispositifs présentés dans cet article consistent en des bibliohèques JavaScript et répondent à des missions bien précises. Inutile de vous préciser qu'il n'est pas recommandé d'employer l'ensemble de ces outils sur un seul et même projet, pour des raisons évidentes de performances. Mobile Boilerplate Voir Mobile Boilerplate 320 and up. CSS: Elastic Videos. While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic.
Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action. View Demo Elastic Videos Elastic HTML5 Videos (demo)
Progressive <canvas> pie charts. Peity (sounds like deity) is a jQuery plugin that converts an element's content into a <svg> mini pie 2/5 donut 5,2,3 line 5,3,9,6,5,9,7,3,5,2 or bar chart 5,3,9,6,5,9,7,3,5,2 and is compatible with any browser that supports <svg>: Chrome, Firefox, IE9+, Opera, Safari.
Download version 3.2.1 Uncompressed 8.7Kb jquery.peity.js Minified 3.6Kb (+gzipped 1.7Kb) jquery.peity.min.js Source github.com/benpickles/peity Pie Charts Call peity("pie") on a jQuery selection. Responsive Design, Responsively Illustrated. Izilla/jQuery-touchMenuHover. CSS et Mobile First : procéder par amélioration progressive. Le Web mobile est un environnement de développement en plein essors et nécessite une attention particulière de par les contraintes qu’il impose.
Penser responsive est un bon début pour rendre l’expérience utilisateur accessible sur tout support, mais peu encore se soucient du temps de chargement qui fait voler en éclats le rapport coûts/bénéfices d’une intégration adaptative. Voir la démo Télécharger la source La dégradation progressive en première réponse au responsive La première vague de designers qui ont répondu à la portabilité de leurs œuvres s’est ruée vers une solution facile qui était la dégradation progressive. Elle consiste en supprimer les effets et éléments moins essentiels d’une page en fonction de résolutions décroissantes.
Emulateur mobile (by COWEMO) CSS media queries. A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.
Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself. Syntax. How To Use Media Queries For Device Targeting. Media queries are a way to serve different css rules to different devices and device characteristics.
They’re the final piece in allowing us to create designs that are truly responsive to our audience and how our visitors choose to view our sites. The last few weeks we’ve been building up toward responsive layouts, first by creating flexible girds and then by adding flexible images and media inside those grids. Today we’ll add media queries to the mix. All of these posts rely heavily on the work of Ethan Marcotte and so before getting started I want to point you again to some of Ethan’s writing on the subject. ProtoFluid. Effortless Responsive Design Testing. #html5 #css. Scrollability. Native scrolling for mobile web apps... or at least the closest thing to it!
Scrollability is a single script, it's small, and it has no external dependencies. Drop it into your page, add a few CSS classes to scrollable elements, and scroll away. Scrollability is a work-in-progress and is not yet ready to be used. I will publish documentation when it's ready. Demos. C mobileOK Checker. The fifth position value. Web developers are quite annoyed that position: fixed doesn’t work on mobile browsers, but mobile browser vendors cannot afford to support it.
This dilemma is unsolvable by the means we presently have at our disposal. To offer a way out, I’m proposing to create a new position: device-fixed declaration better suited to the mobile scenario with its tiny screen and its zoom. Simulez votre site sur téléphones mobiles avec ProtoFluid. iPad/iPhone Orientation Body Class - jQuery.