conférence #nwxtech4 : responsive web design et préprocesseurs css par benjamin quédeville

13
RESPONSIVE DESIGN & LESS CSS APPLIQUÉS AU MOTEUR DE TEMPLATE DE 42STORES mardi 23 octobre 12

Upload: normandie-web-xperts

Post on 24-May-2015

309 views

Category:

Technology


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

Page 1: 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

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

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

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

mardi 23 octobre 12

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

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

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

MEDIA QUERIES ECRANS

mardi 23 octobre 12

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

MEDIA QUERIESIPHONE 4

mardi 23 octobre 12

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

RÉSULTATS RESPONSIVE

mardi 23 octobre 12

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

PASSAGE AU LESS

mardi 23 octobre 12

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

Découpe du CSS&

ré-écriturecomplète

mardi 23 octobre 12

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

Compilation (php)

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

1 seul fichier CSS

mardi 23 octobre 12

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

AVANTAGES LESSLES VARIABLES

mardi 23 octobre 12

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

AVANTAGES LESSLES FONCTIONS

mardi 23 octobre 12

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

RESPONSIVE DESIGN+

LESS CSS=

50 JOURS HOMME+

AVENIR RADIEUX

mardi 23 octobre 12