SlidesJS, a #responsive #slideshow plug-in for #jQuery
▻http://www.slidesjs.com
SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and #CSS3 transitions.
SlidesJS, a #responsive #slideshow plug-in for #jQuery
▻http://www.slidesjs.com
SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and #CSS3 transitions.
Élise, une histoire responsive
▻http://romy.tetue.net/elise-une-histoire-responsive
Une histoire responsive où l’héroïne est fillette sur smartphone, ado sur tablette, etc. Où la créa s’adapte au support web.
Illustratrice belge, Cécile Habran témoigne de sa démarche, du print au web, en codant.
#responsive #RWD #SudWeb
50 best free html responsive templates | Creative Nerds
▻http://creativenerds.co.uk/freebies/50-best-free-html-responsive-templates
This blog post is compilation of free premium looking responsive web templates just without the premium price tag all 100% free. You may be a web designer who wants to gain a better understanding of how responsive website templates works, theres no better starting point than downloading template playing around with it. You can also download templates and have a ready built site just simply change around content.
#html5 #rwd #responsive #templates
Responsive #Web_Design Testing Tool
▻http://www.dimensionstoolkit.com
A super friendly Chrome Extension
for designers to test #responsive websites.
Voyages-sncf.com veut passer de l’Internet au « multinet »
▻http://www.lesechos.fr/entreprises-secteurs/auto-transport/actu/0203481337413-voyages-sncf-com-veut-passer-de-l-internet-au-multinet-669225
cette notion est assez hallucinante !! "Autre conviction forte d’Yves Tyrode, le directeur général, « Internet est mort, vive le "multinet" » ! Selon lui, en effet, le monde du Web s’est fragmenté en 4 mondes : Apple, Google, Microsoft, et enfin le Web classique. Or, chacun de ses univers suscite chez ses utilisateurs sa propre logique de navigation. Pour Yves Tyrode, il faut donc développer des applications spécifiques à chacun de ses mondes. « Nous faisons le pari d’une expérience client propre à chaque monde, avance-t-il. A chaque fois que nous l’avons fait, la satisfaction client et les ventes augmentent (...)
Euh, il serait pas, des fois, en train d’aller au bout de la logique dite du #responsive web design ?
J’ai un peu l’impression qu’on tourne en boucle. On parle bien d’Aol là non ?
A Fresh Approach to Responsive HTML5 Tables
▻http://demosthenes.info/blog/852/A-Fresh-Approach-to-Responsive-HTML5-Tables
C’est ce qu’on disait la dernière fois, avec le JS qui génère les data ?
▻http://seenthis.net/messages/237158
#Assets #framework 2.0, like Bootstrap, but with semantic markup and WAI-ARIA
▻http://assets.cms.gov/resources/framework/2.0/Pages/index.html
“Assets 2.0 is a cross-browser compatible, 508 compliant and responsive framework that can be used to kick-start your web project.” Tags: Assets #CSS framework accessibilité #clavier
Il a l’air sympa celui la, c’est plus orienté accessibilité et pour permettre aux devs de manipuler les objets (par exemple pour les tableaux : ▻http://assets.cms.gov/resources/framework/2.0/Pages/datatables.html)
Y a même les #responsive datatable dont tu avais parlé :
▻http://assets.cms.gov/resources/framework/2.0/Pages/rwdtable.html
J’aime bien les champs date aussi ▻http://assets.cms.gov/resources/framework/2.0/Pages/maskedinput.html
avec UI + des —/—/---- dans les input :)
Ça me semble basé sur bootstrap 2 ou j’ai mal compris ? (voir les fichiers à inclure ▻http://assets.cms.gov/resources/framework/2.0/Pages/gettingstarted.html)
Et le code du site :
<div class="row-fluid">
<div class="span3">
<div class="span9">
</div>
Responsive Man, a #fun way to discover RWD
▻http://niravigad.com/responsive_man
Ecommerce and Responsive Web Design - Electric Pulp
▻http://electricpulp.com/notes/ecommerce-and-responsive-web-design
Tags: Responsive Web Design (RWD) #e-commerce #gain #progression
You like apples ? - Electric Pulp
▻http://electricpulp.com/notes/you-like-apples
Tags: Responsive Web Design (RWD) #e-commerce #gain #progression
How Big Is Art-Direction in RWD?
▻http://blog.yoav.ws/2013/05/How-Big-Is-Art-Direction
“The results showed that 24% (7 out of 29) of the sites that use picturefill, use it to implement art-direction. While a larger sample would be better, this is a strong indication that the art-direction use-case is an important use-case for responsive images.” Tags: Responsive Web Design (RWD) #Art_Direction #image
Ink: A #Responsive #Email Framework from ZURB
►http://zurb.com/ink
Ink
Quickly create responsive HTML emails that work on any device & client. Even Outlook.
#rwd
Home - Transport for London
▻http://www.tfl.gov.uk
Tags: Responsive Web Design (RWD) #démo #transports #métro
Ethan Marcotte on how #responsive #web_design came about | netmag | Creative Bloq
▻http://www.creativebloq.com/netmag/ethan-marcotte-how-responsive-web-design-came-about-41411189
The philosophy behind responsive, by contrast, crystallised more slowly. Back in 2000 Marcotte read John Allsopp’s ’A Dao of Web Design’. “I stumbled across John’s article,” Marcotte recalls. “At the time, web design was something I enjoyed, but I saw it primarily as a job: something I showed up to, from eight to six every day. John’s article showed me that the web could be a place for, I don’t know, craftsmanship? That this could be a place where people can do really brilliant things.”
Ridiculously Responsive Social Sharing Buttons
▻http://kurtnoble.com/labs/rrssb
Tags: #bouton #partage #réseau_sociaux Responsive Web Design (RWD)
Responsive Sidenotes
▻http://johndjameson.com/2014/responsive-sidenotes
Tags: Responsive Web Design (RWD) #notes #todo:formation:rwd
Oui, mais c’est plutôt à faire côté squelettes, non ?
▻http://johndjameson.com/blog/responsive-sidenotes
pérennité des urls...
Scoped Media Query #Sass Mixin
▻https://github.com/filamentgroup/scoped-media-query
“An element query workaround. A Sass mixin for scoping #CSS styles to apply only within given selector/media query pairs.” Tags: Responsive Web Design (RWD) #Element_Queries Sass CSS #todo:formation:rwd
TAL, an open source library for building applications for Connected #TV devices
▻http://fmtvp.github.io/tal/getting-started/introducing-tal.html
Tags: TV Responsive Web Design (RWD) #interface #application
2014 State of #Element_Queries
▻http://www.xanthir.com/b4VG0
Tags: Element Queries #Media_Queries Responsive Web Design (RWD)
12 websites that prove RWD and performance CAN play well together
▻http://www.webperformancetoday.com/2014/03/25/12-websites-prove-rwd-performance-can-play-well-together
Tags: #webperf Responsive Web Design (RWD)
#IE-friendly mobile-first #CSS with #Sass 3.2
▻http://jakearchibald.github.io/sass-ie
Tags: IE #Mobile_first CSS Responsive Web Design (RWD) Sass
Mobile #Menu AB Tested: #Hamburger Not the Best Choice?
▻http://exisweb.net/mobile-menu-abtest
I did a previous test that seemed to show that a bordered “hamburger” (aka sandwich) icon was used more than other options.
The menu icon on the right was clicked more than the previous two.
I then decided to test the hamburger icon against the word “MENU”.
Ah ! Y’a une suite !
Hamburger vs Menu: The Final AB Test
▻http://exisweb.net/menu-eats-hamburger
The MENU button was clicked by 20% more unique visitors than the HAMBURGER button (…)
Hamburger icons may appear to be ubiquitous, but they are not the only option.
There is an issue that is much more important:
Android users are almost 3x less likely to click a navigation button than iOS users.
Résumé : en tout il a fait trois tests AB.
Le premier étant celui de l’image de @tetue, où il montre tout d’abord que la bordure autour du bouton augmente beaucoup les clics.
Ensuite dans le deuxième, il introduit le mot « menu » tout seul, avec et sans bordure.
Enfin dans le troisième, il teste uniquement entre icône et mot, mais les deux avec bordure (puisqu’on a appris avant qu’il faut vraiment avoir une bordure).
Le grand gagnant étant : le mot « Menu » seul (avec une bordure) :
Par contre, il apprend au passage que les utilisateurs d’Android cliquent énormément moins sur les éléments de navigation que les utilisateurs Apple.
Abusing Ellipses – Siolon
▻http://www.siolon.com/blog/abusing-ellipses
Recently amongst web developers there been a passionate conversation about the use of “hamburger” iconography for progressive disclosure usually showing navigation (for the record, I hate that name for the icon). Some have done extensive A/B testing to prove it alone doesn’t work well, and others write passionately how they have abandoned the pattern. This along with other examples like using a select menu for smaller viewport navigation highlights a problem with our community: we can all-to-quickly grab onto a fad without asking fundamental questions about whether it works or not.
The Ellipsis’ Traditional Use in Interfaces
I want to bring up another pattern that has recently become a big problem also: the humble ellipsis. I started seeing ellipsis iconography show up more and more over the last couple of years in web applications. Now the pattern has existed for a long time in desktop applications, but it has served a different purposes. For example, in the OS X Human Interface Guidelines, we read the following instructions for using ellipsis:
Lien avec ►http://seenthis.net/messages/397625
qui explique que de nombreux gros acteurs (sites ou applis) ont fait machine arrière et on arrêté l’approche « bouton de menu seul qui ouvre un menu caché ».
Au lieu de cela, ils sont revenus à un menu directement visible, du type « onglets », avec, lorsque nécessaire, un bouton supplémentaire permettant d’ouvrir des choses en plus : parfois c’est trois points « … », parfois c’est « More » ou « Plus », etc et ça ouvre soit un déroulant, soit une page de menu complète séparée.
Mais le plus important c’est que les éléments principaux, les plus utilisés, sont toujours visibles du premier coup.
Faut-il dire #responsive ou adaptatif ?
En tout cas notre site l’est depuis hier grâce à @baroug (avec @fil et @booz) : ►http://www.monde-diplomatique.fr
#bravo à @baroug (avec @fil et @booz), mais c’est quoi le #responsive ou adaptatif ?
RWD and #design
▻http://susanjeanrobertson.com/geekery/rwd-and-design
Tags: Responsive Web Design (RWD) design #webdesign #contrainte créativité