JeremiePat/rwd.md

## rwd.md

      
    Raw
  

              rwd.md
            
          
    Responsive Web Design

HETIC - Année 2015
Concepts

Articles


Avant qu'on parle de responsive web design : A Dao of Web Design de John Allsopp
L'article fondateur de Ethan Marcotte : Responsive Web Design

Bibliographie


Responsive Web Design de Ethan Marcotte (en)
Responsible Responsive Design de Scott Jehl (en)
Mobile First de Luke Wroblewski (en)
WebGrids de Anne-Sophie Fradier (fr)
Projet Responsive Design de Rudy Rigot et Jérémie Patonnier (fr)

Sites de références


A List Appart (en)
Smashing Magazine (en)
Filament Group (Lab) (en)
Responsive news (en)
OpenWeb (fr)
Alsacreation (fr)
Le train de 13h37 (fr)

Design & Conception

Articles de références


La macrotypographie de la page Web (fr)
The web designer's guide to style tiles (en)
Designing with grid based approach (en)
Un pixel n'est pas un pixel (fr)
QuickLeft's 2014 CSS Report (en)
Web Mobile: Introduction et glossaire (fr)

Outils de conceptions


Stylos, Papier, Post-it, c'est la vie.
Balsamiq
Moqups
UXPin
WebFlow
Liste non exhaustive, y'en a d'autre, cherchez!

Ressources Divers


Mediaqueri.es
Responsive Ressources
Pattern Lab
CSS Zen Garden
Le blog de Marie Guillaumet

Mise en œuvre

En vrac


Les user agents c'est le mal - article (fr)
Les user agents c'est le mal - vidéo (fr)

Viewport


Comprendre le viewport dans le web Mobile (fr)
Mydevice.io (en)

Image


Compressive Image (en)
Retina revolution (en)
Picturefill (en)
Responsive images in practice (en)
Don't use picture most of the time (en)
Adaptative image (en)

Layout


Flexbox model (fr)
Grille responsive avec flexbox (fr)
display:table (fr)

SVG


Responsive Logos
SVG, l'ami du Responsive Web Design (fr)
Rethinking Responsive SVG (en)
How media queries interact with SVG in HTML (en)

Font


Icon Fonts are Awesome (en)
Créer une police d’icônes facilement (fr)
Icomoon.io (en)
FontAwesome (en)
Symbolset (en)
Ten reasons we switched from an icon font to svg (en)

Outils


Preprocesseur CSS: LESS, Sass (+Compass, +Bourbon), Stylus
Post processeur CSS: postcss, Autoprefixer (ou Pleeease)
Automation: Grunt, Gulp, Brunch mais aussi: Broccoli, Glou
Framework & grilles CSS

Skeleton
Bootstrap
KNACSS


Detection de fonctionnalité en JavaScript: Modernizr (en)
Génération de CSS conditionelles pour IE: Sass IE (en)

Gestion de projet

Outils de test


Browser Stack (en)
Sauce Labs (en)
Cross Browser Testing (en)
Selenium (en)

Gestion et suivi de la qualité


Opquast (fr)
SonarQub (en)
Linter de code: CSS, JavaScript

Travaux dirigés

1. Conception

Soit le brief d'avant vente suivant:
Client: Producteur/Diffuseur de musique

Objectif: Donner accès à leur catalogue en ligne via le web quelque soit
le materiel utilisé (smartphone, tablette, ordinateur, télévision, etc.)

Cible: Toute personne de moins de 45 ans avec un focus sur les digital natives.

Fonctionnalité attendus:
 * Possibilité d'acheter la musique (support physique ou dématerialisé).
 * Possibilité d'écouter les morceaux de tous les artistes sur le site.
 * Possibilité de gérer une ou plusieurs playlists et de pouvoir
   les synchroniser entre les différents materiels.
 * Toute suggestion sur les possibles interactions sociales entre les utilisateurs
   et les artistes est bienvenue.

Elements attendu pour la soutenance avec le client:
 * Prototypage de la home
 * Prototypage d'une landing page artiste
 * Prototypage de la gestion des playlists
 * Etat du marché et exemple de cas similaires

Objectif du TD: En 1h max tracer les grandes lignes des prototypes attendus et pointer (en y apportant un début de solution) les différentes contraintes responsives induit par les fonctionnalités demandées par le client.
Résultat attendu: Prototypes papier pour discussion des solutions proposées avec la classe pendant la 2ème heure.