Responsive Web Design (RWD) » dans SPIP

Transcription

« Responsive Web Design (RWD) » dans SPIP : Intégrer « Bootstrap, from Twitter » dans un CMS...
Extrait du site archivé - CMS-SPIP
http://icp.ge.ch/sem/cms-spip/spip.php?article1664
« Responsive Web Design
(RWD) » dans SPIP : Intégrer «
Bootstrap, from Twitter » dans
un CMS...
- CSS, HTML, jQuery, RWD - RWD : Responsive Web Design -
Date de mise en ligne : jeudi 24 mai 2012
Description :
Le « Responsive Web Design » se répand comme une trainée de poudre sur le Web. Aujourd'hui il beaucoup question du framework « Bootstrap, from Twitter »,
de son utilisation comme framework en soit ou intégré à un CMS, voire à SPIP !
site archivé - CMS-SPIP
Copyright © site archivé - CMS-SPIP
Page 1/15
« Responsive Web Design », qu'est-ce que c'est ?
Le « Responsive Web Design (ou RWD) » se répand comme une trainée de poudre sur le Web. Aujourd'hui il est
beaucoup question du dernier framework qui ravi de nombreux développeurs, à savoir « Bootstrap, from Twitter »,
de son utilisation comme framework en soit ou intégré à un CMS, voire à SPIP !
En français l'expresion « Responsive Web Design » est exprimées de multiples manières, par exemple :
•
•
•
•
•
•
•
•
•
Design Internet Réactif
Web design réactif
Design Internet adaptable
Webdesign adaptable
Sites adaptatifs
Design web adaptable à toutes les résolutions
Site web réactif et adaptable
Conception adaptative et/ou réactive
etc.
Selon Loris
Le web est un terrain de jeu en perpétuel renouvellement. Les technologies évoluent à un rythme incroyable
et les sites deviennent de plus en plus performants, complexes et efficaces. La dernière grande médiatisation
à ce sujet concernait le HTML5 qui permet, entre autres, d'intégrer de l'audio et de la vidéo sans plugins, et
aussi facilement que des images.
Aujourd'hui, le « next big thing » du web est le Responsive Web Design, ou Webdesign Adaptatif : c'est un
train à ne pas manquer et qui va complètement révolutionner la manière de concevoir les sites, mais aussi la
manière dont les utilisateurs visiteront le web.
Selon Bruno Flaven,
le Responsive Web Design est une étape supplémentaire de l'usage des CSS dans le Webdesign qui
consiste à utiliser des grilles fluides et des images au format SVG dans le but d'afficher une page web de
manière optimal quelque soit l'environnement, notamment le Web.
Selon WikiPedia, le Responsive Web Design c'est une démarche qui :
Page 2/15
... regroupe différents principes et technologies et qui indique globalement qu'un site est conçu pour
s'adapter aux différentes tailles d'écran et aux différents terminaux permettant d'afficher le site (navigateur,
tablette, mobile, télé connectée, ...). Ainsi, les mobinautes pourront avoir une expérience adaptée à leur
terminal sans dégradation et sans devoir utiliser les fonctionnalité de zoom (ou un autre type de
redimensionnement). Ils pourront consulter la même information, mais organisée différemment selon le type
de terminal utilisé.
La notion de web responsive révolutionne la manière de concevoir les parcours internet puisqu'il ne s'agit
plus ici de concevoir autant de parcours qu'il y a de famille de terminaux mais de concevoir une seule
interface auto-adaptable. Ainsi, les sources d'information et les socles techniques ne sont pas dupliqués. Cela
engendre des économies d'échelles dans la conception et la maintenance de sites internet. L'esprit du web
responsive est de tourner toujours davantage vers à la fois une standardisation du web (normes W3C) et vers
une industrialisation de ce marché qui progresse vers la maturité.
Page 3/15
Selon Sylvain FIX : Responsive Web Design : s'adapter ou mourir ?
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...
...Le « Responsive Design » est une manière de concevoir les sites Web qui permet d'adapter les sites en
fonction de la plate-forme. Au final, il n'y a qu'un Web quelque soit le terminal...
...Finalement, un site « Responsive Design » va couter plus chère mais la véritable question à se poser est
quel est le prix de ne pas le faire, de se couper de frange entière d'internaute...
...Pour conclure, le « responsive design » fait rentrer le Web dans une nouvelle ère. A chaque mutation du
Web, on va voir de nouveaux acteurs apparaitre et prendre les devants, d'autres disparaitre car il n'auront
pas réussi à s'adapter.
« Bootstrap, from Twitter », un Framework «
Responsive Web Design »
« Bootstrap, from Twitter » est un toolkit CSS/HTML5/js de Twitter de type « Responsive Web Design » pour
développer rapidement des interfaces web. C'est un Framework totalement open source, conçu autour de HTML5 et
CSS3, développé et maintenu par Twitter.
Les framework RWD épargnent aux développeurs de coder eux-mêmes certains aspects contribuant à
l'enrichissement de l'application, et de se focaliser sur les fonctionnalités spécifiques à cette dernière. Selon
Orion-CMS :
Imaginez-vous maintenant les résultats si ledit site avait été optimisé pour tous les supports électroniques
tels que iPhone, iPad, BlackBerry, tablette, etc. C'est de la qu'est née la technologie « Responsive Web
Design » que l'ont pourrait traduire par Design Internet Réactif. Pour les deux mots Design Reactif, aucun
problème. C'est le mot réactif qui change tout. Réactif veut tout simplement dire que le design du site réagit
automatiquement à l'appareil qui est utilisé pour le visionner.
En fait, le design s'ajuste à la dimension de l'écran de tout support électronique. Pour ce faire, nous avons
intégré la technologie BootStrap par Twitter.
Pour changer le look de « Bootstrap, from Twitter » le site Bootswatch - Free themes for Twitter Bootstrap propose
11 thèmes gratuits.
Pour maîtriser « Bootstrap, from Twitter » :
Page 4/15
•
Tutoriels pour maîtriser « Bootstrap, from Twitter »
Utiliser un Framework « Responsive Web Design » ou
son intégration au CMS
La question se pose de savoir s'il faut utiliser directement ces nouveaux Frameworks de type « Responsive Web
Design » ou si l'on peut attendre de les voir intégrés dans les CMS, ce que nous souhaitons pour notre plus grand
confort.
Cette technologie est déjà opérationnelle dans certains templates de Drupal, et le Framework Bootstrap, from Twitter
est déjà intégré ou en ours d'intégration à divers CMS tels que WordPress, HabboStrap, Orion ou [Contao>
http://forum.contao.fr/modeles-css/...]
... et pour SPIP ?
La question qui nous intéresse est : à quand des squelettes SPIP disponibles en licence libre qui intègrerons une
technologie « Responsive Web Design », et pourquoi pas « Bootstrap, from Twitter ».
... et pourquoi pas dans SARKA ?!
Actuellement sur SPIP : 3 aspects
Actuellement les administrateurs SPIP peuvent entrevoir le « Responsive Web Design » sous trois aspects :
1. Avec des plugins spécifiques qui jouent un squelette adapté pour smartphones :
Des plugins pour jouer les sites SPIP sur smartphones
•
Plugins « cimobile » et « iTwX - Mobile » : squelettes Optimisés pour iPhone/BlackBerrry/HTC et autres
mobiles
2. Avec le plugin JQuery Masonry qui réorganise les blocs des pages du site d'après une grille
•
JQuery Masonry
15 août 2011 - par Yffic
http://www.spip-contrib.net/JQuery-Masonry
Principe : Ce plugin réorganise les blocs de votre page d'après une grille (de manière verticale et horizontale)
pour réduire au maximum les espaces vides entre les éléments qui apparaissent lorsqu'on applique la propriété
float sur des blocs de hauteurs différentes.
•
Démonstration : plugin jQuery Masonry de David DeSandro
http://masonry.desandro.com/
Page 5/15
3. Directement dans SPIP 3 :
•
Le responsive fait son entrée dans SPIP 3
Un nouveau jeu de squelettes par défaut
http://www.spip.net/fr_article5427.html
Pour marquer le coup, les squelettes par défaut ont été révisés. Par la répartition en plusieurs feuilles de styles
ré-utilisables indépendamment (méthode Daisy, cf. Un, deux, trois... feuilles CSS !), ils constituent désormais un
cadre de travail HTML/CSS modulaire, immédiatement utilisable pour démarrer un site. Ils proposent notamment un
traitement typographique complet et harmonieux, inspiré du framework Blueprint. L'historique spip_style.css disparaît
au profit de spip.css, qui peut être utilisée en complément de votre framework habituel.
Les squelettes adoptent une nouvelle structure HTML de base qui anticipe le HTML5, « responsive » par défaut, et
embarque des sélecteurs conditionnels pour plus de souplesse CSS.
Sites SPIP conformes RWD
Des développeurs de diverses sociétés ont créé des sites Web conformes RWD, en voici des exemples :
Exemples de Sites SPIP Responsives Web Design
•
Les Bandits de Nogent (baseball) (2011)
détection propre de la taille de l'écran (sans javascript)
http://banditsnogent.com/
•
AA Studio
http://www.aastudio.fr/
•
Le Responsives Web Design chet Paris-Beyrouth
Le Responsive Web Design qualifie un site dont la maquette (aussi bien le graphisme que l'ergonomie) s'adapte
automatiquement au support d'affichage - du smartphone à l'écran de dimensions réduites à l'ordinateur de
bureau doté d'un écran immense.
http://www.paris-beyrouth.org/mot/responsive-web-design
•
•
Exemple 1 : MAC/VAL
http://www.macval.fr/
•
Exemple 2 : Réunion des musées nationaux - Grand Paris
http://www.rmn.fr/
•
Exemple 3 : Secours Catholique - Réseau mondial Caritas
http://paris.secours-catholique.org/
mandibul - Solutions internet durables pour les collectivités locales
Page 6/15
Responsive design
Adapter son site Internet aux nouveaux usages de la mobilité.
Nous concevons votre site internet afin qu'il soit consultable, sur tous les terminaux : téléphone mobile, tablette,
ordinateur (bureau/portable), écran TV.
http://www.mandibul.fr/Responsive-design.html
Dernières réalisations
http://www.mandibul.fr/
•
Exemple 1 : Ville de Noyon
http://www.ville-noyon.fr/
•
Exemple 2 : Ville de Charly
http://www.mairie-charly.fr/
•
Exemple 3 : Romille
http://www.romille.fr/
•
Exemple 4 : Gâtinais — Val-de-Loing
http://www.ccgvl77.fr/
•
WJ-S
par kent1, 17 mai 2012
http://www.wj-s.org
WJ-S est un logiciel et un dispositif publique de performances web, modulable, permettant à des WJ-S
(webjockeys, artistes, curateurs, passionnés et mutants du web) de jouer live avec des contenus en ligne. WJs
est une expérience partagée et visible de la navigation. Les WJs prennent le contrôle d'un dispositif multi-écrans
et surfent simultanément dans plusieurs fenêtres de navigateurs à la fois. WJ-S est une expérience immersive
dans le flux. SPIP 3.0 Responsive design Agenda (...)
•
chrisgaillard.com - Webdesign & développement
http://www.chrisgaillard.com/
•
Exemple 1 : Super regular, site spip responsive
Webdesign Responsive Grenoble
Rédigé le 28 mai 2012 par chris
Super/regular est un studio de design global pour la communication visuelle basé à Grenoble. 3 associés,
une équipe créative, agile et efficace de la réflexion stratégique à l'exécution, avec qui j'ai déjà eu le plaisir
de collaborer sur plusieurs projets.
Voici leur nouveau site Responsive, fait en collaboration avec Hervé mon colocataire, jeune webdesigner
prometteur.
http://www.super-regular.fr/
•
Exemple 2 : Festival Berlioz - Site spip responsive
Rédigé le 2 mai 2012 par chris
Le festival Berlioz, c'est l'un des plus grand festival de musique classique français, plus de 50 événements :
Page 7/15
« Responsive Web Design (RWD) » dans SPIP : Intégrer « Bootstrap, from Twitter » dans un CMS
concerts symphoniques, musique de chambre, récitals, sérénades..., plus de 1 000 artistes internationaux,
20 000 spectateurs. Dans divers lieux de la Côte-Saint-André et ses environs jusqu'à Grenoble.
Le site du Festival Berlioz riche de contenus et de fonctionnalités, de son, de vidéos, une gestion de
calendrier automatisée, c'est aussi mon premier site responsive, technique qui permet à un site de s'adapter
au support de navigation, également appelée media queries. Son contenu et sa structure sera différente si
on le visite avec un ordinateur grand écran ou un smartphone. Le site est propulsé par le CMS spip qui fait
le bonheur des administrateurs.
http://www.festivalberlioz.com/
Des sociétés créent à la demande des sites Web
conformes RWD, en voici des exemples
•
Studiomaiis
Création de sites internet
http://www.studiomaiis.net/integration-web-wordpress-spip-html5-css3-decoupe-photoshop
http://www.studiomaiis.net/
•
Désign réactif
Nous savons utiliser les media queries afin de proposer des designs réactif - responsive design en anglais. La
mise en page de votre site d'adapte à la taille de l'écran, pour une meilleure navigation sur les ordinateurs de
bureau et les terminaux mobiles.
Ce site possède un design réactif
•
Agence WebSillage : Création de sites Internet Réactifs & Adaptatifs SPIP
Pack Internet - Responsive Web Design
http://site-internet-adaptatif.com/Formule-Webdesign-responsive-Pack.html
http://site-internet-adaptatif.com/Defintion-responsive-webdesign.html
http://www.websillage.com/Responsive-Web-Design-Site.html
Une offre globale et 'responsive' ...
En ligne avec les orientations du 'Responsive Web Design' qui vous permet de répondre à la multiplicité des
équipements d'accès à votre vitrine Internet, l'agence WebSillage vous propose une offre globale qui vous
garantit les 'incontournables' d'un service Web efficace et de qualité.
Discussion SPIP - Responsive Web Design
•
#responsive_web_design
Par ARNO
http://seenthis.net/tags/responsive_web_design
•
Boulot boulot : je viens de mettre en ligne la nouvelle-nouvelle version du site du musée d'Art
contemporain du Val-de-Marne
ARNO* il y a 2 mois
http://seenthis.net/messages/62293
•
Responsive design et Mobile first - ou pas.
Un article de Stéphane, Publié le 21 mars 2012
Page 8/15
Pour la dernière refonte de nota-bene.org j'ai tenté de faire du Mobile first. Sur le principe, OK ; dans la pratique,
pas complètement OK. Profitons-en pour expliquer plus avant toute la démarche de refonte en « design réactif »
de cette version 6.
http://www.nota-bene.org/Responsive-design-et-Mobile-first
Videos « Responsive Web Design (RWD) »
Sources
Responsive Web Design
•
http://fr.wikipedia.org/wiki/Responsive_Web_Design
•
Responsive Web Design : s'adapter ou mourir ?
Par Sylvain FIX le 12 novembre 2011
http://truffo.fr/2011/11/responsive-web-design-sadapter-ou-mourir/
Des outils pour le « Responsive web design »
•
50 fantastic tools for responsive web design
http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
•
35 Useful Responsive Web Design Tools
by Sonny M. Day on April 28, 2012
http://www.tripwiremagazine.com/2012/04/responsive-web-design-tools.html?utm_source=feedburner&utm_med
ium=feed&utm_campaign=Feed%3A+tripwiremagazine+%28tripwire+magazine%29
•
15 Responsive CSS Frameworks Worth Considering
November 17, 2011 35 Comments and 211 Reactions
http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/
Bootstrap, from Twitter
•
Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.
http://twitter.github.com/bootstrap/index.html
•
http://www.blogoergosum.com/29844-bootstrap-from-twitter
Page 9/15
CMS vs framework JavaScript
•
CMS vs framework JavaScript
http://www.scriptol.fr/creation-site-web/cms-vs-framework.php
Framework « Responsive Web Design » dans les CMS
•
Responsive Web Design : Are there any CMS systems that support responsive design ?
Thu May 03 2012
http://www.quora.com/Responsive-Web-Design-1/Are-there-any-CMS-systems-that-support-responsive-design
•
Responsive Web Design : How does it apply to a CMS theme ? Submitted by juliavdw on Sun, 08/14/2011
http://www.pfvdw.com/blog/responsive-web-design-how-does-it-apply-cms-theme
•
Responsive Web Design and Content Management Systems - Why a "Mobile First" Perspective is the
Future of SiteNinja CMS
By Dave Myers on Mar 01, 2012 at 11:29 PM
http://www.site-ninja.com/article/234-responsive-web-design-and-content-management-systems-why-a-mobile-fir
st-perspective-is-the-future-of-siteninja-cms
•
Responsive Web Design with Drupal
http://www.acquia.com/resources/acquia-tv/conference/responsive-web-design-drupal
•
Responsive Web Design with Drupal and the Omega Theme
March 28, 2012
http://www.acquia.com/resources/acquia-tv/conference/responsive-web-design-drupal-and-omega-theme-march
-28-2012?utm_source=Acquia%2BHome%2BPage&utm_medium=Spotlight&utm_campaign=Responsive%2BD
esign%2BWebinar
•
Créer un responsive webdesign pour un template Drupal
Publié le 24/04/12 à 08h20 par @LaFermeDuWeb
http://www.lafermeduweb.net/veille/creer-un-responsive-webdesign-pour-un-template-drupal-194672021215514
624.html
•
Responsive Web Design for Drupal
http://designtotheme.com/workshops/responsive-web-design-drupal
•
What is the best starter theme for responsive web design in Drupal ?
Posted by webchick on September 13, 2011 at 5:13am, Last updated by peterx on Wed, 2012-04-25 04:51
http://groups.drupal.org/node/175234
•
Drupal : rob_dean's sandbox : Responsive Web Design
http://drupal.org/sandbox/rob_dean/1074158
•
Drupal : Responsive web design
Last updated May 23, 2012. Created by JohnAlbin on December 29, 2011.
http://drupal.org/node/1388492
•
Orion CMS
Propulsé par Twitter BootStrap
Page 10/15
http://www.orioncms.ca/index.htm
•
A Responsive and Minimal - Portfolio Theme for WordPress.
http://themetrust.com/demos/reveal/
•
Responsive Web Design (II) CMS and Zen
29-Aug-2011 09:00
http://www.david-marsh.com/news/ResponsiveWebDesignIICMSandZen
•
Responsive Web Design with Orchard CMS and Adobe Shadow
Apr 20, 2012, Author : David Hayden
http://davidhayden.com/blog/responsive-web-design-with-orchard-cms-and-adobe-shadow
•
Responsive & Mobile First - Omega is growing at an incredible rate
http://omega.developmentgeeks.com/
•
Moodle et le : responsive web design
by Stuart Lamour - Tuesday, 20 September 2011, 03:03 PM
http://moodle.org/mod/forum/discuss.php?d=186071
•
The Start of Responsive Web Design (... CMS)
Submitted by Bryan on May 22, 2012
http://cmsreport.com/blog/2012/start-responsive-web-design
•
Our Services : Responsive Website Development, Graphic Design, HTML/CSS, Wordpress CMS
Development, eCommerce Web sites, Server management & Hosting
http://www.blissfulinterfaces.com/web-design-development/
•
Omega Framework - Drupal Groups
http://groups.drupal.org/omega-framework
•
What the heck is this ?
This is a HTML5 starter template for Joomla ! 1.7+
http://demo.internet-inspired.com/eleven45/
•
Amplify - Responsive Web Design - The Joomla CMS and Responsive Web Design
on 04 April 2012.
http://www.projectamplify.com/about/news/140-amplify-responsive-web-design
•
A pioneer of responsive web design for Joomla !
http://internet-inspired.com/
•
Fork CMS
http://www.fork-cms.com/
•
CMS & Website Builders
http://www.alistapart.com/comments/responsive-web-design/P70/#72
Bootstrap, from Twitter dans un CMS
Page 11/15
•
HabboStrap, from Emetophobic and Twitter
Simple, stylish and responsive HoloCMS edit using bootstrap CSS API from Twitter Inc.
http://habbostrap.fuckretro.org/
•
Orion sous la technologie BootStrap par Twitter
http://www.orioncms.ca/informations/design_reactif.htm
•
Qu'est-ce que Orion CMS ?
http://www.orioncms.ca/informations/a_propos_orion.htm
•
Intégrer bootstrap au template de page Contao
http://forum.contao.fr/modeles-css/bootstrap-t2312.html
•
Contao CMS Open Source
Contao est un logiciel de gestion de contenu accessible utilisant les technologies PHP/MySQL.
http://www.contao.fr/
http://www.contao.fr/caracteristiques-contao-cms.html
•
Bootstrap from Twitter + WordPress Basics = wp-bootstrap
Publié le 6 mars 2012
http://wp.4design.tl/bootstrap-from-twitter-wordpress-basics-wp-bootstrap
Julien Bianchi est un développeur spécialisé dans les langages du web comme PHP, HTML, CSS ou Javascript.
Pour son thème WordPress, il a eu la bonne idée de mélanger ? Basics et le framework HTML & CSS Bootstrap
pour donner naissance au projet wp-bootstrap. Julien a travaillé avec les outils Google PageSpeed et YSlow
sous les yeux pour garantir des performances optimales.
Des exemples de sites web réactifs et/ou adaptables
•
Responsive Webdesign : 30 exemples de sites web adaptables
by Ginet Vincent - le 06/04/2012
http://www.blogduwebdesign.com/inspiration-webdesign/responsive-webdesign-30-exemples-de-sites-web-adap
tables/671
•
40 Examples of Brilliant Responsive Website Layouts
February 29, 2012 par Jake Rocheleau
http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive-website-layouts/
•
Responsive Web Design : 50 Examples and Best Practices Posted by : Adrian, In : Design, Inspiration, On :
October 11, 2011
http://designmodo.com/responsive-design-examples/
•
70 Examples Of Modern Responsive Web Design
by AndrewG
http://www.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/
... toujours à propos de « Responsive Web Design »
•
Qu'est-ce que le Responsive Web Design ?
Page 12/15
Par Christophe Cussigh-Denis le mercredi 22 février 2012, 15:10
http://dofollow.bz/?post/2012/02/22/Responsive-Web-Design
•
Responsive webdesign : adapter un site à toutes les résolutions
09/05/2012, L'équipe Usaddict, Conception des interfaces
http://www.ergonomie-interface.com/conception-maquettage/responsive-webdesign-adapter-resolutions/
Le Responsive Web design (conception adaptative ou réactive en français) représente un ensemble de
méthodes et techniques permettant d'universaliser un site Web. Qu'il soit consulté sur ordinateur, tablette,
e-reader ou mobile, le site ainsi conçu s'adapte automatiquement à la taille de l'écran.
Cette évolution très séduisante du Web pose néanmoins certaines questions d'ergonomie et oblige à repenser la
conception des sites. Nous abordons dans cet article les objectifs du responsive design, les critères qui doivent
décider à le mettre en oeuvre, les recommandations de conception et les considérations techniques.
•
Responsive design : définition, fonctionnement, ressources et tutoriels
Posté dans Général, Ressources, Tutoriels avec pour thème Webdesign le septembre 29th, 2011
http://designspartan.com/info_generale/responsive-design-definition-fonctionnement-ressources-et-tutoriels/
•
Responsive web design
http://www.digitalgarage.ch/responsive-web-design/
•
Responsive web design : un webdesign adaptatif
Posté le 11 octobre 2011 Par Loris
http://enigmaprod.ch/good-to-know/responsive-web-design-un-webdesign-adaptatif/
•
Décryptage : Responsive Web Design, une tendance de fond ?
Anne Millet - publié le 06.03.2012, 18h20 (modifié le 08.03.2012, 16h48)
http://www.journaldunet.com/ebusiness/expert/51096/decryptage---responsive-web-design—une-tendanc
e-de-fond.shtml
Le Responsive web design ou web design adaptatif est la tendance du moment en ergonomie multi-écrans. Et
les sites web fondés sur ce principe commencent à se multiplier. Décryptage d'une approche que les entreprises
ne peuvent plus ignorer.
•
Responsive Web Design et E-commerce
Pauline Salendre | 22 mai 2012
http://www.bysoft.fr/blog/theme/e-commerce-theme/responsive-web-desin-et-e-commerce/
•
Formation Responsive Web Design
Adaptez votre site aux terminaux mobiles
http://www.mediabox.fr/programme-responsive-web-design.html
Apprenez à maitriser le concept et la méthode Responsive Web Design (Web Design Adaptif) et préparez vos
site pour qu'ils soient véritablement multiplateforme : iphone, ipad, android, smartphone, tablette, tv etc. Avec le
responsive web design répondez à toutes les problématiques de format écran en html et css uniquement ! 14
heures de formation (2 jours en présentiel).
•
Les opportunités du Responsive Web Design
http://juliemirande.com/les-opportunites-du-responsive-web-design/
•
Responsive web design, une introduction et quelques frameworks
Posté le 8 décembre 2011 dans Mobile | Technologie , par MoKaDev
http://www.blogoergosum.com/29433-responsive-web-design-une-introduction-et-quelques-frameworks
•
Responsive Web design et Media Queries
Page 13/15
http://www.grafimages.com/blog/2012/05/responsive-web-design-et-media-queries/
•
Web design réactif
Publié par +Jean-François Parent
http://jfparent.com/web-design-reactif/
•
Katrien De Graeve
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
•
Le responsive web design
http://blog.aboutyourweb.net/2012/05/responsive-web-design/
•
Responsive Web Design, Webdesign, iPad, iPhone, Web, Tablettes - Le Webdesign à 360 degrés
Bruno Flaven, le Mardi 20 mars 2012
http://social.hecube.net/blog/2012/03/20/responsive-web-design-webdesign-ipad-iphone-web-tablettes-le-webde
sign-a-360-degres/
C'est chaud sur le front du Webdesign, encore un mot-clé qui fait du buzz, on ne parle plus que Responsive
Webdesign. C'est une étape supplémentaire dans l'usage de la CSS dans le Webdesign, mouvement initié avec
CSS Zen Garden : The Beauty in CSS Design par Dave Shea et Molly Holzschlag
•
What The Heck Is Responsive Web Design ?
a scrolldeck.js presentation by @johnpolacek
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
•
Responsive Web Design, most complete guide
http://www.webdesignshock.com/responsive-web-design/
•
60+ Creative Examples of Responsive Web Design
http://www.andysowards.com/blog/2012/60-creative-examples-of-responsive-web-design/
•
Mobile-First Responsive Web Design
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
•
How Jyske Bank pulled off responsive web design
January 16th, 2012 by Janus Boye
http://jboye.com/blogpost/how-jyske-bank-pulled-off-responsive-web-design/
•
10 November 2011
http://doublethink.is/2011/11/10/responsive-web-design/
•
Responsive Web Design Is Our Future
by admin on March 21, 2012
http://www.artistechnewmedia.com/thenest/2012/responsive-web-design/
•
08/12/2011 12:20 PM / by Lee Bolton
http://tortoiseweb.co.uk/responsive-web-design
Page 14/15
Un livre sur le « Responsive web design »
•
Responsive web design
Par Ethan Marcotte, septembre 2011
Éditeur : Eyrolles, Collection : A Book Apart, Parution : septembre 2011, Édition : 1ère édition, Nb de pages :
160, Prix éditeur : 12,00 EUR
http://www.alsacreations.com/livres/lire/1320-responsive-web-design.html
http://www.editions-eyrolles.com/Livre/9782212133318/responsive-web-design
http://www.abookapart.com/products/responsive-web-design
http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
Page 15/15

Responsive Web Design (RWD) » dans SPIP

Transcription

Documents pareils

design web responsive : conception graphique

Création Site Internet Angers

Adapter son site web aux différents supports - E

Une formation courte au métier de développeur Web et mobile qui

Nos Formations

références 2016

Télécharger la plaquette

Responsive design en HTML5

Télécharger l`article