Du sédentaire au mobile

Le web, omniprésent et anodin au quotidien

Des utilisateurs hyper-connectés, impatients, technophiles

Des sites pour tout, tout le monde et accessibles partout
(ou presque...)

En 2015

Des points clés

• 80% des internautes ont un smartphone
• 34% des supports web émergents sont des smart-tv
• 89% du temps passé sur les médias connectés se font via les apps

Sources : smartinsights.com

Le contenu qui dut s'adapter au support

Plusieurs appellations

Statique

Une taille d'écran particulière

Adaptatif

Plusieurs tailles d'écrans définies

Fluide

S'adapte à toutes les tailles d'écran

Responsive

S'adapte selon les tailles d'écran et les cas d'utilisation

Dissocier pour simplifier

1. La mise en page responsive
2. Le contenu responsive

L'idéal

Le contenu est roi
et est pensé par support

La triste réalité

Le contenu est là... et statique.
Ouf il y a la mise en page

Le responsive ce n'est pas :

• tasser
• un menu
• un quick win
• la solution

Le responsive c'est :

• une réponse
• une méthode
• un gain
• un investissement
• un coût
• cool

Et ne perdons pas de vue
l'accessibilité !

Savoir, c'est pouvoir

Comment détecter les différentes plateformes

Utiliser les mediaqueries

                                
@media screen and (min-width: 600px) {
    /* La largeur minimum de l'affichage est 600 px inclus */
}
                                
                            

                                
if (window.matchMedia("(min-width: 600px)").matches) {
  /* La largeur minimum de l'affichage est 600 px inclus */
} else {
  /* L'affichage est inférieur à 600px de large */
}
                                
                            

Se baser sur la présence de fonctionnalités

Inspecter l'user agent
NON !

L'outil indispensable :
la grille

Elle permet de mettre en place le flux du contenu

Les technologies de grille :
Flexbox

Les technologies de grille :
Display: table

Les technologies de grille :
Float: left

Les technologies de grille :
Display: inline-block

Méthode dépréciée

Le couteau suisse : le framework

Semantic UI & Gumby

jQuery-UI et jQuery Mobile
A proscrire !

rapport gain / performance désastreux

Bonus : des éléments clés

La navigation

Petite astuce :
les terminaux récents supportent le CSS3, n'hésitez pas à sortir la navigation du flux !

L'animation

Petite astuce :
divisez par 2 le temps que vous estimez nécessaire à la bonne visualisation de l'animation !

Le format SVG

Le Javascript

                            
Modernizr.load({
    test: Modernizr.geolocation,
    yep : 'geo.js',
    nope: 'geo-polyfill.js'
});
                            
                        

L'attribut srcset

L'attribut CSS content

                            
element:before {
    content: "...";
    position: absolute;
    right: -10px;
    top: 0;
}
                            
                        

Navigation

Burton.com

• Transition CSS au service de l'UX
• Conserve les sous-menus, en colonne

Autres exemples

Multilevel PushMenu
sur tympanus.net

Images selon la taille

Jimdo.com

• Images dynamiques selon la taille de l'écran
• Navigation mal pensée

Autres exemples

Burton.com

Réorganisation du contenu

Jonwhitestudio.com
via blogduwebdesign.com

• Choix des breakpoints
• Design flexible

Contenu selon le support

Morehazards.com

• Contenu présenté différement selon le support
• Le contenu est-il indispensable ?

Web articles

• Web mobile : introduction et glossaire (Alsacréations)
• Conditional loading for responsive designs (24 Ways)
• C'est quoi le Responsive Web Design ? (Alsacréations)
• 9 basic principle of responsive web design (Froont)

Web articles - 2

• Le module de mise en page CSS3 - Flexbox (Alsacréation)
• Les images responsives avec srcset (Alsacréation)
• Les différentes grilles css et leurs caractéristiques (Stackoverflow)

Outils

• Compatibilité navigateur (Caniuse.com)
• Patterns et news sur le responsive (This-is-responsive - Bradfrost)
• Donner vie à ses animations - Google

• Slide 3 / 1 - nerds : http://www.stupiditiz.com/
• Slide 3 / 1 - fillette : trendhunterstatic.com
• Slide 4 - tablette d'argile : http://fr.wikipedia.org/
• Slide 4 - iPhone : http://www.theverge.com/
• Slide 4 / 2 - Graphique : http://www.smartinsights.com/

• Slide 9 / 2 - Logo Modernizr : http://modernizr.com/
• Slide 11 / 1 - Logo flexbox grid : http://flexboxgrid.com/
• Slide 11 / 2 - Logo ungrid : http://chrisnager.github.io/ungrid/
• Slide 11 / 3 - Logo bootstrap : http://getbootstrap.com/

• Slide 12 - Couteau suisse artefacts : http://jaimemontshirt.com/
• Slide 12 / 1 - Logo bootstrap : http://getbootstrap.com/
• Slide 12 / 2 - Logo foundation : http://foundation.zurb.com/
• Slide 12 / 3 - Home semantic UI : http://semantic-ui.com/
• Slide 12 / 3 - Home gumby : http://gumbyframework.com/