Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjamin Quédeville

Post on 24-May-2015

309 views 1 download

description

Retour d'expérience sur ces technologies abordées lors des précédentes conférences et leur implémentation pour la nouvelle version de 42 Stores.

Transcript of Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjamin Quédeville

RESPONSIVE DESIGN&

LESS CSS

APPLIQUÉS AUMOTEUR DE TEMPLATE

DE 42STORES

mardi 23 octobre 12

POINT DE DÉPART

•2 conf tech sur responsive et less css

•40 thèmes (+) ou (-) standardisés

•5 feuilles de styles / thème

•1 thème dédié smartphone

mardi 23 octobre 12

mardi 23 octobre 12

PASSAGE AU RESPONSIVE• choix du layout fluide

• passage en % / taille en EM / position absolute et %

• développement des média queries

• minimiser les queries , test multi device (écrans normaux, mobiles classiques, mobiles retina, tablettes)

• double CSS pour IE 7/8

• transformation menu déroulant en select

mardi 23 octobre 12

MEDIA QUERIES ECRANS

mardi 23 octobre 12

MEDIA QUERIESIPHONE 4

mardi 23 octobre 12

RÉSULTATS RESPONSIVE

mardi 23 octobre 12

PASSAGE AU LESS

mardi 23 octobre 12

Découpe du CSS&

ré-écriturecomplète

mardi 23 octobre 12

Compilation (php)

<link type="text/css" rel="stylesheet" href="/styles/main.css" />

1 seul fichier CSS

mardi 23 octobre 12

AVANTAGES LESSLES VARIABLES

mardi 23 octobre 12

AVANTAGES LESSLES FONCTIONS

mardi 23 octobre 12

RESPONSIVE DESIGN+

LESS CSS=

50 JOURS HOMME+

AVENIR RADIEUX

mardi 23 octobre 12