responsive design note

# Ce qu'il ne faut pas faire

- Mettre un élément sur la droite de l'écran
- Ne pas repenser l'agencement des informations avant de commencer (rappeler que certains ont le droit de mort sur les autres)

# Ce qu'il faut faire

## Break Points

- De 0 à 500px — Mobiles (la plupart sont situé entre 320 et 480px)
- De 501 à 959 px — Tablettes, notepad, anciens pc…
- De 960 à 1279px – PC portable, anciens pc…
- Plus de 1280px – PC de bureau (beaucoup de professionnels du milieu consultent notre site Web, beaucoup sont dotés d’écrans supérieurs à 23″, d’où l’intérêt de leur fournir une version améliorée du site)

Nous avons aussi établi un point de rupture spécifique, qui permet de faire basculer la navigation dans le footer pour les mobiles et les tablettes lorsque celle-ci ne tient plus dans le header.

    De 0 à 680px – Mobiles et tablettes

## Pris dans le flux

Les medias queries n’ont pas d’impact sur le code HTML. Ainsi, on reste dépendant de l’ordre dans lequel a été écrit le HTML. Impossible donc d’intervertir une boîte avec une autre ou d’associer dans un même ensemble deux informations complètement séparées dans le code, à moins de tricher en CSS, mais cette technique est quasi incontrôlable sur tous les appareils…

## Adaptive Images

Essentiel, ce script permet de redimensionner les images en fonction de la résolution de l’écran, ainsi, il suffit de produire les images dans la plus haute résolution, elles seront automatiquement générées en taille inférieure pour les faibles résolutions. Cette technologie basée sur du Javascript, du PHP et un .htaccess est assez simple à mettre en place et permet de réduire considérablement le poids des images.

Site officiel : http://adaptive-images.com/

## Media Queries

Pour construire rapidement la trame d’une feuille de style en Responsive Design avec plusieurs break points, nous vous conseillons d’utiliser Gridpak, outil fourni par Erskine Design.

Site  officiel : http://gridpak.com/

## Pour résumer : nos 5 conseils

    définir très tôt les points de bascule
    démarrer la conception ergonomique par le mobile
    valider la direction artistique sur les écrans HD et adapter au fur et à mesure jusqu’au mobile
    vérifier l’intégration sur l’ensemble des terminaux et navigateurs
    et surtout être en veille permanente sur les nouvelles astuces et nouveaux terminaux pour itérer régulièrement !

Source : http://www.nealite.fr/blog/expertise/agence-nealite-responsive-design-2-6028.htm

--

# Tools

Modernizr – Gives support for HTML 5 and assists in detecting browser fallbacks for all the latest technology we utilized in building the foundation for Ford Canada.

jQuery – The most popular JavaScript framework, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. In short, jQuery helps Ford Canada achieve all the cool stuff they wanted.

Respond.js – Brings CSS3 Media Query support to older versions of Microsoft Internet Explorer 6-8.

All resolution test snippet: http://nmsdvid.com/snippets/#.UMmfgnZrXbs.twitter

## Normes

http://www.w3.org/TR/css3-mediaqueries/

# recommendations

http://www.splio.fr/responsive/

# Demo

## Démonstration CSS media queries
http://www.alsacreations.com/xmedia/tuto/exemples/mediaqueries/index.html

## Démonstration CSS media queries avec mise en page
http://www.alsacreations.com/xmedia/tuto/exemples/mediaqueries/layout.html